/*
Theme Name: Good Old Time
Description: Custom catalog theme for Good Old Time.
Author: Good Old Time
Version: 1.0.0
*/

:root {
	--gt-color-text: #333333;
	--gt-color-heading: #1a1a1a;
	--gt-color-bg: #ffffff;
	--gt-color-accent: #d8221e;
	--gt-color-accent-hover: #b80d09;
	--gt-color-border: #dddddd;
	--gt-font-body: Literata, serif;
	--gt-font-heading: Poppins, sans-serif;
	--gt-max-width: 1200px;
	--gt-header-height: 160px;
	--gt-header-sticky-height: 90px;
	--gt-logo-height: 150px;
	--gt-logo-sticky-height: 70px;
	--gt-header-inner-width: 1140px;
	--gt-product-width: 1140px;
	--gt-product-gap: 48px;
	--gt-footer-bg: #222222;
	--gt-footer-text: #666666;
	--gt-footer-link: #888888;
	--gt-footer-inner-width: 1140px;
	--gt-category-width: 1140px;
	--gt-card-gap: 38px;
	--gt-card-lift: -2.9rem;
	--gt-information-bg: #f5f5f5;
	--gt-information-width: 1140px;
	--gt-information-gap: 48px;
	--gt-products-block-width: 1140px;
	--gt-products-block-gap: 48px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--gt-font-body);
	color: var(--gt-color-text);
	background: var(--gt-color-bg);
	line-height: 1.6;
}

h1, h2, h3, h4 {
	font-family: var(--gt-font-heading);
	color: var(--gt-color-heading);
	line-height: 1.2;
}

a {
	color: var(--gt-color-accent);
}

a:hover {
	color: var(--gt-color-accent-hover);
}

.gt-container {
	/* max-width: var(--gt-max-width); */
	margin: 0 auto;
	/* padding: 0 20px; */
}

.gt-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 111;
	height: var(--gt-header-height);
	display: flex;
	align-items: center;
	padding: 0 40px;
	background: #ffffff;
	color: var(--gt-color-text);
	transition: height 0.3s;
}

/* Shrinks on scroll, matching the old site's 200px -> 90px sticky header.
   The spacer on <main> intentionally stays at the full height so page
   content doesn't jump upward as the header shrinks. */
.gt-site-header.is-sticky {
	height: var(--gt-header-sticky-height);
}

/* The logged-in admin bar is also position:fixed at top:0, so the header
   has to sit below it. Only applies to logged-in users. */
.admin-bar .gt-site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .gt-site-header {
		top: 46px;
	}
}

/* Below 600px WordPress switches the admin bar to position:absolute, so it
   scrolls away -- once scrolled, the header can sit flush at the top. */
@media screen and (max-width: 600px) {
	.admin-bar .gt-site-header.is-sticky {
		top: 0;
	}
}

/* Constrained on the header only, so it doesn't depend on the global
   .gt-container rule. */
.gt-site-header .gt-container {
	width: 100%;
	max-width: var(--gt-header-inner-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* The header is solid on every page (including the homepage, over the
   carousel) -- the real site never uses a transparent overlay header, so
   every page needs room below the fixed header. */
main.gt-container {
	padding-top: var(--gt-header-height);
}

.gt-site-branding a {
	font-family: var(--gt-font-heading);
	font-size: 1.4rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--gt-color-heading);
	transition: color 300ms ease;
}

.gt-site-branding img {
	display: block;
	height: var(--gt-logo-height);
	width: auto;
	object-fit: cover;
	transition: height 0.3s;
}

.gt-site-header.is-sticky .gt-site-branding img {
	height: var(--gt-logo-sticky-height);
}

.gt-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.gt-nav a {
	position: relative;
	display: inline-block;
	padding: 0 20px;
	font-family: var(--gt-font-heading);
	font-size: 0.8rem;
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--gt-color-heading);
	transition: color 300ms ease;
}

