/*
 * theme.css — WordPress/WooCommerce fixes + the section-specific values (colors, spacing)
 * the source (Shopify "UNO") generates per-section as inline <style> blocks rather than in
 * one static stylesheet (see RECON-FINDINGS.md #2 — Design system). source.css (base.css)
 * supplies the utility classes (.flex/.container/.grid/.btn/etc.); this file supplies the
 * specific measured values for trehouse.com's own homepage/chrome, plus WP/Woo resets.
 * Colors measured from the harvested homepage: brand pink #B8006D, black #000000,
 * accent orange #E7721B.
 */

:root {
	--th-pink: #B8006D;
	--th-black: #0f0f0f;
	--th-orange: #E7721B;
	--th-paper: #ffffff;
	--th-ink: #1a1a1a;
	--th-muted: #7B7B7B;
	--th-border: #e5e5e5;
}

* { box-sizing: border-box; }
/* Normally supplied by wp-block-library, which is dequeued (th_dequeue_defaults). Without
   this, WooCommerce's own .screen-reader-text spans (e.g. the variable-product price range's
   "Price range: $X through $Y") render as plain visible text instead of staying hidden. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html { overflow-x: hidden; }
body { margin: 0; color: var(--th-ink); background: var(--th-paper); min-width: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* box-sizing: border-box explicitly — source.css's OWN .container rule sets
   box-sizing:initial (content-box), which (being equally specific and loading first) beats
   the universal *{box-sizing:border-box} reset above for anything carrying this class. Under
   content-box, width:100% + padding pushed the box past its container (measured 1555px in a
   1440px viewport on the cart page) instead of the padding being absorbed into 100%. */
.container { max-width: 1440px; margin: 0 auto; padding: 0 4%; min-width: 0; box-sizing: border-box; }
/* #main-content is a flex item of body's column layout (source.css: #main-content{flex:1}, for
   height). Width should stretch by default, but on sparse-content pages (e.g. an empty cart)
   it was observed shrinking to its content's width instead — forcing width explicitly rather
   than relying on implicit stretch behavior. */
#main-content { width: 100%; }
#main-content, #main-content > * { min-width: 0; }
/* source.css (copied verbatim from the live site) points every <select>'s dropdown-arrow icon at
   Shopify's own CDN (`//trehouse.com/cdn/shop/t/21/assets/select.png`), which does not exist on
   this install and 404s. Found migrating to the VPS — this request is an HTTP 404, not a network-
   level failure, so shoot-build.mjs's requestfailed-only check never caught it locally either; a
   real gap in that check. Self-contained inline SVG chevron instead of depending on Shopify's CDN. */
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231a1a1a' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") !important; background-size: 1.2rem !important; }

