/* =============================================================
   TGIT — Product Card + Archive Grid  |  Light colour scheme
   ============================================================= */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
    --tgit-bg:          #FFFFFF;
    --tgit-bg-page:     #F7F4EF;
    --tgit-bg-subtle:   #F0ECE5;
    --tgit-border:      rgba(180,165,145,0.25);
    --tgit-border-mid:  rgba(180,165,145,0.45);
    --tgit-ink:         #2C2419;
    --tgit-ink-soft:    #6B5E4E;
    --tgit-ink-muted:   #A8998A;
    --tgit-gold:        #C8891A;
    --tgit-gold-light:  #F5E4B8;
    --tgit-gold-hover:  #A97015;
    --tgit-shadow-sm:   0 1px 3px rgba(100,80,50,0.07), 0 2px 8px rgba(100,80,50,0.05);
    --tgit-shadow-md:   0 4px 20px rgba(100,80,50,0.10), 0 1px 4px rgba(100,80,50,0.06);
    --tgit-shadow-lg:   0 8px 32px rgba(100,80,50,0.13);
    --tgit-radius-card: 0.875rem;
    --tgit-radius-btn:  0.5rem;
    --tgit-radius-pill: 9999px;
}

/* ── Reset ──────────────────────────────────────────────────── */
.git-trek-card *,
.tgit-pkg-card *,
.tgit-cat-hero *,
.tgit-cat-filters-wrap *,
.tgit-cat-archive * { box-sizing: border-box; }

/* =============================================================
   1. ARCHIVE HERO
   ============================================================= */
.tgit-cat-hero {
    position:    relative;
    min-height:  50vh;
    display:     flex;
    align-items: flex-end;
    overflow:    hidden;
}
.tgit-cat-hero__bg { position: absolute; inset: 0; }
.tgit-cat-hero__img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 40%;
    display: block;
}
.tgit-cat-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba(255,248,235,0.05) 0%,
        rgba(30,18,5,0.38)     50%,
        rgba(20,12,2,0.72)     100%
    );
}
.tgit-cat-hero__inner {
    position:  relative;
    z-index:   10;
    width:     100%;
    max-width: 1400px;
    margin:    0 auto;
    padding:   5rem 1.5rem 3rem;
}
@media (min-width: 1024px) { .tgit-cat-hero__inner { padding: 6rem 2.5rem 3.5rem; } }

