/*
Theme Name: BAG Shop
Description: Based Ape Gang merch store. Mirrors the original Squarespace shop layout.
Version: 1.0.2
Requires PHP: 8.0
Text Domain: bag-shop
*/

:root {
	--bag-accent: #ccff00;
	--bag-ink: #000;
	--bag-bg: #f9f9f9;
	--bag-tile: #fff;
	--bag-muted: #555;
	--bag-head: 'Anton', Impact, sans-serif;
	--bag-body: 'Cabin', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
	background: var(--bag-bg);
	color: var(--bag-ink);
	font: 400 14px/1.6 var(--bag-body);
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Header ---------- */
.bag-header {
	background: var(--bag-accent);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 28px 4vw;
	min-height: 137px;
}
.bag-nav { display: flex; align-items: center; gap: 30px; }
.bag-nav--right { justify-content: flex-end; gap: 60px; }
.bag-nav a {
	font: 700 14px/1 var(--bag-body);
	text-decoration: none;
	color: var(--bag-ink);
	padding-bottom: 3px;
	border-bottom: 1.5px solid transparent;
}
.bag-nav a:hover, .bag-nav a.is-active { border-bottom-color: var(--bag-ink); }
.bag-logo img { width: 200px; }
.bag-cart { display: inline-flex; align-items: center; gap: 6px; border: 0 !important; }

/* ---------- Layout ---------- */
.bag-main { min-height: 60vh; }
.bag-wrap { max-width: none; margin: 0 auto; padding: 30px 4vw 80px; }
.bag-wrap--product { max-width: 1180px; padding-top: 60px; }
.bag-wrap--page { max-width: 1100px; padding-top: 50px; }
.bag-page-title { font: 400 44px/1.1 var(--bag-head); text-transform: uppercase; margin: 0 0 30px; }

/* ---------- Shop grid ---------- */
.woocommerce ul.products, .woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 50px 40px;
	margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important;
	text-align: center;
}
.bag-img {
	position: relative;
	background: var(--bag-tile);
	aspect-ratio: 1 / 1;
	margin: 0 0 30px;
	overflow: hidden;
}
.woocommerce ul.products li.product a .bag-img img {
	width: 100%; height: 100%;
	object-fit: contain;
	padding: 0;
	margin: 0;
	transition: opacity .35s ease;
}
.bag-img .bag-img-back { position: absolute; inset: 0; opacity: 0; }
.woocommerce ul.products li.product a:hover .bag-img.has-back img:first-child { opacity: 0; }
.woocommerce ul.products li.product a:hover .bag-img.has-back .bag-img-back { opacity: 1; }
@media (hover: none) { .bag-img .bag-img-back { display: none; } }
.woocommerce ul.products li.product a { text-decoration: none; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font: 400 22px/1.2 var(--bag-head);
	text-transform: uppercase;
	letter-spacing: .01em;
	padding: 0; margin: 0 0 6px;
}
.woocommerce ul.products li.product .price {
	font: 400 13px/1 var(--bag-body);
	color: var(--bag-ink) !important;
	display: block;
}

/* ---------- Product page ---------- */
.bag-crumbs { font: 700 13px/1 var(--bag-body); margin: 0 0 26px; }
.bag-crumbs a { text-decoration: none; }
.bag-crumbs span { margin: 0 8px; }

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
.woocommerce div.product .bag-crumbs { grid-column: 1 / -1; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary { width: auto !important; float: none !important; margin: 0 !important; }
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images img { background: var(--bag-tile); }
/* Gallery: every image full width, stacked (like the Squarespace product page). */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { display: grid; gap: 20px; }
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
	width: 100% !important; display: block !important; padding: 0 !important; float: none !important;
}
.woocommerce div.product div.images img { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; }

.woocommerce div.product .product_title {
	font: 400 44px/1.05 var(--bag-head);
	text-transform: uppercase;
	margin: 0 0 18px;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
	font: 400 24px/1 var(--bag-head);
	color: var(--bag-ink);
	margin: 0 0 24px;
}

.woocommerce div.product form.cart { margin: 0 0 26px; }
.woocommerce div.product form.cart .variations { width: 100%; margin: 0 0 14px; border: 0; }
.woocommerce div.product form.cart .variations tr { display: block; margin-bottom: 14px; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { display: block; padding: 0; text-align: left; line-height: 1.4; }
.woocommerce div.product form.cart .variations label {
	font: 700 13px/1 var(--bag-body);
	text-transform: lowercase;
	display: block;
	margin-bottom: 8px;
}
.woocommerce div.product form.cart .variations label::after { content: ':'; }
.woocommerce div.product form.cart .variations select {
	width: 100%;
	height: 44px;
	padding: 0 40px 0 14px;
	border: 1px solid var(--bag-ink);
	border-radius: 0;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%23000'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
	appearance: none;
	font: 400 13px/1 var(--bag-body);
	color: var(--bag-ink);
	margin: 0 !important;
}
.woocommerce div.product form.cart .reset_variations { font-size: 12px; margin-top: 6px; display: inline-block; }
.woocommerce div.product .woocommerce-variation-price { margin-bottom: 14px; }

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) { display: flex; gap: 10px; }
.woocommerce .quantity .qty {
	width: 92px; height: 44px;
	border: 1px solid var(--bag-ink); border-radius: 0;
	font: 400 14px/1 var(--bag-body);
	text-align: center;
	background: #fff;
}
.woocommerce div.product form.cart .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
	flex: 1;
	height: 44px;
	background: #fff !important;
	color: var(--bag-ink) !important;
	border: 1px solid var(--bag-ink) !important;
	border-radius: 0 !important;
	font: 400 13px/1 var(--bag-body) !important;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 0 22px !important;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
	background: var(--bag-accent) !important;
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
	background: var(--bag-ink) !important; color: var(--bag-accent) !important;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: #222 !important; }
.woocommerce .button.disabled, .woocommerce button.button:disabled { opacity: .45; }

.bag-desc { font-size: 13.5px; line-height: 1.65; }
.bag-desc p { margin: 0 0 14px; }

/* ---------- Notices ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top-color: var(--bag-ink) !important;
	background: #fff;
	font-size: 13px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--bag-ink) !important; }

/* ---------- Footer ---------- */
.bag-footer {
	background: var(--bag-ink);
	color: #fff;
	text-align: center;
	padding: 40px 4vw;
	font-size: 12px;
}
.bag-social { display: flex; justify-content: center; gap: 24px; margin-bottom: 10px; }
.bag-social a { color: var(--bag-accent); text-decoration: none; font-weight: 700; font-size: 13px; }
.bag-footer p { margin: 0; color: #aaa; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
	.woocommerce div.product { grid-template-columns: minmax(0, 1fr); }
	.bag-nav--right { gap: 28px; }
}
@media (max-width: 640px) {
	html, body { overflow-x: hidden; }
	.bag-header {
		min-height: 0; padding: 18px 16px 14px;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "logo logo" "left right";
		row-gap: 14px;
	}
	.bag-logo { grid-area: logo; justify-self: center; }
	.bag-nav--left { grid-area: left; }
	.bag-nav--right { grid-area: right; }
	.bag-logo img { width: 140px; }
	.bag-nav { gap: 18px; }
	.bag-nav--right { gap: 18px; }
	.bag-nav a { font-size: 12px; }
	.bag-wrap { padding: 20px 16px 60px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 17px; }
	.woocommerce div.product .product_title { font-size: 34px; }
}