/*
 * Inner pages, shop, cart and checkout (Skyline design).
 */

.tyog-page { background: var(--bone); color: var(--black); padding: clamp(28px, 5vw, 56px) var(--gutter) clamp(40px, 6vw, 72px); }
.tyog-article, .tyog-shop .tyog-content { max-width: 960px; margin: 0 auto; }
.tyog-page-title, .tyog-shop .product_title, .tyog-shop .page-title { margin: 0 0 24px; font-family: var(--display); font-weight: 900; font-size: clamp(36px, 6vw, 64px); line-height: .95; text-wrap: balance; }

.tyog-content { font-size: 17px; line-height: 1.6; }
.tyog-content > * { max-width: 70ch; }
.tyog-content .woocommerce, .tyog-content .wp-block-woocommerce-cart, .tyog-content .wp-block-woocommerce-checkout, .tyog-shop .tyog-content > * { max-width: none; }
.tyog-content h2 { margin: 36px 0 10px; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; }
.tyog-content h3 { margin: 24px 0 8px; font-size: 18px; }
.tyog-content p, .tyog-content ol, .tyog-content ul { margin: 0 0 14px; }
.tyog-content ol ol { margin-top: 8px; }
.tyog-content a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.tyog-content a:hover { color: var(--black); }
.tyog-content .tyog-draft { display: inline-block; padding: 6px 12px; background: var(--red); color: var(--white); font-weight: 700; font-size: 14px; letter-spacing: .04em; }

/* Form fields */
.tyog-page input[type="text"], .tyog-page input[type="email"], .tyog-page input[type="tel"], .tyog-page input[type="number"],
.tyog-page input[type="password"], .tyog-page select, .tyog-page textarea {
	padding: 10px 12px; border: 2px solid var(--black); background: var(--white); color: var(--black); font: 400 16px/1.3 var(--body); border-radius: 0;
}
.tyog-page input:focus-visible, .tyog-page select:focus-visible, .tyog-page textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; }

/* Buttons */
.tyog-page .button, .tyog-page button[type="submit"], .tyog-page .wc-block-components-button:not(.is-link), .tyog-page .single_add_to_cart_button {
	background: var(--red) !important; color: var(--white) !important; border: 0 !important; border-radius: 0 !important;
	padding: 12px 22px !important; font: 700 15px/1.2 var(--body) !important; cursor: pointer; text-decoration: none !important;
}
.tyog-page .button:hover, .tyog-page button[type="submit"]:hover, .tyog-page .wc-block-components-button:not(.is-link):hover { background: var(--red-hi) !important; }

/* Product lists (Book page) */
.tyog-page ul.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.tyog-page ul.products::before, .tyog-page ul.products::after { display: none !important; }
.tyog-page ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 20px; background: var(--white); border-left: 6px solid var(--red); display: grid; gap: 8px; align-content: start; }
.tyog-page ul.products li.product img { display: none; }
.tyog-page ul.products .woocommerce-loop-product__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--black); }
.tyog-page ul.products .price { font-family: var(--display); font-weight: 800; font-size: 32px; color: var(--black); }
.tyog-page ul.products a { text-decoration: none; color: inherit; }

/* Single product */
.tyog-shop .woocommerce-product-gallery { display: none; }
.tyog-shop div.product .summary { float: none !important; width: auto !important; }
.tyog-shop div.product .price { font-family: var(--display); font-weight: 800; font-size: 40px; color: var(--black); }
.tyog-shop div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0; }
.tyog-shop div.product form.cart .qty { width: 80px; }
.tyog-shop .woocommerce-tabs, .tyog-shop .related, .tyog-shop .product_meta { display: none; }

/* Notices */
.tyog-page .woocommerce-message, .tyog-page .woocommerce-info, .tyog-page .woocommerce-error { background: var(--white); border-top: 4px solid var(--red); color: var(--black); padding: 14px 18px; list-style: none; }

