/*
Theme Name:   Oddly Appealing
Description:  Small child theme of GeneratePress for oddlyappealing.com. Adds a post grid for categories, a [oa_grid] shortcode, and an "Add to cart" box on posts that are linked to a WooCommerce product.
Template:     generatepress
Version:      1.0.0
Text Domain:  oddly-appealing
*/

/* ==========================================================
   EASY COLOURS - change these to restyle the grid and buy box
   ========================================================== */
:root {
	--oa-accent: #7a3e9d;      /* buttons and prices */
	--oa-accent-hover: #5c2c78;
	--oa-card-bg: #ffffff;
	--oa-card-border: #e5e1ea;
	--oa-gap: 24px;            /* space between grid cards */
}

/* ---------- The grid (category pages and [oa_grid]) ---------- */
.oa-grid {
	display: grid;
	grid-template-columns: repeat(var(--oa-columns, 3), minmax(0, 1fr));
	gap: var(--oa-gap);
	margin: 0 0 2em;
}
/* Tablets: 2 across. Phones: 1 across. */
@media (max-width: 900px) { .oa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .oa-grid { grid-template-columns: 1fr; } }

.oa-card {
	background: var(--oa-card-bg);
	border: 1px solid var(--oa-card-border);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.oa-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;   /* all card pictures the same shape */
	object-fit: cover;
}
.oa-card__noimage {
	aspect-ratio: 4 / 3;
	background: #f3f0f6;
}
.oa-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.oa-card__title { font-size: 1.2em; margin: 0 0 .4em; }
.oa-card__title a { text-decoration: none; }
.oa-card__excerpt { font-size: .95em; margin-bottom: 1em; }
.oa-card__excerpt p { margin: 0; }
.oa-card__shop { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.oa-price { color: var(--oa-accent); font-weight: bold; }

.oa-button,
.oa-buy-box button {
	display: inline-block;
	background: var(--oa-accent);
	color: #fff;
	padding: 8px 16px;
	border: 0;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
}
.oa-button:hover, .oa-button:focus,
.oa-buy-box button:hover, .oa-buy-box button:focus { background: var(--oa-accent-hover); color: #fff; }

.oa-archive-header { margin-bottom: 1.5em; }

/* ---------- Buy box on a single post ---------- */
.oa-buy-box {
	border: 1px solid var(--oa-card-border);
	border-radius: 6px;
	padding: 16px 20px;
	margin: 2em 0 0;
	background: #faf8fc;
}
.oa-buy-box form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.oa-buy-box input[type="number"] { width: 5em; }
.oa-buy-box .oa-price { font-size: 1.3em; }

/* ---------- Cart link in the header menu ---------- */
.oa-cart-link a { padding: 0 15px; text-decoration: none; }