/* Inset by the link padding so the underline sits under the text only. */
.gt-nav a:after {
	content: '';
	position: absolute;
	left: 20px;
	bottom: -0.4em;
	width: calc(100% - 40px);
	height: 2px;
	background: currentColor;
	opacity: 0;
	transition: all 0.2s;
}

.gt-nav a:hover {
	color: var(--gt-color-accent);
}

.gt-nav a:hover:after {
	bottom: -2px;
	opacity: 1;
}

.gt-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

.gt-nav-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 300ms ease, opacity 300ms ease;
}

.gt-nav-toggle.is-open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.gt-nav-toggle.is-open span:nth-child(2) {
	opacity: 0;
}

.gt-nav-toggle.is-open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 782px) {
	:root {
		--gt-header-height: 90px;
	}

	.gt-site-header {
		padding: 0 20px;
	}

	.gt-site-branding img {
		height: 70px;
	}

	.gt-nav-toggle {
		display: flex;
	}

	.gt-nav {
		position: fixed;
		top: var(--gt-header-height);
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--gt-header-height));
		overflow-y: auto;
		background: #ffffff;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
		transform: translateY(-10px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 300ms ease, transform 300ms ease, visibility 300ms;
	}

	.gt-nav.is-open {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.gt-nav ul {
		flex-direction: column;
		gap: 0;
	}

	.gt-nav a {
		display: block;
		padding: 14px 20px;
		color: var(--gt-color-text);
	}

	.gt-nav a:after {
		display: none;
	}
}

/* Dark legal bar, matching the old site's footer-top section. */
.gt-site-footer {
	margin-top: 60px;
	padding: 32px 40px;
	background: var(--gt-footer-bg);
	color: var(--gt-footer-text);
	font-size: 16px;
	line-height: 28px;
	text-align: center;
}

.gt-footer-legal {
	max-width: var(--gt-footer-inner-width);
	margin: 0 auto;
}

.gt-site-footer p {
	margin: 0;
}

/* Scoped to beat the .gt-site-footer p reset above on specificity. */
.gt-site-footer .gt-footer-licence {
	margin-bottom: 24px;
}

.gt-site-footer .gt-footer-copyright {
	margin-top: 24px;
}

.gt-site-footer a {
	color: var(--gt-footer-link);
	text-decoration: none;
}

.gt-site-footer a:hover {
	color: #ffffff;
}

@media (max-width: 782px) {
	.gt-site-footer {
		padding: 32px 20px;
	}
}

/* --- Category archive ------------------------------------------------ */

/* Full-bleed banner carrying the category image, with the same dark wash
   the old site uses over it. */
.gt-category-hero {
	position: relative;
	padding: 64px 40px;
	background-color: #f5f5f5;
	background-size: cover;
	background-position: 50% 50%;
}

.gt-category-hero.has-no-image {
	background-color: var(--gt-color-heading);
}

.gt-category-hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 26, 0.33);
}

.gt-category-hero-inner {
	position: relative;
	max-width: var(--gt-category-width);
	margin: 0 auto;
}

.gt-category-title {
	font-size: 52.8px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0;
}

/* Breadcrumbs sit on the image here, so every part turns white. Doubled
   class to outrank the .gt-breadcrumbs a colour defined further down. */
.gt-breadcrumbs.gt-breadcrumbs-light,
.gt-breadcrumbs.gt-breadcrumbs-light a,
.gt-breadcrumbs.gt-breadcrumbs-light .gt-breadcrumbs-current {
	color: #ffffff;
}

.gt-breadcrumbs.gt-breadcrumbs-light a:hover {
	color: var(--gt-color-accent);
}

.gt-category-description {
	padding: 40px 40px 0;
}

.gt-category-description-inner {
	max-width: var(--gt-category-width);
	margin: 0 auto;
}

.gt-category-products {
	padding: 64px 40px;
}

.gt-category-products-inner {
	max-width: var(--gt-category-width);
	margin: 0 auto;
}

/* At 1140px this lands on 4 columns of ~256px -- the old site's card size. */
.gt-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--gt-card-gap);
}