.tgit-cat-hero__breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.3rem; font-size: 0.73rem;
    color: rgba(255,245,220,0.6);
    margin-bottom: 0.875rem; list-style: none; padding: 0;
}
.tgit-cat-hero__breadcrumb a {
    display: inline-flex; align-items: center; gap: 0.2rem;
    color: rgba(255,245,220,0.6); text-decoration: none; transition: color 0.15s;
}
.tgit-cat-hero__breadcrumb a:hover { color: #F5C96A; }

.tgit-cat-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: #F5C96A; margin: 0 0 0.5rem;
}
.tgit-cat-hero__title {
    font-family: var(--tgit-font-serif, Georgia, serif);
    font-size:   clamp(1.875rem, 4.5vw, 3.5rem);
    font-weight: 700; color: #FFFDF7;
    line-height: 1.1; margin: 0 0 0.75rem;
    text-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.tgit-cat-hero__desc {
    font-size: 0.9rem; color: rgba(255,245,220,0.72);
    max-width: 52ch; line-height: 1.65; margin: 0 0 1.25rem;
}
.tgit-cat-hero__count {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.375rem 0.9rem;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: var(--tgit-radius-pill);
    font-size: 0.78rem; font-weight: 600;
    color: rgba(255,245,220,0.88);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* =============================================================
   2. FILTER BAR
   ============================================================= */
.tgit-cat-filters-wrap {
    position: sticky; top: 0; z-index: 50;
    background: #FFFEFB;
    border-bottom: 1px solid var(--tgit-border);
    box-shadow: 0 1px 8px rgba(100,80,50,0.06);
}
.tgit-cat-filters {
    max-width: 1400px; margin: 0 auto; padding: 0.75rem 1.5rem;
}
@media (min-width: 1024px) { .tgit-cat-filters { padding: 0.75rem 2.5rem; } }

.tgit-cat-filters__form {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.625rem;
}
.tgit-cat-filters__group {
    display: flex; flex-direction: column; gap: 0.2rem;
    flex: 1 1 130px; min-width: 120px;
}
.tgit-cat-filters__label {
    display: flex; align-items: center; gap: 0.2rem;
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--tgit-ink-muted);
}
.tgit-cat-filters__select {
    appearance: none; -webkit-appearance: none;
    padding: 0.45rem 1.875rem 0.45rem 0.7rem;
    background: #FFFEFB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%236B5E4E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.55rem center / 13px;
    border: 1.5px solid var(--tgit-border-mid);
    border-radius: 0.5rem;
    font-size: 0.8rem; color: var(--tgit-ink);
    cursor: pointer; width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tgit-cat-filters__select:focus {
    outline: none;
    border-color: var(--tgit-gold);
    box-shadow: 0 0 0 3px rgba(200,137,26,0.12);
}
.tgit-cat-filters__submit {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.5rem 1.125rem;
    background: var(--tgit-gold); color: #fff;
    border: none; border-radius: var(--tgit-radius-btn);
    font-size: 0.8rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; align-self: flex-end;
    transition: background 0.15s, transform 0.1s;
}
.tgit-cat-filters__submit:hover  { background: var(--tgit-gold-hover); }
.tgit-cat-filters__submit:active { transform: scale(0.97); }

.tgit-cat-filters__reset {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.75rem; font-weight: 500;
    color: var(--tgit-ink-muted);
    text-decoration: none; padding: 0.45rem 0.25rem;
    align-self: flex-end; transition: color 0.15s;
}
.tgit-cat-filters__reset:hover { color: #dc2626; }

/* =============================================================
   3. ARCHIVE GRID
   ============================================================= */
.tgit-cat-archive {
    background: var(--tgit-bg-page);
    padding:    2.5rem 0 4rem;
}
.tgit-cat-archive__inner {
    max-width: 1400px; margin: 0 auto; padding: 0 1.5rem;
}
@media (min-width: 1024px) { .tgit-cat-archive__inner { padding: 0 2.5rem; } }

.tgit-cat-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.375rem;
}
@media (min-width: 640px)  { .tgit-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tgit-cat-grid { grid-template-columns: repeat(3, 1fr); } }

ul.products.tgit-loop-grid,
.woocommerce ul.products.tgit-loop-grid {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.375rem;
    list-style: none; padding: 0; margin: 0;
}
@media (min-width: 640px) {
    ul.products.tgit-loop-grid,
    .woocommerce ul.products.tgit-loop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    ul.products.tgit-loop-grid,
    .woocommerce ul.products.tgit-loop-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   4. TGIT-PKG-CARD  (taxonomy archive)
   ============================================================= */
.tgit-pkg-card {
    background:     var(--tgit-bg);
    border:         1px solid var(--tgit-border);
    border-radius:  var(--tgit-radius-card);
    overflow:       hidden;
    box-shadow:     var(--tgit-shadow-sm);
    display:        flex;
    flex-direction: column;
    transition:     transform 0.22s ease, box-shadow 0.22s ease;
}
.tgit-pkg-card:hover {
    transform:  translateY(-3px);
    box-shadow: var(--tgit-shadow-lg);
}

.tgit-pkg-card__img-wrap {
    position: relative; display: block;
    aspect-ratio: 16 / 10; overflow: hidden;
    background: var(--tgit-bg-subtle);
    text-decoration: none;
}
.tgit-pkg-card__img {
    width: 100%; height: 100%; object-fit: cover;
    display: block; transition: transform 0.4s ease;
}
.tgit-pkg-card:hover .tgit-pkg-card__img { transform: scale(1.04); }

.tgit-pkg-card__img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: var(--tgit-ink-muted);
}
.tgit-pkg-card__diff-badge {
    position: absolute; top: 0.7rem; right: 0.7rem;
    padding: 0.2rem 0.65rem; border-radius: var(--tgit-radius-pill);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
}

.tgit-pkg-card__body {
    padding: 1.125rem; display: flex; flex-direction: column;
    flex: 1; gap: 0.45rem;
}
.tgit-pkg-card__dest {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--tgit-gold); margin: 0;
}
.tgit-pkg-card__title {
    font-family: var(--tgit-font-serif, Georgia, serif);
    font-size: 1rem; font-weight: 700; line-height: 1.35;
    margin: 0; color: var(--tgit-ink);
}
.tgit-pkg-card__title a {
    color: inherit; text-decoration: none; transition: color 0.15s;
}
.tgit-pkg-card__title a:hover { color: var(--tgit-gold); }

.tgit-pkg-card__stats {
    display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.125rem;
}
.tgit-pkg-card__stat {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.72rem; color: var(--tgit-ink-soft);
    background: var(--tgit-bg-subtle);
    border: 1px solid var(--tgit-border);
    padding: 0.2rem 0.55rem; border-radius: var(--tgit-radius-pill);
}

.tgit-pkg-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; padding-top: 0.7rem;
    border-top: 1px solid var(--tgit-border);
    gap: 0.5rem;
}
.tgit-pkg-card__price {
    display: flex; align-items: baseline; gap: 0.2rem; flex-wrap: wrap;
}
.tgit-pkg-card__price-from,
.tgit-pkg-card__price-per { font-size: 0.68rem; color: var(--tgit-ink-muted); }
.tgit-pkg-card__price-amount {
    font-size: 1rem; font-weight: 700; color: var(--tgit-ink);
}
.tgit-pkg-card__cta {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.42rem 0.9rem;
    background: var(--tgit-gold-light);
    color: var(--tgit-gold-hover);
    border: 1px solid rgba(200,137,26,0.3);
    border-radius: var(--tgit-radius-btn);
    font-size: 0.76rem; font-weight: 700;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}
