/* GromasTech theme CSS. Growing file as patterns are added. */

:root {
    --gt-bg:            var(--wp--preset--color--bg);
    --gt-bg-alt:        var(--wp--preset--color--bg-alt);
    --gt-bg-card:       var(--wp--preset--color--bg-card);
    --gt-bg-elev:       var(--wp--preset--color--bg-elev);
    --gt-border:        var(--wp--preset--color--border);
    --gt-border-strong: var(--wp--preset--color--border-strong);
    --gt-text:          var(--wp--preset--color--text);
    --gt-text-mid:      var(--wp--preset--color--text-mid);
    --gt-text-mut:      var(--wp--preset--color--text-mut);
    --gt-accent:        var(--wp--preset--color--accent);
    --gt-accent-2:      var(--wp--preset--color--accent-2);
    --gt-accent-warm:   var(--wp--preset--color--accent-warm);
    --gt-danger:        var(--wp--preset--color--danger);
    --gt-serif: var(--wp--preset--font-family--serif);
    --gt-sans:  var(--wp--preset--font-family--sans);
    --gt-mono:  var(--wp--preset--font-family--mono);
    --gt-t:      220ms cubic-bezier(.4,0,.2,1);
    --gt-t-slow: 400ms cubic-bezier(.4,0,.2,1);
    --gt-glow: radial-gradient(60% 60% at 30% 40%, rgba(125,211,252,.18), transparent 70%);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--gt-accent); color: var(--gt-bg); }

/* ================ SPOTLIGHT CAROUSEL ================ */
.gt-spotlight { padding: 40px 0 60px; }
.gt-spotlight__wrap { position: relative; }
.gt-spotlight__viewport { overflow: hidden; border-radius: 20px; }
.gt-spotlight__track { display: flex; transition: transform var(--gt-t-slow); will-change: transform; }
.gt-spotlight__slide { flex: 0 0 100%; min-width: 0; }

.gt-spotlight__card {
    background: linear-gradient(160deg, var(--gt-bg-card), var(--gt-bg-alt));
    border: 1px solid var(--gt-border);
    border-radius: 20px;
    padding: 48px 48px 88px 48px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.gt-spotlight__card::after {
    content: ''; position: absolute; inset: 0;
    background: var(--gt-glow); pointer-events: none; opacity: .6;
}
.gt-spotlight__body { position: relative; z-index: 1; }
.gt-spotlight__eyebrow {
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gt-accent); font-weight: 700;
    margin: 0 0 14px; display: block;
}
.gt-spotlight__body h2, .gt-spotlight__title {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: clamp(30px, 3.8vw, 42px);
    line-height: 1.1; margin: 0 0 18px;
    letter-spacing: -.6px;
    color: var(--gt-text);
}
.gt-spotlight__body p { color: var(--gt-text-mid); font-size: 16.5px; margin: 0 0 26px; }
.gt-specs { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.gt-specs li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--gt-text-mid); }
.gt-specs .tick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 6px;
    background: color-mix(in srgb, var(--gt-accent) 20%, transparent);
    color: var(--gt-accent); flex: 0 0 20px;
    font-size: 12px; font-weight: 700;
}
.gt-spotlight__visual {
    position: relative; z-index: 1;
    aspect-ratio: 4/3;
    border-radius: 16px;
    background:
        radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--gt-accent) 22%, transparent), transparent 60%),
        linear-gradient(160deg, var(--gt-bg-elev), var(--gt-bg-alt));
    border: 1px solid var(--gt-border-strong);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 24px 70px -20px rgba(0,0,0,.7), 0 4px 16px rgba(0,0,0,.3);
}

/* CTA rows/buttons inside spotlight (self-contained so we can style patterns) */
.gt-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.gt-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px;
    font-family: var(--gt-sans);
    font-size: 14.5px; font-weight: 600;
    border-radius: 10px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: all var(--gt-t); line-height: 1;
}
.gt-btn--primary { background: var(--gt-text); color: var(--gt-bg); }
.gt-btn--primary:hover { background: var(--gt-accent); transform: translateY(-1px); }
.gt-btn--ghost { background: transparent; color: var(--gt-text); border-color: var(--gt-border-strong); }
.gt-btn--ghost:hover { border-color: var(--gt-accent); color: var(--gt-accent); transform: translateY(-1px); }
.gt-btn .arrow { transition: transform var(--gt-t); }
.gt-btn:hover .arrow { transform: translateX(3px); }

/* Phone mockup */
.gt-phone {
    width: 44%; aspect-ratio: 9/19;
    background: var(--gt-bg); border: 1.5px solid var(--gt-border-strong);
    border-radius: 24px; padding: 8px;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
}
.gt-phone__screen {
    flex: 1; background: linear-gradient(180deg, var(--gt-bg-card), var(--gt-bg));
    border-radius: 17px; padding: 14px 10px;
    display: flex; flex-direction: column; gap: 7px;
    font-family: var(--gt-mono); font-size: 9px; color: var(--gt-text-mid);
}
.gt-phone__row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 10px;
    background: color-mix(in srgb, var(--gt-bg-alt) 80%, transparent);
    border-radius: 6px; border: 1px solid var(--gt-border);
}
.gt-phone__row .name { color: var(--gt-text); font-weight: 600; }
.gt-phone__row .price { color: var(--gt-accent); font-weight: 700; }
.gt-phone__row.best { border-color: var(--gt-accent); background: color-mix(in srgb, var(--gt-accent) 8%, transparent); }
.gt-phone__status {
    padding: 6px 10px;
    background: color-mix(in srgb, var(--gt-accent) 15%, transparent);
    color: var(--gt-accent); border-radius: 5px;
    font-size: 8px; text-align: center;
    letter-spacing: .5px; font-weight: 700; text-transform: uppercase;
}

/* Chart mockup */
.gt-chart {
    width: 84%; aspect-ratio: 16/10;
    background: var(--gt-bg); border: 1px solid var(--gt-border-strong);
    border-radius: 12px; padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
}
.gt-chart__head {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--gt-mono); font-size: 10px; color: var(--gt-text-mid);
    padding-bottom: 6px; border-bottom: 1px solid var(--gt-border);
}
.gt-chart__head b { color: var(--gt-text); }
.gt-chart__head .up { color: var(--gt-accent); font-weight: 700; }
.gt-chart__body { flex: 1; display: flex; align-items: flex-end; gap: 3px; padding: 6px 0; position: relative; }
.gt-candle {
    flex: 1; background: var(--gt-accent); border-radius: 1.5px;
    position: relative; min-height: 8%;
}
.gt-candle::before {
    content: ''; position: absolute; top: -15%; bottom: 100%;
    left: 50%; transform: translateX(-50%);
    width: 1.5px; background: currentColor;
}
.gt-candle::after {
    content: ''; position: absolute; top: 100%; height: 12%;
    left: 50%; transform: translateX(-50%);
    width: 1.5px; background: currentColor;
}
.gt-candle.down { background: var(--gt-danger); }
.gt-chart__line {
    position: absolute; top: 30%; left: 0; right: 0;
    border-top: 1.5px dashed color-mix(in srgb, var(--gt-accent) 60%, transparent);
}
.gt-chart__entry {
    position: absolute; top: 25%; right: 8%;
    background: color-mix(in srgb, var(--gt-accent) 20%, transparent);
    color: var(--gt-accent);
    padding: 3px 8px; border-radius: 4px;
    font-family: var(--gt-mono);
    font-size: 8px; font-weight: 700; letter-spacing: .3px;
}
.gt-chart__panel {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    padding-top: 6px; border-top: 1px solid var(--gt-border);
    font-family: var(--gt-mono); font-size: 9px;
}
.gt-chart__metric { display: flex; flex-direction: column; }
.gt-chart__metric span { color: var(--gt-text-mut); font-size: 8px; letter-spacing: .5px; text-transform: uppercase; }
.gt-chart__metric b { color: var(--gt-accent); font-size: 11px; margin-top: 2px; }

