/* ==========================================================================
   That Hockey — custom theme overrides
   Hand-written CSS layered on top of css-output/bundle.css.
   Brand: minimal black & white streetwear, edgy hockey-culture voice,
   with a red accent used sparingly (badges, highlights, hover states).
   Matches thathockey.co: serif wordmark, heavy display headlines,
   full-height hero with bottom-left overlay text.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Playfair+Display:wght@500;600&family=Inter:wght@400;500;600;700&display=swap');

:root,
[data-bs-theme="light"] {
    /* Brand palette */
    --hockey-black: #0d0d0d;
    --hockey-gray: #f4f4f4;
    --hockey-steel: #6c757d;
    --hockey-red: #ffffff;
    --hockey-red-dark: rgba(255, 255, 255, 0.8);

    /* Re-map Bootstrap theme colors */
    --bs-primary: var(--hockey-black);
    --bs-primary-rgb: 13, 13, 13;
    --bs-secondary: var(--hockey-black);
    --bs-secondary-rgb: 13, 13, 13;

    --bs-link-color: var(--hockey-black);
    --bs-link-color-rgb: 13, 13, 13;
    --bs-link-hover-color: var(--hockey-black);
    --bs-link-hover-color-rgb: 13, 13, 13;

    --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-heading-color: var(--hockey-black);
}

/* Headings + display text use a heavy display sans (not condensed) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Archivo Black', 'Inter', sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 400;
}

/* ----- Buttons -------------------------------------------------------- */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--hockey-black);
    --bs-btn-border-color: var(--hockey-black);
    --bs-btn-hover-color: var(--hockey-black);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-focus-shadow-rgb: 13, 13, 13;
    --bs-btn-active-color: var(--hockey-black);
    --bs-btn-active-bg: rgba(255, 255, 255, 0.85);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.85);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--hockey-black);
    --bs-btn-disabled-border-color: var(--hockey-black);
}

.btn-primary,
.btn-outline-light,
.btn-outline-primary,
.btn-secondary {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.btn-outline-primary {
    --bs-btn-color: var(--hockey-black);
    --bs-btn-border-color: var(--hockey-black);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--hockey-black);
    --bs-btn-hover-border-color: var(--hockey-black);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--hockey-black);
    --bs-btn-active-border-color: var(--hockey-black);
    --bs-btn-disabled-color: var(--hockey-black);
    --bs-btn-disabled-border-color: var(--hockey-black);
}

.btn-secondary {
    --bs-btn-color: var(--hockey-black);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--hockey-black);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.85);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.85);
    --bs-btn-active-bg: rgba(255, 255, 255, 0.7);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.7);
}

.btn-outline-light {
    --bs-btn-hover-color: var(--hockey-black);
}

/* ----- Navbar ----------------------------------------------------------- */

#wrapper-navbar nav.navbar.bg-dark {
    --bs-navbar-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    background-color: var(--hockey-black) !important;
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.navbar-row {
    position: relative;
}

#wrapper-navbar .navbar-brand {
    font-family: 'Playfair Display', 'Inter', serif;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: normal;
    text-transform: none;
    color: #fff !important;
    margin: 0;
}

.navbar-brand-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* WordPress custom-logo (used on the live site): the uploaded wordmark is
   large (1717x329) and rendered ~124px tall inside a ~61px navbar, so it
   overflowed top and bottom. Cap its height so it sits inside the bar. */
#wrapper-navbar .custom-logo-link {
    display: inline-block;
    line-height: 0;
}

#wrapper-navbar .custom-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 38px;
}

@media (max-width: 575.98px) {
    #wrapper-navbar .custom-logo {
        max-height: 30px;
    }
}

#wrapper-navbar .navbar-nav .nav-link {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

#wrapper-navbar .navbar-nav.navbar-nav-inline {
    flex-direction: row;
    gap: 1.5rem;
}

#wrapper-navbar .navbar-nav .nav-link.active,
#wrapper-navbar .navbar-nav .nav-link:hover {
    color: #fff !important;
}

#wrapper-navbar .navbar-icon-link {
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    position: relative;
}

#wrapper-navbar .navbar-icon-link:hover {
    color: var(--hockey-red);
}

#wrapper-navbar .navbar-icon-link .cart-count {
    position: absolute;
    top: -6px;
    right: -10px;
    background-color: #fff;
    color: var(--hockey-black);
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    line-height: 1;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

#wrapper-navbar .navbar-toggler {
    border: none;
    padding: 0;
    box-shadow: none !important;
}

/* ----- Hero -------------------------------------------------------------- */

.hockey-hero {
    position: relative;
    background-color: var(--hockey-black);
    color: #fff;
    padding: 5rem 0;
    overflow: hidden;
}

.hockey-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 40px);
    pointer-events: none;
}

/* Full-height homepage hero, content pinned bottom-left */
.hockey-hero-full {
    min-height: 88vh;
    display: flex;
    align-items: flex-end;
    padding-top: 7rem;
    padding-bottom: 3.5rem;
}

.hockey-hero .hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.75rem;
}

.hockey-hero h1, .hockey-hero h2, .hockey-hero h3,
.hockey-hero h4, .hockey-hero h5, .hockey-hero h6,
.hockey-hero .display-1, .hockey-hero .display-2, .hockey-hero .display-3,
.hockey-hero .display-4, .hockey-hero .display-5, .hockey-hero .display-6 {
    color: #fff;
}