.gt-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Product cards carry the old site's raised-tile chrome. Scoped to the
   product grid so the homepage's plain category cards keep their look. */
.gt-product-grid .gt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 4.8px;
	background: #ffffff;
	box-shadow: 0 0.48px 0.96px rgba(0, 0, 0, 0.1), 0 1.6px 4.8px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s;
}

.gt-product-grid .gt-card:hover,
.gt-product-grid .gt-card:focus-within {
	box-shadow: 0 1.6px 3.2px rgba(0, 0, 0, 0.1), 0 5.28px 16px rgba(0, 0, 0, 0.15);
	z-index: 4;
}

.gt-card-image {
	display: block;
}

/* Full-width bar pinned to the bottom of the tile, revealed by a plain
   opacity fade -- the old site animates nothing else. overflow:hidden on
   the card clips its lower corners to the card radius. */
.gt-card-view {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 15.6px 23.4px;
	background: var(--gt-color-accent);
	color: #ffffff;
	font-family: var(--gt-font-heading);
	font-size: 13px;
	font-weight: 500;
	line-height: 13.52px;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s, background 0.3s;
}

.gt-card:hover .gt-card-view,
.gt-card:focus-within .gt-card-view {
	opacity: 1;
	pointer-events: auto;
}

.gt-card-view:hover {
	background: var(--gt-color-accent-hover);
	color: #ffffff;
}

/* Square tile, contain so tall bottle shots keep their proportions. */
.gt-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.gt-card-image-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f5f5f5;
}

/* min-height matches the old site's 80px caption block; flex-grow keeps every
   card in a row the same height so the View bar lines up across them. */
.gt-card-body {
	flex: 1 1 auto;
	min-height: 80px;
	padding: 16px 19.2px;
	text-align: center;
}

/* The caption lifts clear of the View bar as the bar fades in -- 0.2s here
   against the bar's 0.3s, matching the old site. */
.gt-product-grid .gt-card-body {
	transform: translateY(0);
	transition: transform 0.2s;
	background: #ffffff;
}

.gt-product-grid .gt-card:hover .gt-card-body,
.gt-product-grid .gt-card:focus-within .gt-card-body {
	transform: translateY(var(--gt-card-lift));
}

.gt-card-title,
.gt-card h3 {
	font-family: var(--gt-font-heading);
	font-size: 14.4px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.04em;
	text-transform: none;
	color: var(--gt-color-text);
	margin: 0;
}

.gt-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 300ms ease;
}

.gt-card-title a:hover {
	color: var(--gt-color-accent);
}

.gt-category-products .pagination {
	margin-top: 40px;
	text-align: center;
}

.gt-category-products .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	font-family: var(--gt-font-heading);
	font-size: 0.8rem;
	text-decoration: none;
	color: var(--gt-color-heading);
}

.gt-category-products .page-numbers.current {
	background: var(--gt-color-heading);
	color: #ffffff;
}

@media (max-width: 782px) {
	.gt-category-hero {
		padding: 40px 20px;
	}

	.gt-category-title {
		font-size: 2rem;
		letter-spacing: -0.03em;
	}

	.gt-category-description {
		padding: 30px 20px 0;
	}

	.gt-category-products {
		padding: 40px 20px;
	}
}

/* --- Single product -------------------------------------------------- */

/* Matches the old site's product row: a 1140px container inside 40px of
   page gutter, with 96px of vertical breathing room. */
.gt-product {
	padding: 96px 40px;
}

.gt-product-inner {
	max-width: var(--gt-product-width);
	margin: 0 auto;
}

/* Two equal 546px columns with a 48px gutter -- image left, details right. */
.gt-product-layout {
	display: flex;
	align-items: flex-start;
	gap: var(--gt-product-gap);
}

.gt-product-media,
.gt-product-summary {
	flex: 1 1 0;
	min-width: 0;
}

/* Square frame with contain, so tall bottle shots are never cropped.
   height:auto is required -- aspect-ratio is ignored while the img's own
   height attribute supplies a used height. */