/* Window mockup */
.gt-window {
    width: 88%; aspect-ratio: 16/10;
    background: var(--gt-bg);
    border: 1px solid var(--gt-border-strong);
    border-radius: 10px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
    font-family: var(--gt-mono);
    font-size: 10px; color: var(--gt-text-mid);
}
.gt-window__titlebar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px 8px 12px;
    background: var(--gt-bg-alt);
    border-bottom: 1px solid var(--gt-border);
}
.gt-window__title {
    color: var(--gt-text);
    font-family: var(--gt-sans);
    font-size: 11px; font-weight: 600;
    flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gt-window__controls {
    display: flex; gap: 2px;
    font-family: var(--gt-sans);
    color: var(--gt-text-mut); font-size: 11px;
}
.gt-window__controls span {
    width: 20px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 3px; line-height: 1;
}
.gt-window__controls span.close { color: var(--gt-danger); }
.gt-window__toolbar {
    display: flex; gap: 6px;
    padding: 6px 12px;
    background: var(--gt-bg-alt);
    border-bottom: 1px solid var(--gt-border);
    font-family: var(--gt-sans);
    font-size: 10px;
}
.gt-window__toolbar button {
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--gt-border);
    color: var(--gt-text-mid);
    border-radius: 4px; cursor: default; font-size: 10px;
}
.gt-window__toolbar button.primary {
    background: color-mix(in srgb, var(--gt-accent) 20%, transparent);
    color: var(--gt-accent); border-color: transparent;
}
.gt-window__body {
    flex: 1; padding: 12px;
    display: flex; flex-direction: column; gap: 5px;
    overflow: hidden;
}
.gt-window__row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--gt-bg-alt) 80%, transparent);
    border-radius: 5px; border: 1px solid var(--gt-border);
}
.gt-window__row .path { color: var(--gt-text); font-weight: 500; }
.gt-window__row .state {
    font-family: var(--gt-sans);
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 100px;
}
.gt-window__row .state.locked {
    color: var(--gt-danger);
    background: color-mix(in srgb, var(--gt-danger) 15%, transparent);
}
.gt-window__row .state.unlocked {
    color: var(--gt-accent);
    background: color-mix(in srgb, var(--gt-accent) 15%, transparent);
}
.gt-window__row.pin { border-color: var(--gt-accent); background: color-mix(in srgb, var(--gt-accent) 8%, transparent); }

/* Carousel controls */
.gt-carousel__arrow {
    position: absolute; top: auto; bottom: 40px;
    width: 44px; height: 44px;
    background: color-mix(in srgb, var(--gt-bg) 90%, transparent);
    border: 1px solid var(--gt-border-strong); color: var(--gt-text);
    border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; z-index: 3;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: all var(--gt-t);
}
.gt-carousel__arrow:hover { border-color: var(--gt-accent); color: var(--gt-accent); transform: scale(1.08); }
.gt-carousel__arrow--prev { left: 16px; }
.gt-carousel__arrow--next { right: 16px; }
.gt-carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.gt-carousel__dots button {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gt-border-strong); border: 0; cursor: pointer;
    padding: 0; transition: all var(--gt-t);
}
.gt-carousel__dots button.is-active { background: var(--gt-accent); width: 28px; border-radius: 4px; }

@media (max-width: 900px) {
    .gt-spotlight__card { grid-template-columns: 1fr; padding: 32px; gap: 32px; }
    .gt-spotlight__visual { aspect-ratio: 16/10; }
    .gt-phone { width: 40%; }
    .gt-chart, .gt-window { width: 92%; }
    .gt-carousel__arrow--prev { left: 8px; }
    .gt-carousel__arrow--next { right: 8px; }
    .gt-carousel__arrow { width: 38px; height: 38px; font-size: 18px; }
}

/* Spotlight product images (real product data). */
.gt-spotlight__img {
    display: block;
    object-fit: contain;
    border-radius: 12px;
    background: transparent;
}
.gt-spotlight__img--phone {
    max-height: 92%;
    max-width: 46%;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
    border: 1.5px solid var(--gt-border-strong);
}
.gt-spotlight__img--logo {
    max-width: 220px;
    max-height: 220px;
    padding: 26px;
    background: color-mix(in srgb, var(--gt-bg-elev) 60%, transparent);
    border: 1px solid var(--gt-border-strong);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,.4);
}
.gt-spotlight__img--screenshot {
    max-width: 92%;
    max-height: 88%;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
    border: 1px solid var(--gt-border-strong);
}

/* ================ LATEST TOOLS ================ */
.gt-tools { padding: 40px 0 80px; }
.gt-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 24px; gap: 16px;
    padding: 0 28px;
}
.gt-section-head__left { display: flex; flex-direction: column; gap: 8px; }
.gt-section-head__eyebrow {
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gt-accent); font-weight: 700;
}
.gt-section-head__title {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: clamp(28px, 3.4vw, 38px);
    margin: 0; color: var(--gt-text);
    letter-spacing: -.5px; line-height: 1.05;
}

.gt-tools-nav { display: flex; gap: 8px; }
.gt-tools-nav button {
    width: 40px; height: 40px;
    background: var(--gt-bg-card); border: 1px solid var(--gt-border);
    color: var(--gt-text); border-radius: 10px;
    cursor: pointer; font-size: 16px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--gt-t);
}
.gt-tools-nav button:hover { border-color: var(--gt-border-strong); color: var(--gt-accent); }

.gt-tabs {
    display: flex; gap: 4px;
    padding: 4px;
    background: var(--gt-bg-card); border: 1px solid var(--gt-border);
    border-radius: 12px;
    margin: 0 28px 28px;
    width: fit-content;
    flex-wrap: wrap;
}
.gt-tab-btn {
    background: transparent; border: 0;
    color: var(--gt-text-mut);
    padding: 8px 16px;
    font-family: var(--gt-sans);
    font-size: 13px; font-weight: 600;
    border-radius: 8px;
    cursor: pointer; letter-spacing: .2px;
    transition: all var(--gt-t);
}
.gt-tab-btn:hover { color: var(--gt-text); }
.gt-tab-btn.is-active {
    background: color-mix(in srgb, var(--gt-accent) 18%, transparent);
    color: var(--gt-accent);
}
.gt-tab-btn__count {
    font-family: var(--gt-mono);
    font-weight: 500; font-size: 11px;
    opacity: .7; margin-left: 4px;
}

.gt-tools-scroller {
    display: flex; gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 28px 20px;
    scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
}
.gt-tools-scroller::-webkit-scrollbar { display: none; }
.gt-tools-scroller > .gt-card {
    flex: 0 0 calc((100% - 28px * 2 - 44px) / 3);
    scroll-snap-align: start;
}
@media (max-width: 900px) {
    .gt-tools-scroller > .gt-card { flex: 0 0 calc(100% - 40px); }
}

.gt-card {
    position: relative;
    background: var(--gt-bg-card); border: 1px solid var(--gt-border);
    border-radius: 14px;
    padding: 28px;
    transition: all var(--gt-t);
    display: flex; flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.gt-card::before {
    content: ''; position: absolute; inset: 0; padding: 1px;
    border-radius: inherit;
    background: linear-gradient(160deg, color-mix(in srgb, var(--gt-accent) 30%, transparent), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity var(--gt-t);
    pointer-events: none;
}
.gt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 70px -20px rgba(0,0,0,.5);
    border-color: var(--gt-border-strong);
}
.gt-card:hover::before { opacity: 1; }
.gt-card.is-hidden { display: none; }

.gt-card__icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    overflow: hidden;
    background: color-mix(in srgb, var(--gt-bg-elev) 60%, transparent);
    border: 1px solid var(--gt-border);
}
.gt-card__icon img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.gt-card__tag {
    position: absolute; top: 22px; right: 22px;
    font-family: var(--gt-mono);
    font-size: 10.5px; font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    letter-spacing: .3px;
}
.gt-card__tag--free {
    background: color-mix(in srgb, var(--gt-accent) 15%, transparent);
    color: var(--gt-accent);
}
.gt-card__tag--pro {
    background: color-mix(in srgb, var(--gt-accent-warm) 15%, transparent);
    color: var(--gt-accent-warm);
}

.gt-card__kicker {
    font-size: 11px; color: var(--gt-text-mut);
    text-transform: uppercase; letter-spacing: 1.8px;
    font-weight: 700; margin-bottom: 12px;
}
.gt-card__title {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: 22px;
    margin: 0 0 8px;
    color: var(--gt-text);
    letter-spacing: -.2px;
    padding-right: 80px;
    line-height: 1.15;
}
.gt-card__desc {
    color: var(--gt-text-mid);
    font-size: 14.5px; line-height: 1.6;
    margin: 0 0 22px; flex: 1;
}
.gt-card__meta {
    font-family: var(--gt-mono);
    font-size: 11.5px; color: var(--gt-text-mut);
    display: flex; gap: 6px; flex-wrap: wrap;
    padding-top: 18px; border-top: 1px solid var(--gt-border);
}
.gt-card__meta span + span::before { content: '·'; margin-right: 6px; opacity: .6; }

/* ================ LATEST NEWS ================ */
.gt-news { padding: 40px 28px 80px; }
.gt-news__wrap { max-width: 1200px; margin: 0 auto; }
.gt-news__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 32px; gap: 16px;
}
.gt-news__head-left { display: flex; flex-direction: column; gap: 8px; }
.gt-news__eyebrow {
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gt-accent); font-weight: 700;
}
.gt-news__title {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: clamp(28px, 3.4vw, 38px);
    margin: 0; color: var(--gt-text);
    letter-spacing: -.5px; line-height: 1.05;
}
.gt-news__all {
    color: var(--gt-text-mid);
    font-size: 14px; font-weight: 500;
    transition: color var(--gt-t);
    white-space: nowrap;
}
.gt-news__all:hover { color: var(--gt-accent); }