.hockey-hero .display-2,
.hockey-hero .display-3 {
    font-weight: 400;
    line-height: 1.05;
}

.hockey-hero .lead {
    color: rgba(255, 255, 255, 0.75);
    max-width: 32rem;
}

.hockey-hero .accent-bar {
    display: inline-block;
    width: 64px;
    height: 6px;
    background: var(--hockey-red);
    margin-bottom: 1.25rem;
}

@media (max-width: 575.98px) {
    .hockey-hero .display-2,
    .hockey-hero .display-3 {
        font-size: 2.5rem;
    }
}

/* ----- Homepage hero (photo, full-bleed) ---------------------------------- */

.th-home-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: #fff;
    background-color: var(--hockey-black);
}

.th-home-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.th-home-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.th-home-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.85) 100%);
}

.th-home-hero-content {
    position: relative;
    z-index: 2;
    padding: 0 1.5rem 4rem;
    max-width: 42rem;
    width: 100%;
}

.th-home-kicker {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.75rem;
}

.th-home-hero-content h1 {
    font-size: clamp(3rem, 9vw, 6rem);
    color: #fff;
    line-height: 1;
    margin-bottom: 1rem;
}

.th-home-hero-content p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 28rem;
    margin-bottom: 1.5rem;
}

.th-home-btn {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    padding: 0.6rem 1.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.th-home-btn:hover {
    background-color: #fff;
    color: var(--hockey-black);
}

/* ----- Latest Gear (homepage product grid) -------------------------------- */

.th-home-products {
    background-color: var(--hockey-black);
    padding: 4rem 0;
}

.th-home-products .th-section-head p {
    color: rgba(255, 255, 255, 0.4);
}

.th-home-products .th-section-head h2 {
    color: #fff;
}

.th-section-head {
    text-align: center;
    margin-bottom: 2.5rem;
}

.th-section-head p {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.7rem;
    color: var(--hockey-steel);
    margin-bottom: 0.5rem;
}

.th-section-head h2 {
    margin: 0;
}

.th-home-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

@media (max-width: 767.98px) {
    .th-home-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
    }
}

.th-home-product-card {
    display: block;
    text-decoration: none;
    color: #fff;
    background-color: #0d0d0d;
    border: none;
    position: relative;
    transition: background-color 0.2s ease;
}

.th-home-product-card:hover {
    background-color: #161616;
    border-color: transparent;
    transform: none;
}

/* Product number — top-left corner */
.th-home-product-card::before {
    content: attr(data-num);
    position: absolute;
    top: 0.75rem;
    left: 0.85rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.2);
    z-index: 2;
    pointer-events: none;
}

.th-home-product-image {
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background-color: #f4f4f4;
}

.th-home-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.th-home-product-card:hover .th-home-product-image img {
    transform: scale(1.06);
}

/* Second-image hover flip: the hover image is absolutely overlaid on the
   primary and fades in on hover. Added by the template only when the product
   has a gallery image, so products without one simply don't flip. */
.th-home-product-image img.th-card-img-hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.th-home-product-card:hover .th-home-product-image img.th-card-img-hover {
    opacity: 1;
}

/* "View Product" bar slides up on image hover */
.th-home-product-image::after {
    content: "VIEW PRODUCT \2192";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(13, 13, 13, 0.88);
    color: #fff;
    text-align: center;
    padding: 0.65rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: translateY(100%);
    transition: transform 0.22s ease;
}

.th-home-product-card:hover .th-home-product-image::after {
    transform: translateY(0);
}

.th-home-product-card h3 {
    font-size: 0.8rem;
    text-align: center;
    padding: 0.75rem 0.5rem 0.25rem;
    margin: 0;
    letter-spacing: 0.04em;
    color: #fff;
}

.th-home-product-info {
    padding: 0 0.5rem 0.85rem;
    text-align: center;
}

.th-product-price {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--hockey-red);
}

/* "NEW DROP" badge */
.th-product-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: var(--hockey-black);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    z-index: 2;
    pointer-events: none;
}

/* ----- Feature / content sections ---------------------------------------- */

.hockey-section-light {
    background-color: var(--hockey-gray);
}

.hockey-feature-card {
    border: 1px solid #e5e5e5;
    border-radius: 0;
    box-shadow: none;
    height: 100%;
    transition: transform 0.15s ease, border-color 0.15s ease;
    background-color: #fff;
}

.hockey-feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--hockey-black);
}

.hockey-feature-card .feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--hockey-black);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.hockey-cta {
    background-color: var(--hockey-black);
    color: #fff;
}

.hockey-cta .display-5 {
    font-weight: 400;
}

/* ----- Featured Collections ------------------------------------------------
   Selectors cover both the local raw-HTML build (.th-collections /
   .th-collection-grid / .th-collection-overlay) AND the live ACF template
   (.th-home-collections / .th-collection-cards / plain div>span+h3). */

.th-collections,
.th-home-collections {
    background-color: var(--hockey-black);
    padding-bottom: 0;
}

.th-collections .th-section-head,
.th-home-collections .th-section-head {
    padding-top: 4rem;
    padding-bottom: 2rem;
}

.th-collections .th-section-head p,
.th-home-collections .th-section-head p {
    color: rgba(255,255,255,0.4);
}

.th-collections .th-section-head h2,
.th-home-collections .th-section-head h2 {
    color: #fff;
}

