/**
 * TeckForge Digital 2.3: professional finish and responsive fixes.
 *
 * Loaded after every other stylesheet. Direction: a publisher's shop.
 * Literata (serif) for titles, Instrument Sans for everything you click.
 * Calm white surfaces, one navy, one ember for buying actions, and the
 * two shelf colours used only to say "Tech" or "Non-Tech".
 *
 *  1. Tokens  2. Type  3. Buttons & forms  4. Header  5. Hero
 *  6. Sections  7. Cards & grids  8. Product page  9. Cart & checkout
 *  10. Account  11. Footer  12. Tablet  13. Phone  14. Small phone
 */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	--tf-surface: #ffffff;
	--tf-tint: #f0f2f6;
	--ll-rule: #e3e6ed;
	--ll-rule-strong: #ccd2dd;
	--ll-muted: #586174;
	--tf-tech: #2f55e4;
	--tf-tech-deep: #1f3fc2;
	--tf-tech-soft: #eef2ff;
	--tf-life: #0b8a6a;
	--tf-life-deep: #08705a;
	--tf-life-soft: #e7f5f0;
	--tf-card-radius: 12px;
	--tf-panel-radius: 18px;
	--tf-btn-radius: 10px;
	--ll-radius-control: 10px;
	--tf-shadow-card: 0 1px 2px rgba(19, 27, 46, 0.05);
	--tf-shadow-lift: 0 1px 2px rgba(19, 27, 46, 0.06), 0 16px 32px -20px rgba(19, 27, 46, 0.35);
}

/* 2. Type ------------------------------------------------------------------ */
h1, h2, h3,
.section-title,
.page-title,
.entry-title,
.woocommerce-products-header__title,
.single-product div.product .product_title {
	font-family: var(--ll-font-heading);
	font-weight: 600;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.section-title { font-size: clamp(1.55rem, 1.25rem + 1vw, 2.1rem); line-height: 1.15; }
/* Small UI headings stay in the sans: they label, they do not announce. */
.book-card-title,
.woocommerce ul.products li.product .book-card-title,
.footer-heading,
.tf-topic-name,
.trust-list h3,
.faq-list summary,
.tf-panel-title,
.drawer-title,
.wc-block-components-title,
.wc-block-components-checkout-step__title {
	font-family: var(--ll-font-body);
	letter-spacing: -0.005em;
}
p, li { overflow-wrap: break-word; }

/* 3. Buttons & forms ------------------------------------------------------- */
.button,
.button-accent,
.woocommerce ul.products li.product .button,
.book-card-actions .button,
.tf-hero-search button,
.tf-hero-search .button,
.single-product div.product form.cart .button,
.single-product div.product .leafline-buy-now,
.single-product .button.alt {
	border-radius: var(--tf-btn-radius);
	font-weight: 650;
	letter-spacing: 0;
}
.tf-hero-search form { border-radius: 14px; }
.tf-hero-search input[type="search"],
.tf-hero-search .search-field { border-radius: 10px; }
.header-search input[type="search"],
.header-search .search-field,
.woocommerce .woocommerce-ordering select,
.woocommerce-ordering select { border-radius: var(--tf-btn-radius); }
:focus-visible { outline-offset: 2px; }

/* 4. Header ---------------------------------------------------------------- */
.site-header {
	background: rgba(255, 255, 255, 0.94);
	border-bottom: 1px solid var(--ll-rule);
}
.primary-navigation .menu a { font-weight: 550; border-radius: 8px; }
.header-action { border-radius: 10px; }
.custom-logo { max-height: 40px; width: auto; }

@media (max-width: 960px) {
	/* A backdrop filter would trap the fixed menu drawer inside the header. */
	.site-header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 5. Hero ------------------------------------------------------------------ */
.tf-hero-intro::before,
.tf-hero-intro::after { display: none; } /* No glow: a plain navy panel reads more serious. */
.tf-hero-intro {
	background: var(--ll-ink);
	border-radius: var(--tf-panel-radius);
	padding: clamp(1.5rem, 4vw, 3.25rem);
	justify-content: center;
}
.tf-hero-title {
	font-family: var(--ll-font-heading);
	font-weight: 500;
	font-size: clamp(2rem, 1.3rem + 2.9vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	max-width: 16ch;
}
.tf-hero-text { color: rgba(255, 255, 255, 0.78); line-height: 1.6; }
.tf-hero-search { width: 100%; }
.tf-hero-search form { gap: 0.35rem; box-shadow: none; }
.tf-hero-search form > * { min-width: 0; }
.tf-hero-search input[type="search"],
.tf-hero-search .search-field { min-width: 0; width: 100%; }
.tf-hero-search button,
.tf-hero-search .button { flex: none; position: static; }
.tf-hero-facts {
	list-style: none;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	padding: clamp(1.1rem, 2vw, 1.4rem) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.75rem;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.86);
}
.tf-hero-facts li { display: inline-flex; align-items: center; gap: 0.5rem; }
.tf-hero-facts .icon { color: var(--ll-accent); flex: none; }

/* Shelf doors: white, with the shelf colour as a single accent. */
.tf-door {
	background: var(--tf-surface);
	border: 1px solid var(--ll-rule);
	box-shadow: var(--tf-shadow-card);
}
.tf-door::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--door);
}
.tf-door:hover { transform: none; border-color: color-mix(in srgb, var(--door) 40%, var(--ll-rule)); box-shadow: var(--tf-shadow-lift); }
.tf-door-icon { border-radius: 12px; background: var(--door-soft); color: var(--door-deep); }
.tf-door-name { font-family: var(--ll-font-heading); font-weight: 600; letter-spacing: -0.02em; }
.tf-door-count { background: transparent; color: var(--door-deep); padding: 0; border-radius: 0; }
.tf-door-covers { background: var(--door-soft); border-radius: 12px; }