.gt-news__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: 22px;
}
@media (max-width: 900px) { .gt-news__grid { grid-template-columns: 1fr; grid-template-rows: auto; } }

.gt-news-card {
    position: relative;
    background: var(--gt-bg-card);
    border: 1px solid var(--gt-border);
    border-radius: 14px;
    padding: 28px;
    transition: all var(--gt-t);
    display: flex; flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.gt-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 70px -20px rgba(0,0,0,.5);
    border-color: var(--gt-border-strong);
}

.gt-news-card--big { grid-row: 1 / 3; }
.gt-news-card--big .gt-news-card__kicker { margin-bottom: 22px; }
.gt-news-card--big .gt-news-card__title { font-size: 32px; line-height: 1.1; margin-bottom: 12px; }
.gt-news-card--big .gt-news-card__excerpt { font-size: 16px; line-height: 1.65; }

.gt-news-card__visual {
    aspect-ratio: 16 / 9;
    margin: -28px -28px 24px;
    background:
        radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--gt-accent) 25%, transparent), transparent 60%),
        linear-gradient(160deg, var(--gt-bg-elev), var(--gt-bg-alt));
    border-bottom: 1px solid var(--gt-border);
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.gt-news-card__visual svg {
    width: 100px; height: 100px;
    color: color-mix(in srgb, var(--gt-accent) 70%, transparent);
}
.gt-news-card__visual img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}

.gt-news-card__kicker {
    font-size: 11px; color: var(--gt-text-mut);
    text-transform: uppercase; letter-spacing: 1.8px;
    font-weight: 700; margin-bottom: 12px;
}
.gt-news-card__title {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: 22px;
    margin: 0 0 10px;
    color: var(--gt-text);
    letter-spacing: -.2px; line-height: 1.15;
}
.gt-news-card__excerpt {
    color: var(--gt-text-mid);
    font-size: 14.5px; line-height: 1.6;
    margin: 0 0 22px; flex: 1;
}
.gt-news-card__meta {
    font-family: var(--gt-mono);
    font-size: 11.5px; color: var(--gt-text-mut);
    display: flex; gap: 6px; flex-wrap: wrap;
    padding-top: 18px; border-top: 1px solid var(--gt-border);
}
.gt-news-card__meta span + span::before { content: '·'; margin-right: 6px; opacity: .6; }

/* Small news cards: smaller SVG icon inside visual */
.gt-news-card:not(.gt-news-card--big) .gt-news-card__visual svg {
    width: 56px;
    height: 56px;
}
.gt-news-card:not(.gt-news-card--big) .gt-news-card__visual {
    aspect-ratio: 21 / 9;
}

/* ================ CUSTOM WORK CTA BAND ================ */
.gt-cta-band {
    padding: 96px 28px 104px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--gt-border);
    background: var(--gt-bg-alt);
    margin-top: 60px;
}
.gt-cta-band::before {
    content: ''; position: absolute; inset: 0;
    background: var(--gt-glow);
    opacity: .8; pointer-events: none;
}
.gt-cta-band__inner {
    position: relative; z-index: 1;
    max-width: 720px; margin: 0 auto;
}
.gt-cta-band__eyebrow {
    display: inline-block;
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gt-accent); font-weight: 700;
    margin-bottom: 14px;
}
.gt-cta-band__title {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: clamp(32px, 4.4vw, 50px);
    line-height: 1.1; letter-spacing: -.6px;
    margin: 0 0 18px;
    color: var(--gt-text);
}
.gt-cta-band__title em { font-style: italic; color: var(--gt-accent); font-weight: 500; }
.gt-cta-band__desc {
    color: var(--gt-text-mid);
    font-size: 17px;
    margin: 0 0 28px;
}
.gt-cta-band__buttons {
    display: flex; gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ================ FOOTER ================ */
.gt-footer {
    padding: 64px 28px 32px;
    border-top: 1px solid var(--gt-border);
    background: var(--gt-bg);
}
.gt-footer__inner {
    max-width: 1200px; margin: 0 auto;
}
.gt-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 48px;
}
@media (max-width: 800px) {
    .gt-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .gt-footer__brand { grid-column: 1 / -1; }
}

.gt-footer__logo {
    display: inline-block;
    margin-bottom: 16px;
    line-height: 0;
}
.gt-footer__logo img {
    max-width: 200px;
    height: auto;
    display: block;
}
.gt-footer__brand p {
    color: var(--gt-text-mut);
    font-size: 13.5px; line-height: 1.6;
    max-width: 300px;
    margin: 0;
}

.gt-footer__col h4 {
    font-size: 11px;
    text-transform: uppercase; letter-spacing: 2px;
    color: var(--gt-text-mut); font-weight: 700;
    margin: 0 0 16px;
    font-family: var(--gt-sans);
}
.gt-footer__col ul {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 10px;
}
.gt-footer__col a {
    color: var(--gt-text-mid);
    font-size: 14px;
    transition: color var(--gt-t);
    text-decoration: none;
}
.gt-footer__col a:hover { color: var(--gt-accent); }

.gt-footer__bar {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    padding-top: 28px;
    border-top: 1px solid var(--gt-border);
    color: var(--gt-text-mut);
    font-size: 12.5px;
}

/* ================ HEADER NAVIGATION ================ */
/* Tighten WP core navigation block so 8+ items fit on one row on desktop */
.wp-block-navigation {
    font-family: var(--gt-sans);
    font-size: 14px;
    font-weight: 500;
}
.wp-block-navigation .wp-block-navigation__container {
    gap: 4px;
    flex-wrap: nowrap;
}
.wp-block-navigation .wp-block-navigation-item__content {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--gt-text-mid);
    white-space: nowrap;
    transition: color var(--gt-t), background var(--gt-t);
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
    color: var(--gt-text);
    background: var(--gt-bg-card);
}
.wp-block-navigation .wp-block-navigation-submenu__toggle {
    padding-right: 6px;
}
/* Site logo max-height to prevent header from getting too tall */
@media (max-width: 900px) {
    .wp-block-navigation { font-size: 13px; }
    .wp-block-navigation .wp-block-navigation-item__content { padding: 6px 8px; }
}

/* ================ HERO PILL ================ */
.gt-hero-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 8px;
    background: var(--gt-bg-card);
    border: 1px solid var(--gt-border);
    border-radius: 100px;
    font-family: var(--gt-sans);
    font-size: 12.5px; font-weight: 600;
    color: var(--gt-text-mid);
    letter-spacing: .3px;
    text-decoration: none;
}
.gt-hero-pill__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gt-accent-2);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gt-accent) 25%, transparent);
    animation: gt-pulse 2.2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes gt-pulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gt-accent) 25%, transparent); }
    50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--gt-accent) 5%, transparent); }
}
.gt-hero-pill__label {
    color: var(--gt-text-mid);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11.5px;
}
.gt-hero-pill__label strong { color: var(--gt-text); font-weight: 700; }
a.gt-hero-pill:hover { border-color: var(--gt-border-strong); background: var(--gt-bg-elev); transition: all var(--gt-t); }


/* ================ FOOTER SOCIAL ================ */
.gt-footer__social {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}
.gt-footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--gt-bg-card);
    border: 1px solid var(--gt-border);
    color: var(--gt-text-mid);
    transition: all var(--gt-t);
}
.gt-footer__social a:hover {
    color: var(--gt-accent);
    border-color: var(--gt-border-strong);
    transform: translateY(-1px);
}


/* ================ HEADER ================ */
.gt-header__grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: nowrap;
}
.gt-header__logo { display: inline-block; line-height: 0; flex-shrink: 0; }
.gt-header__logo img {
    display: block; height: auto;
    max-width: 220px;
}
.gt-header__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}
.gt-header__social { display: flex; gap: 2px; }
.gt-header__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    color: var(--gt-text-mut);
    transition: color var(--gt-t), background var(--gt-t);
}
.gt-header__social a:hover { color: var(--gt-accent); background: var(--gt-bg-card); }
.gt-header__nav-wrap { display: flex; }

/* ================ LATEST TOOLS NAV BELOW ================ */
.gt-tools-nav--below {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin: 20px 28px 0;
}

/* ================================================================
   PHASE D — Internal templates (single, page, archive, app)
   ================================================================ */

/* --- Post / Page hero ---------------------------------------- */
.gt-post-hero {
    padding: 60px 0 40px;
    border-bottom: 1px solid var(--gt-border);
    margin-bottom: 48px;
}
.gt-post-hero__inner { max-width: 820px; margin: 0 auto; }
.gt-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-family: var(--gt-sans); font-size: 12.5px;
    color: var(--gt-text-mut); text-transform: uppercase; letter-spacing: 1.2px;
    margin: 0 0 20px;
}
.gt-crumbs a { color: var(--gt-text-mut); text-decoration: none; transition: color var(--gt-t); }
.gt-crumbs a:hover { color: var(--gt-accent); }
.gt-crumbs__sep { color: var(--gt-border-strong); }
.gt-crumbs__current { color: var(--gt-text-mid); }

