/*
Theme Name: Johan Olin Drawing
Theme URI: https://example.com/johanolin
Author: Erik Zuuring
Description: Johan's drawing site
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: johanolin
Tags: woocommerce, minimal, serif, one-column
*/

/* ---------------------------------------------------------------
   1. Reset-ish base
   --------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: #fff;
	color: #000;
	font-family: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
	font-size: 19px;
	line-height: 1.25;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus-visible { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin: 0;
}

p { margin: 0 0 1em; }

p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   2. Layout shell
   --------------------------------------------------------------- */

.jo-wrap {
	max-width: 1360px;
	margin: 0 auto;
	padding: 14px 16px 60px;
}

/* ---------------------------------------------------------------
   3. Header — site title left, menu right, inside a ruled bar
   --------------------------------------------------------------- */

.jo-masthead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 6px 2px 0;
}

.jo-site-title {
	font-size: 20px;
	letter-spacing: 0.01em;
}

.jo-nav ul {
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jo-nav a { font-size: 20px; }

.jo-nav .current-menu-item > a { text-decoration: underline; }

/* ---------------------------------------------------------------
   4. Product tile sections (front page / shop)
   --------------------------------------------------------------- */

.jo-section { margin-bottom: 70px; }

.jo-section:last-child { margin-bottom: 0; }

.jo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px;
}

.jo-tile {
	display: flex;
	flex-direction: column;
}

.jo-tile-thumb {
	margin: 0 0 14px;
	background: #fbfaf6;
}

.jo-tile-thumb img {
	width: 100%;
	aspect-ratio: 220 / 310;
	object-fit: contain;
	padding: 4px;
}

.jo-tile-thumb--empty {
	aspect-ratio: 220 / 310;
	display: flex;
	align-items: center;
	justify-content: center;
	font-style: italic;
	color: #555;
}

.jo-tile-title {
	font-size: 20px;
	margin-bottom: 0.7em;
}

.jo-tile-meta {
	font-size: 19px;
	line-height: 1.18;
}

.jo-tile-meta p { margin: 0; }

/* Short description: sits between the title and the price, set to match it. */
.jo-tile-desc {
	font-size: 19px;
	margin-bottom: 0.7em;
}

.jo-tile-price {
	margin-top: 0;
	font-size: 19px;
}

.jo-tile-price .amount { font-weight: normal; }

.jo-tile .button,
.jo-tile .added_to_cart {
	align-self: flex-start;
	margin-top: 10px;
	padding: 1px 10px;
	border: 1px solid #000;
	background: #fff;
	font-family: inherit;
	font-size: 18px;
	line-height: 1.3;
	cursor: pointer;
}

.jo-tile .button:hover { background: #f0f0f0; text-decoration: none; }

.jo-empty {
	padding: 24px 10px;
	font-style: italic;
}

/* ---------------------------------------------------------------
   5. General page / single template
   --------------------------------------------------------------- */

.jo-page-title {
	text-align: center;
	font-size: 26px;
	margin: 26px 0 10px;
}

.jo-page {
	border-top: 1px solid #000;
	padding-top: 34px;
	margin-top: 10px;
}

.jo-page-media { margin-bottom: 34px; }

.jo-page-media {
	margin-left: 0;
	margin-right: 0;
}

.jo-page-media img {
	width: 100%;
	border: 1px solid #e3e3e3;
}

.jo-page-media figcaption {
	margin-top: 6px;
	font-size: 17px;
	font-style: italic;
}

.jo-postmeta {
	font-style: italic;
	margin-bottom: 1.05em;
}

.jo-pagination {
	margin-top: 26px;
	border-top: 1px solid #000;
	padding-top: 8px;
	font-size: 18px;
}

.jo-pagination .nav-links {
	display: flex;
	gap: 14px;
	justify-content: center;
}

.jo-pagination h2 { display: none; }

.jo-content {
	font-size: 19px;
	line-height: 1.22;
}

.jo-content p { margin: 0 0 1.05em; }

.jo-content h2 { font-size: 24px; margin: 1.2em 0 0.4em; }

.jo-content h3 { font-size: 21px; margin: 1.2em 0 0.4em; }

.jo-content ul,
.jo-content ol { margin: 0 0 1.05em 1.4em; padding: 0; }

.jo-content a { text-decoration: underline; }

.jo-content blockquote {
	margin: 0 0 1.05em;
	padding-left: 14px;
	border-left: 1px solid #000;
}

/* ---------------------------------------------------------------
   6a. Single product — image left, everything else in the right column
   --------------------------------------------------------------- */

.jo-product {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 36px;
}

.jo-product-media { min-width: 0; }

/* Undo WooCommerce's floated 48% gallery — the grid owns the columns now. */
.woocommerce div.product .jo-product-media div.images,
.woocommerce div.product .jo-product-media .woocommerce-product-gallery {
	float: none;
	width: 100%;
	margin: 0;
}

.jo-product-media .woocommerce-product-gallery__image img {
	width: 100%;
	border: 1px solid #e3e3e3;
	background: #fbfaf6;
}

.jo-product-media .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.jo-product-media .flex-control-thumbs li {
	width: 72px;
	margin: 0;
	float: none;
}

.jo-product-media .flex-control-thumbs img {
	border: 1px dashed #000;
	opacity: 1;
}

.woocommerce div.product .jo-product-summary {
	float: none;
	width: 100%;
	min-width: 0;
	align-self: start;
	position: sticky;
	top: 14px;
	font-size: 19px;
	line-height: 1.22;
}

.jo-product-summary .woocommerce-product-details__short-description { margin-bottom: 1.1em; }

/* Quantity and button on one line. */
.woocommerce div.product .jo-product-summary form.cart {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 1.1em;
}

.woocommerce div.product .jo-product-summary form.cart div.quantity {
	float: none;
	margin: 0;
}

.woocommerce div.product .jo-product-summary form.cart .qty {
	width: 3.5em;
	padding: 2px 4px;
	font-family: inherit;
	font-size: 18px;
	border: 1px solid #000;
	border-radius: 0;
}

.woocommerce div.product .jo-product-summary form.cart table.variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 8px;
}