.gt-product-main-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.gt-product-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.gt-product-thumb {
	padding: 0;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	transition: border-color 200ms ease;
}

.gt-product-thumb.is-active,
.gt-product-thumb:hover {
	border-color: var(--gt-color-heading);
}

.gt-product-thumb img {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: contain;
}

.gt-breadcrumbs {
	font-family: var(--gt-font-heading);
	font-size: 10.5px;
	line-height: 1.4;
	text-transform: uppercase;
	color: #888888;
	margin-bottom: 9.6px;
}

.gt-breadcrumbs a {
	color: #111111;
	text-decoration: none;
}

.gt-breadcrumbs a:hover {
	color: var(--gt-color-accent);
}

.gt-breadcrumbs-sep {
	margin: 0 6px;
}

.gt-product-title {
	font-size: 52.8px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: #242424;
	margin: 0 0 8px;
}

.gt-product-region {
	font-family: var(--gt-font-heading);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #888888;
	margin: 0 0 24px;
}

.gt-product-description {
	margin-bottom: 30px;
}

.gt-product-attributes {
	margin: 0;
}

.gt-product-attribute {
	display: flex;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--gt-color-border);
}

.gt-product-attributes dt {
	flex: 0 0 160px;
	font-weight: bold;
	margin: 0;
}

.gt-product-attributes dd {
	flex: 1 1 auto;
	margin: 0;
}

/* Stack the columns before they get too narrow to read. */
@media (max-width: 960px) {
	.gt-product {
		padding: 48px 20px;
	}

	.gt-product-layout {
		flex-direction: column;
		gap: 32px;
	}

	.gt-product-title {
		font-size: 2rem;
		letter-spacing: -0.03em;
	}

	.gt-product-attribute {
		flex-direction: column;
		gap: 2px;
	}

	.gt-product-attributes dt {
		flex: 0 0 auto;
	}
}

.gt-contact-form p {
	margin-bottom: 16px;
}

.gt-contact-form label {
	display: block;
	margin-bottom: 4px;
	font-weight: bold;
}

.gt-contact-form input[type="text"],
.gt-contact-form input[type="email"],
.gt-contact-form textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--gt-color-border);
	font-family: inherit;
}

.gt-contact-form button {
	background: var(--gt-color-accent);
	color: #ffffff;
	border: none;
	padding: 12px 24px;
	cursor: pointer;
	font-size: 1rem;
}

.gt-contact-form button:hover {
	background: var(--gt-color-accent-hover);
}

.gt-honeypot-field {
	position: absolute;
	left: -9999px;
}

.gt-form-message {
	padding: 12px 16px;
	margin-bottom: 20px;
}

.gt-form-message.success {
	background: #e6f4ea;
	color: #1e4620;
}

.gt-form-message.error {
	background: #fdecea;
	color: #611a15;
}

.gt-carousel {
	position: relative;
	overflow: hidden;
}

/* Height matches the old site's slide: 128px padding top/bottom around the
   content. Slides are absolutely positioned for the crossfade, so the track
   carries the height explicitly. */
.gt-carousel-track {
	position: relative;
	height: 673px;
}

.gt-carousel-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-image: linear-gradient(135deg, var(--gt-color-heading), var(--gt-color-accent));
	opacity: 0;
	visibility: hidden;
	transition: opacity 350ms ease;
	display: flex;
	align-items: center;
}

.gt-carousel-slide.is-active {
	opacity: 1;
	visibility: visible;
}

.gt-carousel-overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 26, 0.25);
}

.gt-carousel-content {
	position: relative;
	z-index: 1;
	max-width: 594px;
	margin-left: auto;
	margin-right: 8%;
	padding: 128px 0;
	color: #ffffff;
	text-align: left;
}

.gt-carousel-content h2 {
	font-family: var(--gt-font-heading);
	color: #ffffff;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 2.8rem;
	line-height: 1.2;
	letter-spacing: -0.04em;
	margin: 0 0 0.4rem;
}