.gt-post-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--gt-sans); font-size: 11.5px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
    color: var(--gt-accent); margin: 0 0 18px;
}
.gt-post-hero h1, .gt-post-hero .wp-block-post-title {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.08; letter-spacing: -1px;
    color: var(--gt-text); margin: 0 0 20px;
}
.gt-post-hero__lede {
    font-family: var(--gt-sans);
    font-size: 18px; line-height: 1.55;
    color: var(--gt-text-mid);
    margin: 0 0 24px;
    max-width: 680px;
}
.gt-post-hero__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    font-family: var(--gt-sans); font-size: 13.5px;
    color: var(--gt-text-mut);
}
.gt-post-hero__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gt-border-strong); }
.gt-post-hero__meta a { color: var(--gt-text-mid); text-decoration: none; }
.gt-post-hero__meta a:hover { color: var(--gt-accent); }

/* --- Featured image ------------------------------------------ */
.gt-featured {
    max-width: 1100px; margin: 0 auto 56px;
    border-radius: 20px; overflow: hidden;
    border: 1px solid var(--gt-border);
    background: var(--gt-bg-card);
}
.gt-featured img, .gt-featured .wp-block-post-featured-image img {
    display: block; width: 100%; height: auto;
}

/* --- Prose / rich content ------------------------------------ */
.gt-prose {
    max-width: 720px; margin: 0 auto;
    font-family: var(--gt-sans);
    font-size: 17px; line-height: 1.72;
    color: var(--gt-text-mid);
}
.gt-prose > * + * { margin-top: 1.15em; }
.gt-prose p, .gt-prose ul, .gt-prose ol, .gt-prose blockquote { margin: 0; }
.gt-prose h2 {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: clamp(24px, 3vw, 32px); line-height: 1.2;
    color: var(--gt-text); letter-spacing: -.5px;
    margin: 2em 0 .6em;
}
.gt-prose h3 {
    font-family: var(--gt-sans); font-weight: 600;
    font-size: 20px; color: var(--gt-text);
    margin: 1.8em 0 .5em;
}
.gt-prose h4 {
    font-family: var(--gt-sans); font-weight: 600;
    font-size: 16.5px; color: var(--gt-text);
    text-transform: uppercase; letter-spacing: 1.2px;
    margin: 1.6em 0 .5em;
}
.gt-prose a { color: var(--gt-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gt-prose a:hover { color: var(--gt-accent-2); }
.gt-prose strong { color: var(--gt-text); font-weight: 600; }
.gt-prose ul, .gt-prose ol { padding-left: 1.4em; }
.gt-prose li + li { margin-top: .35em; }
.gt-prose blockquote {
    padding: 8px 0 8px 22px;
    border-left: 3px solid var(--gt-accent);
    color: var(--gt-text);
    font-family: var(--gt-serif); font-style: italic;
    font-size: 19px; line-height: 1.55;
}
.gt-prose code {
    font-family: var(--gt-mono); font-size: .88em;
    padding: 2px 6px; border-radius: 4px;
    background: var(--gt-bg-card); color: var(--gt-accent);
    border: 1px solid var(--gt-border);
}
.gt-prose pre {
    padding: 18px 20px; border-radius: 12px;
    background: var(--gt-bg-card); border: 1px solid var(--gt-border);
    overflow-x: auto;
}
.gt-prose pre code { padding: 0; border: 0; background: transparent; color: var(--gt-text); }
.gt-prose img, .gt-prose figure {
    display: block; margin: 1.8em auto; max-width: 100%; height: auto;
    border-radius: 12px;
}
.gt-prose figure img { margin: 0; }
.gt-prose figcaption {
    text-align: center; font-size: 13.5px;
    color: var(--gt-text-mut); margin-top: 10px;
}
.gt-prose hr {
    border: 0; border-top: 1px solid var(--gt-border);
    margin: 2.4em auto; max-width: 240px;
}
.gt-prose table {
    width: 100%; border-collapse: collapse;
    font-size: 15px; margin: 1.5em 0;
}
.gt-prose th, .gt-prose td {
    padding: 10px 14px; border-bottom: 1px solid var(--gt-border);
    text-align: left;
}
.gt-prose th { color: var(--gt-text); font-weight: 600; }

/* --- Related grid (news / apps / products) ------------------- */
.gt-related {
    max-width: 1200px; margin: 80px auto 0; padding: 40px 0 0;
    border-top: 1px solid var(--gt-border);
}
.gt-related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.gt-related__eyebrow {
    font-family: var(--gt-sans); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2.5px; color: var(--gt-accent);
    margin: 0 0 6px;
}
.gt-related__title {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: clamp(22px, 2.4vw, 28px); color: var(--gt-text);
    margin: 0; letter-spacing: -.4px;
}
.gt-related__more { font-family: var(--gt-sans); font-size: 13.5px; color: var(--gt-text-mid); text-decoration: none; }
.gt-related__more:hover { color: var(--gt-accent); }
.gt-related__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.gt-rcard {
    display: flex; flex-direction: column;
    background: var(--gt-bg-card); border: 1px solid var(--gt-border);
    border-radius: 14px; overflow: hidden;
    text-decoration: none; transition: transform var(--gt-t), border-color var(--gt-t);
}
.gt-rcard:hover { transform: translateY(-2px); border-color: var(--gt-border-strong); }
.gt-rcard__visual {
    aspect-ratio: 16/9; background: linear-gradient(160deg, var(--gt-bg-elev), var(--gt-bg-alt));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.gt-rcard__visual img { width: 100%; height: 100%; object-fit: cover; }
.gt-rcard__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.gt-rcard__kicker { font-family: var(--gt-sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gt-accent); }
.gt-rcard__title {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: 18px; line-height: 1.3;
    color: var(--gt-text); letter-spacing: -.2px;
    margin: 0;
}
.gt-rcard__date { font-family: var(--gt-sans); font-size: 12.5px; color: var(--gt-text-mut); }

/* --- Archive hero + grid ------------------------------------- */
.gt-archive-hero {
    padding: 60px 0 40px;
    border-bottom: 1px solid var(--gt-border);
    margin-bottom: 48px;
}
.gt-archive-hero__inner { max-width: 820px; margin: 0 auto; }
.gt-archive-hero h1 {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.08; letter-spacing: -1px;
    color: var(--gt-text); margin: 0 0 12px;
}
.gt-archive-hero__desc {
    font-family: var(--gt-sans);
    font-size: 17px; line-height: 1.55;
    color: var(--gt-text-mid); margin: 0;
}
.gt-archive-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    max-width: 1200px; margin: 0 auto;
}
.gt-archive-grid .wp-block-post {
    display: flex; flex-direction: column;
    background: var(--gt-bg-card); border: 1px solid var(--gt-border);
    border-radius: 14px; overflow: hidden;
    padding: 0; margin: 0;
    transition: transform var(--gt-t), border-color var(--gt-t);
}
.gt-archive-grid .wp-block-post:hover { transform: translateY(-2px); border-color: var(--gt-border-strong); }
.gt-archive-grid .wp-block-post-featured-image {
    aspect-ratio: 16/9; overflow: hidden; margin: 0;
    background: linear-gradient(160deg, var(--gt-bg-elev), var(--gt-bg-alt));
}
.gt-archive-grid .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-archive-grid .wp-block-post-title {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: 19px; line-height: 1.28;
    color: var(--gt-text); letter-spacing: -.2px;
    margin: 16px 20px 8px;
}
.gt-archive-grid .wp-block-post-title a { color: inherit; text-decoration: none; }
.gt-archive-grid .wp-block-post-title a:hover { color: var(--gt-accent); }
.gt-archive-grid .wp-block-post-date {
    font-family: var(--gt-sans); font-size: 12.5px;
    color: var(--gt-text-mut); margin: 0 20px 8px;
}
.gt-archive-grid .wp-block-post-excerpt {
    font-family: var(--gt-sans); font-size: 14.5px; line-height: 1.5;
    color: var(--gt-text-mid); margin: 0 20px 20px;
}
.gt-archive-grid .wp-block-post-excerpt__more-link { color: var(--gt-accent); text-decoration: none; font-weight: 600; }

/* Pagination */
.wp-block-query-pagination {
    max-width: 1200px; margin: 48px auto 0;
    display: flex; justify-content: center; align-items: center; gap: 4px;
    font-family: var(--gt-sans); font-size: 14px;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
    padding: 8px 14px; border-radius: 8px;
    color: var(--gt-text-mid); text-decoration: none;
    transition: all var(--gt-t);
}
.wp-block-query-pagination a:hover,
.wp-block-query-pagination .page-numbers.current {
    background: var(--gt-bg-card); color: var(--gt-text);
}

/* --- App landing hero ---------------------------------------- */
.gt-app-hero {
    padding: 60px 0 50px;
    border-bottom: 1px solid var(--gt-border);
    margin-bottom: 48px;
}
.gt-app-hero__inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 160px 1fr auto; gap: 32px;
    align-items: center;
}
.gt-app-hero__icon {
    width: 160px; height: 160px; border-radius: 32px;
    background: var(--gt-bg-card);
    border: 1px solid var(--gt-border);
    overflow: hidden;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
}
.gt-app-hero__icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.gt-app-hero__body h1 {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.1; letter-spacing: -.6px;
    color: var(--gt-text); margin: 0 0 10px;
}
.gt-app-hero__sub {
    font-family: var(--gt-sans); font-size: 16.5px;
    color: var(--gt-text-mid); margin: 0 0 16px;
}
.gt-app-hero__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    font-family: var(--gt-sans); font-size: 12.5px; color: var(--gt-text-mut);
    text-transform: uppercase; letter-spacing: 1.2px;
}
.gt-app-hero__meta .chip {
    padding: 4px 10px; border-radius: 100px;
    background: color-mix(in srgb, var(--gt-accent) 15%, transparent);
    color: var(--gt-accent); font-weight: 700; letter-spacing: 1.5px;
}
.gt-app-hero__cta { display: flex; flex-direction: column; gap: 10px; }
.gt-app-hero__cta img { max-width: 200px; height: auto; }