.th-collection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}

/* Live ACF collection grid: auto-fit so it looks right whether there's one
   collection or several (repeat(2) would strand a single card at half width). */
.th-collection-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2px;
}

@media (max-width: 767.98px) {
    .th-collection-grid,
    .th-collection-cards {
        grid-template-columns: repeat(1, 1fr);
    }
}

.th-collection-card {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 65vh;
    text-decoration: none;
}

.th-collection-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.th-collection-card:hover img {
    transform: scale(1.04);
}

.th-collection-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.72) 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 2.5rem;
}

.th-collection-label {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0.04em;
    line-height: 1;
}

.th-collection-cta {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-top: 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.35);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.th-collection-card:hover .th-collection-cta {
    color: #fff;
    border-color: #fff;
}

/* Live ACF collection card inner structure: <a><img><div><span>Shop</span>
   <h3>Label</h3></div></a>. Style the plain div as the overlay, h3 as the
   big label, span as the CTA — mirroring the .th-collection-overlay design. */
.th-collection-cards .th-collection-card > div {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.72) 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 2.5rem;
}

.th-collection-cards .th-collection-card h3 {
    order: 2;
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0.04em;
    line-height: 1;
    margin: 0;
}

.th-collection-cards .th-collection-card span {
    order: 1;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.6rem;
    transition: color 0.2s ease;
}

.th-collection-cards .th-collection-card:hover span {
    color: #fff;
}

/* ----- Homepage "About / The Brand" section (live ACF .th-home-about) -------
   Two-column layout: image left, text (+ Shop Now button) right. Dark to match
   the rest of the page — its .th-home-kicker is white, so it needs a dark bg to
   be visible (same situation as the newsletter). Image comes first in the DOM,
   so on desktop it lands in the left grid column and stacks on top on mobile. */
.th-home-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--hockey-black);
}

.th-home-about-image {
    min-height: 460px;
    overflow: hidden;
}

.th-home-about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s ease;
}

/* Subtle zoom on hover — a small, slow "classy" touch, not a snap. */
.th-home-about:hover .th-home-about-image img {
    transform: scale(1.05);
}

.th-home-about-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 3.5rem clamp(1.5rem, 5vw, 5rem);
}

.th-home-about-text .th-home-kicker {
    margin-bottom: 1rem;
}

.th-home-about-text h2 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.75rem, 4vw, 3rem);
    text-transform: uppercase;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 1.25rem;
}

.th-home-about-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0;
}

.th-home-about-text .th-home-btn {
    margin-top: 1.75rem;
}

/* Classy scroll reveal: the image eases in from the left and the copy from the
   right, converging as the section enters view. Overrides the generic .th-reveal
   (fade + translateY) with a directional, slightly slower easing. The sitewide
   scroll-reveal.js adds .th-reveal, then .is-visible when it scrolls into view. */
.th-home-about-image.th-reveal {
    opacity: 0;
    transform: translateX(-48px);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.th-home-about-text.th-reveal {
    opacity: 0;
    transform: translateX(48px);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s,
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}

.th-home-about-image.th-reveal.is-visible,
.th-home-about-text.th-reveal.is-visible {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .th-home-about-image.th-reveal,
    .th-home-about-text.th-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .th-home-about:hover .th-home-about-image img {
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .th-home-about {
        grid-template-columns: 1fr;
    }
    .th-home-about-image {
        min-height: 300px;
    }
    /* On stacked mobile, a horizontal slide reads oddly — fade + rise instead. */
    .th-home-about-image.th-reveal,
    .th-home-about-text.th-reveal {
        transform: translateY(28px);
    }
    .th-home-about-image.th-reveal.is-visible,
    .th-home-about-text.th-reveal.is-visible {
        transform: translateY(0);
    }
}

/* ----- Brand Statement ----------------------------------------------------- */

.th-brand-statement {
    background-color: var(--hockey-black);
    color: #fff;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.th-brand-statement::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 40px);
    pointer-events: none;
}

.th-brand-statement .container {
    position: relative;
    z-index: 1;
    max-width: 54rem;
}

.th-section-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 1.25rem;
}

.th-brand-headline {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-transform: uppercase;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 1.5rem;
}

.th-brand-copy {
    color: rgba(255,255,255,0.7);
    font-size: 1.05rem;
    max-width: 38rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

/* ----- Newsletter ---------------------------------------------------------- */

.th-newsletter {
    background-color: var(--hockey-gray);
    padding: 4.5rem 0;
    text-align: center;
}

.th-newsletter-headline {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    text-transform: uppercase;
    color: var(--hockey-black);
    margin-bottom: 0.5rem;
}

.th-newsletter-sub {
    color: var(--hockey-steel);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.th-newsletter-form {
    display: flex;
    gap: 0;
    max-width: 440px;
    margin: 0 auto;
}

.th-newsletter-input {
    flex: 1;
    border: 1px solid #d0d0d0;
    border-right: none;
    padding: 0.7rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    background-color: #fff;
    color: var(--hockey-black);
    outline: none;
    transition: border-color 0.15s ease;
}

.th-newsletter-input:focus {
    border-color: var(--hockey-black);
}

.th-newsletter-btn {
    background-color: var(--hockey-black);
    color: #fff;
    border: 1px solid var(--hockey-black);
    padding: 0.7rem 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.th-newsletter-btn:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--hockey-black);
}

@media (max-width: 480px) {
    .th-newsletter-form {
        flex-direction: column;
    }
    .th-newsletter-input {
        border-right: 1px solid #d0d0d0;
        border-bottom: none;
    }
}

/* Live ACF newsletter (.th-home-newsletter): plain h2/p/input/button markup,
   with a white .th-home-kicker — i.e. designed for a dark background. Style it
   dark so it flows with the rest of the page instead of sitting unstyled. */
.th-home-newsletter {
    background-color: var(--hockey-black);
    padding: 4.5rem 1.5rem;
    text-align: center;
}

.th-home-newsletter .th-home-kicker {
    margin-bottom: 0.75rem;
}

.th-home-newsletter h2 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.5rem;
}

.th-home-newsletter > p:not(.th-home-kicker) {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.th-home-newsletter .th-newsletter-form {
    display: flex;
    gap: 0;
    max-width: 440px;
    margin: 0 auto;
}

.th-home-newsletter input {
    flex: 1;
    min-width: 0;
    border: 1px solid #fff;
    border-right: none;
    padding: 0.7rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    background-color: #fff;
    color: var(--hockey-black);
    outline: none;
}

.th-home-newsletter button {
    background-color: var(--hockey-black);
    color: #fff;
    border: 1px solid #fff;
    padding: 0.7rem 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.th-home-newsletter button:hover {
    background-color: #fff;
    color: var(--hockey-black);
}

@media (max-width: 480px) {
    .th-home-newsletter .th-newsletter-form {
        flex-direction: column;
    }
    .th-home-newsletter input {
        border-right: 1px solid #fff;
        border-bottom: none;
    }
}

/* ----- Footer -------------------------------------------------------------- */

.th-footer {
    background-color: var(--hockey-black);
    color: rgba(255,255,255,0.6);
    padding: 4rem 0 2rem;
}

.th-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.th-footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    display: block;
    margin-bottom: 0.6rem;
    letter-spacing: normal;
}

.th-footer-tagline {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    margin: 0;
    max-width: 18rem;
}

.th-footer-links {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}

.th-footer-col h4 {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 1rem;
}

.th-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.th-footer-col ul a {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.15s ease;
}

.th-footer-col ul a:hover {
    color: #fff;
}

.th-footer-social li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.th-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.5rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
}

/* ----- Cart Drawer --------------------------------------------------------- */

body.th-drawer-open { overflow: hidden; }

.th-cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}