/* 6. Sections -------------------------------------------------------------- */
.tf-tablist { border-radius: 12px; box-shadow: none; }
.tf-tab { border-radius: 9px; }
.tf-topic-group,
.reading-list,
.review-card,
.faq-list details,
.home-section--trust .ll-container::before { box-shadow: none; }
.tf-topic { background: var(--tf-tint); border-radius: 10px; }
.trust-list .icon { border-radius: 10px; }
.faq-list details { border-radius: 12px; }

/* Empty store: a clear message instead of an empty strip. */
.woocommerce-info,
.woocommerce-no-products-found .woocommerce-info { border-radius: 12px; }

/* 7. Cards & grids --------------------------------------------------------- */
.book-card,
ul.products li.product.book-card {
	display: flex !important;
	flex-direction: column;
	height: 100%;
	box-shadow: none;
	padding: 0.75rem !important;
}
.book-card:hover { box-shadow: var(--tf-shadow-lift); }
.book-card-cover {
	display: block;
	padding: 0.85rem 1rem;
	border-radius: 8px;
	aspect-ratio: auto;
}
.book-card .book-cover-img,
.book-card-cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: var(--ll-shadow-cover);
}
.book-card-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.book-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.book-card-actions { display: flex; align-items: center; gap: 0.5rem; }
.book-card-actions .button,
.woocommerce ul.products li.product .button { flex: 1 1 auto; min-width: 0; min-height: 42px; }
.book-card-actions .leafline-wishlist-toggle { flex: none; width: 42px; height: 42px; border-radius: var(--tf-btn-radius); }
.woocommerce ul.products li.product .tf-buy-now,
.book-card-actions .tf-buy-now { background: var(--ll-ink); border-color: var(--ll-ink); color: #fff; }
.woocommerce ul.products li.product .tf-buy-now:hover,
.book-card-actions .tf-buy-now:hover { background: var(--ll-accent); border-color: var(--ll-accent); color: var(--ll-on-accent); }
.tf-chip { border-radius: 6px; }
.book-card-formats { border-radius: 5px; }

/* Catalogue grid: same rules at every width, set with one selector weight. */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
	gap: 1.5rem 1.25rem;
}
.shop-results[data-layout="list"] ul.products { grid-template-columns: minmax(0, 1fr); }