.tgit-pkg-card__cta:hover  { background: var(--tgit-gold); color: #fff; border-color: var(--tgit-gold); }
.tgit-pkg-card__cta:active { transform: scale(0.96); }

/* =============================================================
   5. GIT-TREK-CARD  (WooCommerce loop)
   ============================================================= */
.git-trek-card {
    background:     var(--tgit-bg);
    border:         1px solid var(--tgit-border);
    border-radius:  var(--tgit-radius-card);
    overflow:       hidden;
    box-shadow:     var(--tgit-shadow-sm);
    display:        flex !important;
    flex-direction: column;
    float:          none !important;
    width:          100% !important;
    margin:         0 !important;
    padding:        0 !important;
    transition:     transform 0.22s ease, box-shadow 0.22s ease;
}
.git-trek-card:hover {
    transform:  translateY(-3px);
    box-shadow: var(--tgit-shadow-lg);
}

/* Image area */
.git-card-img-wrap {
    position: relative; aspect-ratio: 16 / 10;
    overflow: hidden; background: var(--tgit-bg-subtle); flex-shrink: 0;
}
.git-card-img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block !important;
    transition: transform 0.4s ease;
}
.git-trek-card:hover .git-card-img { transform: scale(1.04); }

/* Badges */
.git-card-badges {
    position: absolute; top: 0.7rem; left: 0.7rem;
    display: flex; flex-wrap: wrap; gap: 0.3rem; z-index: 2;
}
.git-card-badge {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.6rem; border-radius: var(--tgit-radius-pill);
    font-size: 0.66rem; font-weight: 700; line-height: 1;
}
.git-badge-popular {
    background: rgba(255,255,255,0.92);
    color: #92600E;
    border: 1px solid rgba(200,137,26,0.25);
}
.git-badge-sale {
    background: var(--tgit-gold);
    color: #fff;
}
.git-badge-offbeat {
    background: rgba(255,255,255,0.88);
    color: #5C3D1A;
    border: 1px solid rgba(92,61,26,0.2);
}

/* Wishlist */
.git-card-wishlist {
    position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
    width: 1.875rem; height: 1.875rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--tgit-border-mid);
    border-radius: 50%;
    color: var(--tgit-ink-soft);
    text-decoration: none; font-size: 0.95rem;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.git-card-wishlist:hover {
    background: #fff; color: #e11d48; transform: scale(1.1);
}

/* Price overlay */
.git-card-img-price {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1.5rem 0.875rem 0.7rem;
    background: linear-gradient(to top, rgba(20,12,2,0.62) 0%, transparent 100%);
    display: flex; align-items: baseline; gap: 0.25rem;
}
.git-card-price-from {
    font-size: 0.62rem; font-weight: 600; color: rgba(255,245,210,0.75);
    text-transform: uppercase; letter-spacing: 0.07em;
}
.git-card-price-val {
    font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1;
}
.git-card-price-per { font-size: 0.62rem; color: rgba(255,245,210,0.65); }

/* Card body */
.git-card-body {
    padding: 0.9rem 1rem 1rem;
    display: flex; flex-direction: column; flex: 1; gap: 0.45rem;
}