.th-cart-drawer.is-open { pointer-events: auto; }

.th-cart-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.th-cart-drawer.is-open .th-cart-overlay { opacity: 1; }

.th-cart-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 100vw;
    background: var(--hockey-black);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.6);
}

.th-cart-drawer.is-open .th-cart-panel { transform: translateX(0); }

/* Header */
.th-cart-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.th-cart-panel-header h2 {
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #fff;
    margin: 0;
}

.th-cart-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}

.th-cart-close:hover { color: #fff; }

/* Body */
.th-cart-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.th-cart-loading,
.th-cart-empty {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
    text-align: center;
    padding: 2.5rem 0;
    margin: 0;
}

/* Item list */
.th-cart-item-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.th-cart-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: opacity 0.2s ease;
}

.th-cart-item-img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    background: #f4f4f4;
    flex-shrink: 0;
}

.th-cart-item-img-placeholder {
    width: 68px;
    height: 68px;
    background: #1a1a1a;
    flex-shrink: 0;
}

.th-cart-item-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.th-cart-item-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.th-cart-item-qty {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
}

.th-cart-item-price {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hockey-red);
}

.th-cart-remove {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.25);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.th-cart-remove:hover { color: #fff; }

/* Footer */
.th-cart-panel-footer {
    padding: 1.25rem 1.5rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex-shrink: 0;
}

.th-cart-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 0.25rem;
}

.th-cart-btn {
    display: block;
    text-align: center;
    padding: 0.8rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.th-cart-btn-primary {
    background: #fff;
    color: var(--hockey-black);
    border: 1px solid #fff;
}

.th-cart-btn-primary:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.85);
    color: var(--hockey-black);
}

.th-cart-btn-secondary {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.th-cart-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* ----- WooCommerce brand overrides ---------------------------------------- */

/* Breadcrumb */
.woocommerce-breadcrumb {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hockey-steel) !important;
}

.woocommerce-breadcrumb a {
    color: var(--hockey-steel) !important;
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    color: var(--hockey-black) !important;
}

/* Prices — everywhere */
.woocommerce .woocommerce-Price-amount.amount {
    color: var(--hockey-black);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--hockey-black) !important;
    font-size: 1.1rem;
}

/* Shop archive — product cards */
.woocommerce ul.products li.product a img {
    border: none;
    box-shadow: none;
    background: #f4f4f4;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hockey-black);
    padding: 0.75rem 0 0.2rem;
}

.woocommerce ul.products li.product .price {
    font-size: 0.82rem;
    color: var(--hockey-black);
    margin-bottom: 0.6rem;
}

/* Shop/loop "Add to cart" button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
    display: block;
    width: 100%;
    background-color: var(--hockey-black) !important;
    color: #fff !important;
    border: 1px solid var(--hockey-black) !important;
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 0.65rem !important;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
    background-color: #fff !important;
    color: var(--hockey-black) !important;
    border-color: var(--hockey-black) !important;
}

/* Single product — Add to cart */
.woocommerce div.product form.cart .single_add_to_cart_button {
    background-color: var(--hockey-black) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.85rem 2.5rem;
    transition: background-color 0.15s ease !important;
    box-shadow: none !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background-color: #2a2a2a !important;
    color: #fff !important;
}

