/* ═══════════════════════════════════════════════
 * Global overrides — kill theme reset pink/navy
 * ═══════════════════════════════════════════════ */
a {
    color: inherit;
}

a:hover,
a:active,
a:focus {
    color: inherit;
}

[type="button"],
[type="submit"],
button {
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: inherit;
    padding: 0;
}

[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus,
button:hover,
button:focus {
    background-color: transparent;
    color: inherit;
}

/* ═══════════════════════════════════════════════
 * Site Header
 * ═══════════════════════════════════════════════ */

/* Elementor wraps header templates in .elementor-location-header.
   Sticky must be on that wrapper so the header sticks to the viewport.
   Falls back to .gio-header itself if used outside Elementor. */
.elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: transform 300ms ease;
}
.elementor-location-header.is-hidden {
    transform: translateY(-100%);
}

header.gio-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--gio-white, #fff);
    border-bottom: 1px solid transparent;
    transition: border-color 300ms ease, transform 300ms ease;
    padding: 0 20px;
}
header.gio-header.is-hidden {
    transform: translateY(-100%);
}
@media (min-width: 1024px) {
    header.gio-header {
        padding: 0 24px;
    }
}

.gio-header.is-scrolled {
    border-bottom-color: rgba(17, 17, 17, 0.1);
}

/* No horizontal padding — Elementor container handles content width and padding.
   Inner uses max-width + margin auto to center, matching Elementor boxed containers. */
.gio-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-container, 1824px);
    margin: 0 auto;
    padding: 20px 0;
}

/* Left group: logo + primary nav */
.gio-header__left {
    display: flex;
    align-items: center;
    gap: 48px;
}