.woocommerce div.product .jo-product-summary form.cart table.variations th,
.woocommerce div.product .jo-product-summary form.cart table.variations td {
	padding: 2px 0;
	text-align: left;
	font-weight: normal;
}

.woocommerce div.product .jo-product-summary p.price,
.woocommerce div.product .jo-product-summary span.price {
	margin: 0 0 1.1em;
	font-size: 19px;
}

.jo-product-summary .product_meta {
	margin-top: 1.1em;
	font-size: 17px;
}

.jo-product-summary .product_meta > span { display: block; }

/* The blocks that used to be tabs, stacked under the add-to-cart. */
.jo-product-block {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px dashed #000;
}

.jo-product-heading {
	font-size: 21px;
	margin: 0 0 0.5em;
}

.jo-product-block table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: 18px;
}

.jo-product-block table.shop_attributes th,
.jo-product-block table.shop_attributes td {
	border: 1px solid #000;
	padding: 2px 8px;
	text-align: left;
	font-weight: normal;
	font-style: normal;
}

.jo-product-reviews {
	clear: both;
	margin-top: 34px;
}

.woocommerce div.product .woocommerce-tabs { display: none; }

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	font-size: 21px;
	margin: 34px 0 14px;
	padding-top: 16px;
	border-top: 1px solid #000;
}

.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .related ul.products li.product,
.woocommerce .upsells ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
}

/* ---------------------------------------------------------------
   6b. WooCommerce cart, checkout, forms — keep the same ruled look
   --------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 1px solid #000;
	background: #fff;
	list-style: none;
	padding: 8px 12px;
	margin: 0 0 18px;
	font-family: inherit;
}

.woocommerce div.product .product_title { font-size: 26px; }

.woocommerce div.product p.price,
.woocommerce div.product span.price { color: #000; font-size: 19px; }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	font-family: inherit;
	font-size: 18px;
	font-weight: normal;
	border: 1px solid #000;
	border-radius: 0;
	background: #fff;
	color: #000;
	padding: 2px 12px;
	line-height: 1.35;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: #f0f0f0;
	color: #000;
}

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: #000;
	border-radius: 0;
	font-family: inherit;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	font-family: inherit;
	font-size: 18px;
	border: 1px solid #000;
	border-radius: 0;
	padding: 3px 6px;
}

/* ---------------------------------------------------------------
   6c. Product Collection block — same look as the front-page tiles

   The block brings its own flex layout, centred text and rounded
   buttons, so these rules pull it back to the tile grid. The few
   !important flags are where the block writes an inline style
   (aspect ratio, button radius) that a plain rule cannot beat.
   --------------------------------------------------------------- */

.wp-block-woocommerce-product-collection { margin: 0 0 70px; }

/* Heading above the grid reads as a front-page section title. */
.wp-block-woocommerce-product-collection > .wp-block-heading {
	text-align: center;
	font-size: 26px;
	line-height: 1.15;
	font-weight: normal;
	margin: 26px 0 10px;
}

.wp-block-woocommerce-product-collection > .wp-block-heading:empty { display: none; }

.wp-block-woocommerce-product-collection > .wp-block-heading:not(:empty) + * {
	border-top: 1px solid #000;
	padding-top: 34px;
	margin-top: 10px;
}