/* Single product — quantity input */
.woocommerce div.product form.cart .qty {
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-align: center;
}

/* Single product — tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hockey-steel);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--hockey-black);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
    background-color: var(--hockey-black);
}

/* Remove WooCommerce blue from notices */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--hockey-black) !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--hockey-black) !important;
}

/* ----- Generic page title banner (Cart, Checkout, My Account, etc.) ------ */

.th-page-title-banner {
    background-color: var(--hockey-black);
    color: rgba(255, 255, 255, 0.85);
}

.th-page-title-banner h1 {
    color: #fff;
    margin: 0;
}

/* ==========================================================================
   Shop archive — dark big-card grid
   ========================================================================== */

/* Dark wrapper, no top margin */
.post-type-archive-product #woocommerce-wrapper,
.tax-product_cat #woocommerce-wrapper {
    background-color: var(--hockey-black);
    padding-bottom: 4rem;
}

/* Breadcrumb on dark */
.post-type-archive-product .woocommerce-breadcrumb,
.tax-product_cat .woocommerce-breadcrumb {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    padding-top: 1.25rem;
    padding-bottom: 0;
    margin-bottom: 0;
}

.post-type-archive-product .woocommerce-breadcrumb a,
.tax-product_cat .woocommerce-breadcrumb a {
    color: rgba(255, 255, 255, 0.35) !important;
    text-decoration: none;
}

/* Shop title heading */
.post-type-archive-product .woocommerce-products-header__title,
.post-type-archive-product h1.page-title,
.tax-product_cat h1.page-title {
    color: #fff;
    padding: 1.75rem 0 1.25rem;
    margin-bottom: 0;
}

/* Result count + ordering */
.post-type-archive-product .woocommerce-result-count,
.tax-product_cat .woocommerce-result-count {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.post-type-archive-product .woocommerce-ordering select,
.tax-product_cat .woocommerce-ordering select {
    background-color: #1a1a1a;
    color: rgba(255, 255, 255, 0.6);
    border-color: #333;
    border-radius: 0;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

/* ----- Product grid layout ------------------------------------------------ */

.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
    counter-reset: shop-card;
}

/* WooCommerce's own layout.css still adds an old float-clearfix hack
   (content:" "; display:table) to ul.products::before/::after. Now that the
   list is a grid, that pseudo-element still generates a real box and becomes
   an actual (invisible) grid item — a phantom first card that pushes every
   real product over by one column. Kill it now that floats aren't in play. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 767.98px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* ----- Individual card (class added via content-product.php) -------------- */

.th-shop-card {
    background: var(--hockey-black) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
    position: relative;
    counter-increment: shop-card;
    display: flex !important;
    flex-direction: column;
    border: none !important;
    box-shadow: none !important;
}

/* Product number — top-left of the image area */
.th-shop-card::before {
    content: counter(shop-card, decimal-leading-zero);
    position: absolute;
    top: 0.7rem;
    left: 0.8rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(0, 0, 0, 0.3);
    z-index: 2;
    pointer-events: none;
}

/* Image link — 1:1 square, light bg for product art */
.th-shop-card-img {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #f4f4f4;
    text-decoration: none !important;
}

.th-shop-card-img img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #f4f4f4;
    transition: transform 0.4s ease;
    max-width: none !important;
    border: none !important;
    box-shadow: none !important;
}

.th-shop-card:hover .th-shop-card-img img {
    transform: scale(1.05);
}

/* Second-image hover flip for shop/related cards (see homepage note above). */
.th-shop-card-img img.th-card-img-hover {
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.th-shop-card:hover .th-shop-card-img img.th-card-img-hover {
    opacity: 1;
}

/* "VIEW PRODUCT →" overlay slides up on hover */
.th-shop-card-img::after {
    content: "VIEW PRODUCT \2192";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(13, 13, 13, 0.88);
    color: #fff;
    text-align: center;
    padding: 0.65rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: translateY(100%);
    transition: transform 0.22s ease;
    pointer-events: none;
}

.th-shop-card:hover .th-shop-card-img::after {
    transform: translateY(0);
}

/* Badge (featured = New Drop) */
.th-shop-card .th-product-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: var(--hockey-black);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.28rem 0.5rem;
    z-index: 3;
}

