/* =============================================================================
   GHOF Gift Shop — all rules scoped to .ghof-gift-shop
   Matches the Greyhound Gift Shop design (Inter + Playfair Display, #bf1516)
   ============================================================================= */

/* ── Design tokens ── */
.ghof-gift-shop {
	--gs-primary:   #bf1516;
	--gs-dark:      #1d1d1d;
	--gs-mid:       #2a2a2a;
	--gs-text:      #444444;
	--gs-muted:     #777777;
	--gs-border:    #e6e3de;
	--gs-surface:   #f8f7f5;
	--gs-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--gs-font-head: 'Playfair Display', Georgia, serif;

	font-family:            var(--gs-font-body);
	color:                  var(--gs-text);
	line-height:            1.7;
	-webkit-font-smoothing: antialiased;
}

.ghof-gift-shop *,
.ghof-gift-shop *::before,
.ghof-gift-shop *::after {
	box-sizing: border-box;
}

/* ── Max-width container ── */
.ghof-gs-container {
	max-width: 1280px;
	margin:    0 auto;
	padding:   0 26px;
}

/* =============================================================================
   Hero
   ============================================================================= */

.ghof-gs-hero {
	position:   relative;
	background: var(--gs-mid) center / cover no-repeat;
	overflow:   hidden;
}

.ghof-gs-hero__overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.68) 100%);
}

.ghof-gs-hero__inner {
	position:   relative;
	padding:    clamp(60px, 9vw, 108px) 26px;
	text-align: center;
}

.ghof-gs-hero__eyebrow {
	color:          #e3b3b0;
	font-size:      13px;
	font-weight:    700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom:  16px;
}

.ghof-gs-hero__title {
	margin:      0 auto;
	max-width:   820px;
	font-family: var(--gs-font-head);
	font-weight: 700;
	color:       #ffffff;
	font-size:   clamp(40px, 6vw, 68px);
	line-height: 1.1;
}

.ghof-gs-hero__sub {
	margin:      20px auto 0;
	max-width:   640px;
	color:       rgba(255,255,255,.88);
	font-size:   17px;
	line-height: 1.75;
}

/* =============================================================================
   Support strip
   ============================================================================= */

.ghof-gs-strip {
	background: var(--gs-primary);
}

.ghof-gs-strip .ghof-gs-container {
	padding-top:    16px;
	padding-bottom: 16px;
	text-align:     center;
	color:          #ffffff;
	font-size:      14.5px;
	letter-spacing: .4px;
}

/* =============================================================================
   Main section
   ============================================================================= */

.ghof-gs-main {
	background: #ffffff;
}

.ghof-gs-main__inner {
	padding-top:    clamp(48px, 7vw, 90px);
	padding-bottom: clamp(48px, 7vw, 90px);
}

/* =============================================================================
   Category chips
   ============================================================================= */

.ghof-gs-chips {
	display:         flex;
	flex-wrap:       wrap;
	gap:             10px;
	justify-content: center;
	margin-bottom:   30px;
}

.ghof-gs-chip {
	display:        inline-block;
	padding:        10px 18px;
	font-family:    var(--gs-font-body);
	font-size:      12px;
	font-weight:    700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius:  4px;
	border:         1px solid #d9d4cc;
	background:     #ffffff;
	color:          #444444;
	cursor:         pointer;
	transition:     background .15s, color .15s, border-color .15s;
}

.ghof-gs-chip:hover {
	border-color: var(--gs-primary);
	color:        var(--gs-primary);
}

.ghof-gs-chip.is-active {
	background:   var(--gs-primary);
	border-color: var(--gs-primary);
	color:        #ffffff;
}

/* =============================================================================
   Toolbar
   ============================================================================= */

.ghof-gs-toolbar {
	display:         flex;
	flex-wrap:       wrap;
	gap:             16px;
	align-items:     center;
	justify-content: space-between;
	padding-bottom:  22px;
	border-bottom:   1px solid var(--gs-border);
	margin-bottom:   28px;
}

.ghof-gs-toolbar__count {
	font-size: 14px;
	color:     var(--gs-muted);
}

.ghof-gs-toolbar__count strong {
	color: var(--gs-dark);
}

.ghof-gs-toolbar__filters {
	display:     flex;
	flex-wrap:   wrap;
	gap:         12px;
	align-items: center;
}

.ghof-gs-filter-label {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   13px;
	color:       var(--gs-muted);
}

.ghof-gs-filter {
	font-family:   var(--gs-font-body);
	border:        1px solid #d9d4cc;
	border-radius: 4px;
	padding:       9px 12px;
	font-size:     13px;
	color:         var(--gs-dark);
	background:    #ffffff;
	cursor:        pointer;
	transition:    border-color .15s;
}