/* ---------- Announcement bar ---------- */
.announcement-bar { background: var(--th-pink); color: #fff; font-weight: 600; font-size: 1.36rem; }
.announcement-bar .content { padding: 0.7em 0; text-align: center; }
.announcement-bar .content p { margin: 0; }
.announcement-bar .keen-slider { display: flex; overflow: hidden; }
.announcement-bar .keen-slider-slide { min-width: 100%; }
.announcement-bar .keen-slider-slide:not(.active) { display: none; }

/* ---------- Header ---------- */
.header-outer { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--th-border); }
.header-content .container { display: flex; align-items: center; justify-content: space-between; padding-top: 1.92rem; padding-bottom: 1.92rem; }
.header-content .left-content, .header-content .right-content { flex: 1; display: flex; align-items: center; }
.header-content .right-content { justify-content: flex-end; }
.logo img { width: 19.2rem; }
.mobile-menu-button { display: none; background: none; border: 0; cursor: pointer; }
.header-main-menu { display: flex; align-items: center; gap: 2.8rem; }
.header-main-menu > .item { position: relative; }
.header-main-menu button, .header-main-menu > .item > a { background: none; border: 0; font: inherit; font-weight: 700; text-transform: uppercase; font-size: 1.36rem; letter-spacing: 0.02em; cursor: pointer; display: flex; align-items: center; gap: 0.3em; padding: 0.8rem 0; }
.header-main-menu .icon { width: 0.7em; height: 0.7em; }
.mega-menu-content, .item.has-dropdown .submenu { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--th-border); box-shadow: 0 12px 24px rgba(0,0,0,.08); padding: 2.4rem; z-index: 50; }
.item.has-dropdown:hover .mega-menu-content, .item.has-dropdown:hover .submenu { display: flex; gap: 4rem; }
.item.has-dropdown .submenu .submenu-inner { display: flex; flex-direction: column; gap: 0.8rem; min-width: 19.2rem; }
.mega-menu-content .column { min-width: 19.2rem; }
.mm-title { display: block; font-weight: 700; text-transform: uppercase; font-size: 1.28rem; margin-bottom: 1.2rem; }
.mega-menu-content .links.module, .item.has-dropdown .submenu .links.module { display: flex; flex-direction: column; gap: 0.8rem; }
.top-utils-wrap { display: flex; align-items: center; gap: 1.6rem; }
.btn-menu { background: #000; color: #fff; border-radius: 20px; text-transform: uppercase; padding: 0.64rem 1.6rem; font-weight: 600; font-size: 1.12rem; }
.trigger-search, .trigger-account, .trigger-cart { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.32rem; font-size: 1.04rem; text-transform: uppercase; }
.trigger-search svg, .trigger-account svg, .trigger-cart svg { width: 2.24rem; height: 2.24rem; }
.icon-badge-wrap { position: relative; }
.cart-count.badge { position: absolute; top: -0.4em; right: -0.6em; background: var(--th-pink); color: #fff; border-radius: 50%; font-size: 1.04rem; min-width: 1.3em; height: 1.3em; display: flex; align-items: center; justify-content: center; }
.cart-count.badge:empty, .cart-count.badge:-moz-only-whitespace { display: none; }
#th-search-bar { display: none; border-top: 1px solid var(--th-border); background: #fff; }
#th-search-bar.is-open { display: block; }
#th-search-bar .container { padding-top: 1.6rem; padding-bottom: 1.6rem; gap: 1.6rem; }
.search-form { flex: 1; display: flex; }
.search-form .input-search { flex: 1; border: 1px solid var(--th-border); padding: 0.96rem 1.6rem; font-size: 1.6rem; }
.th-mobile-menu { display: none; }
.th-mobile-menu.is-open { display: block; border-top: 1px solid var(--th-border); }
.th-mobile-menu-inner { display: flex; flex-direction: column; }
.th-mobile-menu-inner a { padding: 1.44rem 4%; border-bottom: 1px solid var(--th-border); font-weight: 600; text-transform: uppercase; font-size: 1.36rem; }

@media (max-width: 900px) {
	.header-main-menu { display: none; }
	.mobile-menu-button { display: flex; }
	.top-utils-wrap .btn-menu { display: none; }
	.logo img { width: 12.8rem; }
}

/* ---------- Hero ---------- */
.th-hero { position: relative; background-size: cover; background-position: center; min-height: 72rem; display: flex; align-items: center; }
.th-hero-panel { background: #fff; margin: 3.2rem 4%; padding: 3.2rem; max-width: 38.4rem; border-radius: 4px; }
.th-hero-badge { display: inline-block; background: #fff; border: 2px solid #000; padding: 0.64rem 1.6rem; font-weight: 800; text-transform: uppercase; transform: rotate(-2deg); margin-bottom: 1.6rem; }
.th-hero-offer { display: flex; align-items: center; gap: 1.6rem; font-weight: 800; margin-bottom: 2rem; }
.th-hero-offer strong { font-size: 4rem; line-height: 1; display: block; }
.th-hero-offer span { text-transform: uppercase; font-size: 1.44rem; }
.th-hero-or { font-size: 1.44rem; color: var(--th-muted); }
.th-hero-cta { display: block; background: #000; color: #fff; text-align: center; padding: 1.6rem; font-weight: 700; text-transform: uppercase; border-radius: 4px; }
.th-hero-fine { font-size: 1.12rem; color: var(--th-muted); margin-top: 1.2rem; }

@media (max-width: 767px) {
	.th-hero { min-height: 51.2rem; align-items: flex-end; }
	.th-hero-panel { margin: 0 4% 3.2rem; max-width: none; }
}

/* ---------- Press strip ---------- */
.th-press-strip { padding: 3.2rem 0; overflow: hidden; }
.th-press-track { display: flex; align-items: center; justify-content: center; gap: 5.6rem; flex-wrap: wrap; opacity: 0.55; filter: grayscale(1); }
.th-press-track img { height: 3.52rem; width: auto; }

/* ---------- Category tiles ---------- */
.th-category-tiles { padding: 4.8rem 4%; }
.th-category-tiles .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }
.th-tile { background: #f4f4f4; text-align: center; padding: 2.4rem 2rem 3.2rem; border-radius: 8px; }
.th-tile img { border-radius: 6px; margin-bottom: 1.6rem; aspect-ratio: 1; object-fit: cover; }
.th-tile-title { font-weight: 800; font-size: 1.76rem; margin-bottom: 0.8rem; }
.th-tile p { font-size: 1.36rem; color: var(--th-muted); min-height: 4.5em; }
.th-tile .cta.btn { display: inline-block; background: var(--th-pink); color: #fff; font-weight: 700; text-transform: uppercase; padding: 1.2rem 2.4rem; border-radius: 24px; font-size: 1.28rem; margin-top: 0.8rem; }

@media (max-width: 900px) {
	.th-category-tiles .grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Favorites carousel ---------- */
.th-favorites { padding: 4.8rem 4%; text-align: center; }
.th-favorites h2 { margin-bottom: 3.2rem; }
.th-favorites-track { display: flex; gap: 2.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.6rem; width: 100%; min-width: 0; }
.th-fav-card { flex: 0 0 260px; scroll-snap-align: start; text-align: left; position: relative; }
.th-fav-card .badge { position: absolute; top: 0.8rem; left: 0.8rem; background: #000; color: #fff; font-size: 1.04rem; text-transform: uppercase; padding: 0.32rem 0.96rem; border-radius: 3px; z-index: 2; }
.th-fav-card img { border-radius: 6px; aspect-ratio: 1; object-fit: cover; margin-bottom: 1.2rem; }
.th-fav-rating { color: var(--th-orange); font-size: 1.28rem; margin-bottom: 0.48rem; }
.th-fav-rating span { color: var(--th-muted); margin-left: 0.3em; }
.th-fav-title { display: block; font-weight: 700; margin-bottom: 0.48rem; }
.th-fav-price { font-weight: 700; }
.th-fav-price s { color: var(--th-muted); font-weight: 400; margin-right: 0.4em; }
.th-fav-sub { font-size: 1.2rem; color: var(--th-muted); margin-bottom: 0.96rem; }
.th-fav-card .btn.normal { display: block; text-align: center; background: var(--th-pink); color: #fff; font-weight: 700; text-transform: uppercase; padding: 1.12rem; border-radius: 24px; font-size: 1.28rem; }

/* ---------- Quality / trust badges ---------- */
.th-quality { padding: 4.8rem 4%; text-align: center; }
.th-quality .text.p4 { max-width: 67.2rem; margin: 0 auto 3.2rem; color: var(--th-muted); }
.th-badges { display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; }
.th-badge { display: flex; flex-direction: column; align-items: center; gap: 0.96rem; max-width: 12.8rem; }
.th-badge img { width: 4.8rem; height: 4.8rem; }
.th-badge span { font-weight: 700; font-size: 1.2rem; text-transform: uppercase; }

.th-seo-zone { padding: 3.2rem 4% 4.8rem; max-width: 96rem; margin: 0 auto; color: var(--th-muted); }

/* ---------- Footer ---------- */
#footer { background: #000; color: #fff; }
#footer .top { padding: 4.8rem 0; }
#footer .grid { display: flex; flex-wrap: wrap; gap: 3.2rem 2.4rem; }
#footer .grid-item { flex: 0 0 auto; min-width: 0; }
#footer .th-trust-logos, #footer .th-compliance, #footer .th-prop65 { flex: 1 1 100%; min-width: 0; }
#footer .footer-title { font-size: 1.6rem; margin: 0 0 1.6rem; text-transform: uppercase; }
#footer .links.module { display: flex; flex-direction: column; gap: 0.8rem; }
#footer .links.module .item { font-size: 1.36rem; color: #ccc; }
#footer .links.module .item:hover { color: #fff; }
#footer .mailing-list .form-wrap { display: flex; gap: 0.8rem; }
#footer .mailing-list input[type=email] { flex: 1; padding: 1.12rem 1.6rem; border: 1px solid #444; background: #111; color: #fff; }
#footer .mailing-list .btn { background: var(--th-pink); color: #fff; padding: 1.12rem 1.92rem; font-weight: 700; text-transform: uppercase; }
.th-trust-logos { display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap; flex: 0 0 100%; }
.th-trust-logos span { font-size: 1.12rem; text-transform: uppercase; letter-spacing: 0.05em; color: #999; border: 1px solid #333; padding: 0.8rem 1.6rem; border-radius: 4px; }
.th-compliance { flex: 0 0 100%; border-top: 1px solid #333; padding-top: 2.4rem; position: relative; }
.th-compliance p { font-size: 1.12rem; color: #999; margin: 0 0 0.5em; }
.th-compliance .th-toggle-more { display: none; }
.th-compliance[data-expanded="true"] .th-toggle-more, .th-compliance .footer-toggle-text[data-expanded="true"] .th-toggle-more { display: block; }
.footer-toggle-control { position: absolute; right: 0; top: 2.4rem; background: none; border: 0; cursor: pointer; }
.footer-toggle-control svg { width: 1.6rem; height: 1.6rem; stroke: #999; }
.th-prop65 { flex: 0 0 100%; background: #1a1a1a; padding: 1.6rem; border-radius: 4px; }
.th-prop65 p { font-size: 1.12rem; color: #999; margin: 0; }
.title_icons .icons-wrap { display: flex; gap: 0.8rem; }
.pay-badge { display: inline-block; background: #222; color: #fff; padding: 0.48rem 1.12rem; border-radius: 4px; font-size: 1.2rem; font-weight: 700; }
.social-links { display: flex; gap: 1.2rem; }
.social-links .btn { width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; background: #222; border-radius: 50%; }
.social-links svg { width: 1.6rem; height: 1.6rem; fill: #fff; }
.contact_methods { display: flex; flex-direction: column; gap: 0.96rem; align-items: flex-start; }
.phone-method, .email-method { display: flex; gap: 0.8rem; align-items: center; font-size: 1.36rem; }
.phone-method svg, .email-method svg { width: 1.6rem; height: 1.6rem; fill: #ccc; }
.contact_methods .btn.v2 { border: 1px solid #fff; padding: 0.8rem 1.92rem; margin-top: 0.48rem; font-size: 1.28rem; text-transform: uppercase; }
#footer .bottom { border-top: 1px solid #222; padding: 1.6rem 0; font-size: 1.2rem; color: #999; }

@media (max-width: 767px) {
	#footer .grid-item { flex: 1 1 100%; }
	.th-trust-logos { flex-wrap: wrap; gap: 1.6rem; }
}

/* ---------- WooCommerce: reset stock defaults, keep the source chrome ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: var(--th-pink); color: #fff; border-radius: 24px; font-weight: 700; text-transform: uppercase; padding: 1.12rem 2.4rem; font-size: 1.28rem; border: 0; }

/* ---------- Shop / category archive ---------- */
.th-breadcrumb { padding: 2.4rem 4% 0; font-size: 1.28rem; color: var(--th-muted); }
.th-breadcrumb a { color: var(--th-muted); }
.th-archive-title { padding: 0.8rem 4% 0; font-size: 3.2rem; }
.th-archive-intro { padding: 0.8rem 4% 2.4rem; max-width: 80rem; color: var(--th-muted); }
.th-promo-strip { background: var(--th-pink); color: #fff; display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap; padding: 1.6rem; font-weight: 700; text-transform: uppercase; margin: 2.4rem 0; }
.th-promo-strip em { font-style: normal; font-weight: 400; font-size: 1.28rem; }
.th-promo-strip .btn { background: #000; padding: 0.64rem 1.6rem; border-radius: 20px; font-size: 1.28rem; }
.th-product-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; padding: 0 4%; margin: 0 0 3.2rem; min-width: 0; }
.th-product-grid li.th-product-card { text-align: left; min-width: 0; }
.th-product-card-image img { border-radius: 6px; aspect-ratio: 1; object-fit: cover; margin-bottom: 1.2rem; width: 100%; }
.th-product-card .th-fav-price { font-weight: 700; margin-bottom: 0.96rem; }
.th-product-card .th-fav-price ins { text-decoration: none; }
.th-product-card .th-fav-price del { color: var(--th-muted); font-weight: 400; margin-right: 0.4em; }
.th-product-card .btn.normal { display: block; text-align: center; background: var(--th-pink); color: #fff; font-weight: 700; text-transform: uppercase; padding: 1.12rem; border-radius: 24px; font-size: 1.28rem; }
.th-pagination { display: flex; justify-content: center; gap: 0.8rem; padding: 1.6rem 0 4.8rem; }
.th-pagination a, .th-pagination span { display: inline-flex; align-items: center; justify-content: center; width: 3.52rem; height: 3.52rem; border-radius: 50%; border: 1px solid var(--th-border); }
.th-pagination .current { background: var(--th-pink); color: #fff; border-color: var(--th-pink); }
.th-badges-compact { justify-content: flex-start; gap: 2.4rem; margin-top: 2.4rem; }
.th-badges-compact .th-badge { max-width: none; flex-direction: row; }
.th-badges-compact img { width: 2.8rem; height: 2.8rem; }

@media (max-width: 900px) {
	.th-product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Single product ---------- */
.th-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 4.8rem; padding: 2.4rem 4% 3.2rem; align-items: start; min-width: 0; }
.th-pdp-gallery img { border-radius: 8px; width: 100%; }
.th-pdp-gallery .woocommerce-product-gallery__image + .woocommerce-product-gallery__image { margin-top: 1.2rem; }
.th-pdp-title { font-size: 2.88rem; margin: 0 0 0.8rem; }
.th-pdp-price { font-size: 2.24rem; font-weight: 700; margin: 1.2rem 0; }
.th-pdp-price del { color: var(--th-muted); font-weight: 400; margin-right: 0.5em; }
.th-pdp-price ins { text-decoration: none; }
.th-pdp-short { color: var(--th-muted); margin-bottom: 1.6rem; }
.th-pdp-addtocart .quantity { display: inline-block; margin-right: 1.2rem; }
.th-pdp-addtocart input.qty { width: 6.4rem; padding: 1.12rem; border: 1px solid var(--th-border); text-align: center; }
.th-pdp-addtocart .single_add_to_cart_button { background: var(--th-pink); color: #fff; border: 0; border-radius: 24px; padding: 1.44rem 3.2rem; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.th-pdp-addtocart table.variations { width: 100%; margin-bottom: 1.6rem; }
.th-pdp-addtocart table.variations td { padding: 0.64rem 0; }
.th-pdp-addtocart table.variations select { width: 100%; padding: 1.12rem; border: 1px solid var(--th-border); }
.th-pdp-addtocart .woocommerce-variation-price { font-weight: 700; margin-bottom: 1.2rem; }
.th-pdp-description { padding: 1.6rem 4% 4.8rem; max-width: 96rem; }
.th-pdp-description h2 { margin-top: 3.2rem; }
.th-pdp-related { padding: 1.6rem 4% 4.8rem; }
.th-pdp-related h2 { font-size: 2.24rem; }
.th-pdp-related ul.products { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; padding: 0; }
.th-pdp-reviews { padding: 1.6rem 4% 4.8rem; }

@media (max-width: 900px) {
	.th-pdp { grid-template-columns: 1fr; gap: 2.4rem; }
	.th-pdp-related ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Cart page — styles WooCommerce's own classic cart markup directly (never
   rewritten: STANDARDS lists every class cart.js binds to, easy to silently break one). ---------- */
.woocommerce-cart .th-breadcrumb, .woocommerce-checkout .th-breadcrumb { display: none; }
.woocommerce-cart #main-content > h1, .woocommerce-cart .entry-title { padding: 2.4rem 4% 0; font-size: 3.2rem; }
.woocommerce form.woocommerce-cart-form { padding: 0 4%; min-width: 0; }
.woocommerce table.shop_table.cart { width: 100%; border: 0; border-collapse: collapse; margin: 2.4rem 0; }
.woocommerce table.shop_table.cart thead { display: none; }
.woocommerce table.shop_table.cart td { border: 0; border-bottom: 1px solid var(--th-border); padding: 1.6rem 0.8rem; vertical-align: middle; }
.woocommerce table.shop_table.cart .product-thumbnail img { width: 8rem; border-radius: 6px; }
.woocommerce table.shop_table.cart .product-name a { font-weight: 700; }
.woocommerce table.shop_table.cart .product-remove a { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #f4f4f4; text-decoration: none; font-size: 1.76rem; }
.woocommerce table.shop_table.cart .quantity input.qty { width: 5.6rem; padding: 0.8rem; border: 1px solid var(--th-border); text-align: center; }
.woocommerce table.shop_table.cart .actions { border-bottom: 0; padding-top: 2.4rem; }
.woocommerce table.shop_table.cart .coupon { display: flex; gap: 0.8rem; margin-bottom: 1.6rem; }
.woocommerce table.shop_table.cart .coupon #coupon_code { padding: 1.12rem 1.6rem; border: 1px solid var(--th-border); flex: 1; max-width: 25.6rem; }
.woocommerce table.shop_table.cart .button { background: var(--th-pink); color: #fff; border: 0; border-radius: 24px; padding: 1.12rem 2.4rem; font-weight: 700; text-transform: uppercase; font-size: 1.28rem; cursor: pointer; }
.woocommerce .cart-collaterals { padding: 0 4% 4.8rem; max-width: 41.6rem; margin-left: auto; }
.woocommerce .cart-collaterals .cart_totals { background: #f7f7f7; border-radius: 8px; padding: 2.4rem; }
.woocommerce .cart-collaterals .cart_totals table { width: 100%; }
.woocommerce .cart-collaterals .cart_totals table th, .woocommerce .cart-collaterals .cart_totals table td { padding: 0.96rem 0; border-bottom: 1px solid var(--th-border); text-align: left; }
.woocommerce .cart-collaterals .cart_totals table td { text-align: right; }
.woocommerce .cart-collaterals .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; background: var(--th-pink); color: #fff; border-radius: 24px; padding: 1.6rem; font-weight: 700; text-transform: uppercase; margin-top: 1.6rem; }
.woocommerce .wc-empty-cart-message, .woocommerce-cart .woocommerce-info { padding: 0 4%; }
.th-min-order-notice { background: #fff3cd; color: #664d03; padding: 1.2rem 1.6rem; border-radius: 6px; margin: 1.6rem 4%; font-size: 1.36rem; }

/* ---------- Checkout — restyled per STANDARDS #3d: same WooCommerce mechanism, source-like
   two-column single-page layout (form left, sticky order summary + payment right). ---------- */
.woocommerce-checkout #main-content { padding-bottom: 4.8rem; }
.th-checkout-header { padding: 2.4rem 4% 0.8rem; }
.th-checkout-header h1 { margin: 0 0 0.4rem; font-size: 2.88rem; }
.th-checkout-sub { color: var(--th-muted); margin: 0; }
.th-checkout-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: start; min-width: 0; }
.th-checkout-main { min-width: 0; }
.th-checkout-summary { position: sticky; top: 8rem; background: #f7f7f7; border-radius: 8px; padding: 2.4rem; min-width: 0; }
.woocommerce-checkout #customer_details { display: block; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; margin-bottom: 2.4rem; }
.woocommerce-checkout .form-row { margin-bottom: 1.44rem; }
.woocommerce-checkout .form-row label { display: block; font-size: 1.28rem; font-weight: 600; margin-bottom: 0.48rem; }
.woocommerce-checkout .form-row .required { color: var(--th-pink); }
.woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .form-row textarea { width: 100%; padding: 1.2rem; border: 1px solid var(--th-border); border-radius: 4px; }
.woocommerce-checkout h3#order_review_heading { font-size: 1.76rem; margin-top: 0; }
.woocommerce-checkout table.shop_table { width: 100%; margin-bottom: 1.6rem; }
.woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td { padding: 0.8rem 0; border-bottom: 1px solid var(--th-border); text-align: left; }
.woocommerce-checkout table.shop_table .product-total, .woocommerce-checkout table.shop_table td.amount { text-align: right; }
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; border-top: 1px solid var(--th-border); }
.woocommerce-checkout #payment ul.payment_methods li { padding: 1.2rem 0; border-bottom: 1px solid var(--th-border); }
.woocommerce-checkout #payment .payment_box { background: #fff; padding: 1.2rem 1.6rem 0; margin-top: 0.8rem; border-radius: 4px; font-size: 1.36rem; color: var(--th-muted); }
.woocommerce-checkout #place_order { width: 100%; background: var(--th-pink); color: #fff; border: 0; border-radius: 24px; padding: 1.6rem; font-weight: 700; text-transform: uppercase; cursor: pointer; margin-top: 1.6rem; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 1.6rem 0; font-size: 1.28rem; }
.th-payment-instructions { background: #f7f7f7; border-radius: 8px; padding: 3.2rem; margin: 3.2rem 4%; }

@media (max-width: 900px) {
	.th-checkout-grid { grid-template-columns: 1fr; }
	.th-checkout-summary { position: static; }
}

/* ---------- My Account — LOCKED standard #1 (Blue Sky structure): Dashboard, Orders,
   Addresses, Account details, Logout. No local reference exists; styled from WooCommerce's
   own default myaccount markup rather than overriding every template (same low-risk approach
   as the cart page — the real classes are the load-bearing part, not the wrapper markup). ---------- */
.woocommerce-account #main-content { padding: 2.4rem 4% 4.8rem; }
/* :has() guards this: .woocommerce-account is the body class whether logged in OR out, but the
   2-column [nav][content] grid only makes sense when logged in (a nav actually exists). Without
   the guard, the logged-OUT login/register form inherited the same grid, reserving an empty
   22.4rem first column and squeezing the actual form into the second — found as a large blank
   area to the left of "Welcome back." on a real screenshot. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 22.4rem 1fr; gap: 4rem; align-items: start; min-width: 0; }
.woocommerce-MyAccount-navigation { min-width: 0; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 1.2rem 1.6rem; border-radius: 6px; font-weight: 600; font-size: 1.36rem; text-transform: uppercase; letter-spacing: 0.02em; }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--th-pink); color: #fff; }
.woocommerce-MyAccount-navigation li:not(.is-active) a:hover { background: #f4f4f4; }
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content h2 { margin-top: 0; }
.woocommerce-form-login, .woocommerce-form-register { max-width: 41.6rem; }
.woocommerce-form-row { margin-bottom: 1.6rem; }
.woocommerce-form-row label { display: block; font-size: 1.28rem; font-weight: 600; margin-bottom: 0.48rem; }
.woocommerce-form-row .input-text { width: 100%; padding: 1.2rem; border: 1px solid var(--th-border); border-radius: 4px; }
.woocommerce-form-login__submit, .woocommerce-form-register__submit { background: var(--th-pink); color: #fff; border: 0; border-radius: 24px; padding: 1.28rem 3.2rem; font-weight: 700; text-transform: uppercase; cursor: pointer; }
#customer_login.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 4.8rem; }
.woocommerce-MyAccount-orders, table.shop_table { width: 100%; border-collapse: collapse; }
.woocommerce-MyAccount-orders th, .woocommerce-MyAccount-orders td, table.shop_table th, table.shop_table td { padding: 1.2rem 0.8rem; border-bottom: 1px solid var(--th-border); text-align: left; font-size: 1.36rem; }
.woocommerce-MyAccount-orders .button, table.shop_table .button { display: inline-block; background: var(--th-pink); color: #fff; padding: 0.64rem 1.44rem; border-radius: 16px; font-size: 1.2rem; text-transform: uppercase; }
.woocommerce-Addresses { display: flex; gap: 3.2rem; flex-wrap: wrap; }
.woocommerce-Address { flex: 1 1 25.6rem; background: #f7f7f7; border-radius: 8px; padding: 2.4rem; }
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; }
.woocommerce-Address-title .edit { background: var(--th-pink); color: #fff; padding: 0.48rem 1.28rem; border-radius: 14px; font-size: 1.2rem; }
.woocommerce form.edit-account .form-row, .woocommerce form#order_review ~ form .form-row { margin-bottom: 1.6rem; }
.woocommerce form.edit-account fieldset { border: 0; padding: 0; margin: 2.4rem 0 0; }
.woocommerce form.edit-account legend { font-weight: 700; margin-bottom: 0.8rem; }

@media (max-width: 767px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; }
	#customer_login.col2-set { grid-template-columns: 1fr; }
}

/* ---------- Generic content pages (About, legal, testimonials, etc.) ----------
   The exclusions matter: Home, Cart, Checkout AND My Account are ALL real WP Pages using this
   same default template (no custom one assigned), so they ALL carry "page-template-default" —
   without excluding them this rule also clamped their #main-content to 76.8rem and centered it.
   Caught two rounds of this: first on the homepage (mainWidth computed to 480px instead of the
   full 1440px viewport), then again here on Cart (312px) and My Account (480px) once checked
   deliberately instead of just re-trusting the overflow-only automated checks. A THIRD round: the
   ".page .entry-content" selector below is a second, separate way to match the exact same Cart
   page markup (WooCommerce's cart.php wraps the shortcode output in ".entry-content" too), and it
   had none of the above exclusions — it alone clamped the cart form to 768px, which then forced
   the product table (whose cells don't shrink below their content) to overflow its own 662px
   padded box out to 979px. Found only by tracing the live DOM ancestor chain, since the page
   never actually overflowed the viewport (the table just visually broke out of its own column). */
body.page-template-default:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) #main-content,
body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .page .entry-content { padding: 2.4rem 4% 4.8rem; max-width: 76.8rem; margin: 0 auto; }
.entry-content h1 { font-size: 3.2rem; }
.entry-content h2 { font-size: 2.08rem; margin-top: 3.2rem; }
.entry-content p { line-height: 1.6; color: var(--th-ink); margin: 1em 0; }
.entry-content table.th-restrictions { width: 100%; border-collapse: collapse; margin: 2.4rem 0; font-size: 1.44rem; }
.entry-content table.th-restrictions th, .entry-content table.th-restrictions td { border: 1px solid var(--th-border); padding: 0.96rem 1.28rem; text-align: left; }
.entry-content table.th-restrictions th { background: #f4f4f4; }

/* ---------- Contact / affiliate forms ---------- */
.th-simple-form { max-width: 51.2rem; margin-top: 2.4rem; }
.th-form-row { margin-bottom: 1.6rem; }
.th-form-row label { display: block; font-size: 1.28rem; font-weight: 600; margin-bottom: 0.48rem; }
.th-form-row input, .th-form-row textarea { width: 100%; padding: 1.2rem; border: 1px solid var(--th-border); border-radius: 4px; font: inherit; }
.th-simple-form button { background: var(--th-pink); color: #fff; border: 0; border-radius: 24px; padding: 1.28rem 3.2rem; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.th-form-status { margin-top: 1.2rem; font-size: 1.36rem; }
.th-form-status.is-success { color: #1a7f37; }
.th-form-status.is-error { color: #c0392b; }

/* ---------- Blog: single article ---------- */
.th-article { padding: 2.4rem 4% 4.8rem; max-width: 73.6rem; margin: 0 auto; }
.th-article h1 { font-size: 3.2rem; margin-bottom: 0.48rem; }
.th-article-date { color: var(--th-muted); font-size: 1.36rem; margin: 0 0 2.4rem; }
.th-article-image img { width: 100%; border-radius: 8px; margin-bottom: 2.4rem; }
.th-article .entry-content h2 { font-size: 2.24rem; margin-top: 3.2rem; }
.th-article .entry-content p { line-height: 1.7; margin: 1em 0; }
.th-article .entry-content a { color: var(--th-pink); text-decoration: underline; }
.th-article .entry-content ul, .th-article .entry-content ol { padding-left: 2.4rem; line-height: 1.7; }

/* ---------- Blog: section archive (/blogs/posts/, /blogs/press/) ---------- */
.th-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem; padding: 0 4%; margin-bottom: 3.2rem; min-width: 0; }
.th-blog-card-image, .th-blog-card-placeholder { display: block; aspect-ratio: 16/10; background: #f4f4f4; border-radius: 8px; overflow: hidden; margin-bottom: 1.2rem; }
.th-blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.th-blog-card-title { display: block; font-weight: 700; margin-bottom: 0.48rem; }
.th-blog-card-date { color: var(--th-muted); font-size: 1.28rem; margin: 0; }

@media (max-width: 900px) {
	.th-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.th-blog-grid { grid-template-columns: 1fr; }
}