/* Card body — dark strip below image */
.th-shop-card-body {
    background: var(--hockey-black);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.th-shop-card-info {
    padding: 0.75rem 0.75rem 0.4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.th-shop-card-title {
    font-family: 'Archivo Black', sans-serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}

.th-shop-card-title a {
    color: #fff !important;
    text-decoration: none !important;
}

.th-shop-card-title a:hover {
    color: rgba(255, 255, 255, 0.75) !important;
}

.th-shop-card-price {
    display: block;
    font-size: 0.78rem;
}

.th-shop-card-price .woocommerce-Price-amount,
.th-shop-card-price .woocommerce-Price-amount.amount {
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

/* Add to Cart button */
.th-shop-card-body a.button,
.th-shop-card-body .button {
    display: block !important;
    width: 100% !important;
    background-color: var(--hockey-black) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 0.7rem !important;
    text-align: center !important;
    margin: 0 !important;
    text-decoration: none !important;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease !important;
    cursor: pointer;
    box-shadow: none !important;
}

.th-shop-card-body a.button:hover,
.th-shop-card-body .button:hover {
    color: #fff !important;
    background-color: #1a1a1a !important;
    border-top-color: rgba(255, 255, 255, 0.2) !important;
}

/* ==========================================================================
   Single Product (PDP) — dark theme to match the rest of the site

   NOTE: this theme does not opt into WooCommerce's default frontend styles
   (add_theme_support('woocommerce') without woocommerce_default_styles), so
   the classic PDP template ships with *zero* layout CSS out of the box —
   everything below including the gallery/summary grid is hand-built, not
   just a color reskin of existing WooCommerce layout rules.
   ========================================================================== */

body.single-product #woocommerce-wrapper {
    background-color: var(--hockey-black);
    padding-bottom: 4.5rem;
}

body.single-product .woocommerce-breadcrumb {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    padding-top: 1.5rem;
    margin-bottom: 0;
}

body.single-product .woocommerce-breadcrumb a {
    color: rgba(255, 255, 255, 0.35) !important;
}

body.single-product .woocommerce-breadcrumb a:hover {
    color: #fff !important;
}

/* Gallery + summary grid — the actual structural layout the theme never provided */
body.single-product div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3.5rem;
    padding: 2.5rem 0 0;
    align-items: start;
}

@media (max-width: 767.98px) {
    body.single-product div.product {
        grid-template-columns: 1fr;
        row-gap: 1.5rem;
    }
}

body.single-product div.product > .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
}

body.single-product div.product > .summary.entry-summary {
    grid-column: 2;
    grid-row: 1;
}

/* Tabs + related products span the full width, below the grid row */
body.single-product div.product > .woocommerce-tabs.wc-tabs-wrapper,
body.single-product div.product > section.related.products {
    grid-column: 1 / -1;
}

/* Gallery */
/* Neutralize WooCommerce's own woocommerce-layout.css float/width rules
   (div.images / div.summary { float; width:48% }) — that stylesheet still
   loads even though the theme largely ignores it, and it fights the grid
   layout above by shrinking both columns to 48% of their grid track. */
body.single-product .woocommerce-product-gallery,
body.single-product .summary.entry-summary {
    float: none !important;
    width: 100% !important;
    clear: none !important;
}

body.single-product .woocommerce-product-gallery {
    background-color: #f4f4f4;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

body.single-product .woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image a {
    display: block;
    width: 100%;
    height: 100%;
}

body.single-product .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.single-product .flex-control-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-left: 0;
}

body.single-product .flex-control-thumbs li {
    list-style: none;
    width: 64px;
    aspect-ratio: 1 / 1;
    background-color: #f4f4f4;
}

body.single-product .flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

body.single-product .flex-control-thumbs li img.flex-active,
body.single-product .flex-control-thumbs li img:hover {
    opacity: 1;
}

/* Summary column */
body.single-product .product_title.entry-title {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: 1rem;
}

body.single-product div.product p.price,
body.single-product div.product span.price,
body.single-product div.product .price .woocommerce-Price-amount.amount {
    color: var(--hockey-red) !important;
    font-size: 1.2rem;
}

body.single-product .woocommerce-product-details__short-description {
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin: 1.25rem 0 1.75rem;
}

/* Add-to-cart row — simple products.
   Variable products get class="variations_form cart" on the same <form>, and
   their qty+button pair lives one level deeper (see "Variable products" below),
   so this flex treatment must NOT apply to .variations_form or it flattens the
   variation dropdown table into the same row as the button. */