.ghof-gs-filter:focus {
	outline:      none;
	border-color: var(--gs-primary);
	box-shadow:   0 0 0 2px rgba(191,21,22,.15);
}

/* =============================================================================
   Grid wrap + loading state
   ============================================================================= */

.ghof-gs-grid-wrap {
	position:   relative;
	min-height: 280px;
}

.ghof-gs-loading-overlay {
	display:         none;
	position:        absolute;
	inset:           0;
	background:      rgba(255,255,255,.85);
	z-index:         10;
	align-items:     center;
	justify-content: center;
}

.ghof-gs-grid-wrap.is-loading .ghof-gs-loading-overlay {
	display: flex;
}

@keyframes ghof-spin {
	to { transform: rotate(360deg); }
}

.ghof-gs-spinner {
	width:            36px;
	height:           36px;
	border:           3px solid var(--gs-border);
	border-top-color: var(--gs-primary);
	border-radius:    50%;
	animation:        ghof-spin .8s linear infinite;
}

/* =============================================================================
   Product grid
   ============================================================================= */

.ghof-gs-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap:                   28px;
}

/* =============================================================================
   Product card
   ============================================================================= */

.ghof-gs-card {
	background:     #ffffff;
	border:         1px solid var(--gs-border);
	border-radius:  6px;
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	box-shadow:     0 1px 3px rgba(0,0,0,.05);
	transition:     box-shadow .2s, transform .2s;
}

.ghof-gs-card:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,.10);
	transform:  translateY(-2px);
}

/* Image area */
.ghof-gs-card__image-wrap {
	position:      relative;
	aspect-ratio:  1 / 1;
	border-bottom: 1px solid var(--gs-border);
	overflow:      hidden;
}

.ghof-gs-card__image-link {
	display: block;
	width:   100%;
	height:  100%;
}

.ghof-gs-card__img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform .3s ease;
}

.ghof-gs-card:hover .ghof-gs-card__img {
	transform: scale(1.04);
}

/* No-image placeholder */
.ghof-gs-card__img-placeholder {
	width:           100%;
	height:          100%;
	background:      repeating-linear-gradient(135deg, #f5f3ef 0 11px, #efece6 11px 22px);
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             6px;
}

.ghof-gs-card__img-tag {
	font-family:    monospace;
	font-size:      13px;
	letter-spacing: 1.5px;
	color:          #a89e8f;
}

.ghof-gs-card__img-sub {
	font-family:    monospace;
	font-size:      9.5px;
	letter-spacing: 2px;
	color:          #c0b6a7;
	text-transform: uppercase;
}

/* Sale badge */
.ghof-gs-badge {
	position:       absolute;
	top:            14px;
	left:           14px;
	z-index:        2;
	font-family:    var(--gs-font-body);
	font-size:      10.5px;
	font-weight:    700;
	letter-spacing: .8px;
	text-transform: uppercase;
	padding:        5px 10px;
	border-radius:  3px;
}

.ghof-gs-badge--sale {
	background: var(--gs-primary);
	color:      #ffffff;
}

/* Card body */
.ghof-gs-card__body {
	padding:        20px 20px 22px;
	display:        flex;
	flex-direction: column;
	flex:           1;
}

.ghof-gs-card__cat {
	font-family:    var(--gs-font-body);
	font-size:      11px;
	font-weight:    700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color:          var(--gs-primary);
}

.ghof-gs-card__name {
	margin:      7px 0 0;
	font-family: var(--gs-font-head);
	font-weight: 700;
	font-size:   23px;
	color:       var(--gs-dark);
	line-height: 1.3;
}

.ghof-gs-card__name a {
	color:           inherit;
	text-decoration: none;
	transition:      color .15s;
}

.ghof-gs-card__name a:hover {
	color: var(--gs-primary);
}

/* Price — WooCommerce outputs del + ins for sale prices */
.ghof-gs-card__price-wrap {
	margin-top:  11px;
	display:     flex;
	align-items: baseline;
	flex-wrap:   wrap;
	gap:         10px;
}

/* Regular price (no sale) */
.ghof-gs-card__price-wrap .woocommerce-Price-amount {
	font-family: var(--gs-font-body);
	font-size:   20px;
	font-weight: 700;
	color:       var(--gs-dark);
}

/* Strikethrough original price */
.ghof-gs-card__price-wrap del {
	color: #9a9a9a;
}

.ghof-gs-card__price-wrap del .woocommerce-Price-amount {
	font-size:       15px;
	font-weight:     400;
	color:           inherit;
	text-decoration: line-through;
}

/* Sale price */
.ghof-gs-card__price-wrap ins {
	text-decoration: none;
}

.ghof-gs-card__price-wrap ins .woocommerce-Price-amount {
	font-size:   21px;
	font-weight: 700;
	color:       var(--gs-primary);
}

/* View Details button */
.ghof-gs-card__btn {
	display:         inline-block;
	margin-top:      18px;
	align-self:      flex-start;
	background:      var(--gs-dark);
	color:           #ffffff;
	text-decoration: none;
	font-family:     var(--gs-font-body);
	font-size:       12px;
	font-weight:     700;
	letter-spacing:  1.5px;
	text-transform:  uppercase;
	padding:         13px 22px;
	border-radius:   3px;
	border:          none;
	cursor:          pointer;
	transition:      background .15s;
}

.ghof-gs-card__btn:hover,
.ghof-gs-card__btn:focus {
	background: var(--gs-primary);
	color:      #ffffff;
	outline:    none;
}

/* =============================================================================
   Empty state
   ============================================================================= */

.ghof-gs-empty {
	grid-column: 1 / -1;
	padding:     60px 20px;
	text-align:  center;
	color:       var(--gs-muted);
	font-size:   16px;
}

/* =============================================================================
   Pagination
   ============================================================================= */

.ghof-gs-pagination-wrap {
	margin-top: 48px;
}

.ghof-gs-pagination {
	display:         flex;
	flex-wrap:       wrap;
	gap:             8px;
	justify-content: center;
	align-items:     center;
}

.ghof-gs-page-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       42px;
	height:          42px;
	padding:         0 14px;
	font-family:     var(--gs-font-body);
	font-size:       14px;
	font-weight:     600;
	background:      #ffffff;
	color:           var(--gs-dark);
	border:          1px solid var(--gs-border);
	border-radius:   4px;
	cursor:          pointer;
	transition:      background .15s, color .15s, border-color .15s;
}

