/* =============================================================
   TGIT Single Product Hero
   ============================================================= */

.tgit-product-hero {
    position:   relative;
    width:      100%;
    min-height: 70vh;
    display:    flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow:   hidden;

    /* Clears any WC wrapper padding above */
    margin-top: -1px;
}

/* ── Background layer ──────────────────────────────────────── */
.tgit-product-hero__bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}

.tgit-product-hero__bg-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center 30%;  /* favour sky/ridge over foreground */
    display:    block;
    transition: transform 8s ease;  /* subtle Ken Burns on load */
}

.tgit-product-hero:hover .tgit-product-hero__bg-img {
    transform: scale(1.03);
}

.tgit-product-hero__bg-fallback {
    width:      100%;
    height:     100%;
    background: linear-gradient(135deg, #1E1A14 0%, #3D3020 50%, #1E1A14 100%);
}

/* Gradient overlay — alpha driven by CSS variable */
.tgit-product-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, calc(var(--hero-overlay-opacity, 0.6) * 0.3))   0%,
        rgba(0, 0, 0, calc(var(--hero-overlay-opacity, 0.6) * 0.5))  40%,
        rgba(0, 0, 0, var(--hero-overlay-opacity, 0.6))              100%
    );
}

/* Topographic texture */
.tgit-product-hero__topo {
    position:   absolute;
    inset:      0;
    opacity:    0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cpath d='M0 200 Q100 150 200 200 T400 200' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Cpath d='M0 220 Q100 170 200 220 T400 220' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Cpath d='M0 240 Q100 190 200 240 T400 240' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Cpath d='M0 180 Q100 130 200 180 T400 180' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Cpath d='M0 160 Q100 110 200 160 T400 160' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    pointer-events: none;
}

/* ── Content ───────────────────────────────────────────────── */
.tgit-product-hero__inner {
    position:   relative;
    z-index:    10;
    max-width:  1400px;
    width:      100%;
    margin:     0 auto;
    padding:    6rem 1.5rem 3rem;
}

@media (min-width: 640px) {
    .tgit-product-hero__inner { padding: 7rem 2rem 3.5rem; }
}
@media (min-width: 1024px) {
    .tgit-product-hero__inner { padding: 8rem 2.5rem 4rem; }
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.tgit-product-hero__breadcrumb {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.25rem;
    font-size:   0.75rem;
    color:       rgba(255, 255, 255, 0.6);
    margin-bottom: 1.25rem;
}

.tgit-product-hero__breadcrumb a {
    display:     inline-flex;
    align-items: center;
    gap:         0.25rem;
    color:       rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition:  color 0.15s;
}
.tgit-product-hero__breadcrumb a:hover { color: #D4961E; }

.tgit-product-hero__breadcrumb-sep {
    font-size: 0.65rem;
    opacity:   0.4;
}

/* ── Eyebrow ───────────────────────────────────────────────── */
.tgit-product-hero__eyebrow {
    display:     inline-flex;
    align-items: center;
    gap:         0.375rem;
    font-size:   0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:       #D4961E;
    margin-bottom: 0.75rem;
}

/* ── Title ─────────────────────────────────────────────────── */
.tgit-product-hero__title {
    font-family: var(--tgit-font-serif, Georgia, serif);
    font-weight: 700;
    color:       #FFFFFF;
    line-height: 1.08;
    font-size:   clamp(2rem, 5vw, 4rem);
    max-width:   20ch;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
    margin:      0 0 2rem;
}

/* ── Stat pills ────────────────────────────────────────────── */
.tgit-product-hero__stats {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.625rem;
}

.tgit-product-hero__stat {
    display:      flex;
    align-items:  center;
    gap:          0.5rem;
    padding:      0.5rem 1rem;
    background:   rgba(255, 255, 255, 0.1);
    border:       1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tgit-product-hero__stat-icon {
    font-size: 0.9rem;
    color:     rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.tgit-product-hero__stat-value {
    font-size:   0.9rem;
    font-weight: 700;
    color:       #FFFFFF;
    line-height: 1;
}

.tgit-product-hero__stat-label {
    font-size:  0.7rem;
    font-weight: 500;
    color:      rgba(255, 255, 255, 0.55);
    line-height: 1;
}

/* Price pill gets gold accent */
.tgit-product-hero__stat--price {
    background:  rgba(212, 150, 30, 0.2);
    border-color: rgba(212, 150, 30, 0.45);
}
.tgit-product-hero__stat--price .tgit-product-hero__stat-value {
    color: #E5B643;
}

/* ── Scroll cue ────────────────────────────────────────────── */
.tgit-product-hero__scroll-cue {
    position:  absolute;
    bottom:    1.5rem;
    left:      50%;
    transform: translateX(-50%);
    z-index:   10;
    color:     rgba(255, 255, 255, 0.4);
    font-size: 1.25rem;
    animation: tgit-bounce 2s ease-in-out infinite;
}

@keyframes tgit-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tgit-product-hero__bg-img   { transition: none; }
    .tgit-product-hero__scroll-cue { animation: none; }
}