body.single-product div.product form.cart:not(.variations_form) {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

body.single-product div.product form.cart .quantity {
    flex: 0 0 auto;
    margin: 0;
}

body.single-product div.product form.cart .qty {
    width: 68px;
    height: 100%;
    text-align: center;
    padding: 0.85rem 0.5rem;
}

/* Dark page needs a light Add to Cart button (inverse of the light-page button) */
body.single-product div.product form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    background-color: #fff !important;
    color: var(--hockey-black) !important;
    padding: 0.85rem 2.5rem;
    letter-spacing: 0.14em;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

body.single-product div.product form.cart .single_add_to_cart_button:hover {
    background-color: rgba(255, 255, 255, 0.85) !important;
    color: var(--hockey-black) !important;
}

/* Button is disabled until a valid variation is chosen — make that visually
   obvious instead of showing the same crisp white "ready to buy" button. */
body.single-product div.product form.cart .single_add_to_cart_button.disabled,
body.single-product div.product form.cart .single_add_to_cart_button:disabled {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: not-allowed;
}

/* ----- Variable products (size/color dropdowns) ----- */

body.single-product div.product table.variations {
    width: 100%;
    margin-bottom: 1.25rem;
}

body.single-product div.product table.variations tr {
    display: block;
    margin-bottom: 0.85rem;
}

body.single-product div.product table.variations th.label {
    display: block;
    text-align: left;
    padding: 0 0 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

body.single-product div.product table.variations td.value {
    display: block;
    padding: 0;
}

body.single-product div.product table.variations select {
    width: 100%;
    max-width: 320px;
}

/* ----- Variation swatches (built by js/variation-swatches.js) -----
   The native <select> is hidden only once its swatches exist (the JS adds
   .th-swatch-source), so a no-JS visitor still gets the styled dropdown.
   Selector is deliberately deep to outweigh WooCommerce core's own
   `.woocommerce div.product form.cart .variations select` (which sets
   display:inline-block at a higher specificity than a shorter rule would). */
body.single-product div.product form.cart .variations select.th-swatch-source {
    display: none;
}

body.single-product .th-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.single-product .th-swatch {
    min-width: 3rem;
    padding: 0.6rem 0.95rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

body.single-product .th-swatch:hover {
    border-color: #fff;
}

/* Selected = inverted (white fill, black text), same rule as the site's buttons */
body.single-product .th-swatch.is-active {
    background-color: #fff;
    border-color: #fff;
    color: var(--hockey-black);
}

/* Unavailable for the currently selected combination */
body.single-product .th-swatch.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    text-decoration: line-through;
}

body.single-product div.product .reset_variations {
    display: inline-block;
    margin-top: 0.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: underline;
}

body.single-product div.product .reset_variations:hover {
    color: #fff;
}

body.single-product div.product .single_variation_wrap {
    display: block;
}

/* Selected variation's price/description/availability, shown above qty+button */
body.single-product div.product .woocommerce-variation.single_variation {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
}

body.single-product div.product .woocommerce-variation-price .price,
body.single-product div.product .woocommerce-variation-price .woocommerce-Price-amount.amount {
    color: var(--hockey-red) !important;
}

body.single-product div.product .woocommerce-variation-availability {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

body.single-product div.product .woocommerce-variation-availability .stock.out-of-stock {
    color: rgba(255, 255, 255, 0.4);
}

/* The variable-product qty+button row — same flex treatment as the simple
   product row above, just applied one level deeper in the markup. */
body.single-product div.product .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

body.single-product div.product .woocommerce-variation-add-to-cart .quantity {
    flex: 0 0 auto;
    margin: 0;
}

body.single-product .product_meta {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.35);
}

body.single-product .product_meta a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.15s ease;
}

body.single-product .product_meta a:hover {
    color: #fff;
}

/* Sale / stock badges to match the homepage "NEW DROP" badge language */
body.single-product span.onsale {
    background-color: #fff !important;
    color: var(--hockey-black) !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 0;
    min-height: auto;
    min-width: auto;
    padding: 0.35rem 0.65rem;
}

/* Tabs */
body.single-product .woocommerce-tabs.wc-tabs-wrapper {
    margin-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.5rem;
}

body.single-product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 0;
}

body.single-product .woocommerce-tabs ul.tabs li {
    background: none !important;
    border: none !important;
}

body.single-product .woocommerce-tabs ul.tabs li a {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.single-product .woocommerce-tabs ul.tabs li.active a {
    color: #fff !important;
}

body.single-product .woocommerce-tabs ul.tabs li.active {
    border-bottom: 2px solid #fff !important;
}

body.single-product .woocommerce-Tabs-panel {
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
}

body.single-product .woocommerce-Tabs-panel h2,
body.single-product .woocommerce-Reviews-title {
    color: #fff;
    font-size: 1.1rem;
}

body.single-product .woocommerce-noreviews {
    color: rgba(255, 255, 255, 0.4);
}

body.single-product #respond label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

body.single-product #respond .form-submit input {
    background-color: #fff;
    color: var(--hockey-black);
    border: none;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 0.7rem 1.5rem;
}

/* Related products */
body.single-product section.related.products {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.single-product section.related.products > h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 2rem;
}

/* ==========================================================================
   Unified "store" input treatment — every text-style input/textarea/select
   on the dark WooCommerce pages (PDP reviews form, Cart coupon/quantity)
   shares one look instead of relying on default browser/Bootstrap styling.
   ========================================================================== */

body.single-product input[type="text"],
body.single-product input[type="email"],
body.single-product input[type="tel"],
body.single-product input[type="number"],
body.single-product input[type="password"],
body.single-product textarea,
body.single-product select,
body.woocommerce-cart input[type="text"],
body.woocommerce-cart input[type="email"],
body.woocommerce-cart input[type="tel"],
body.woocommerce-cart input[type="number"] {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    padding: 0.65rem 0.85rem;
    transition: border-color 0.15s ease;
}

body.single-product input[type="text"]:focus,
body.single-product input[type="email"]:focus,
body.single-product input[type="tel"]:focus,
body.single-product input[type="number"]:focus,
body.single-product input[type="password"]:focus,
body.single-product textarea:focus,
body.single-product select:focus,
body.woocommerce-cart input[type="text"]:focus,
body.woocommerce-cart input[type="email"]:focus,
body.woocommerce-cart input[type="tel"]:focus,
body.woocommerce-cart input[type="number"]:focus {
    outline: none;
    border-color: #fff;
}

body.single-product input::placeholder,
body.single-product textarea::placeholder,
body.woocommerce-cart input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Native <option> popups render on a light system background, so each option
   must carry its own dark background + light text — otherwise the select's
   white text lands on the white popup list (the size/variation dropdown was
   showing white-on-white when opened). Covers the PDP variation dropdowns,
   the shop "sort by" ordering select, and any other dark-page select. */
body.single-product select option,
body.woocommerce-cart select option,
.post-type-archive-product .woocommerce-ordering select option,
.tax-product_cat .woocommerce-ordering select option {
    background-color: var(--hockey-black);
    color: #fff;
}

/* ==========================================================================
   Cart page — WooCommerce Cart block, restyled dark to match the site
   ========================================================================== */

