/* Giant Truss — category browse layout
   Pattern follows Prolyte's drill-down (client's stated reference), rendered
   in Giant Truss brand colours and type. */

.gt-archive {
	--gt-max: 1400px;
	--gt-gutter: clamp(16px, 4vw, 48px);
	font-family: "Inter Tight", Arial, Helvetica, sans-serif;
}
.gt-archive * { box-sizing: border-box; }

/* ── Hero ───────────────────────────────────────────────────── */
.gt-cat-hero {
	position: relative;
	background: #1a1a1a center/cover no-repeat;
	min-height: clamp(150px, 18vw, 230px);
	display: flex;
	align-items: flex-end;
}
.gt-cat-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.25) 100%);
}
.gt-cat-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--gt-max);
	margin: 0 auto;
	padding: clamp(18px, 3vw, 34px) var(--gt-gutter);
}
.gt-cat-title {
	font-family: "Inter Tight", Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	line-height: 1;
	font-size: clamp(26px, 3.3vw, 46px);
	color: #fff;
	margin: 0;
}
.gt-crumbs,
.gt-crumbs a {
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
	text-decoration: none;
	margin-bottom: 8px;
}
.gt-crumbs a:hover { color: var(--gt-purple); }

/* WoodMart prints its own separator with .wd-delimiter::after { content: "/" },
   which landed on top of the "›" this template passes to
   woocommerce_breadcrumb() — rendering "Home › / Roof Truss". Drop the CSS
   slash and keep the chevron the template asked for. */
.gt-crumbs .wd-delimiter::after { content: none; }

/* The current-page crumb reads WoodMart's --wd-bcrumb-color-active, which
   resolves to #242424 — near-black, and this breadcrumb only ever sits on the
   dark hero. The token has to be set on .wd-breadcrumbs, not on .gt-crumbs:
   WoodMart declares it on .wd-breadcrumbs itself, so a value on the parent is
   inherited in and then immediately overridden by that child declaration. */
.gt-crumbs .wd-breadcrumbs { --wd-bcrumb-color-active: #ffffff; }

/* ── Body ───────────────────────────────────────────────────── */
.gt-archive-body {
	max-width: var(--gt-max);
	margin: 0 auto;
	padding: clamp(28px, 4vw, 54px) var(--gt-gutter) clamp(50px, 6vw, 90px);
}

.gt-cat-intro {
	max-width: 78ch;
	font-size: clamp(14px, 1.05vw, 15.5px);
	line-height: 1.65;
	color: var(--gt-body, #767676);
	margin: 0 0 clamp(26px, 3vw, 40px);
}

.gt-section-head {
	font-family: "Inter Tight", Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 2.3vw, 32px);
	line-height: 1.15;
	color: var(--gt-title, #242424);
	margin: clamp(30px, 4vw, 48px) 0 clamp(18px, 2.4vw, 28px);
	display: inline-block;
	border-bottom: 2px solid var(--gt-purple, #7B4FF4);
	padding-bottom: 4px;
}
.gt-section-head:first-child { margin-top: 0; }

/* ── Card grid ──────────────────────────────────────────────── */
.gt-card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 24px);
	width: 100%;
}

.gt-archive .gt-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: #fff;
	transition: transform .34s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gt-archive .gt-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .22);
}