/* Rails scroll sideways; keep them inside the page. */
.product-rail { max-width: 100%; }
.product-rail ul.products { display: grid; grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }

/* 8. Product page ---------------------------------------------------------- */
.single-product div.product .woocommerce-product-gallery {
	background: var(--tf-tint);
	border-radius: var(--tf-panel-radius);
}
.single-product div.product.product_cat-tech .woocommerce-product-gallery { background: var(--tf-tech-soft); }
.single-product div.product.product_cat-non-tech .woocommerce-product-gallery { background: var(--tf-life-soft); }
.single-product .woocommerce-product-gallery img { border-radius: 4px; box-shadow: var(--ll-shadow-cover); }
.single-product div.product .product_title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); line-height: 1.1; }
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price { font-family: var(--ll-font-body); }

/* Buy box: "Buy now" is the main action, "Add to cart" sits beside it. */
.woocommerce div.product .summary form.cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	align-items: stretch;
	gap: 0.6rem;
	padding: 1rem;
	border-radius: 14px;
	background: var(--tf-surface);
}
.woocommerce div.product .summary form.cart .quantity { display: none; } /* One copy per order. */
.woocommerce div.product .summary form.cart::before,
.woocommerce div.product .summary form.cart::after { display: none; } /* Clearfix pseudo-elements would take grid cells. */
.woocommerce div.product .summary form.cart .leafline-buy-now {
	order: -1;
	grid-column: 1 / 2;
	background: var(--ll-accent);
	border: 1px solid var(--ll-accent);
	color: var(--ll-on-accent);
	font-weight: 700;
}
.woocommerce div.product .summary form.cart .leafline-buy-now:hover { background: var(--ll-accent-hover); border-color: var(--ll-accent-hover); }
.woocommerce div.product .summary form.cart .single_add_to_cart_button {
	grid-column: 2 / 3;
	background: var(--tf-surface);
	border: 1px solid var(--ll-rule-strong);
	color: var(--ll-ink);
}
.woocommerce div.product .summary form.cart .single_add_to_cart_button:hover { background: var(--tf-tint); border-color: var(--ll-ink); color: var(--ll-ink); }
/* Without the companion plugin there is no Buy now button: Add to cart leads. */
.woocommerce div.product .summary form.cart:not(:has(.leafline-buy-now)) .single_add_to_cart_button {
	grid-column: 1 / 3;
	background: var(--ll-accent);
	border-color: var(--ll-accent);
	color: var(--ll-on-accent);
}
.woocommerce div.product .summary form.cart .button,
.woocommerce div.product .summary form.cart .leafline-buy-now {
	width: 100%;
	min-height: 52px;
	margin: 0;
	border-radius: var(--tf-btn-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 1rem;
	white-space: nowrap;
}
.woocommerce div.product .summary form.cart .leafline-wishlist-toggle {
	grid-column: 3 / 4;
	width: 52px;
	height: 52px;
	border-radius: var(--tf-btn-radius);
}
.assurance { gap: 0.4rem; }

/* 9. Cart & checkout ------------------------------------------------------- */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border-radius: var(--tf-btn-radius);
	min-height: 52px;
	font-weight: 700;
}
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	background: var(--ll-accent) !important;
	border-color: var(--ll-accent) !important;
	color: var(--ll-on-accent) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button { width: 100%; }
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea { border-radius: var(--tf-btn-radius) !important; }
.wc-block-components-sidebar-layout .wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper { border-color: var(--ll-rule); }
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--tf-surface);
	border-radius: var(--tf-panel-radius);
}
.wc-block-components-order-summary-item__description { min-width: 0; overflow-wrap: normal; word-break: normal; }
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description { display: none; } /* Long blurbs crowd the summary. */
.wc-block-components-notice-banner { border-radius: 12px; }
.woocommerce-checkout #payment,
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register { border-radius: 14px; }