/* Tags */
.git-card-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.git-card-tag {
    display: inline-flex; align-items: center; gap: 0.18rem;
    padding: 0.16rem 0.5rem; border-radius: var(--tgit-radius-pill);
    font-size: 0.66rem; font-weight: 600; line-height: 1;
}
.git-card-tag-region {
    background: #FEF3D8;
    color:      #92600E;
    border:     1px solid rgba(200,137,26,0.2);
}
.git-card-tag-duration {
    background: var(--tgit-bg-subtle);
    color:      var(--tgit-ink-soft);
    border:     1px solid var(--tgit-border);
}
.git-card-tag-easy     { background: #ECFDF5; color: #166534; border: 1px solid rgba(22,101,52,0.15); }
.git-card-tag-mod      { background: #FFFBEB; color: #92400E; border: 1px solid rgba(146,64,14,0.15); }
.git-card-tag-hard     { background: #FFF1F2; color: #9F1239; border: 1px solid rgba(159,18,57,0.15); }

/* Title row */
.git-card-title-row {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 0.5rem;
}
.git-card-title {
    font-family: var(--tgit-font-serif, Georgia, serif);
    font-size: 0.975rem; font-weight: 700; line-height: 1.35;
    color: var(--tgit-ink); text-decoration: none;
    flex: 1; transition: color 0.15s;
}
.git-card-title:hover { color: var(--tgit-gold); }

/* Rating */
.git-card-rating {
    display: flex; align-items: center; gap: 0.18rem; flex-shrink: 0;
}
.git-card-stars { display: flex; font-size: 0.68rem; color: var(--tgit-gold); }
.git-card-rating-val {
    font-size: 0.7rem; font-weight: 600; color: var(--tgit-ink-muted);
}

/* Stats */
.git-card-stats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.1rem; }
.git-card-stat {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.7rem; color: var(--tgit-ink-soft);
    background: var(--tgit-bg-subtle);
    border: 1px solid var(--tgit-border);
    padding: 0.18rem 0.5rem; border-radius: var(--tgit-radius-pill);
}
.git-card-stat .ti { font-size: 0.7rem; }
.git-card-stat-val { font-weight: 600; }

/* Footer */
.git-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; padding-top: 0.7rem;
    border-top: 1px solid var(--tgit-border); gap: 0.5rem;
}
.git-card-seats {
    display: inline-flex; align-items: center; gap: 0.22rem;
    font-size: 0.7rem; font-weight: 700; color: #C2410C;
}
.git-card-seats .ti { font-size: 0.72rem; }

.btn-view-trek {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.42rem 0.9rem;
    background: var(--tgit-gold-light);
    color: var(--tgit-gold-hover);
    border: 1px solid rgba(200,137,26,0.3);
    border-radius: var(--tgit-radius-btn);
    font-size: 0.76rem; font-weight: 700;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}
.btn-view-trek:hover  { background: var(--tgit-gold); color: #fff; border-color: var(--tgit-gold); }
.btn-view-trek:active { transform: scale(0.96); }

/* =============================================================
   6. PAGINATION
   ============================================================= */
.tgit-cat-pagination { margin-top: 3rem; display: flex; justify-content: center; }
.tgit-cat-pagination .page-numbers {
    list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0;
}
.tgit-cat-pagination .page-numbers li a,
.tgit-cat-pagination .page-numbers li span {
    display: flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding: 0 0.7rem;
    border: 1.5px solid var(--tgit-border-mid);
    border-radius: var(--tgit-radius-btn);
    font-size: 0.82rem; font-weight: 600;
    color: var(--tgit-ink-soft); text-decoration: none;
    background: var(--tgit-bg);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tgit-cat-pagination .page-numbers li a:hover {
    background: var(--tgit-bg-subtle);
    border-color: var(--tgit-gold);
    color: var(--tgit-gold);
}
.tgit-cat-pagination .page-numbers li span.current {
    background: var(--tgit-gold); color: #fff; border-color: var(--tgit-gold);
}

/* =============================================================
   7. EMPTY STATE
   ============================================================= */
.tgit-cat-empty {
    text-align: center; padding: 5rem 1rem; color: var(--tgit-ink-muted);
}
.tgit-cat-empty i    { font-size: 3rem; display: block; margin-bottom: 0.875rem; color: var(--tgit-gold-light); }
.tgit-cat-empty h3   { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--tgit-ink-soft); }
.tgit-cat-empty p    { font-size: 0.85rem; }
.tgit-cat-empty a    { color: var(--tgit-gold); text-decoration: underline; }

/* =============================================================
   8. REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    .git-trek-card, .git-card-img,
    .tgit-pkg-card, .tgit-pkg-card__img { transition: none; }
}