/* Contact form */
.tyog-contact { max-width: 640px; }
.tyog-contact label { display: block; margin-bottom: 6px; font-weight: 700; }
.tyog-contact input, .tyog-contact textarea, .tyog-contact select { width: 100%; }
.tyog-contact .tyog-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tyog-contact-note { font-size: 14px; color: var(--smoke); }
.tyog-contact-ok, .tyog-contact-err { padding: 12px 16px; font-weight: 700; }
.tyog-contact-ok { background: #123d1f; color: var(--white); }
.tyog-contact-err { background: var(--red); color: var(--white); }

/* About gsport page: two buttons side by side, wrapping on phones */
.tyog-page .tyog-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Pre-order rewards page */
.tyog-rewards h2 { margin: 24px 0 6px; }
.tyog-rewards p { margin: 0 0 8px; padding: 0 0 0 0; }
.tyog-rules { padding-left: 1.4em; }
.tyog-rules li { margin: 0 0 10px; }
.tyog-page a.tyog-btn, .tyog-page a.tyog-btn:hover { background: var(--red); color: var(--white); text-decoration: none; }
.tyog-page a.tyog-btn.tyog-btn-alt, .tyog-page a.tyog-btn.tyog-btn-alt:hover { background: var(--white); color: var(--black); }

/* Product list buttons ("Add to basket", "Read more"): white with red text,
   black text on hover (owner, 7 October 2026). A red outline keeps the
   white button visible on the white product cards. */
.tyog-page ul.products li.product .button,
.tyog-page ul.products li.product .added_to_cart {
	justify-self: start; background: var(--white) !important; color: var(--red) !important;
	border: 2px solid var(--red) !important; padding: 10px 20px !important; font: 700 15px/1.2 var(--body) !important; text-decoration: none !important;
}
.tyog-page ul.products li.product .button:hover, .tyog-page ul.products li.product .button:focus-visible,
.tyog-page ul.products li.product .added_to_cart:hover, .tyog-page ul.products li.product .added_to_cart:focus-visible {
	background: var(--white) !important; color: var(--black) !important; border-color: var(--black) !important;
}

/* Same style for the product grid WooCommerce shows on the empty Basket page
   ("Add to basket", "Read more"; owner, 7 October 2026). */
.tyog .wc-block-grid__product-add-to-cart .wp-block-button__link,
.tyog .wc-block-grid__product-add-to-cart .added_to_cart {
	display: inline-block; background: var(--white) !important; color: var(--red) !important;
	border: 2px solid var(--red) !important; border-radius: 0 !important; padding: 10px 20px !important;
	font: 700 15px/1.2 var(--body) !important; text-decoration: none !important;
}
.tyog .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.tyog .wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible,
.tyog .wc-block-grid__product-add-to-cart .added_to_cart:hover {
	background: var(--white) !important; color: var(--black) !important; border-color: var(--black) !important;
}

/* International notice, checkbox and request form (owner, 15 October 2026).
   The form opens when the box is ticked; no script needed. */
.tyog-intl { max-width: 860px; margin-top: 18px; font-size: 15px; color: var(--bone); }
.tyog-intl p { margin: 0 0 10px; }
.tyog-intl a { text-decoration: underline; text-underline-offset: 3px; }
.tyog-intl .tyog-intl-zar { font-size: 14px; color: var(--smoke); }
.tyog-intl .tyog-intl-toggle { width: 20px; height: 20px; margin: 0 8px 0 0; vertical-align: -4px; accent-color: var(--red); }
.tyog-intl label.tyog-intl-tick { display: inline; font-weight: 500; color: var(--white); cursor: pointer; }
.tyog-intl .tyog-intl-toggle:not(:checked) ~ .tyog-intl-form { display: none; }
.tyog-intl .tyog-intl-form { margin-top: 16px; max-width: 640px; }
.tyog-intl select { width: 100%; }
.tyog-basket-note { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--red); font-size: 15px; }
.tyog-basket-note a { text-decoration: underline; text-underline-offset: 3px; }

/* About page: About the Book, About gsport and About the Author on one page
   (owner, 15 October 2026). The header stays in view above each section. */
.tyog-about-section { scroll-margin-top: 16px; padding-top: 8px; }
.tyog-about-section + .tyog-about-section { margin-top: clamp(32px, 5vw, 56px); padding-top: clamp(28px, 4vw, 44px); border-top: 4px solid var(--red); }
.tyog-about-label { margin: 0 0 6px; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 4.5vw, 48px); line-height: 1; }
.tyog-about-title { margin: 0 0 14px; font-size: 19px; font-weight: 700; }