/* Cart suggestions (product collection block): small covers in a grid. */
.wp-block-woocommerce-cart .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)) !important;
	gap: 1.25rem 1rem !important;
	padding: 0 !important;
}
.wp-block-woocommerce-cart .wc-block-product-template > li { width: auto !important; margin: 0 !important; max-width: none !important; }
.wp-block-woocommerce-cart .wc-block-product-template img { max-width: 140px; margin-inline: auto; border-radius: 3px; box-shadow: var(--ll-shadow-cover); }
.wp-block-woocommerce-cart .wc-block-product-template .wp-block-post-title { font-family: var(--ll-font-body); font-size: 0.95rem !important; font-weight: 650; }
.wp-block-woocommerce-cart .wc-block-product-template .wp-block-button__link,
.wp-block-woocommerce-cart .wc-block-product-template .button { border-radius: var(--tf-btn-radius); font-size: 0.875rem; }
@media (max-width: 600px) {
	.wp-block-woocommerce-cart .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.wp-block-woocommerce-cart .wc-block-product-template img { max-width: 110px; }
}

/* 10. Account -------------------------------------------------------------- */
.woocommerce-MyAccount-navigation li a { border-radius: 8px; }
.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }
.woocommerce table.shop_table { border-radius: 12px; overflow: hidden; }