/* --- Responsive ---------------------------------------------- */
@media (max-width: 900px) {
    .gt-related__grid, .gt-archive-grid { grid-template-columns: repeat(2, 1fr); }
    .gt-app-hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .gt-app-hero__cta img { max-width: 220px; }
}
@media (max-width: 620px) {
    .gt-related__grid, .gt-archive-grid { grid-template-columns: 1fr; }
    .gt-post-hero, .gt-archive-hero { padding: 40px 0 28px; margin-bottom: 32px; }
    .gt-related { margin-top: 56px; }
}

/* ================ POST HERO — horizontal split (v0.9.2) ================ */
.gt-post-hero-h {
    padding: 48px 0 48px;
    border-bottom: 1px solid var(--gt-border);
    margin-bottom: 56px;
}
.gt-post-hero-h__grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 48px;
    align-items: center;
}
.gt-post-hero-h__visual {
    aspect-ratio: 1;
    border-radius: 20px;
    background: linear-gradient(160deg, var(--gt-bg-card), var(--gt-bg-alt));
    border: 1px solid var(--gt-border);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,.5);
}
.gt-post-hero-h__visual .wp-block-post-featured-image,
.gt-post-hero-h__visual figure {
    margin: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.gt-post-hero-h__visual img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 12px;
}
.gt-post-hero-h__body { min-width: 0; }
.gt-post-hero-h__body .wp-block-post-title {
    font-family: var(--gt-serif); font-weight: 500;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08; letter-spacing: -.8px;
    color: var(--gt-text); margin: 8px 0 16px;
}
.gt-post-hero-h__lede,
.gt-post-hero-h .wp-block-post-excerpt,
.gt-post-hero-h .wp-block-post-excerpt p {
    font-family: var(--gt-sans);
    font-size: 17px; line-height: 1.55;
    color: var(--gt-text-mid);
    margin: 0 0 20px;
    max-width: 620px;
}
.gt-post-hero-h .wp-block-post-excerpt__more-link { display: none; }
.gt-post-hero-h__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    font-family: var(--gt-sans); font-size: 13.5px;
    color: var(--gt-text-mut);
}
.gt-post-hero-h__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gt-border-strong); }
.gt-post-hero-h__meta a { color: var(--gt-text-mid); text-decoration: none; }
.gt-post-hero-h__meta a:hover { color: var(--gt-accent); }

@media (max-width: 820px) {
    .gt-post-hero-h__grid {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }
    .gt-post-hero-h__visual {
        max-width: 260px;
        margin: 0 auto;
    }
    .gt-post-hero-h__lede { margin-left: auto; margin-right: auto; }
    .gt-post-hero-h__meta { justify-content: center; }
    .gt-crumbs { justify-content: center; }
}

/* ================ v0.9.3 FIXES ================ */

/* Related section — v0.9.6 (outside main, natural full-width) */
.gt-related-full {
    padding: 0 24px;
    margin-top: 40px;
}
.gt-related-full .gt-related {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 40px 0 0;
    border-top: 1px solid var(--gt-border);
}
.gt-related-full .gt-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) {
    .gt-related-full .gt-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .gt-related-full .gt-related__grid { grid-template-columns: 1fr; }
}

/* Otter Blocks (themeisle) Glide slider — dots + arrows (v0.9.6 strengthened) */
.wp-block-themeisle-blocks-slider,
.wp-block-themeisle-blocks-slider.glide { position: relative !important; }
.wp-block-themeisle-blocks-slider .glide__bullets,
.glide .glide__bullets {
    position: absolute !important;
    left: 50% !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 6px !important;
    z-index: 3 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
}
.wp-block-themeisle-blocks-slider .glide__bullet,
.glide .glide__bullet {
    width: 9px !important; height: 9px !important;
    padding: 0 !important; margin: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.35) !important;
    border: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
    transition: background 220ms, transform 220ms;
    min-width: 0 !important;
    display: inline-block !important;
}
.wp-block-themeisle-blocks-slider .glide__bullet:hover,
.glide .glide__bullet:hover {
    background: rgba(255,255,255,.6) !important;
    transform: scale(1.15);
}
.wp-block-themeisle-blocks-slider .glide__bullet--active,
.glide .glide__bullet--active {
    background: var(--gt-accent) !important;
    transform: scale(1.2);
}
.wp-block-themeisle-blocks-slider .glide__arrows,
.glide .glide__arrows { position: static !important; }
.wp-block-themeisle-blocks-slider .glide__arrow,
.glide .glide__arrow {
    background: rgba(0,0,0,.5) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    color: #fff !important;
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}
.wp-block-themeisle-blocks-slider .glide__arrow:hover,
.glide .glide__arrow:hover {
    background: var(--gt-accent) !important;
    color: var(--gt-bg) !important;
}


/* ================ v0.9.7 FINAL OVERRIDE — highest cascade priority ================ */
html body .gt-related-full .gt-related__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: auto !important;
    max-width: none !important;
}
html body .gt-related-full .gt-related__grid .gt-rcard {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}
@media (max-width: 900px) {
    html body .gt-related-full .gt-related__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 620px) {
    html body .gt-related-full .gt-related__grid {
        grid-template-columns: 1fr !important;
    }
}


/* ================ v0.9.8 EVEN MORE AGGRESSIVE ================ */
html body section.gt-related-full,
html body .gt-related-full {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 40px 24px 0 24px !important;
    box-sizing: border-box !important;
    display: block !important;
}
html body section.gt-related-full > div.gt-related,
html body .gt-related-full > .gt-related {
    width: auto !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    padding: 40px 0 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}
html body section.gt-related-full .gt-related__grid,
html body .gt-related-full .gt-related__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
}
@media (max-width: 900px) {
    html body .gt-related-full .gt-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 620px) {
    html body .gt-related-full .gt-related__grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* ================ v0.9.9 - <b> wrap fix (plugin injected via JS) ================ */
/* Some plugin (WP Dark Mode / EWWW / etc) wraps children in a <b> tag via JS,
   which makes grid see only 1 child. display:contents makes the <b> invisible to layout. */
.gt-related__grid > b {
    display: contents !important;
}
.gt-archive-grid > b {
    display: contents !important;
}
/* Same defensive fix for the tools/spotlight grids in case they get the same treatment */
.gt-tools-track > b,
.gt-spotlight__track > b {
    display: contents !important;
}


/* ================ v0.10.0 - Bullet fix (rectangular active state) ================ */
/* Force the active bullet to stay a circle - some parent flex/CSS was allowing it to stretch */
.wp-block-themeisle-blocks-slider .glide__bullet,
.wp-block-themeisle-blocks-slider .glide__bullet--active,
.glide .glide__bullet,
.glide .glide__bullet--active {
    width: 9px !important;
    max-width: 9px !important;
    min-width: 0 !important;
    height: 9px !important;
    max-height: 9px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 3px !important;
    border-radius: 50% !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    flex: 0 0 9px !important;
    display: inline-block !important;
    aspect-ratio: 1 / 1 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    background-color: rgba(255,255,255,.35) !important;
}
.wp-block-themeisle-blocks-slider .glide__bullet--active,
.glide .glide__bullet--active {
    background-color: var(--gt-accent) !important;
    transform: scale(1.3) !important;
}


/* ================ v0.10.1 - Bullets more visible + functional look ================ */
.wp-block-themeisle-blocks-slider .glide__bullet,
.glide .glide__bullet {
    width: 10px !important;
    max-width: 10px !important;
    min-width: 0 !important;
    height: 10px !important;
    max-height: 10px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 5px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.4) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.25) !important;
    outline: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    flex: 0 0 10px !important;
    display: inline-block !important;
    aspect-ratio: 1 / 1 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    background-color: rgba(255,255,255,.55) !important;
    cursor: pointer !important;
    opacity: 1 !important;
}
.wp-block-themeisle-blocks-slider .glide__bullet:hover,
.glide .glide__bullet:hover {
    background-color: rgba(255,255,255,.85) !important;
    transform: scale(1.15) !important;
}
.wp-block-themeisle-blocks-slider .glide__bullet--active,
.glide .glide__bullet--active {
    background-color: var(--gt-accent) !important;
    border-color: var(--gt-accent) !important;
    box-shadow: 0 0 8px rgba(125,211,252,.6), 0 0 0 1px rgba(0,0,0,.3) !important;
    transform: scale(1.15) !important;
}