.ghof-gs-page-btn:hover {
	border-color: var(--gs-primary);
	color:        var(--gs-primary);
}

.ghof-gs-page-btn.is-active {
	background:   var(--gs-primary);
	border-color: var(--gs-primary);
	color:        #ffffff;
	cursor:       default;
}

.ghof-gs-page-prev,
.ghof-gs-page-next {
	padding: 0 18px;
}

.ghof-gs-page-ellipsis {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           42px;
	height:          42px;
	font-size:       14px;
	color:           var(--gs-muted);
}

/* =============================================================================
   Membership CTA
   ============================================================================= */

.ghof-gs-cta {
	background: var(--gs-primary);
}

.ghof-gs-cta__inner {
	padding-top:    clamp(44px, 6vw, 72px);
	padding-bottom: clamp(44px, 6vw, 72px);
}

.ghof-gs-cta__body {
	max-width:  680px;
	margin:     0 auto;
	text-align: center;
}

.ghof-gs-cta__title {
	margin:      0;
	font-family: var(--gs-font-head);
	font-weight: 700;
	color:       #ffffff;
	font-size:   clamp(28px, 3.6vw, 40px);
	line-height: 1.2;
}

.ghof-gs-cta__text {
	margin:      16px 0 0;
	color:       rgba(255,255,255,.9);
	font-size:   16.5px;
	line-height: 1.75;
}

.ghof-gs-cta__btn {
	display:         inline-block;
	margin-top:      26px;
	background:      #ffffff;
	color:           var(--gs-primary);
	text-decoration: none;
	font-family:     var(--gs-font-body);
	font-size:       13px;
	font-weight:     700;
	letter-spacing:  1.5px;
	text-transform:  uppercase;
	padding:         15px 32px;
	border-radius:   3px;
	transition:      background .15s, color .15s;
}

.ghof-gs-cta__btn:hover,
.ghof-gs-cta__btn:focus {
	background: var(--gs-dark);
	color:      #ffffff;
	outline:    none;
}

/* =============================================================================
   Responsive overrides
   ============================================================================= */

@media (max-width: 768px) {
	.ghof-gs-grid {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}
}

@media (max-width: 600px) {
	.ghof-gs-grid {
		grid-template-columns: 1fr;
	}

	.ghof-gs-toolbar {
		flex-direction: column;
		align-items:    flex-start;
	}

	.ghof-gs-toolbar__filters {
		width:          100%;
		flex-direction: column;
		align-items:    flex-start;
	}

	.ghof-gs-filter-label {
		width:          100%;
		flex-direction: column;
		align-items:    flex-start;
		gap:            4px;
	}

	.ghof-gs-filter {
		width: 100%;
	}

	.ghof-gs-chips {
		justify-content: flex-start;
	}
}