/* The grid. */
.wp-block-woocommerce-product-collection .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container > li,
.wp-block-woocommerce-product-collection .wc-block-product-template > li {
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
}

/* Artwork: same proportion, padding and paper tint as a tile thumbnail. */
.wp-block-woocommerce-product-collection .wc-block-components-product-image {
	margin: 0 0 14px;
	background: #fbfaf6;
	aspect-ratio: auto !important;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image a {
	display: block;
	text-decoration: none;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image img {
	width: 100%;
	aspect-ratio: 220 / 310 !important;
	object-fit: contain;
	padding: 4px;
	border-radius: 0;
}

/* Title. */
.wp-block-woocommerce-product-collection .wp-block-post-title {
	font-size: 20px;
	line-height: 1.25;
	font-weight: normal;
	text-align: left;
	margin: 0 0 0.7em;
}

.wp-block-woocommerce-product-collection .wp-block-post-title a { text-decoration: none; }

.wp-block-woocommerce-product-collection .wp-block-post-title a:hover { text-decoration: underline; }

/* Short description — add a Post Excerpt block between title and price. */
.wp-block-woocommerce-product-collection .wp-block-post-excerpt {
	font-size: 19px;
	line-height: 1.18;
	text-align: left;
	margin: 0 0 0.7em;
}

.wp-block-woocommerce-product-collection .wp-block-post-excerpt p { margin: 0; }

.wp-block-woocommerce-product-collection .wp-block-post-excerpt__more-text { display: none; }

/* Price. */
.wp-block-woocommerce-product-collection .wc-block-components-product-price,
.wp-block-woocommerce-product-collection .wc-block-components-product-price.has-text-align-center {
	display: block;
	font-size: 19px;
	line-height: 1.18;
	text-align: left;
	margin: 0;
}

/* Matches the "Price:" label the front-page tiles print. Delete this rule
   to show the bare amount instead. */
.wp-block-woocommerce-product-collection .wc-block-components-product-price::before {
	content: "Price: ";
}

.wp-block-woocommerce-product-collection .wc-block-components-product-price .woocommerce-Price-amount {
	font-weight: normal;
}

/* Add to cart. */
.wp-block-woocommerce-product-collection .wc-block-components-product-button,
.wp-block-woocommerce-product-collection .wc-block-components-product-button.has-text-align-center {
	margin-top: 10px;
	text-align: left;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-button .wp-block-button__link,
.wp-block-woocommerce-product-collection .wc-block-components-product-button a.button,
.wp-block-woocommerce-product-collection .wc-block-components-product-button button {
	display: inline-block;
	width: auto;
	padding: 1px 10px;
	border: 1px solid #000;
	border-radius: 0 !important;
	background: #fff;
	color: #000;
	font-family: inherit;
	font-size: 18px;
	font-weight: normal;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-button .wp-block-button__link:hover,
.wp-block-woocommerce-product-collection .wc-block-components-product-button a.button:hover,
.wp-block-woocommerce-product-collection .wc-block-components-product-button button:hover {
	background: #f0f0f0;
	color: #000;
	text-decoration: none;
}

/* Pagination, matching .jo-pagination. */
.wp-block-woocommerce-product-collection .wp-block-query-pagination {
	margin-top: 26px;
	padding-top: 8px;
	border-top: 1px solid #000;
	font-size: 18px;
	gap: 14px;
}

.wp-block-woocommerce-product-collection .wp-block-query-pagination a { text-decoration: none; }

.wp-block-woocommerce-product-collection .wp-block-query-pagination a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   7. Footer
   --------------------------------------------------------------- */

.jo-footer {
	margin-top: 40px;
	padding-top: 8px;
	border-top: 1px solid #000;
	font-size: 17px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   8. Accessibility helpers
   --------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	display: inline-block;
	padding: 4px 8px;
	border: 1px solid #000;
}

/* ---------------------------------------------------------------
   9. Narrow screens
   --------------------------------------------------------------- */

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

	.wp-block-woocommerce-product-collection .wc-block-product-template {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.jo-product {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.woocommerce div.product .jo-product-summary { position: static; }

	.woocommerce .related ul.products,
	.woocommerce .upsells ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	body { font-size: 18px; }
	.jo-section { margin-bottom: 44px; }
	.jo-wrap { padding: 10px 12px 40px; }
	.jo-grid { grid-template-columns: 1fr; }
	.jo-page-title { font-size: 22px; }
	.wp-block-woocommerce-product-collection .wc-block-product-template { grid-template-columns: 1fr; }
	.wp-block-woocommerce-product-collection > .wp-block-heading { font-size: 22px; }

	.woocommerce .related ul.products,
	.woocommerce .upsells ul.products { grid-template-columns: 1fr; }
	.jo-site-title,
	.jo-nav a { font-size: 18px; }
}