/* Right group: search + secondary nav + hamburger */
.gio-header__right {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* ── Logo ── */
.gio-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.gio-header .gio-header__logo-img {
    width: 131px;
    height: 54px;
    object-fit: contain;
}

/* ── Desktop Nav ── */
.gio-header__nav {
    display: none;
    align-items: center;
    gap: 24px;
}

@media (min-width: 1024px) {
    .gio-header__nav {
        display: flex;
    }
}

/* Specificity bump (0,2,0) to override Elementor kit's .elementor-kit-* a (0,1,1) */
.gio-header .gio-header__nav-link {
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    font-weight: 400;
    color: var(--gio-black, #111);
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: color 200ms ease;
}

.gio-header .gio-header__nav-link:hover {
    color: var(--gio-red, #EC1C24);
}

/* ── Desktop Dropdown Submenus ── */
.gio-header__has-dropdown {
    position: relative;
}

.gio-header__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 0;
    z-index: 100;
}

.gio-header__has-dropdown:hover .gio-header__dropdown {
    display: flex;
    flex-direction: column;
}

.gio-header__dropdown::before {
    display: none;
}

.gio-header__dropdown {
    background: var(--gio-white, #fff);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.gio-header .gio-header__dropdown-link {
    display: block;
    padding: 12px 18px;
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    white-space: nowrap;
    background: var(--gio-white, #fff);
    color: var(--gio-black, #111);
    transition: background 150ms ease, color 150ms ease;
}

.gio-header .gio-header__dropdown-link:first-child {
    border-top: none;
}

.gio-header .gio-header__dropdown-link:last-child {
    border-bottom: none;
}

.gio-header .gio-header__dropdown-link:hover {
    color: var(--gio-white, #fff);
    background: var(--gio-red, #EC1C24);
}

/* ── Sample Count Badge ── */
.gio-header__sample-count {
    font-size: 0.875em;
    opacity: 0.6;
}

/* ── Search Pill (desktop) ── */
.gio-header__search {
    display: none;
    position: relative;
    align-items: center;
    gap: 16px;
    background-color: var(--gio-grey, #F5F5F5);
    border-radius: 9999px;
    padding: 14px 24px;
    cursor: text;
    transition: background-color 200ms ease;
}

@media (min-width: 768px) {
    .gio-header__search {
        display: flex;
    }
}

.gio-header__search:hover {
    background-color: #ebebeb;
}

.gio-header__search-icon {
    flex-shrink: 0;
    color: var(--gio-black, #111);
}

/* Specificity bump to override Hello Elementor's input[type="text"] */
.gio-header__search input.gio-header__search-input {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    font-family: var(--font-family);
    font-size: clamp(0.875rem, 1vw, 1rem);
    font-weight: 400;
    color: var(--gio-black, #111);
    letter-spacing: -0.02em;
    white-space: nowrap;
    width: 210px;
}

.gio-header__search input.gio-header__search-input::placeholder {
    color: rgba(17, 17, 17, 0.5);
}

/* ── Search Results Dropdown ── */
.gio-header__search-results {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--gio-white, #fff);
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
}

.gio-header__search-results.is-visible {
    display: block;
}

.gio-header__search-results--mobile {
    position: absolute;
    top: calc(100% + 8px);
    left: -20px;
    right: -20px;
    border-radius: 12px;
    max-height: 60vh;
}

.gio-header__search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--gio-black, #111);
    transition: background-color 150ms ease;
}

.gio-header__search-result:hover {
    background-color: var(--gio-grey, #F5F5F5);
}

.gio-header__search-result:first-child {
    border-radius: 12px 12px 0 0;
}

.gio-header__search-result:last-child {
    border-radius: 0 0 12px 12px;
}

.gio-header__search-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.gio-header__search-title {
    font-size: 14px;
    letter-spacing: -0.02em;
}

.gio-header__search-result-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gio-header__search-subtitle {
    font-size: 12px;
    color: rgba(17, 17, 17, 0.4);
    letter-spacing: -0.02em;
}

.gio-header__search-group {
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}

.gio-header__search-group:last-child {
    border-bottom: none;
}

.gio-header__search-group-label {
    padding: 10px 16px 4px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.35);
}

.gio-header__search-group .gio-header__search-result:first-child {
    border-radius: 0;
}

.gio-header__search-group .gio-header__search-result:last-child {
    border-radius: 0;
}

.gio-header__search-group:last-child .gio-header__search-result:last-child {
    border-radius: 0 0 12px 12px;
}

.gio-header__search-loading,
.gio-header__search-empty {
    padding: 16px;
    font-size: 14px;
    color: rgba(17, 17, 17, 0.5);
    text-align: center;
}

/* ── Mobile Search Toggle (icon-only, hidden on md+) ── */
.gio-header__search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    color: var(--gio-black, #111);
    transition: background-color 200ms ease, color 200ms ease;
}

.gio-header__search-toggle:hover,
.gio-header__search-toggle:focus {
    background-color: var(--gio-red, #EC1C24);
    color: #fff;
}

@media (min-width: 768px) {
    .gio-header__search-toggle {
        display: none;
    }
}

/* ── Hamburger (hidden on lg+) ── */
.gio-header__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    color: var(--gio-black, #111);
    transition: background-color 200ms ease, color 200ms ease;
}

.gio-header__hamburger:hover,
.gio-header__hamburger:focus {
    background-color: var(--gio-red, #EC1C24);
    color: #fff;
}

.gio-header__hamburger[aria-expanded="true"] {
    background-color: var(--gio-red, #EC1C24);
    color: #fff;
}

@media (min-width: 1024px) {
    .gio-header__hamburger {
        display: none;
    }
}

.gio-header__hamburger svg {
    transition: transform 300ms ease;
}

.gio-header__hamburger-line {
    transition: d 300ms ease;
}

/* ── Mobile Menu ── */
.gio-header__mobile-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background-color: var(--gio-white, #fff);
    border-top: 1px solid var(--gio-grey, #F5F5F5);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 300ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 300ms ease;
    z-index: 50;
}

@media (min-width: 1024px) {
    .gio-header__mobile-menu {
        display: none;
    }
}

.gio-header__mobile-menu.is-open {
    max-height: 600px;
    opacity: 1;
}

.gio-header__mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: var(--max-container, 1824px);
    margin: 0 auto;
    padding: 32px 20px;
}

/* ── Mobile Search (inside mobile menu, hidden on md+) ── */
.gio-header__mobile-search {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--gio-grey, #F5F5F5);
    border-radius: 9999px;
    padding: 16px 20px;
    position: relative;
}

@media (min-width: 768px) {
    .gio-header__mobile-search {
        display: none;
    }
}

.gio-header__mobile-search input.gio-header__mobile-search-input {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--gio-black, #111);
    letter-spacing: -0.02em;
    width: 100%;
    box-shadow: none;
}

.gio-header__mobile-search input.gio-header__mobile-search-input::placeholder {
    color: rgba(17, 17, 17, 0.8);
}

/* ── Mobile Nav Links ── */
.gio-header .gio-header__mobile-link {
    display: block;
    font-size: 22px;
    font-weight: 400;
    color: var(--gio-black, #111);
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: color 200ms ease;
}

.gio-header .gio-header__mobile-link:hover {
    color: var(--gio-red, #EC1C24);
}

/* Mobile dropdown children */
.gio-header__mobile-menu .gio-header__has-dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.gio-header__mobile-menu .gio-header__has-dropdown > .gio-header__mobile-link {
    flex: 1;
}

.gio-header__mobile-menu .gio-header__dropdown {
    flex-direction: column;
    position: static;
    padding: 8px 0 0 20px;
    gap: 8px;
    width: 100%;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

.gio-header__mobile-menu .gio-header__dropdown::before {
    display: none;
}

.gio-header .gio-header__mobile-link.gio-header__dropdown-link {
    font-size: 22px;
    background: none;
    padding: 0;
}

.gio-header .gio-header__mobile-link.gio-header__dropdown-link:hover {
    color: var(--gio-red, #EC1C24);
    background: none;
}

button.gio-header__dropdown-toggle {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 4px 8px;
    color: var(--gio-black, #111);
    cursor: pointer;
    transition: transform 200ms ease;
    flex-shrink: 0;

}

button.gio-header__dropdown-toggle:hover,
button.gio-header__dropdown-toggle:focus {
    color: var(--gio-black, #111);
    background: none;
}

button.gio-header__dropdown-toggle.is-open {
    transform: rotate(180deg);
}

.gio-header__mobile-divider {
    border: none;
    border-top: 1px solid var(--gio-grey, #F5F5F5);
    margin: 0;
}

/* ═══════════════════════════════════════════════
 * Hero Section
 * ═══════════════════════════════════════════════ */

.gio-hero__inner {
    display: flex;
    flex-direction: column;
    height: auto;
}

@media (min-width: 1024px) {
    .gio-hero__inner {
        display: grid;
        grid-template-columns: 524px 1fr;
        grid-template-rows: 1fr minmax(300px, auto);
        gap: 12px;
        height: calc(100vh - 115px);
        max-height: 900px;
    }
}

/* Mobile slideshow wrapper */
.gio-hero__slideshow {
    position: relative;
    width: 100%;
    height: 110vw;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .gio-hero__slideshow {
        display: contents;
    }
}

.gio-hero__tile {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--gio-grey, #F5F5F5);
    text-decoration: none;
    color: inherit;
}

/* Mobile: tiles stacked absolutely for slideshow */
.gio-hero__slideshow .gio-hero__tile {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 800ms ease;
    pointer-events: none;
}

.gio-hero__slideshow .gio-hero__tile.is-active {
    opacity: 1;
    pointer-events: auto;
}

.gio-hero__tile--small {
    aspect-ratio: 16 / 9;
}

.gio-hero__tile--large {
    width: 100%;
    aspect-ratio: 4 / 3;
}

/* Desktop: slideshow uses display:contents, tiles become grid children */
@media (min-width: 1024px) {
    .gio-hero__slideshow .gio-hero__tile {
        position: relative;
        inset: auto;
        opacity: 1;
        pointer-events: auto;
        transition: none;
    }

    .gio-hero__tile--small {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: auto;
        min-height: 0;
    }
    .gio-hero__tile--large {
        grid-column: 2;
        grid-row: 1 / -1;
        aspect-ratio: auto;
        min-height: 0;
    }
}

/* Parent prefix needed to beat Elementor's
   `.elementor img { height: auto }` at specificity 0,1,1. */
.gio-hero__tile .gio-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.gio-hero__tile:hover .gio-hero__img {
    transform: scale(1.03);
}

.gio-hero__tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    z-index: 1;
}

.gio-hero__tile-top {
    align-self: flex-end;
}

.gio-hero__badge {
    display: inline-block;
    background: var(--gio-black, #111);
    color: #fff;
    font-size: 0.875rem;
    padding: 6px 14px;
}

.gio-hero__tile-title {
    color: #fff;
    font-size: var(--font-title, clamp(1.25rem, 2vw, 1.5rem));
    font-weight: 400;
    letter-spacing: var(--tracking-normal, -0.02em);
    line-height: var(--leading-tight, 1.05);
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Slideshow progress bar */
.gio-hero__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
    z-index: 10;
}

.gio-hero__progress-fill {
    height: 100%;
    width: 0%;
    background: #fff;
}

@media (min-width: 1024px) {
    .gio-hero__progress {
        display: none;
    }
}

/* Red CTA block */
.gio-hero__cta {
    background: var(--gio-red, #EC1C24);
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 36px 20px;
}
@media (min-width: 1024px) {
    .gio-hero__cta {
        padding: 30px;
        grid-column: 1;
        grid-row: 2;
        justify-content: space-between;
        gap: 0;
        align-self: stretch;
    }
}

.gio-hero__cta-welcome {
    display: block;
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
    margin: 0;
}

@media (min-width: 1024px) {
    .gio-hero__cta-welcome {
        font-size: 26px;
    }
}

.gio-hero__cta-headline {
    font-size: var(--font-display, clamp(2rem, 4vw, 3.375rem));
    font-weight: 400;
    letter-spacing: var(--tracking-tight, -0.04em);
    line-height: var(--leading-none, 1);
    color: #fff;
    margin: 0;
}


/* ═══════════════════════════════════════════════
 * Featured Collections Strip (accordion)
 * ═══════════════════════════════════════════════ */

/* Mobile: stacked, each panel expanded */
.gio-featured-strip {
    background: var(--gio-black, #111);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gio-featured-strip__panel {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    border: none;
    background: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    font-family: inherit;
    height: 520px;
    transition: flex 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Desktop: horizontal accordion */
@media (min-width: 768px) {
    .gio-featured-strip {
        flex-direction: row;
        height: 85vh;
        min-height: 550px;
        max-height: 900px;
    }

    .gio-featured-strip__panel {
        flex: 1;
        height: auto;
        padding: 30px;
    }

    .gio-featured-strip__panel.is-active {
        flex: 3;
    }
}

/* Background image — .gio-featured-strip__panel prefix needed
   to beat Elementor's `.elementor img { height: auto }` (0,1,1). */
.gio-featured-strip__panel .gio-featured-strip__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
    transform: scale(1);
}

.gio-featured-strip__panel:not(.is-active) .gio-featured-strip__bg {
    transform: scale(1.05);
}

/* Dark overlay on inactive panels */
.gio-featured-strip__overlay {
    position: absolute;
    inset: 0;
    background: #000;
    transition: opacity 500ms ease;
    opacity: 0;
    pointer-events: none;
}

.gio-featured-strip__panel:not(.is-active) .gio-featured-strip__overlay {
    opacity: 0.4;
}

.gio-featured-strip__badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* Info card — bottom */
.gio-featured-strip__info {
    position: relative;
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    margin-top: auto;
}

@media (min-width: 768px) {
    .gio-featured-strip__info {
        max-width: 380px;
        transition: opacity 500ms ease, transform 500ms ease;
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 768px) {
    .gio-featured-strip__panel:not(.is-active) .gio-featured-strip__info {
        opacity: 0;
        transform: translateY(16px);
        pointer-events: none;
    }
}

.gio-featured-strip__info-inner {
    padding: 30px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    white-space: normal;
}
@media (min-width: 768px) {
    .gio-featured-strip__info-inner {
        padding: 25px;
    }
}

.gio-featured-strip__title {
    font-size: 26px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
    margin: 0;
    font-weight: 400;
}

.gio-featured-strip__summary {
    font-size: var(--font-body, 1rem);
    line-height: 1.3;
    color: #fff;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gio-featured-strip__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 20px;
    color: #fff;
    font-size: var(--font-body, 1rem);
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
}
@media (min-width: 768px) {
    .gio-featured-strip__link {
        padding: 25px;
    }
}

.gio-featured-strip__link:hover,
.gio-featured-strip__link:active {
    background-color: var(--gio-red, #EC1C24);
    color: #fff;
}

.gio-featured-strip__link svg {
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════
 * Collection Filter Bar
 * ═══════════════════════════════════════════════ */

.gio-filter-bar {
    margin-bottom: 40px;
}

/* Row 1: Tabs + Search + Sort */
.gio-filter-bar__row1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.gio-filter-bar__tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.gio-filter-bar__tabs::-webkit-scrollbar {
    display: none;
}

.gio-filter-bar .gio-filter-bar__tab {
    position: relative;
    padding: 8px 16px 10px;
    background: none;
    border: none;
    font-size: 14px;
    font-family: var(--font-family);
    letter-spacing: -0.02em;
    color: rgba(17, 17, 17, 0.35);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-base, 400ms cubic-bezier(0.16, 1, 0.3, 1));
}

.gio-filter-bar .gio-filter-bar__tab:hover,
.gio-filter-bar .gio-filter-bar__tab:focus {
    color: rgba(17, 17, 17, 0.55);
    background: none;
    border: none;

}

.gio-filter-bar .gio-filter-bar__tab.is-active {
    color: var(--gio-black);
}

.gio-filter-bar .gio-filter-bar__tab.has-value {
    color: rgba(17, 17, 17, 0.7);
}

.gio-filter-bar__tab-indicator {
    display: none;
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--gio-black);
}

.gio-filter-bar__tab.is-active .gio-filter-bar__tab-indicator {
    display: block;
}

.gio-filter-bar__tab-dot {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gio-red);
}

.gio-filter-bar__tab.has-value .gio-filter-bar__tab-dot {
    display: block;
}

/* Toggle divider + toggle filters (Green Squared, Indoor/Outdoor) */
.gio-filter-bar__divider {
    width: 1px;
    height: 16px;
    background: rgba(17, 17, 17, 0.12);
    flex-shrink: 0;
    align-self: center;
}

button.gio-filter-bar__toggle {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: rgba(17, 17, 17, 0.35);
    font-family: var(--font-family);
    font-size: 14px;
    letter-spacing: -0.02em;
    padding: 8px 16px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-base, 400ms cubic-bezier(0.16, 1, 0.3, 1));
}

button.gio-filter-bar__toggle:hover,
button.gio-filter-bar__toggle:focus {
    color: rgba(17, 17, 17, 0.55);
    background: none;
    border: none;

}

button.gio-filter-bar__toggle.is-active {
    color: var(--gio-black, #111);
}

button.gio-filter-bar__toggle::after {
    content: '';
    display: none;
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--gio-red, #EC1C24);
}

button.gio-filter-bar__toggle.is-active::after {
    display: block;
}

button.gio-filter-bar__toggle::before {
    content: '';
    display: block;
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(17, 17, 17, 0.25);
    border-radius: 3px;
    background: var(--gio-grey, #F5F5F5);
    flex-shrink: 0;
    transition: background 200ms ease, border-color 200ms ease;
}

button.gio-filter-bar__toggle:hover::before {
    border-color: rgba(17, 17, 17, 0.4);
}

button.gio-filter-bar__toggle.is-active::before {
    background: var(--gio-red, #EC1C24);
    border-color: var(--gio-red, #EC1C24);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l2.5 2.5L8 3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}

/* Actions: Search + Sort — right-aligned */
.gio-filter-bar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Search — animated expand */
.gio-filter-bar__search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 40px;
    padding: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: width var(--transition-base, 400ms cubic-bezier(0.16, 1, 0.3, 1)),
                background-color var(--transition-base, 400ms cubic-bezier(0.16, 1, 0.3, 1)),
                padding var(--transition-base, 400ms cubic-bezier(0.16, 1, 0.3, 1));
}

.gio-filter-bar__search.is-open {
    width: 280px;
    background: var(--gio-grey, #F5F5F5);
    padding: 10px 20px;
    cursor: default;
}

.gio-filter-bar__search-icon {
    flex-shrink: 0;
    color: rgba(17, 17, 17, 0.3);
    transition: color 300ms ease;
}

.gio-filter-bar__search.is-open .gio-filter-bar__search-icon {
    color: var(--gio-black);
}

.gio-filter-bar__search:not(.is-open):hover .gio-filter-bar__search-icon {
    color: rgba(17, 17, 17, 0.6);
}

.gio-filter-bar .gio-filter-bar__search-input {
    background: transparent;
    border: none;
    font-size: 14px;
    font-family: var(--font-family);
    color: var(--gio-black);
    letter-spacing: -0.02em;
    width: 100%;
    min-width: 0;

    padding: 0;
}

.gio-filter-bar .gio-filter-bar__search-input::placeholder {
    color: rgba(17, 17, 17, 0.4);
}

.gio-filter-bar .gio-filter-bar__search-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    color: rgba(17, 17, 17, 0.25);
    cursor: pointer;
    transition: color 200ms ease;
}

.gio-filter-bar .gio-filter-bar__search-close:hover,
.gio-filter-bar .gio-filter-bar__search-close:focus {
    color: rgba(17, 17, 17, 0.5);
    background: none;
    border: none;

}

/* Sort */
.gio-filter-bar__sort {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gio-filter-bar__sort-label {
    font-size: 13px;
    color: rgba(17, 17, 17, 0.3);
    letter-spacing: -0.02em;
}

.gio-filter-bar .gio-filter-bar__sort-btn {
    padding: 8px 10px;
    background: none;
    border: none;
    font-size: 13px;
    font-family: var(--font-family);
    letter-spacing: -0.02em;
    color: rgba(17, 17, 17, 0.25);
    cursor: pointer;
    transition: color 200ms ease;
}

.gio-filter-bar .gio-filter-bar__sort-btn:hover,
.gio-filter-bar .gio-filter-bar__sort-btn:focus {
    color: rgba(17, 17, 17, 0.5);
    background: none;
    border: none;

}

.gio-filter-bar .gio-filter-bar__sort-btn.is-active {
    color: var(--gio-black);
}

/* Row 2: Filter options */
.gio-filter-bar__options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 16px;
}

.gio-filter-bar .gio-filter-bar__pill {
    padding: 8px 16px;
    background: var(--gio-grey, #F5F5F5);
    border: 1px solid transparent;
    font-size: 13px;
    font-family: var(--font-family);
    color: rgba(17, 17, 17, 0.4);
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.gio-filter-bar .gio-filter-bar__pill:hover,
.gio-filter-bar .gio-filter-bar__pill:focus {
    background: #e8e8e8;
    color: rgba(17, 17, 17, 0.7);
    border-color: transparent;

}

.gio-filter-bar .gio-filter-bar__pill.is-active {
    background: var(--gio-black);
    color: var(--gio-white);
    border-color: var(--gio-black);
}

.gio-filter-bar .gio-filter-bar__pill.is-active:hover,
.gio-filter-bar .gio-filter-bar__pill.is-active:focus {
    background: var(--gio-black);
    color: var(--gio-white);
    border-color: var(--gio-black);
}

/* Row 3: Summary (count + tags + clear) */
.gio-filter-bar__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.gio-filter-bar__count {
    font-size: 13px;
    color: rgba(17, 17, 17, 0.3);
    letter-spacing: -0.02em;
}

.gio-filter-bar__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.gio-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--gio-grey, #F5F5F5);
    font-size: 13px;
    color: rgba(17, 17, 17, 0.5);
    letter-spacing: -0.02em;
}

.gio-filter-tag .gio-filter-tag__remove {
    background: none;
    border: none;
    padding: 0;
    color: rgba(17, 17, 17, 0.3);
    cursor: pointer;
    transition: color 200ms ease;
    display: flex;
    align-items: center;
}

.gio-filter-tag .gio-filter-tag__remove:hover,
.gio-filter-tag .gio-filter-tag__remove:focus {
    color: rgba(17, 17, 17, 0.6);
    background: none;
    border: none;

}

.gio-filter-bar .gio-filter-bar__clear {
    padding: 0;
    background: none;
    border: none;
    font-size: 13px;
    font-family: var(--font-family);
    color: var(--gio-red);
    letter-spacing: -0.02em;
    cursor: pointer;
    margin-left: 4px;
    transition: color 200ms ease;
}

.gio-filter-bar .gio-filter-bar__clear:hover,
.gio-filter-bar .gio-filter-bar__clear:focus {
    color: rgba(236, 28, 36, 0.7);
    background: none;
    border: none;

}

/* Filtered-out cards */
.gio-collection-card--overlay.is-filtered-out,
.gio-collection-card.is-filtered-out {
    display: none;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .gio-filter-bar__row1 {
        flex-direction: column;
        align-items: stretch;
    }

    .gio-filter-bar__actions {
        margin-left: 0;
    }

    .gio-filter-bar__search.is-open {
        width: 100%;
    }
}


/* ═══════════════════════════════════════════════
 * Collection Grid (shared container)
 *
 * --gio-grid-cols is set inline by the shortcode
 * from the columns="N" attribute (default 4).
 *
 * Responsive steps: 1 col → 2 col (640 px) → full (1024 px).
 * Matches the Next.js reference (no awkward 3-col step that
 * leaves orphan items when the count isn't divisible by 3).
 * ═══════════════════════════════════════════════ */

.gio-collection-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.gio-collection-grid::-webkit-scrollbar {
    display: none;
}

.gio-collection-grid > * {
    flex: 0 0 75%;
    scroll-snap-align: start;
}

/* Archive/filterable grids: grid layout on mobile instead of carousel */
@media (max-width: 639px) {
    .gio-filter-bar + .gio-collection-grid,
    .gio-collection-grid--archive {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow-x: visible;
        scroll-snap-type: none;
        padding-bottom: 0;
    }

    .gio-filter-bar + .gio-collection-grid > *,
    .gio-collection-grid--archive > * {
        flex: none;
    }
}

@media (min-width: 640px) {
    .gio-collection-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow-x: visible;
        scroll-snap-type: none;
        padding-bottom: 0;
    }

    .gio-collection-grid > * {
        flex: none;
    }
}

@media (min-width: 1024px) {
    .gio-collection-grid {
        grid-template-columns: repeat(var(--gio-grid-cols, 4), 1fr);
    }
}


/* ═══════════════════════════════════════════════
 * Collection Card — Default (trending-style tile)
 * Grey header above image, portrait aspect, color dots
 * ═══════════════════════════════════════════════ */

/* Card */
.gio-collection-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--gio-grey, #F5F5F5);
    overflow: hidden;
}

.gio-collection-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 55px;
    padding: 14px 10px;
}

.gio-collection-card__title {
    flex: 1;
    font-family: var(--font-family, 'BDO Grotesk', sans-serif);
    font-size: var(--font-body, 1rem);
    font-weight: 400;
    letter-spacing: var(--tracking-normal, -0.02em);
    line-height: var(--leading-tight, 1.05);
    margin: 0;
}

.gio-collection-card__badge {
    flex-shrink: 0;
    background: var(--gio-black, #111);
    color: #fff;
    font-size: 0.875rem;
    padding: 6px 14px;
}

.gio-collection-card__image {
    position: relative;
    aspect-ratio: 1766 / 2413;
    overflow: hidden;
}

/* Specificity bump: beats .elementor img { height: auto } */
.gio-collection-card .gio-collection-card__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.gio-collection-card__link:hover .gio-collection-card__image img {
    transform: scale(1.03);
}

/* Color Swatches */
.gio-collection-card__colors {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.gio-collection-card__swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.gio-collection-card__more {
    font-size: 0.875rem;
    color: rgba(17, 17, 17, 0.5);
    margin-left: 2px;
}


/* ═══════════════════════════════════════════════
 * Collection Card — Overlay (archive-style)
 * Full-bleed image, header slides out, red info slides in
 * ═══════════════════════════════════════════════ */

.gio-collection-card--overlay {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--gio-grey, #F5F5F5);
}

.gio-collection-card--overlay > a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Specificity bump: beats .elementor img { height: auto } (0,1,2 > 0,1,1) */
.gio-collection-card--overlay > a img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.gio-collection-card--overlay:hover img {
    transform: scale(1.03);
}

/* Header bar — overlaid at top, slides out on hover */
.gio-collection-card__header-bar {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 55px;
    padding: 14px 15px;
    background: var(--gio-grey, #F5F5F5);
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gio-collection-card--overlay:hover .gio-collection-card__header-bar {
    transform: translateY(-100%);
    opacity: 0;
}

.gio-collection-card__header-bar-title {
    flex: 1;
    font-size: var(--font-body, 1rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--gio-black, #111);
}

.gio-collection-card__header-bar-badge {
    flex-shrink: 0;
    background: var(--gio-black, #111);
    color: #fff;
    font-size: 0.875rem;
    padding: 6px 14px;
}

/* Info overlay — slides up from bottom on hover */
.gio-collection-card__info-overlay {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 10;
    background: var(--gio-black, #111);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gio-collection-card--overlay:hover .gio-collection-card__info-overlay {
    transform: translateY(0);
    opacity: 1;
}

.gio-collection-card__info-title {
    font-size: 20px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
    margin: 0;
    font-weight: 400;
}

.gio-collection-card__info-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

.gio-collection-card__info-summary {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 4px 0 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ═══════════════════════════════════════════════
 * No results
 * ═══════════════════════════════════════════════ */

.gio-no-results {
    text-align: center;
    padding: 60px 20px;
    color: rgba(17, 17, 17, 0.4);
    font-size: var(--font-body, 1rem);
}


/* ═══════════════════════════════════════════════
 * Product Cards (within collection detail)
 *
 * Card structure: name bar (top) → square image (bottom)
 * Matches the original Next.js ColorCard component.
 * ═══════════════════════════════════════════════ */

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

@media (min-width: 640px) {
    .gio-product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .gio-product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Card */
.gio-product-card {
    cursor: pointer;
    overflow: hidden;
    transition: all 200ms ease;
}

/* Name bar — top of card */
.gio-product-card__name-bar {
    position: relative;
    z-index: 1;
    padding: 12px 16px;
    background: #f2f2f2;
    transition: background-color 200ms ease;
}

.gio-product-card__name {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: var(--leading-tight, 1.05);
    color: var(--gio-black, #111111);
    margin: 0;
    transition: color 200ms ease;
}

/* Hover → black bar, white text (pointer devices only to avoid iOS double-tap) */
@media (hover: hover) {
    .gio-product-card:hover .gio-product-card__name-bar {
        background: var(--gio-black, #111111);
    }
    .gio-product-card:hover .gio-product-card__name {
        color: var(--gio-white, #FFFFFF);
    }
}
.gio-product-card.is-active .gio-product-card__name-bar {
    background: var(--gio-black, #111111);
}
.gio-product-card.is-active .gio-product-card__name {
    color: var(--gio-white, #FFFFFF);
}

/* Square image area */
.gio-product-card__image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--gio-grey, #F5F5F5);
}

/* Specificity bump: .elementor img { height: auto } is 0,1,1 — match with 0,2,1 */
.gio-product-card .gio-product-card__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fallback when no product image exists */
.gio-product-card__fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 17, 17, 0.03);
}

.gio-product-card__fallback-swatch {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.gio-product-card__fallback-swatch--empty {
    background: rgba(17, 17, 17, 0.06);
    border-color: rgba(0, 0, 0, 0.05);
}

/* "+ Sample" hover button on image */
.gio-product-card__sample-btn-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

@media (hover: hover) {
    .gio-product-card:hover .gio-product-card__sample-btn-wrap {
        opacity: 1;
        pointer-events: auto;
    }
}

button.gio-product-card__sample-btn {
    padding: 10px 24px;
    border-radius: 999px;
    border: none;
    background: var(--gio-white, #FFFFFF);
    color: var(--gio-black, #111111);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: background-color 200ms ease, color 200ms ease;
}

button.gio-product-card__sample-btn:hover {
    background: var(--gio-red, #EC1C24);
    color: var(--gio-white, #FFFFFF);
}


/* ── I/O Pill (card image) ── */

.gio-product-card__image > .gio-product-card__io-pill {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: var(--gio-red, #EC1C24);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    z-index: 2;
    cursor: help;
}

/* ── I/O Pill (inline in expansion rows) ── */

.gio-io-pill {
    display: inline-flex;
    align-items: center;
    background: var(--gio-red, #EC1C24);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 6px;
    cursor: help;
}

/* ── Project Cut icon (inline in expansion rows) ── */

.gio-project-cut {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 6px;
    cursor: help;
}

.gio-project-cut svg {
    width: 18px;
    height: 18px;
}

/* ── Generic tooltip (reusable) ── */

.gio-tooltip {
    position: relative;
}

.gio-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    background: var(--gio-black, #111);
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.gio-tooltip::after {
    content: '';
    position: absolute;
    left: calc(100% + 0px);
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-right-color: var(--gio-black, #111);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.gio-tooltip:hover::before,
.gio-tooltip:hover::after {
    opacity: 1;
}

/* ── Expansion Panel ── */

.gio-product-grid__panel {
    grid-column: 1 / -1;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 400ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 300ms ease;
}

.gio-product-grid__panel.is-open {
    max-height: 1200px;
    opacity: 1;
}

.gio-product-grid__panel-inner {
    background: var(--gio-grey, #F5F5F5);
    padding: 16px 24px 24px;
}

/* Desktop panel grid */
.gio-product-grid__panel-desktop {
    display: none;
}

@media (min-width: 640px) {
    .gio-product-grid__panel-desktop { display: block; }
    .gio-product-grid__panel-mobile  { display: none; }
}

/* Panel header row */
.gio-product-grid__panel-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 110px;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
    margin-bottom: 4px;
}

.gio-product-grid__panel-title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--gio-black, #111111);
}

.gio-product-grid__panel-col {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--gio-black, #111111);
}

/* Panel data rows */
.gio-product-grid__panel-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 110px;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.04);
}

.gio-product-grid__panel-row:last-child {
    border-bottom: none;
}

.gio-product-grid__panel-size {
    font-size: 14px;
    letter-spacing: 0;
    color: var(--gio-black, #111111);
}

.gio-product-grid__panel-finish {
    font-size: 14px;
    letter-spacing: -0.02em;
    color: rgba(17, 17, 17, 0.6);
}

.gio-product-grid__panel-sku {
    font-size: 14px;
    letter-spacing: -0.02em;
    color: rgba(17, 17, 17, 0.4);
}

.gio-product-grid__panel-order {
    text-align: right;
}

/* Panel sample button */
button.gio-product-grid__panel-sample-btn {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 999px;
    border: 1px solid rgba(17, 17, 17, 0.2);
    background: transparent;
    color: var(--gio-black, #111111);
    font-size: 14px;
    font-weight: 400;
    font-family: var(--font-family);
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
    white-space: nowrap;
}

button.gio-product-grid__panel-sample-btn:hover {
    background: var(--gio-red, #EC1C24);
    color: var(--gio-white, #FFFFFF);
    border-color: var(--gio-red, #EC1C24);
}

button.gio-product-grid__panel-sample-btn.is-added {
    background: var(--gio-black, #111111);
    color: var(--gio-white, #FFFFFF);
    border-color: var(--gio-black, #111111);
}

button.gio-product-grid__panel-sample-btn.is-added:hover {
    background: var(--gio-red, #EC1C24);
    border-color: var(--gio-red, #EC1C24);
}

/* Mobile panel */
.gio-product-grid__panel-mobile {
    display: block;
}

@media (min-width: 640px) {
    .gio-product-grid__panel-mobile { display: none; }
}

.gio-product-grid__panel-title-mobile {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--gio-black, #111111);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
    margin-bottom: 4px;
}

.gio-product-grid__panel-row-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.04);
}

.gio-product-grid__panel-row-mobile:last-child {
    border-bottom: none;
}

.gio-product-grid__panel-row-mobile-info {
    flex: 1;
    min-width: 0;
}

.gio-product-grid__panel-row-mobile-size {
    font-size: 14px;
    letter-spacing: -0.02em;
    color: var(--gio-black, #111111);
}

.gio-product-grid__panel-row-mobile-finish {
    font-size: 14px;
    letter-spacing: -0.02em;
    color: rgba(17, 17, 17, 0.6);
}

.gio-product-grid__panel-row-mobile-sku {
    font-size: 14px;
    letter-spacing: -0.02em;
    color: rgba(17, 17, 17, 0.4);
    margin-top: 2px;
}

.gio-product-grid__panel-row-mobile .gio-product-grid__panel-sample-btn {
    margin-left: 12px;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════
 * Specs Table (2-column, no headers, tooltip on test method)
 *
 * Hello Elementor reset.css sets global table styles
 * (borders, padding, hover bg, odd-row bg, font-size, margin).
 * Every rule here must override those defaults.
 * ═══════════════════════════════════════════════ */

.gio-specs-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    font-size: 14px;
    margin: 0;
    letter-spacing: normal;
}

.gio-specs-table,
.gio-specs-table tr,
.gio-specs-table td {
    border: none !important;
}

@media (min-width: 768px) {
    .gio-specs-table { font-size: 14px; }
}

.gio-specs-table td {
    padding: 16px 16px;
    line-height: 1.3;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .gio-specs-table td { padding: 16px 20px; }
}

.gio-specs-table tr:nth-child(odd) {
    background: #f7f7f7;
}

.gio-specs-table tr:nth-child(even) {
    background: #fff;
}

.gio-specs-table tbody tr:nth-child(odd) > td {
    background: #f7f7f7;
}

.gio-specs-table tbody tr:nth-child(even) > td {
    background: #fff;
}

.gio-specs-table tbody tr:hover > td,
.gio-specs-table tbody tr:hover > th {
    background-color: inherit;
}

.gio-specs-table__desc {
    color: rgba(17, 17, 17, 0.5);
    width: 50%;
}

.gio-specs-table__result {
    text-align: right;
    color: var(--gio-black, #111);
    font-weight: 500;
}

.gio-specs-table__result-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Tooltip */
.gio-specs-tooltip {
    position: relative;
    display: inline-flex;
    cursor: help;
}

.gio-specs-tooltip__icon {
    color: rgba(17, 17, 17, 0.25);
    transition: color 0.2s;
    flex-shrink: 0;
}

.gio-specs-tooltip:hover .gio-specs-tooltip__icon {
    color: rgba(17, 17, 17, 0.5);
}

.gio-specs-tooltip__bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    padding: 6px 12px;
    background: var(--gio-black, #111);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.gio-specs-tooltip__bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 12px;
    border: 4px solid transparent;
    border-top-color: var(--gio-black, #111);
}

.gio-specs-tooltip:hover .gio-specs-tooltip__bubble,
.gio-specs-tooltip:focus-within .gio-specs-tooltip__bubble {
    opacity: 1;
}

.gio-specs-tooltip:focus-within .gio-specs-tooltip__icon {
    color: rgba(17, 17, 17, 0.5);
}


/* ═══════════════════════════════════════════════
 * Shade Variation & Applications
 * ═══════════════════════════════════════════════ */

.gio-shade-apps__shade {
    background: #f7f7f7;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: normal;
}

@media (min-width: 768px) {
    .gio-shade-apps__shade { padding: 20px 24px; }
}

.gio-shade-apps__label {
    font-size: 14px;
    color: rgba(17, 17, 17, 0.5);
}

@media (min-width: 768px) {
    .gio-shade-apps__label { font-size: 14px; }
}

.gio-shade-apps__shade-value {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gio-shade-apps__grid {
    flex-shrink: 0;
}

.gio-shade-apps__shade-text {
    display: flex;
    flex-direction: column;
}

.gio-shade-apps__shade-code {
    font-size: 16px;
    font-weight: 400;
    color: var(--gio-black, #111);
    line-height: 1.2;
}

.gio-shade-apps__shade-desc {
    font-size: 14px;
    color: rgba(17, 17, 17, 0.6);
    line-height: 1.2;
    margin-top: 4px;
}

.gio-shade-apps__matrix {
    background: #f7f7f7;
    padding: 20px;
    margin-top: 12px;
    letter-spacing: normal;
}

@media (min-width: 768px) {
    .gio-shade-apps__matrix { padding: 20px 24px; }
}

.gio-shade-apps__matrix .gio-shade-apps__label {
    display: block;
    margin-bottom: 16px;
}

.gio-shade-apps__table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    font-size: 14px;
    margin: 0;
    letter-spacing: normal;
}

.gio-shade-apps__table,
.gio-shade-apps__table th,
.gio-shade-apps__table td {
    border: none !important;
}

@media (min-width: 768px) {
    .gio-shade-apps__table { font-size: 14px; }
}

.gio-shade-apps__table th {
    padding: 0 0 12px;
    text-align: center;
    font-weight: 600;
    color: var(--gio-black, #111);
    line-height: 1.3;
    vertical-align: middle;
    background: transparent;
}

.gio-shade-apps__table th:first-child {
    width: 30%;
}

.gio-shade-apps__table tbody tr:nth-child(odd) > td,
.gio-shade-apps__table tbody tr:nth-child(odd) > th {
    background: transparent;
}

.gio-shade-apps__table tbody tr:hover > td,
.gio-shade-apps__table tbody tr:hover > th {
    background-color: transparent;
}

.gio-shade-apps__table tbody tr {
    border-bottom: 1px solid rgba(17, 17, 17, 0.1) !important;
}

.gio-shade-apps__table tbody tr:last-child {
    border-bottom: none !important;
}

.gio-shade-apps__surface {
    padding: 12px 0;
    text-align: center;
    font-weight: 500;
    color: var(--gio-black, #111);
    line-height: 1.3;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .gio-shade-apps__surface { padding: 14px 0; }
}

.gio-shade-apps__cell {
    padding: 12px 0;
    text-align: center;
    line-height: 1.3;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .gio-shade-apps__cell { padding: 14px 0; }
}

.gio-shade-apps__check {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: var(--gio-red, #EC1C24);
}

@media (min-width: 768px) {
    .gio-shade-apps__check { width: 14px; height: 14px; }
}

.gio-shade-apps__dash {
    display: inline-block;
    width: 12px;
    height: 2px;
    background: rgba(17, 17, 17, 0.3);
    border-radius: 1px;
}


/* ═══════════════════════════════════════════════
 * Packaging Table
 * ═══════════════════════════════════════════════ */

.gio-packaging-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gio-packaging-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    font-size: 14px;
    table-layout: fixed;
    margin: 0;
    letter-spacing: normal;
    min-width: 540px;
}

@media (min-width: 1024px) {
    .gio-packaging-table { font-size: 14px; }
}

.gio-packaging-table,
.gio-packaging-table th,
.gio-packaging-table td {
    border: none !important;
}

.gio-packaging-table th {
    padding: 14px 8px;
    font-weight: 600;
    color: var(--gio-black, #111);
    text-align: center;
    white-space: nowrap;
    background: #f7f7f7;
    border-bottom: 1px solid rgba(17, 17, 17, 0.1) !important;
    line-height: 1.3;
    vertical-align: middle;
}

@media (min-width: 1024px) {
    .gio-packaging-table th { padding: 14px 12px; }
}

.gio-packaging-table .gio-packaging-table__size-col {
    text-align: left;
    width: 22%;
}

.gio-packaging-table td {
    padding: 14px 8px;
    text-align: center;
    color: rgba(17, 17, 17, 0.7);
    font-weight: 400;
    line-height: 1.3;
    vertical-align: middle;
}

@media (min-width: 1024px) {
    .gio-packaging-table td { padding: 14px 12px; }
}

.gio-packaging-table .gio-packaging-table__size {
    text-align: left;
    color: var(--gio-black, #111);
    font-weight: 500;
}

.gio-packaging-table tbody tr:nth-child(odd) {
    background: #fff;
}

.gio-packaging-table tbody tr:nth-child(even) {
    background: #f7f7f7;
}

.gio-packaging-table tbody tr:nth-child(odd) > td {
    background: #fff;
}

.gio-packaging-table tbody tr:nth-child(even) > td {
    background: #f7f7f7;
}

.gio-packaging-table tbody tr:hover > td,
.gio-packaging-table tbody tr:hover > th {
    background-color: inherit;
}


/* ═══════════════════════════════════════════════
 * Breadcrumbs
 * ═══════════════════════════════════════════════ */

.gio-breadcrumbs__list {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.gio-breadcrumbs__link {
    color: rgba(17, 17, 17, 0.4);
    text-decoration: none;
    transition: color 200ms ease;
}

.gio-breadcrumbs__link:hover {
    color: var(--gio-black, #111111);
}

.gio-breadcrumbs__sep {
    color: rgba(17, 17, 17, 0.2);
    font-size: 12px;
}

.gio-breadcrumbs__current {
    color: rgba(17, 17, 17, 0.7);
}


/* ═══════════════════════════════════════════════
 * Collection Counts
 * ═══════════════════════════════════════════════ */

.gio-collection-counts {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(17, 17, 17, 0.4);
    letter-spacing: -0.02em;
}


/* ═══════════════════════════════════════════════
 * Pill Tags
 * ═══════════════════════════════════════════════ */

.gio-collection-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.gio-collection-pills__tag {
    display: inline-block;
    padding: 6px 12px;
    background: #f2f2f2;
    border-radius: 999px;
    font-size: 14px;
    color: var(--gio-black, #111111);
    letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════════
 * CTAs
 * ═══════════════════════════════════════════════ */

.gio-collection-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Shared button base */
.gio-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-family);
    letter-spacing: -0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
    border: 1px solid transparent;
    line-height: 1;
}

.gio-btn--primary {
    background: var(--gio-red, #EC1C24);
    color: var(--gio-white, #FFFFFF);
    border-color: var(--gio-red, #EC1C24);
}

.gio-btn--primary:hover {
    background: var(--gio-black, #111111);
    border-color: var(--gio-black, #111111);
    color: var(--gio-white, #FFFFFF);
}

.gio-btn--outline {
    background: transparent;
    color: var(--gio-black, #111111);
    border-color: rgba(17, 17, 17, 0.2);
}

.gio-btn--outline:hover {
    background: var(--gio-black, #111111);
    border-color: var(--gio-black, #111111);
    color: var(--gio-white, #FFFFFF);
}

.gio-btn--icon svg {
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════
 * Available Sizes
 * ═══════════════════════════════════════════════ */

.gio-collection-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
}

.gio-collection-sizes__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gio-collection-sizes__icon-area {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 60px;
}

.gio-collection-sizes__icon {
    color: rgba(17, 17, 17, 0.35);
}

.gio-collection-sizes__custom-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    opacity: 0.4;
}

.gio-collection-sizes__label {
    font-size: 14px;
    letter-spacing: -0.02em;
    color: var(--gio-black, #111111);
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════
 * Available Finishes
 * ═══════════════════════════════════════════════ */

.gio-collection-finishes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
}

.gio-collection-finishes__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gio-finish-icon {
    color: rgba(17, 17, 17, 0.35);
}

.gio-collection-finishes__label {
    font-size: 14px;
    letter-spacing: -0.02em;
    color: var(--gio-black, #111111);
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════
 * Thickness
 * ═══════════════════════════════════════════════ */

.gio-collection-thickness {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
}

.gio-collection-thickness__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gio-thickness-icon {
    color: rgba(17, 17, 17, 0.35);
}

.gio-collection-thickness__label {
    font-size: 14px;
    letter-spacing: -0.02em;
    color: var(--gio-black, #111111);
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════
 * Downloads
 * ═══════════════════════════════════════════════ */

.gio-collection-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* ═══════════════════════════════════════════════
 * Hero Gallery (color-switchable with lightbox)
 * ═══════════════════════════════════════════════ */

.gio-hero-gallery {
    width: 100%;
}

.gio-hero-gallery__main {
    width: 100%;
    max-height: 100vw;
    overflow: hidden;
    cursor: pointer;
}

@media (max-width: 767px) {
    .gio-hero-gallery__main.is-sticky-gallery {
        position: fixed;
        left: 0;
        width: 100%;
        z-index: 999;
        height: var(--gallery-h, 100vw);
        max-height: none;
        transition: height 150ms ease, top 300ms ease, border-color 300ms ease;
        border-bottom: 1px solid transparent;
    }
    .gio-hero-gallery__main.is-sticky-gallery.is-gallery-min {
        border-bottom-color: rgba(17, 17, 17, 0.1);
    }
    .gio-hero-gallery__main.is-sticky-gallery + .gio-hero-gallery__spacer {
        display: block;
    }
}

@media (min-width: 768px) {
    .gio-hero-gallery__main {
        max-height: calc(100vh - 200px);
    }
}

.gio-hero-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
    display: block;
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 200ms ease;
}

.gio-hero-gallery__main:hover img {
    transform: scale(1.02);
}

/* ── Thumbnail strip ── */

.gio-hero-gallery__thumbs {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gio-hero-gallery__thumbs::-webkit-scrollbar {
    display: none;
}

/* Specificity bump to beat Elementor kit button styles */
button.gio-hero-gallery__thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    padding: 0;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 0;

    background: var(--gio-grey, #F5F5F5);
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition-base, 400ms cubic-bezier(0.16, 1, 0.3, 1)),
                opacity 200ms ease;
    opacity: 0.6;
}

button.gio-hero-gallery__thumb:hover,
button.gio-hero-gallery__thumb:focus {
    opacity: 1;

    background-color: var(--gio-grey, #F5F5F5);
    color: inherit;
}

button.gio-hero-gallery__thumb.is-active {
    border-color: var(--gio-black, #111);
    opacity: 1;
}

button.gio-hero-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

@media (min-width: 768px) {
    .gio-hero-gallery__thumbs {
        gap: 8px;
        margin-top: 8px;
    }

    .gio-hero-gallery__thumb {
        flex: 0 0 72px;
        width: 72px;
        height: 72px;
    }
}

/* ── Lightbox ── */

.gio-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    font-family: var(--font-family, 'BDO Grotesk', sans-serif);
}

.gio-lightbox.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gio-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.95);
}

.gio-lightbox__container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90vw;
    height: 90vh;
    z-index: 1;
}

.gio-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
}

/* Specificity bump (0,2,0) to beat Elementor kit button styles */
.gio-lightbox .gio-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    opacity: 0.7;
    transition: opacity 300ms ease, border-color 300ms ease;
}

.gio-lightbox .gio-lightbox__close:hover,
.gio-lightbox .gio-lightbox__close:focus {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.5);
    background: none;
    color: #fff;

}

.gio-lightbox .gio-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 300ms ease, border-color 300ms ease, background-color 300ms ease;
    z-index: 2;
    user-select: none;
}

.gio-lightbox .gio-lightbox__nav:hover,
.gio-lightbox .gio-lightbox__nav:focus {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;

}

.gio-lightbox .gio-lightbox__nav--prev {
    left: 20px;
}

.gio-lightbox .gio-lightbox__nav--next {
    right: 20px;
}

.gio-lightbox .gio-lightbox__count {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--font-small, 0.75rem);
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

/* Mobile: larger tap targets */
@media (max-width: 767px) {
    .gio-lightbox__nav {
        width: 44px;
        height: 44px;
    }

    .gio-lightbox__nav--prev { left: 8px; }
    .gio-lightbox__nav--next { right: 8px; }
    .gio-lightbox__close { top: 12px; right: 12px; }
}

/* Legacy compat — keep old class working if any template still uses it */
.gio-hero-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gio-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 200ms ease;
}


/* ═══════════════════════════════════════════════
 * Sample Request Page
 * ═══════════════════════════════════════════════ */

.gio-sample-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.gio-sample-page__heading {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.gio-sample-page__empty p {
    font-size: 14px;
    color: rgba(17, 17, 17, 0.5);
    margin-bottom: 16px;
}

.gio-sample-page__browse-link {
    display: inline-block;
    padding: 10px 24px;
    background: var(--gio-black);
    color: var(--gio-white);
    font-size: 14px;
    font-family: var(--font-family);
    letter-spacing: -0.02em;
    text-decoration: none;
    border-radius: 9999px;
    transition: background 200ms ease, color 200ms ease;
}

.gio-sample-page__browse-link:hover {
    background: var(--gio-red, #EC1C24);
    color: var(--gio-white, #fff);
}

.gio-sample-page__limit {
    font-size: 12px;
    color: rgba(17, 17, 17, 0.35);
    margin-top: 16px;
}

/* Cart items */
.gio-sample-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--gio-grey, #F5F5F5);
    margin-bottom: 4px;
}

.gio-sample-item__image {
    width: 56px;
    height: 56px;
    object-fit: cover;
    flex-shrink: 0;
}

.gio-sample-item__size-icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

img.gio-sample-item__size-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    opacity: 0.4;
}

svg.gio-sample-item__size-icon {
    display: block;
}

.gio-sample-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.gio-sample-item__collection {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--gio-black);
}

.gio-sample-item__color {
    font-size: 13px;
    color: rgba(17, 17, 17, 0.6);
    letter-spacing: -0.02em;
}

.gio-sample-item__meta {
    font-size: 12px;
    color: rgba(17, 17, 17, 0.35);
    letter-spacing: -0.02em;
}

.gio-sample-item .gio-sample-item__remove {
    background: none;
    border: none;
    padding: 8px;
    color: rgba(17, 17, 17, 0.3);
    cursor: pointer;
    transition: color 200ms ease;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.gio-sample-item .gio-sample-item__remove:hover,
.gio-sample-item .gio-sample-item__remove:focus {
    color: var(--gio-red);
    background: none;
    border: none;

}

/* Form */
.gio-sample-page__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gio-sample-page__field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gio-sample-page__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gio-sample-page__field label {
    font-size: 13px;
    color: rgba(17, 17, 17, 0.6);
    letter-spacing: -0.02em;
}

.gio-sample-page__required {
    color: var(--gio-red);
}

.gio-sample-page__field input,
.gio-sample-page__field textarea {
    padding: 12px 16px;
    border: 1px solid rgba(17, 17, 17, 0.15);
    border-radius: 0;
    font-size: 14px;
    font-family: var(--font-family);
    color: var(--gio-black);
    letter-spacing: -0.02em;
    transition: border-color 200ms ease;
    background: var(--gio-white);
}

.gio-sample-page__field input:focus,
.gio-sample-page__field textarea:focus {

    border-color: var(--gio-black);
}

.gio-sample-page__field textarea {
    resize: vertical;
}

.gio-sample-page__actions {
    margin-top: 8px;
}

.gio-sample-page .gio-sample-page__submit {
    padding: 14px 32px;
    background: var(--gio-black);
    color: var(--gio-white);
    border: none;
    font-size: 14px;
    font-family: var(--font-family);
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: opacity 200ms ease;
}

.gio-sample-page .gio-sample-page__submit:hover,
.gio-sample-page .gio-sample-page__submit:focus {
    opacity: 0.85;
    background: var(--gio-black);
    color: var(--gio-white);
    border: none;

}

.gio-sample-page .gio-sample-page__submit.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.gio-sample-page__disclaimer {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(17, 17, 17, 0.5);
    letter-spacing: -0.01em;
}

.gio-sample-page__message {
    padding: 16px;
    font-size: 14px;
    letter-spacing: -0.02em;
}

.gio-sample-page__message.is-success {
    background: #e8f5e9;
    color: #2e7d32;
}

.gio-sample-page__message.is-error {
    background: #ffebee;
    color: #c62828;
}

@media (max-width: 768px) {
    .gio-sample-page {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .gio-sample-page__field-row {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════
 * Floating Action Bar
 * ═══════════════════════════════════════════════ */

.gio-fab {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
}

.gio-fab__bar {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(17, 17, 17, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px;
    border-radius: 9999px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.gio-fab .gio-fab__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: 9999px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 300ms ease, background-color 300ms ease;
}

.gio-fab .gio-fab__btn:hover,
.gio-fab .gio-fab__btn:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: none;

}

.gio-fab__icon {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.gio-fab__badge {
    position: absolute;
    top: -8px;
    right: -10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gio-red);
    color: #fff;
    font-size: 9px;
    font-family: var(--font-family);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.gio-fab__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
    font-family: var(--font-family);
    letter-spacing: -0.02em;
    color: #fff;
    opacity: 0;
    transition: max-width 500ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 300ms ease;
}

.gio-fab__btn:hover .gio-fab__label {
    max-width: 100px;
    opacity: 1;
}

/* Search overlay */
.gio-fab-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(17, 17, 17, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
}

.gio-fab-search-overlay__inner {
    width: 100%;
    max-width: 560px;
    margin: 0 16px;
}

.gio-fab-search-overlay__field {
    position: relative;
}

.gio-fab-search-overlay__icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

.gio-fab-search-overlay .gio-fab-search-overlay__input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 16px 48px 16px 56px;
    font-size: 16px;
    font-family: var(--font-family);
    color: #fff;
    letter-spacing: -0.02em;

    transition: border-color 200ms ease;
}

.gio-fab-search-overlay .gio-fab-search-overlay__input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.gio-fab-search-overlay .gio-fab-search-overlay__input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
}

.gio-fab-search-overlay .gio-fab-search-overlay__close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: color 200ms ease;
}

.gio-fab-search-overlay .gio-fab-search-overlay__close:hover {
    color: #fff;
    background: none;
    border: none;
}

/* Overlay results */
.gio-fab-search-overlay__results {
    margin-top: 8px;
    max-height: 50vh;
    overflow-y: auto;
}

.gio-fab-search-overlay__group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.gio-fab-search-overlay__group:last-child {
    border-bottom: none;
}

.gio-fab-search-overlay__group-label {
    padding: 12px 8px 6px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}

.gio-fab-search-overlay__result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    transition: color 150ms ease, background-color 150ms ease;
}

.gio-fab-search-overlay__result:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.gio-fab-search-overlay__thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
}

.gio-fab-search-overlay__result-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gio-fab-search-overlay__result-title {
    font-size: 14px;
    letter-spacing: -0.02em;
}

.gio-fab-search-overlay__result-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: -0.02em;
}

.gio-fab-search-overlay__loading,
.gio-fab-search-overlay__empty {
    padding: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

@media (max-width: 640px) {
    .gio-fab {
        bottom: 16px;
    }

    .gio-fab-search-overlay {
        padding-top: 12vh;
    }
}


/* ═══════════════════════════════════════════════
 * Tile & Stone — Product-level grid
 * ═══════════════════════════════════════════════ */

.gio-tile-stone-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
}

@media (min-width: 640px) {
    .gio-tile-stone-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .gio-tile-stone-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1440px) {
    .gio-tile-stone-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.gio-ts-card {
    position: relative;
}

.gio-ts-card.is-filtered-out {
    display: none;
}

.gio-ts-card > a {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Media container — fixed square, clips sliding overlays */
.gio-ts-card__media {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background: var(--gio-grey, #F5F5F5);
}

.gio-ts-card .gio-ts-card__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gio-ts-card > a:hover .gio-ts-card__media img {
    transform: scale(1.03);
}

/* Shared name row layout */
.gio-ts-card__header,
.gio-ts-card__footer-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gio-ts-card__name {
    font-family: var(--gio-font, 'BDO Grotesk', sans-serif);
    font-size: var(--font-body, 1rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--gio-black, #111111);
    white-space: nowrap;
}

.gio-ts-card__collection {
    font-family: var(--gio-font, 'BDO Grotesk', sans-serif);
    font-size: var(--font-body, 1rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    opacity: 0.5;
    color: var(--gio-black, #111111);
    min-width: 0;
}

.gio-ts-card__swatch {
    margin-left: auto;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Header bar — overlays top of image, slides out on hover */
.gio-ts-card__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 14px 16px;
    background: var(--gio-grey, #F5F5F5);
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gio-ts-card > a:hover .gio-ts-card__header {
    transform: translateY(-100%);
}

/* Footer panel — slides up from bottom on hover */
.gio-ts-card__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 14px 16px;
    background: var(--gio-grey, #F5F5F5);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: translateY(100%);
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gio-ts-card > a:hover .gio-ts-card__footer {
    transform: translateY(0);
}

/* Sizes section inside footer */
.gio-ts-card__sizes {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.gio-ts-card__sizes-label {
    font-family: var(--gio-font, 'BDO Grotesk', sans-serif);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.05;
    opacity: 0.5;
    color: var(--gio-black, #111111);
}

.gio-ts-card__sizes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.gio-ts-card__size-tag {
    font-family: var(--gio-font, 'BDO Grotesk', sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.05;
    color: #fff;
    background: var(--gio-black, #111111);
    padding: 6px;
    border-radius: 4px;
}


/* ═══════════════════════════════════════════════
 * Taxonomy Links Grid
 * ═══════════════════════════════════════════════ */

.gio-taxonomy-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 640px) {
    .gio-taxonomy-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .gio-taxonomy-links {
        grid-template-columns: repeat(var(--gio-tax-cols, 4), 1fr);
    }
}

.gio-taxonomy-links__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--gio-grey, #F5F5F5);
    text-decoration: none;
    color: var(--gio-black, #111);
    font-size: var(--font-body, 1rem);
    letter-spacing: -0.02em;
    transition: background-color 200ms ease, color 200ms ease;
}

.gio-taxonomy-links__item:hover {
    background: var(--gio-black, #111);
    color: #fff;
}

.gio-taxonomy-links__label {
    font-weight: 400;
    line-height: 1.2;
}

.gio-taxonomy-links__count {
    opacity: 0.4;
    font-size: 0.875em;
}

.gio-taxonomy-links__arrow {
    flex-shrink: 0;
    opacity: 0.3;
    transition: opacity 200ms ease, transform 200ms ease;
}

.gio-taxonomy-links__item:hover .gio-taxonomy-links__arrow {
    opacity: 1;
    transform: translateX(3px);
}


/* ═══════════════════════════════════════════════
 * Taxonomy Archive Page
 * ═══════════════════════════════════════════════ */

.gio-taxonomy-archive {
    max-width: var(--max-container, 1824px);
    margin: 0 auto;
    padding: 48px 20px 80px;
}

@media (min-width: 768px) {
    .gio-taxonomy-archive {
        padding: 60px 40px 100px;
    }
}

.gio-taxonomy-archive__header {
    margin-bottom: 40px;
}

.gio-taxonomy-archive__title {
    font-family: var(--font-family, 'BDO Grotesk', sans-serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--gio-black, #111);
    margin: 0;
}

.gio-taxonomy-archive__desc {
    font-size: var(--font-body, 1rem);
    color: rgba(17, 17, 17, 0.5);
    letter-spacing: -0.02em;
    line-height: 1.5;
    margin: 12px 0 0;
    max-width: 640px;
}


/* ═══════════════════════════════════════════════════════
 * Browse by — zero out Elementor tab content padding
 * ═══════════════════════════════════════════════════════ */
.e-n-tabs-content > .e-con {
    --padding-top: 0px;
    --padding-right: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════
 * Browse by Look — 5-Card Mosaic
 * ═══════════════════════════════════════════════════════ */

.gio-browse-look {
    position: relative;
}

/* Look carousel track — single row, overrides the 2-row default */
.gio-browse-look .gio-browse-carousel__track {
    grid-template-rows: 1fr;
    grid-auto-columns: 55vw;
    gap: 4px;
    row-gap: 4px;
}
@media (min-width: 768px) {
    .gio-browse-look .gio-browse-carousel__track {
        grid-auto-columns: 240px;
        gap: 12px;
    }
}
@media (min-width: 1024px) {
    .gio-browse-look .gio-browse-carousel__track {
        grid-auto-columns: 280px;
    }
}

.gio-browse-look__card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    color: #fff;
    background: var(--gio-grey, #F5F5F5);
    aspect-ratio: 9 / 16;
    scroll-snap-align: start;
}
.gio-browse-look__card:hover,
.gio-browse-look__card:active {
    color: #fff;
}
.gio-browse-look .gio-browse-look__card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.gio-browse-look__card:hover img {
    transform: scale(1.04);
}
.gio-browse-look__label {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    color: #fff;
}

/* CTA card */
.gio-browse-look__card--cta {
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 20px;
    background: linear-gradient(135deg, var(--gio-red, #EC1C24) 0%, #d41920 100%);
    color: #fff;
}
.gio-browse-look__cta-text {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.gio-browse-look__cta-btn {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
    color: #fff;
    transition: background 200ms ease, border-color 200ms ease;
}
.gio-browse-look__card--cta:hover .gio-browse-look__cta-btn {
    background: var(--gio-black, #111);
    border-color: var(--gio-black, #111);
    color: #fff;
}


/* ═══════════════════════════════════════════════════════
 * Browse by Carousel — shared (Style + Color)
 * ═══════════════════════════════════════════════════════ */

.gio-browse-carousel {
    position: relative;
}
.gio-browse-carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 160px;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    row-gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-right: 60px;
}
.gio-browse-carousel__track::-webkit-scrollbar {
    display: none;
}
@media (min-width: 768px) {
    .gio-browse-carousel__track {
        grid-auto-columns: 180px;
        row-gap: 16px;
    }
}
@media (min-width: 1024px) {
    .gio-browse-carousel__track {
        grid-auto-columns: 200px;
    }
}

.gio-browse-carousel__card {
    scroll-snap-align: start;
    text-decoration: none;
    color: var(--gio-black, #111);
    display: flex;
    flex-direction: column;
}
.gio-browse-carousel__card:hover,
.gio-browse-carousel__card:active {
    color: var(--gio-black, #111);
}
.gio-browse-carousel__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--gio-grey, #F5F5F5);
}
.gio-browse-carousel .gio-browse-carousel__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.gio-browse-carousel__card:hover .gio-browse-carousel__media img {
    transform: scale(1.04);
}
.gio-browse-carousel__placeholder {
    width: 100%;
    height: 100%;
    background: var(--gio-grey, #F5F5F5);
}
.gio-browse-carousel__label {
    padding: 10px 12px;
    font-size: 1rem;
    letter-spacing: -0.01em;
    background: var(--gio-grey, #F5F5F5);
}

/* CTA card */
.gio-browse-carousel__media--cta {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gio-grey, #F5F5F5);
}
.gio-browse-carousel__cta-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gio-black, #111);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease;
}
.gio-browse-carousel__card--cta:hover .gio-browse-carousel__cta-arrow {
    transform: scale(1.1);
}

/* Right-edge fade gradient */
.gio-browse-carousel__fade {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to right, transparent, white);
    pointer-events: none;
}

/* Carousel arrow navigation — high specificity to beat Elementor/theme button resets */
.gio-browse-carousel button.gio-browse-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 16px));
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0;
    padding: 0;
    background: var(--gio-black, #111);
    color: var(--gio-white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: opacity 200ms ease, background 200ms ease;
}
.gio-browse-carousel button.gio-browse-carousel__arrow:hover,
.gio-browse-carousel button.gio-browse-carousel__arrow:focus {
    background: var(--gio-red, #EC1C24);
    color: var(--gio-white, #fff);
}
.gio-browse-carousel button.gio-browse-carousel__arrow--prev {
    left: 0;
}
.gio-browse-carousel button.gio-browse-carousel__arrow--next {
    right: 0;
}
.gio-browse-carousel button.gio-browse-carousel__arrow[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* Carousel progress bar */
.gio-browse-carousel .gio-browse-carousel__progress {
    height: 2px;
    background: rgba(0, 0, 0, 0.08);
    margin-top: 12px;
    border-radius: 1px;
    overflow: hidden;
}
.gio-browse-carousel .gio-browse-carousel__progress-bar {
    height: 100%;
    background: var(--gio-black, #111);
    border-radius: 1px;
    min-width: 20px;
    transition: width 150ms ease, margin-left 150ms ease;
}

/* Style carousel — fill width on desktop */
@media (min-width: 1024px) {
    .gio-browse-carousel--style .gio-browse-carousel__track {
        grid-auto-columns: 1fr;
        overflow-x: visible;
        padding-right: 0;
    }
    .gio-browse-carousel--style .gio-browse-carousel__fade,
    .gio-browse-carousel--style button.gio-browse-carousel__arrow,
    .gio-browse-carousel--style .gio-browse-carousel__progress {
        display: none;
    }
}

/* Color swatches inside card */
.gio-browse-carousel__swatches {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.gio-browse-carousel__swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}