body.woocommerce-cart #woocommerce-wrapper {
    background-color: var(--hockey-black);
    padding-bottom: 4.5rem;
}

body.woocommerce-cart .woocommerce-breadcrumb {
    display: none;
}

body.woocommerce-cart .wc-block-cart__empty-cart__title,
body.woocommerce-cart .wc-block-cart h2 {
    color: #fff;
}

body.woocommerce-cart .wc-block-cart .is-style-dots {
    color: rgba(255, 255, 255, 0.2);
}

/* Item table */
body.woocommerce-cart .wc-block-cart-items {
    width: 100%;
    border-collapse: collapse;
}

body.woocommerce-cart .wc-block-cart-items__header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body.woocommerce-cart .wc-block-cart-items__header th {
    color: rgba(255, 255, 255, 0.35);
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-bottom: 0.85rem;
}

body.woocommerce-cart .wc-block-cart-items__row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.woocommerce-cart .wc-block-cart-item__image,
body.woocommerce-cart .wc-block-cart-item__product,
body.woocommerce-cart .wc-block-cart-item__total {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

body.woocommerce-cart .wc-block-cart-item__image img {
    background-color: #f4f4f4;
}

body.woocommerce-cart .wc-block-components-product-name {
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
}

body.woocommerce-cart .wc-block-components-product-name:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.woocommerce-cart .wc-block-cart-item__prices,
body.woocommerce-cart .wc-block-cart-item__total .wc-block-formatted-money-amount,
body.woocommerce-cart .wc-block-components-product-metadata {
    color: rgba(255, 255, 255, 0.6);
}

body.woocommerce-cart .wc-block-cart-item__total .wc-block-formatted-money-amount {
    color: var(--hockey-red);
    font-weight: 700;
}

body.woocommerce-cart .wc-block-components-quantity-selector {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    background: transparent;
}

body.woocommerce-cart .wc-block-components-quantity-selector__input {
    background: transparent;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s ease;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button:hover {
    color: #fff;
}

body.woocommerce-cart .wc-block-cart-item__remove-link {
    color: rgba(255, 255, 255, 0.35) !important;
    text-decoration: none;
    transition: color 0.15s ease;
}

body.woocommerce-cart .wc-block-cart-item__remove-link:hover {
    color: #fff !important;
}

/* Sidebar totals */
body.woocommerce-cart .wc-block-cart__sidebar,
body.woocommerce-cart .wc-block-components-sidebar {
    background-color: #141414;
    padding: 1.75rem;
}

body.woocommerce-cart .wc-block-cart__totals-title {
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
}

body.woocommerce-cart .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-components-totals-item__description,
body.woocommerce-cart .wc-block-components-totals-item__value {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Inter', sans-serif;
}

body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: #fff;
    font-weight: 700;
}

body.woocommerce-cart .wc-block-components-totals-item {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.woocommerce-cart .wc-block-components-totals-coupon,
body.woocommerce-cart .wc-block-components-panel {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.woocommerce-cart .wc-block-components-panel__button {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.woocommerce-cart .wc-block-components-totals-coupon input {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
    color: #fff;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.15s ease;
}

body.woocommerce-cart .wc-block-components-totals-coupon input:focus {
    outline: none;
    border-color: #fff !important;
}

body.woocommerce-cart .wc-block-components-totals-coupon input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Checkout button — white, matches th-home-btn / th-cart-btn-primary */
body.woocommerce-cart .wc-block-cart__submit-button {
    background-color: #fff !important;
    color: var(--hockey-black) !important;
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.78rem;
    padding: 0.9rem;
    transition: background-color 0.15s ease;
}

body.woocommerce-cart .wc-block-cart__submit-button:hover {
    background-color: rgba(255, 255, 255, 0.85) !important;
    color: var(--hockey-black) !important;
}

/* "New in store" / cross-sells grid on the cart page reuse the shop card look */
body.woocommerce-cart .wc-block-grid__product-title {
    color: #fff;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
}

body.woocommerce-cart .wc-block-grid__product-price {
    color: var(--hockey-red);
}

body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link {
    border-radius: 0;
    background-color: #fff;
    color: var(--hockey-black);
}

/* ==========================================================================
   Site-wide "classy" reveal-on-scroll animation
   Applied automatically by js/scroll-reveal.js — no markup changes required.
   ========================================================================== */

.th-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.th-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered reveal for grid children */
.th-home-product-grid > .th-reveal:nth-child(1) { transition-delay: 0.05s; }
.th-home-product-grid > .th-reveal:nth-child(2) { transition-delay: 0.12s; }
.th-home-product-grid > .th-reveal:nth-child(3) { transition-delay: 0.19s; }
.th-home-product-grid > .th-reveal:nth-child(4) { transition-delay: 0.26s; }

.th-collection-grid > .th-reveal:nth-child(1) { transition-delay: 0.05s; }
.th-collection-grid > .th-reveal:nth-child(2) { transition-delay: 0.15s; }

.woocommerce ul.products > .th-reveal:nth-child(3n+1) { transition-delay: 0.05s; }
.woocommerce ul.products > .th-reveal:nth-child(3n+2) { transition-delay: 0.12s; }
.woocommerce ul.products > .th-reveal:nth-child(3n+3) { transition-delay: 0.19s; }

@media (prefers-reduced-motion: reduce) {
    .th-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}