/* WooCommerce's own buttons (login, register, notices, downloads) match the theme. */
.woocommerce form.login .button,
.woocommerce form.register .button,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce table.shop_table .button {
	background: var(--ll-ink);
	border: 1px solid var(--ll-ink);
	color: #fff;
	border-radius: var(--tf-btn-radius);
	min-height: 44px;
	padding: 0.55rem 1.15rem;
	font-weight: 650;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.woocommerce form.login .button:hover,
.woocommerce form.register .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce table.shop_table .button:hover { background: var(--ll-accent); border-color: var(--ll-accent); color: var(--ll-on-accent); }
.woocommerce form.login,
.woocommerce form.register { background: var(--tf-surface); border: 1px solid var(--ll-rule) !important; }

/* 11. Footer --------------------------------------------------------------- */
.site-footer::before { height: 3px; }
.footer-heading { font-size: 0.875rem; letter-spacing: 0; }
.site-footer .footer-about { max-width: 38ch; }

/* 12. Tablet (961px down) -------------------------------------------------- */
@media (max-width: 960px) {
	.tf-hero-grid { grid-template-columns: minmax(0, 1fr); }
	.tf-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }

	/* The gallery is sticky on desktop; its "top" offset must go when it is not. */
	.single-product div.product .woocommerce-product-gallery {
		position: relative !important;
		top: auto !important;
		max-width: 420px;
		margin-inline: auto;
	}
	.single-product div.product { gap: 1.75rem; }
	.single-product div.product .summary { max-width: 640px; margin-inline: auto; width: 100%; }

	.home-section--faq .section-title { position: static; }

	/* Checkout and cart: one column, summary below the form, full width. */
	.wc-block-components-sidebar-layout { flex-direction: column; }
	.wc-block-components-sidebar-layout .wc-block-components-main,
	.wc-block-components-sidebar-layout .wc-block-components-sidebar { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
	.wc-block-components-sidebar-layout .wc-block-components-sidebar { margin-top: 1.5rem; }

}

/* Tablets in portrait: three cards a row reads best. */
@media (min-width: 601px) and (max-width: 960px) {
	.woocommerce ul.products:not(.product-rail ul.products),
	.woocommerce-page ul.products,
	ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.product-rail ul.products { grid-template-columns: none; grid-auto-columns: calc((100% - 2 * 1.25rem) / 3); }
	.home-section--trust .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.reading-lists { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* 13. Phone (600px down) --------------------------------------------------- */
@media (max-width: 600px) {
	.tf-hero { padding-top: 0.75rem; }
	.tf-hero-intro { border-radius: 16px; padding: 1.5rem 1.25rem; }
	.tf-hero-title { font-size: clamp(1.85rem, 1.2rem + 3.6vw, 2.4rem); max-width: none; }
	.tf-hero-text { font-size: 1rem; margin-bottom: 1.25rem; }
	.tf-hero-search form { padding: 0.3rem; }
	.tf-hero-search input[type="search"],
	.tf-hero-search .search-field { min-height: 44px; padding-inline: 0.85rem; font-size: 1rem; }
	.tf-hero-search button,
	.tf-hero-search .button { min-height: 44px; min-width: 44px; padding-inline: 0.85rem; }
	.tf-hero-actions .button { width: 100%; justify-content: center; }
	.tf-hero-facts { flex-direction: column; gap: 0.55rem; }

	.tf-doors { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }

	/* Two books per row, like a shelf. */
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.75rem; }
	.shop-results[data-layout="list"] ul.products { grid-template-columns: minmax(0, 1fr); }
	.product-rail ul.products,
	.woocommerce .product-rail ul.products,
	.offers-panel .product-rail ul.products { grid-template-columns: none; grid-auto-columns: 46%; gap: 0.75rem; }

	.book-card,
	ul.products li.product.book-card { padding: 0.5rem !important; border-radius: 10px; }
	.book-card-cover { padding: 0.5rem 0.6rem; margin-bottom: 0.6rem; }
	.tf-chip { font-size: 0.6875rem; padding: 0.3rem 0.45rem; margin-bottom: 0.4rem; }
	.woocommerce ul.products li.product .book-card-title,
	.book-card-title { font-size: 0.9rem; line-height: 1.3; }
	.book-card-author { font-size: 0.78rem; margin-bottom: 0.4rem; }
	.book-card-excerpt { display: none; }
	.woocommerce ul.products li.product .price,
	.book-card .price { font-size: 1rem; }
	.book-card-actions { flex-wrap: nowrap; gap: 0.4rem; margin-top: 0.6rem; }
	.book-card-actions .button,
	.woocommerce ul.products li.product .button { min-height: 40px; font-size: 0.8125rem; padding-inline: 0.5rem; }
	.book-card-actions .leafline-wishlist-toggle { width: 40px; height: 40px; }

	/* Product page */
	.single-product div.product .woocommerce-product-gallery { max-width: 300px; padding: 1rem; }
	.single-product div.product .product_title { font-size: 1.9rem; }
	.woocommerce div.product .summary form.cart { grid-template-columns: minmax(0, 1fr) auto; padding: 0.75rem; }
	.woocommerce div.product .summary form.cart .leafline-buy-now { grid-column: 1 / -1; }
	.woocommerce div.product .summary form.cart .single_add_to_cart_button { grid-column: 1 / 2; }
	.woocommerce div.product .summary form.cart:not(:has(.leafline-buy-now)) .single_add_to_cart_button { grid-column: 1 / 2; }
	.woocommerce div.product .summary form.cart .leafline-wishlist-toggle { grid-column: 2 / 3; }
	.product-index ul { gap: 0.4rem; }
	.single-product .summary .woocommerce-product-details__short-description,
	.single-product .summary .woocommerce-product-details__short-description p { font-size: 1rem; line-height: 1.6; }
	.single-product .summary .book-subtitle,
	.single-product .summary .product-subtitle { font-size: 1.1rem; }
	.faq-list summary { font-size: 1rem; }

	/* Shop toolbar */
	.shop-toolbar { flex-wrap: wrap; }
	.woocommerce-products-header { padding-block: 1rem 1.25rem; }

	/* Footer */
	.footer-grid { gap: 1.75rem; }
	.site-footer .footer-bottom,
	.footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

	/* Checkout and cart */
	.wc-block-checkout__actions_row { flex-direction: column-reverse; align-items: stretch; gap: 1rem; }
	.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button { width: 100% !important; }
	.wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button { align-self: center; }
	.woocommerce table.shop_table_responsive tr td { text-align: right; }
}

/* 14. Small phones (380px down) -------------------------------------------- */
@media (max-width: 359px) {
	:root { --ll-gutter: 0.875rem; }
	.custom-logo { max-height: 32px; }
	.header-action { width: 38px; }
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products { gap: 0.85rem 0.6rem; }
	.book-card-actions .leafline-wishlist-toggle { display: none; } /* Save room for the buy button; wishlist stays on the product page. */
}

@media (prefers-reduced-motion: reduce) {
	.book-card, .tf-door { transition: none !important; }
}