.gt-carousel-content p {
	font-family: var(--gt-font-heading);
	font-size: 1rem;
	line-height: 28px;
	color: #ffffff;
	margin: 0;
}

.gt-carousel-btn {
	display: inline-block;
	margin-top: 1.5rem;
	background: #ffffff;
	color: var(--gt-color-heading);
	font-family: var(--gt-font-heading);
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.03em;
	padding: 19.5px 23.4px;
	border-radius: 0;
	text-decoration: none;
	transition: background 300ms ease, color 300ms ease;
}

.gt-carousel-btn:hover {
	background: var(--gt-color-accent);
	color: #ffffff;
}

/* Transparent 56px hit area with a white chevron, sitting at the very
   edges of the slide -- matching the old site's arrows. */
.gt-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: #ffffff;
	font-size: 38.4px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.gt-carousel-prev {
	left: 0;
}

.gt-carousel-next {
	right: 0;
}

/* Dots sit below the slide rather than overlaid on it. */
.gt-carousel-dots {
	display: flex;
	justify-content: center;
	padding: 8px 0;
}

.gt-carousel-dot {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
}

.gt-carousel-dot:before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid var(--gt-color-heading);
	background: transparent;
	transition: background 0.2s;
}

.gt-carousel-dot.is-active:before {
	background: var(--gt-color-heading);
}

@media (max-width: 782px) {
	.gt-carousel-track {
		height: 420px;
	}

	.gt-carousel-content {
		margin-right: 6%;
		max-width: 90%;
		padding: 40px 0;
	}

	.gt-carousel-content h2 {
		font-size: 1.6rem;
	}

	.gt-carousel-arrow {
		width: 40px;
		height: 40px;
		font-size: 28px;
	}
}

/* --- Product block ---------------------------------------------------- */

.gt-products-block {
	padding: 96px 40px;
}

.gt-products-block-inner {
	max-width: var(--gt-products-block-width);
	margin: 0 auto;
}

.gt-products-block-title {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	text-align: center;
	color: #242424;
	margin: 0 0 24px;
}

/* Four fixed columns rather than the archive's auto-fill, giving the old
   site's 249px card at a 1140px container. The cards themselves reuse the
   .gt-product-grid .gt-card chrome defined further up. */
.gt-product-grid.is-fixed-four {
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gt-products-block-gap);
}

@media (max-width: 960px) {
	.gt-products-block {
		padding: 48px 20px;
	}

	.gt-product-grid.is-fixed-four {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.gt-product-grid.is-fixed-four {
		grid-template-columns: 1fr;
	}
}

/* --- Information section block ---------------------------------------- */

.gt-information {
	padding: 96px 40px;
	background: var(--gt-information-bg);
}

/* Two equal columns, vertically centred against each other. Grid rather than
   flex because the media column's 30px padding would otherwise come out of
   the shared free space and leave the columns 30px unequal. */
.gt-information-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--gt-information-gap);
	max-width: var(--gt-information-width);
	margin: 0 auto;
}

.gt-information-media,
.gt-information-content {
	min-width: 0;
}

/* With no image the copy spans the full width instead of leaving a gap. */
.gt-information-content:only-child {
	grid-column: 1 / -1;
}

/* 30px inset, so the image reads as 486px inside its 546px column. */
.gt-information-media {
	padding: 30px;
}

.gt-information-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.gt-information-title {
	font-size: 52.8px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	color: var(--gt-color-heading);
	margin: 0 0 24px;
}

.gt-information-content p {
	font-size: 16px;
	line-height: 28px;
	color: var(--gt-color-text);
	margin: 0 0 24px;
}

.gt-information-content p:last-child {
	margin-bottom: 0;
}

@media (max-width: 960px) {
	.gt-information {
		padding: 48px 20px;
	}

	.gt-information-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.gt-information-media {
		padding: 0;
	}

	.gt-information-title {
		font-size: 2rem;
		letter-spacing: -0.03em;
	}
}