.gt-card-thumb {
	display: grid;
	place-items: center;
	border: 1px solid #d9d9d9;
	background: #fff;
	aspect-ratio: 4 / 3;
	padding: clamp(10px, 1.4vw, 20px);
	overflow: hidden;
	transition: border-color .3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gt-card-thumb img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gt-archive .gt-card:hover .gt-card-thumb { border-color: var(--gt-purple, #7B4FF4); }
.gt-archive .gt-card:hover .gt-card-thumb img { transform: scale(1.05); }

.gt-card-label {
	display: block;
	margin-top: 12px;
	font-size: clamp(13px, 1.05vw, 15px);
	font-weight: 600;
	color: var(--gt-title, #242424);
	line-height: 1.3;
	transition: transform .3s cubic-bezier(0.2, 0.8, 0.2, 1), color .3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gt-archive .gt-card:hover .gt-card-label {
	transform: translateX(2px);
	color: var(--gt-purple, #7B4FF4);
}
.gt-card-count {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	color: #8a8a8a;
}

@media (prefers-reduced-motion: reduce) {
	.gt-archive .gt-card,
	.gt-card-thumb,
	.gt-card-thumb img,
	.gt-card-label {
		transition: none !important;
	}
}

.gt-empty {
	padding: 40px 0;
	color: #8a8a8a;
	font-size: 15px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.gt-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.gt-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
	.gt-card-grid { grid-template-columns: 1fr; }
}

/* GT: product range grid ----------------------------------------------------
   Shop root, per the "All Products" design: nine category cards on a soft
   lavender field, each a lavender image panel with the transparent product
   render floating in it, title + one-line summary, and a round arrow button.
   -------------------------------------------------------------------------- */
.gt-range-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  font-size: clamp(26px, 20px + 1.2vw, 38px);
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--gt-ink, #111);
}
.gt-range-head::before {
  content: "";
  width: 5px;
  align-self: stretch;
  min-height: 1.1em;
  border-radius: 2px;
  background: var(--gt-purple, #7B4FF4);
}
.gt-range-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: 14px;
  background: #f6f4fc;
}
.gt-range-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 12px 18px;
  border-radius: 14px;
  background: #efebfa;
  color: inherit;
  text-decoration: none;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.gt-range-card:hover {
  transform: translateY(-4px);
  background: #ebe5fa;
  box-shadow: 0 18px 34px -18px rgba(123, 79, 244, .45);
}
.gt-range-media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, #e7e2f7 0%, #ece8f9 100%);
  overflow: hidden;
}
.gt-range-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* whole product visible, never cropped or squashed */
  filter: drop-shadow(0 12px 14px rgba(17, 17, 17, .12));
  transition: transform .35s ease;
}
.gt-range-card:hover .gt-range-media img { transform: scale(1.04); }
.gt-range-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px;
}
.gt-range-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gt-range-title {
  font-size: clamp(19px, 16px + .6vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--gt-ink, #111);
}
.gt-range-sub { font-size: 14px; line-height: 1.4; color: var(--gt-body, #767676); }
.gt-range-go {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--gt-purple, #7B4FF4);
  box-shadow: 0 4px 14px rgba(17, 17, 17, .08);
  transition: background .25s, color .25s, transform .25s;
}
.gt-range-card:hover .gt-range-go { background: var(--gt-purple, #7B4FF4); color: #fff; transform: translateX(2px); }
.gt-range-card:focus-visible { outline: 3px solid var(--gt-purple, #7B4FF4); outline-offset: 3px; }

@media (max-width: 1024px) {
  .gt-range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gt-range-grid { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .gt-range-media { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-range-card, .gt-range-media img, .gt-range-go { transition: none; }
  .gt-range-card:hover { transform: none; }
}
/* GT: end product range grid */

/* GT: range card images - pin the image box so tall renders (hoist, tower, barrier) scale down instead of overflowing */
.gt-range-media { position: relative; }
.gt-range-media img {
  position: absolute;
  inset: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  max-width: none;
}

/* Phones: keep two cards per row on category pages (one per row made each card screen-sized). */
@media (max-width: 420px) {
	.gt-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
	.gt-card-label { font-size: 14px; line-height: 1.3; }
	.gt-card-count { font-size: 12px; }
}
/* Card thumbnails: pin the image inside the box so tall products scale down instead of being cut off. */
.gt-card-thumb { position: relative; overflow: hidden; }
.gt-card-thumb img {
	position: absolute;
	inset: 8%;
	width: 84%;
	height: 84%;
	max-width: none;
	max-height: none;
	object-fit: contain;
}