/* ================ v0.11.0 - REMOVE slider bullets + carousel Latest news + Lightbox ================ */

/* 1) HIDE Otter slider bullets — keep only arrows */
.wp-block-themeisle-blocks-slider .glide__bullets,
.glide .glide__bullets {
    display: none !important;
}

/* 2) Related news → carousel (converts grid to horizontal scroller) */
.gt-related__actions {
    display: flex; align-items: center; flex-direction: column; gap: 12px; align-items: flex-end;
}
.gt-related__nav {
    display: flex; gap: 8px;
}
.gt-related__nav button {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--gt-bg-card);
    border: 1px solid var(--gt-border);
    color: var(--gt-text-mid);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1;
    transition: all var(--gt-t);
}
.gt-related__nav button:hover {
    border-color: var(--gt-accent);
    color: var(--gt-accent);
    transform: translateY(-1px);
}

/* Override grid → become scroller when .gt-related--carousel is present */
html body .gt-related--carousel .gt-related__scroller,
html body .gt-related--carousel [data-gt-related-scroller] {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 4px 20px;
    margin: 0;
    grid-template-columns: none !important;
}
html body .gt-related--carousel .gt-related__scroller::-webkit-scrollbar {
    display: none;
}
html body .gt-related--carousel .gt-rcard {
    flex: 0 0 calc((100% - 40px) / 3) !important;
    min-width: 0 !important;
    scroll-snap-align: start;
}
@media (max-width: 900px) {
    html body .gt-related--carousel .gt-rcard {
        flex: 0 0 calc((100% - 20px) / 2) !important;
    }
}
@media (max-width: 620px) {
    html body .gt-related--carousel .gt-rcard {
        flex: 0 0 90% !important;
    }
}
/* Defense against <b> wrapping from plugins (same fix as v0.9.9) */
html body .gt-related--carousel .gt-related__scroller > b {
    display: contents !important;
}

/* 3) Lightbox modal */
.gt-lightbox {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: none;
    align-items: center; justify-content: center;
    padding: 40px;
    box-sizing: border-box;
}
.gt-lightbox.is-open { display: flex; animation: gt-lightbox-in .2s ease-out; }
@keyframes gt-lightbox-in { from { opacity: 0 } to { opacity: 1 } }
.gt-lightbox__close {
    position: absolute;
    top: 16px; right: 20px;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: 26px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.gt-lightbox__close:hover { background: rgba(255,255,255,.3); transform: scale(1.05); }
.gt-lightbox__body {
    max-width: 90vw; max-height: 90vh;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.gt-lightbox__img {
    max-width: 100%; max-height: calc(90vh - 40px);
    width: auto; height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.gt-lightbox__caption {
    color: rgba(255,255,255,.85);
    font-family: var(--gt-sans);
    font-size: 14px;
    text-align: center;
    max-width: 600px;
    padding: 8px 12px;
    background: rgba(0,0,0,.4);
    border-radius: 6px;
}


/* ================ v0.11.1 - Fix Latest news image heights ================ */
html body .gt-related--carousel .gt-rcard .gt-rcard__visual {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: 200px !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    display: block !important;
    background: linear-gradient(160deg, var(--gt-bg-elev), var(--gt-bg-alt));
    border-radius: 0 !important;
}
html body .gt-related--carousel .gt-rcard .gt-rcard__visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}


/* ================ v0.11.2 - HARD image height cap ================ */
html body .gt-related--carousel .gt-rcard .gt-rcard__visual,
html body .gt-related-full .gt-rcard .gt-rcard__visual {
    height: 160px !important;
    max-height: 160px !important;
    min-height: 160px !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    flex: 0 0 160px !important;
    overflow: hidden !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(160deg, var(--gt-bg-elev), var(--gt-bg-alt));
}
html body .gt-related--carousel .gt-rcard .gt-rcard__visual img,
html body .gt-related-full .gt-rcard .gt-rcard__visual img {
    width: 100% !important;
    height: 160px !important;
    max-height: 160px !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ================ v0.11.3 - Smaller compact icons ================ */
html body .gt-related--carousel .gt-rcard .gt-rcard__visual,
html body .gt-related-full .gt-rcard .gt-rcard__visual {
    height: 110px !important;
    max-height: 110px !important;
    min-height: 110px !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    flex: 0 0 110px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    margin: 0 !important;
    background: linear-gradient(160deg, var(--gt-bg-elev), var(--gt-bg-alt));
    box-sizing: border-box !important;
}
html body .gt-related--carousel .gt-rcard .gt-rcard__visual img,
html body .gt-related-full .gt-rcard .gt-rcard__visual img {
    max-width: 86px !important;
    max-height: 86px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
}


/* ================ v0.11.4 - Adaptive image (both square icons & landscape banners) ================ */
html body .gt-related--carousel .gt-rcard .gt-rcard__visual,
html body .gt-related-full .gt-rcard .gt-rcard__visual {
    height: 130px !important;
    max-height: 130px !important;
    min-height: 130px !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    flex: 0 0 130px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    margin: 0 !important;
    background: linear-gradient(160deg, var(--gt-bg-elev), var(--gt-bg-alt));
    box-sizing: border-box !important;
}
html body .gt-related--carousel .gt-rcard .gt-rcard__visual img,
html body .gt-related-full .gt-rcard .gt-rcard__visual img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
}


/* ================ v0.11.5 - Fix gta-* color contrast on dark theme ================ */
/* mu-plugin gromastech-apps hardcodes light-theme colors that disappear on dark. Override. */
.gta-app__title { color: var(--gt-text) !important; }
.gta-app__tagline { color: var(--gt-text-mid) !important; }
.gta-app__crumbs a { color: var(--gt-text-mid) !important; }
.gta-app__crumbs a:hover { color: var(--gt-accent) !important; }
.gta-description,
.gta-description p,
.gta-description li,
.gta-description ul,
.gta-description ol { color: var(--gt-text) !important; }
.gta-description a { color: var(--gt-accent) !important; }
.gta-description strong { color: var(--gt-text) !important; font-weight: 600; }
.gta-description h2, .gta-description h3, .gta-description h4 { color: var(--gt-text) !important; }
.gta-tag {
    background: var(--gt-bg-card) !important;
    color: var(--gt-text-mid) !important;
    border: 1px solid var(--gt-border) !important;
}
.gta-tag:hover {
    background: var(--gt-bg-elev) !important;
    color: var(--gt-accent) !important;
    border-color: var(--gt-accent) !important;
}
.gta-cta {
    background: var(--gt-accent) !important;
    color: var(--gt-bg) !important;
}
.gta-cta:hover {
    background: var(--gt-accent-2) !important;
    color: var(--gt-bg) !important;
}
/* Container background if any */
.gta-single, .gta-container, .gta-app { background: transparent !important; }


/* ================ v0.11.6 - Fix WP nav submenu background ================ */
/* Nav submenus were showing default white background with dark text. Match theme. */
.wp-block-navigation .wp-block-navigation__submenu-container,
.wp-block-navigation ul.wp-block-navigation__submenu-container,
.wp-block-navigation-submenu .wp-block-navigation__submenu-container {
    background: var(--gt-bg-card) !important;
    color: var(--gt-text) !important;
    border: 1px solid var(--gt-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.35) !important;
    padding: 6px 0 !important;
    min-width: 180px !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container a {
    color: var(--gt-text-mid) !important;
    background: transparent !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    white-space: nowrap;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container a:hover {
    background: var(--gt-bg-elev) !important;
    color: var(--gt-accent) !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
    display: block;
    margin: 0 !important;
}
/* Chevron/arrow icon inside submenu items */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle svg,
.wp-block-navigation .wp-block-navigation-submenu__toggle svg {
    fill: currentColor;
}


/* ================ v0.11.7 - Archive wide + apps archive dark overrides ================ */
/* Archive/news templates now inside alignwide wrapper, force full 1200px width */
html body main .gt-archive-wrap {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}
html body main .gt-archive-wrap .wp-block-query,
html body main .gt-archive-wrap .gt-archive-grid {
    max-width: none !important;
    width: 100% !important;
}
/* Defend against plugin <b> wrappers again on archive grid */
html body .gt-archive-grid > b { display: contents !important; }

/* Apps archive (mu-plugin gromastech-apps) dark theme overrides */
html body .gta-container { background: transparent !important; padding: 40px 24px !important; }
html body #gta-search {
    background: var(--gt-bg-card) !important;
    color: var(--gt-text) !important;
    border: 1px solid var(--gt-border) !important;
}
html body #gta-search:focus {
    outline: 2px solid var(--gt-accent) !important;
    border-color: var(--gt-accent) !important;
}
html body #gta-search::placeholder { color: var(--gt-text-mut) !important; }
html body .gta-filter {
    background: var(--gt-bg-card) !important;
    color: var(--gt-text-mid) !important;
    border-color: var(--gt-border) !important;
}
html body .gta-filter:hover {
    background: var(--gt-bg-elev) !important;
    color: var(--gt-text) !important;
    border-color: var(--gt-border-strong) !important;
}
html body .gta-filter.is-active {
    background: var(--gt-accent) !important;
    color: var(--gt-bg) !important;
    border-color: var(--gt-accent) !important;
}
html body .gta-card {
    background: var(--gt-bg-card) !important;
    border: 1px solid var(--gt-border) !important;
    color: var(--gt-text) !important;
}
html body .gta-card:hover {
    border-color: var(--gt-border-strong) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;
}
html body .gta-card__title { color: var(--gt-text) !important; }
html body .gta-card__desc { color: var(--gt-text-mid) !important; }
html body .gta-card__icon { background: var(--gt-bg-elev) !important; }
html body .gta-empty { color: var(--gt-text-mut) !important; }
html body .gta-archive__intro { color: var(--gt-text-mid) !important; }


/* ================ v0.11.8 - Archive card images (compact + adaptive) ================ */
/* Same treatment as Latest news carousel: fixed height + contain to handle square icons AND landscape banners */
html body .gt-archive-grid .wp-block-post-featured-image,
html body .gt-archive-grid figure.wp-block-post-featured-image {
    height: 150px !important;
    max-height: 150px !important;
    min-height: 150px !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(160deg, var(--gt-bg-elev), var(--gt-bg-alt)) !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
}
html body .gt-archive-grid .wp-block-post-featured-image img,
html body .gt-archive-grid figure.wp-block-post-featured-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
}
html body .gt-archive-grid .wp-block-post-featured-image a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
}


/* ================ v0.12.0 - Clean archive thumb (from PHP filter, no WP inline styles) ================ */
.gt-archive-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    width: 100%;
    padding: 14px;
    margin: 0;
    background: linear-gradient(160deg, var(--gt-bg-elev), var(--gt-bg-alt));
    box-sizing: border-box;
    overflow: hidden;
}
.gt-archive-thumb a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.gt-archive-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}


/* ================ v0.12.1 - constrain img inside <picture> wrapper too ================ */
/* EWWW plugin wraps img in <picture> element with no explicit height, breaking max-height:100% chain */
.gt-archive-thumb picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
.gt-archive-thumb picture img,
.gt-archive-thumb > img,
.gt-archive-thumb a > img {
    max-width: 100%;
    max-height: 132px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}


/* ================ v0.12.2 - WooCommerce sort dropdown dark theme ================ */
.woocommerce-ordering,
.woocommerce .woocommerce-ordering {
    display: inline-block;
}
.woocommerce-ordering select,
.woocommerce .woocommerce-ordering select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--gt-bg-card);
    color: var(--gt-text);
    border: 1px solid var(--gt-border);
    border-radius: 8px;
    padding: 8px 36px 8px 14px;
    font-family: var(--gt-sans);
    font-size: 14px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23cbd5e1' d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
}
.woocommerce-ordering select:hover,
.woocommerce .woocommerce-ordering select:hover {
    border-color: var(--gt-border-strong);
    color: var(--gt-accent);
}
.woocommerce-ordering select:focus,
.woocommerce .woocommerce-ordering select:focus {
    outline: 2px solid var(--gt-accent);
    outline-offset: 1px;
}
.woocommerce-ordering select option {
    background-color: var(--gt-bg-card);
    color: var(--gt-text);
}
/* Woo Shop breadcrumbs + result count */
.woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
    color: var(--gt-text-mid);
    font-family: var(--gt-sans);
    font-size: 13.5px;
}
.woocommerce-breadcrumb a,
.woocommerce .woocommerce-breadcrumb a {
    color: var(--gt-text-mid);
    text-decoration: none;
}
.woocommerce-breadcrumb a:hover,
.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--gt-accent);
}
.woocommerce-result-count,
.woocommerce .woocommerce-result-count {
    color: var(--gt-text-mut);
    font-family: var(--gt-sans);
    font-size: 13.5px;
}


/* ================ v0.12.3 - Submenu nested items + toggle buttons ================ */
/* Also style <button> toggles inside submenus (not just <a> tags) so nested submenu labels show */
.wp-block-navigation .wp-block-navigation__submenu-container button,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--gt-text-mid) !important;
    background: transparent !important;
    padding: 8px 16px !important;
    border: 0 !important;
    font-family: var(--gt-sans);
    font-size: 14px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    cursor: pointer;
    white-space: nowrap;
}
.wp-block-navigation .wp-block-navigation__submenu-container button:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: var(--gt-bg-elev) !important;
    color: var(--gt-accent) !important;
}
/* Chevron icon in submenu toggles */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle svg {
    fill: currentColor;
    width: 12px;
    height: 12px;
    margin-left: auto;
}
/* Nested submenu positioning (pop out to the right) */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    top: 0;
    left: 100%;
    margin-top: -6px;
}


/* ================ v0.12.4 - Site-wide pagination (WP + Woo + comments) ================ */
/* Unified design: circular buttons dark theme, accent on hover/current */
nav.woocommerce-pagination,
nav.wp-block-query-pagination,
.wp-block-query-pagination,
nav.pagination,
.pagination,
.navigation.pagination,
.comments-pagination,
.wp-pagenavi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 48px auto 0;
    padding: 0;
    font-family: var(--gt-sans);
    font-size: 14px;
    list-style: none;
    flex-wrap: wrap;
}
nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0 !important;
}
nav.woocommerce-pagination ul li,
nav.woocommerce-pagination ul.page-numbers li {
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
}

/* All page number links + spans (Woo and WP use both) */
.page-numbers,
a.page-numbers,
span.page-numbers,
.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-query-pagination-numbers,
.woocommerce-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--gt-bg-card) !important;
    color: var(--gt-text-mid) !important;
    border: 1px solid var(--gt-border) !important;
    text-decoration: none;
    font-family: var(--gt-sans);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--gt-t);
    line-height: 1;
    box-sizing: border-box;
}
a.page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.woocommerce-pagination a.page-numbers:hover {
    background: var(--gt-bg-elev) !important;
    color: var(--gt-accent) !important;
    border-color: var(--gt-accent) !important;
    transform: translateY(-1px);
}
/* Current page */
.page-numbers.current,
span.page-numbers.current,
.wp-block-query-pagination-numbers .page-numbers.current {
    background: var(--gt-accent) !important;
    color: var(--gt-bg) !important;
    border-color: var(--gt-accent) !important;
    font-weight: 700;
}
/* Dots (gap indicator) */
.page-numbers.dots {
    background: transparent !important;
    border: 0 !important;
    color: var(--gt-text-mut) !important;
    cursor: default;
}
/* Prev/next arrow */
.page-numbers.prev,
.page-numbers.next {
    font-size: 15px;
}


/* ================ v0.12.5 - Pagination hover no-clip ================ */
/* Increase spacing + remove translateY that was clipping the border on hover */
nav.woocommerce-pagination,
nav.wp-block-query-pagination,
.wp-block-query-pagination,
nav.pagination,
.pagination,
.navigation.pagination,
.comments-pagination,
.wp-pagenavi {
    margin: 64px auto 24px !important;
    padding: 8px !important;
    gap: 8px !important;
    overflow: visible !important;
}
a.page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.woocommerce-pagination a.page-numbers:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(125, 211, 252, .25) !important;
}


/* ================ v0.12.6 - Woo product buttons + sticky header ================ */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_external,
.woocommerce ul.products li.product .button.product_type_simple,
.woocommerce ul.products li.product .added_to_cart {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px !important;
    font-family: var(--gt-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: 8px !important;
    background: var(--gt-accent) !important;
    color: var(--gt-bg) !important;
    border: 1px solid var(--gt-accent) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all var(--gt-t);
    box-shadow: 0 4px 12px rgba(125, 211, 252, .15);
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product .button.product_type_external:hover,
.woocommerce ul.products li.product .added_to_cart:hover {
    background: var(--gt-text) !important;
    color: var(--gt-bg) !important;
    border-color: var(--gt-text) !important;
    box-shadow: 0 8px 20px rgba(125, 211, 252, .35) !important;
    transform: translateY(-2px);
}
.woocommerce .single_add_to_cart_button,
.woocommerce button.button,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.wc-block-components-button {
    background: var(--gt-accent) !important;
    color: var(--gt-bg) !important;
    border: 1px solid var(--gt-accent) !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-family: var(--gt-sans);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    cursor: pointer;
    transition: all var(--gt-t);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.wc-block-components-button:hover {
    background: var(--gt-text) !important;
    color: var(--gt-bg) !important;
    border-color: var(--gt-text) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(125, 211, 252, .35) !important;
}

/* Sticky header, always visible on scroll */
body > .wp-site-blocks > header,
body > .wp-site-blocks > .wp-block-template-part[class*="header"],
.wp-site-blocks > header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(11, 18, 32, .82);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    transition: box-shadow .3s ease, background .3s ease;
}
body > .wp-site-blocks > header:hover,
body > .wp-site-blocks > .wp-block-template-part[class*="header"]:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}


/* ================ v0.12.7 - Space between Add to cart + View cart buttons ================ */
.woocommerce ul.products li.product .added_to_cart {
    margin-left: 8px !important;
}


/* ================ v0.12.8 - Woo cart + checkout form inputs dark theme ================ */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="url"],
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="number"],
.woocommerce-page input[type="password"],
.woocommerce-page input.input-text,
.woocommerce-page textarea,
.woocommerce-page select {
    background-color: var(--gt-bg-card) !important;
    color: var(--gt-text) !important;
    border: 1px solid var(--gt-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-family: var(--gt-sans);
    font-size: 14px;
    transition: border-color var(--gt-t), box-shadow var(--gt-t);
    box-sizing: border-box;
}
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
    outline: 2px solid var(--gt-accent) !important;
    outline-offset: 1px;
    border-color: var(--gt-accent) !important;
}
.woocommerce input::placeholder,
.woocommerce-page input::placeholder {
    color: var(--gt-text-mut) !important;
}
/* Quantity input specifically (small number spinner) */
.woocommerce .quantity input.qty,
.woocommerce div.quantity input.qty {
    width: 72px !important;
    text-align: center;
    padding: 8px 6px !important;
}
/* Disabled buttons (e.g. Update cart when nothing changed) */
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce button.button[disabled],
.woocommerce input.button[disabled] {
    background: var(--gt-bg-elev) !important;
    color: var(--gt-text-mut) !important;
    border-color: var(--gt-border) !important;
    cursor: not-allowed;
    opacity: .6;
    box-shadow: none !important;
    transform: none !important;
}
.woocommerce button.button:disabled:hover,
.woocommerce input.button:disabled:hover {
    background: var(--gt-bg-elev) !important;
    color: var(--gt-text-mut) !important;
    transform: none !important;
    box-shadow: none !important;
}


/* ================ v0.12.9 - Woo notice banners (success/info/error) ================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
    background: var(--gt-bg-card) !important;
    border: 1px solid var(--gt-border) !important;
    border-left: 4px solid var(--gt-accent) !important;
    color: var(--gt-text) !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
    font-family: var(--gt-sans);
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    margin: 0 0 16px !important;
    display: flex;
    align-items: center;
    gap: 12px;
}
.woocommerce-message {
    border-left-color: #22c55e !important;
}
.woocommerce-message::before {
    color: #22c55e !important;
}
.woocommerce-info {
    border-left-color: var(--gt-accent) !important;
}
.woocommerce-info::before {
    color: var(--gt-accent) !important;
}
.woocommerce-error {
    border-left-color: var(--gt-danger) !important;
    color: var(--gt-text) !important;
}
.woocommerce-error::before {
    color: var(--gt-danger) !important;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color: var(--gt-accent) !important;
    text-decoration: none;
    font-weight: 600;
}
.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover {
    color: var(--gt-accent-2) !important;
    text-decoration: underline;
}
/* WC message can also render inline buttons */
.woocommerce-message .button,
.woocommerce-info .button {
    margin-left: auto;
}

/* Return to shop button (empty cart page) */
.woocommerce .return-to-shop .button,
.woocommerce .cart-empty + p .button,
.woocommerce a.button.wc-backward {
    background: var(--gt-accent) !important;
    color: var(--gt-bg) !important;
    border: 1px solid var(--gt-accent) !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-family: var(--gt-sans);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(125, 211, 252, .15);
    transition: all var(--gt-t);
}
.woocommerce .return-to-shop .button:hover,
.woocommerce .cart-empty + p .button:hover,
.woocommerce a.button.wc-backward:hover {
    background: var(--gt-text) !important;
    color: var(--gt-bg) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(125, 211, 252, .35) !important;
}


/* ================ v0.13.0 - WC block notice banners (new style) ================ */
/* Recent WooCommerce uses block-based notices with .wc-block-components-notice-banner */
.wc-block-components-notice-banner {
    background: var(--gt-bg-card) !important;
    border: 1px solid var(--gt-border) !important;
    border-left: 4px solid var(--gt-accent) !important;
    color: var(--gt-text) !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
    font-family: var(--gt-sans);
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    margin: 0 0 16px !important;
    display: flex;
    align-items: center;
    gap: 12px;
}
.wc-block-components-notice-banner.is-success {
    border-left-color: #22c55e !important;
}
.wc-block-components-notice-banner.is-info {
    border-left-color: var(--gt-accent) !important;
}
.wc-block-components-notice-banner.is-warning {
    border-left-color: var(--gt-accent-warm) !important;
}
.wc-block-components-notice-banner.is-error {
    border-left-color: var(--gt-danger) !important;
}
.wc-block-components-notice-banner__content {
    color: var(--gt-text) !important;
    flex: 1;
}
.wc-block-components-notice-banner a {
    color: var(--gt-accent) !important;
    text-decoration: none;
    font-weight: 600;
}
.wc-block-components-notice-banner a:hover {
    color: var(--gt-accent-2) !important;
    text-decoration: underline;
}
.wc-block-components-notice-banner svg {
    flex-shrink: 0;
}
.wc-block-components-notice-banner.is-success svg {
    fill: #22c55e !important;
    color: #22c55e !important;
}
.wc-block-components-notice-banner.is-info svg {
    fill: var(--gt-accent) !important;
    color: var(--gt-accent) !important;
}
.wc-block-components-notice-banner.is-warning svg {
    fill: var(--gt-accent-warm) !important;
    color: var(--gt-accent-warm) !important;
}
.wc-block-components-notice-banner.is-error svg {
    fill: var(--gt-danger) !important;
    color: var(--gt-danger) !important;
}


/* ================ v0.13.1 - WC notice icon checkmark contrast ================ */
.wc-block-components-notice-banner .wc-block-components-notice-banner__icon,
.wc-block-components-notice-banner svg {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 3px;
    box-sizing: border-box;
}
.wc-block-components-notice-banner.is-success svg,
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__icon {
    background: #22c55e !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}
.wc-block-components-notice-banner.is-success svg path,
.wc-block-components-notice-banner.is-success svg polygon {
    fill: #ffffff !important;
}
.wc-block-components-notice-banner.is-info svg,
.wc-block-components-notice-banner.is-info .wc-block-components-notice-banner__icon {
    background: var(--gt-accent) !important;
    color: var(--gt-bg) !important;
    fill: var(--gt-bg) !important;
}
.wc-block-components-notice-banner.is-info svg path {
    fill: var(--gt-bg) !important;
}
.wc-block-components-notice-banner.is-error svg,
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__icon {
    background: var(--gt-danger) !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}
.wc-block-components-notice-banner.is-error svg path {
    fill: #ffffff !important;
}
.wc-block-components-notice-banner.is-warning svg,
.wc-block-components-notice-banner.is-warning .wc-block-components-notice-banner__icon {
    background: var(--gt-accent-warm) !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}
.wc-block-components-notice-banner.is-warning svg path {
    fill: #ffffff !important;
}


/* ================ v0.13.2 - View cart link + dismiss button inside notices ================ */
/* Force accent color on ALL anchors and buttons inside notice banners with high specificity */
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a,
.wc-block-components-notice-banner a.button,
.wc-block-components-notice-banner a.wc-forward,
.wc-block-components-notice-banner .wc-forward,
.wc-block-components-notice-banner__content .wc-forward {
    color: var(--gt-accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-weight: 600 !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline !important;
    transition: color var(--gt-t);
    opacity: 1 !important;
}
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a:hover,
.wc-block-components-notice-banner a.button:hover,
.wc-block-components-notice-banner a.wc-forward:hover {
    color: var(--gt-accent-2) !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}
/* Dismiss button (X to close notice) */
.wc-block-components-notice-banner__dismiss {
    background: transparent !important;
    color: var(--gt-text-mid) !important;
    border: 0 !important;
    padding: 4px !important;
    cursor: pointer;
}
.wc-block-components-notice-banner__dismiss:hover {
    color: var(--gt-text) !important;
}
.wc-block-components-notice-banner__dismiss svg {
    background: transparent !important;
    padding: 0 !important;
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}