/* Shared navigation dropdown behavior */
.group:hover .group-hover\:block {
    display: block;
}

/* Product hero */
.detail-hero {
    padding: 10rem 0 6rem;
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.detail-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.detail-eyebrow::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #d7ae46;
}

.detail-image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.detail-hero .rounded-2xl:hover .detail-image {
    transform: scale(1.04);
}

.detail-hero .title-accent {
    color: #b7791f;
}

/* Main content sections */
.detail-section {
    padding: 7rem 0;
}

.detail-section:nth-child(even) {
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* Subtle shared polish for non-featured products */
body:not(.product-esports) .detail-section {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(120deg, rgba(63, 127, 165, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 92% 12%, rgba(215, 174, 70, 0.1), transparent 20rem);
    background-size: 34px 34px, auto;
}

body:not(.product-esports) .hero-visual,
body:not(.product-esports) .spec-grid,
body:not(.product-esports) .buy-panel {
    border: 1px solid rgba(215, 174, 70, 0.2);
}

body:not(.product-esports) .detail-hero {
    position: relative;
    background:
        radial-gradient(circle at 82% 28%, rgba(63, 127, 165, 0.14), transparent 24rem),
        linear-gradient(140deg, #fff 0%, #f4f8fb 62%, #eef6fa 100%);
}

body:not(.product-esports) .detail-hero::after {
    content: "PRODUCT // GOOLEE";
    position: absolute;
    right: 2vw;
    bottom: 0;
    color: rgba(29, 53, 87, 0.04);
    font: 900 clamp(4rem, 9vw, 9rem)/0.8 "DM Sans", sans-serif;
    letter-spacing: -0.05em;
    white-space: nowrap;
}

body:not(.product-esports) .hero-visual {
    position: relative;
    border-radius: 1.5rem 0.35rem 1.5rem 0.35rem !important;
    box-shadow: 14px 14px 0 rgba(63, 127, 165, 0.1), 0 28px 60px -36px rgba(15, 23, 42, 0.6) !important;
}

body:not(.product-esports) .detail-section h2::after {
    content: "";
    display: block;
    width: 5rem;
    height: 0.25rem;
    margin-top: 1rem;
    background: linear-gradient(90deg, #d7ae46 0 40%, #3f7fa5 40%);
}

body:not(.product-esports) .detail-card {
    box-shadow: 7px 7px 0 rgba(63, 127, 165, 0.08), 0 18px 38px -28px rgba(15, 23, 42, 0.5);
}

body:not(.product-esports) .spec-item {
    border-left: 3px solid transparent;
}

body:not(.product-esports) .spec-item:hover {
    border-left-color: #d7ae46;
}

/* Standard product editorial system */
body:not(.product-esports) main { background: #fff; }

body:not(.product-esports) .detail-hero { isolation: isolate; overflow: hidden; min-height: 760px; }

body:not(.product-esports) .detail-hero::before {
    content: "";
    position: absolute;
    top: 7rem;
    left: -7rem;
    width: 20rem;
    height: 20rem;
    border: 1px solid rgba(63,127,165,.12);
    border-radius: 50%;
    box-shadow: 0 0 0 4rem rgba(63,127,165,.025),0 0 0 8rem rgba(63,127,165,.018);
}

body:not(.product-esports) .detail-hero > div { position: relative; z-index: 1; }
body:not(.product-esports) .hero-copy,
body:not(.product-esports) .hero-visual { min-width: 0; }
body:not(.product-esports) .detail-image { display: block; width: 100%; }

.product-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.product-meta span { max-width: 12rem; padding: .55rem .75rem; border: 1px solid #d9e3ec; border-radius: .55rem; background: rgba(255,255,255,.78); color: #334155; font-size: .7rem; font-weight: 700; line-height: 1.35; backdrop-filter: blur(8px); }
.product-meta small { display: block; margin-bottom: .15rem; color: #7189a1; font-size: .55rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.standard-visual-label { position: absolute; top: 1rem; right: 1rem; z-index: 2; padding: .55rem .8rem; border-radius: .5rem; background: rgba(255,255,255,.92); color: #365f8c; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 10px 24px -16px rgba(15,23,42,.7); backdrop-filter: blur(8px); }

body:not(.product-esports) .detail-section::before { position: absolute; top: 2.4rem; left: max(1.5rem,calc((100vw - 1100px)/2)); color: rgba(63,127,165,.12); font: 800 3.8rem/1 "DM Sans",sans-serif; pointer-events: none; }
body:not(.product-esports) #overview::before { content: "01"; }
body:not(.product-esports) #highlights::before { content: "02"; }
body:not(.product-esports) #gallery::before { content: "03"; }
body:not(.product-esports) #trailer::before { content: "04"; }
body:not(.product-esports) #how-to-play::before { content: "05"; }
body:not(.product-esports) #specs::before { content: "06"; }
body:not(.product-esports) #buy::before { content: "07"; }
body:not(.product-esports) #policy::before { content: "08"; }
body:not(.product-esports) #faq::before { content: "09"; }
body:not(.product-esports) .detail-section > div { position: relative; z-index: 1; }

body:not(.product-esports) #overview > div { display: grid; grid-template-columns: .7fr 1.3fr; gap: 3rem; align-items: start; }
body:not(.product-esports) #overview .detail-kicker,body:not(.product-esports) #overview h2 { grid-column: 1; }
body:not(.product-esports) #overview h2 { margin-bottom: 0 !important; }
body:not(.product-esports) #overview > div > p:last-child { grid-column: 2; grid-row: 1 / span 2; padding: 2rem; border: 1px solid #dbe3eb; border-radius: 1rem; background: rgba(255,255,255,.9); box-shadow: 0 22px 50px -40px rgba(15,23,42,.7); }

body:not(.product-esports) #highlights li { position: relative; min-height: 5.5rem; padding: 1.3rem 1.3rem 1.3rem 3.8rem; border: 1px solid #dbe3eb; border-radius: .9rem; background: rgba(255,255,255,.92); box-shadow: 0 16px 34px -30px rgba(15,23,42,.55); transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
body:not(.product-esports) #highlights li::before { content: "✓"; position: absolute; top: 1.2rem; left: 1.2rem; display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: #eaf2f8; color: #365f8c; font-weight: 900; }
body:not(.product-esports) #highlights li:hover { border-color: #8aaacb; transform: translateY(-4px); box-shadow: 0 22px 42px -30px rgba(15,23,42,.6); }

body:not(.product-esports) #gallery .grid { align-items: stretch; }
body:not(.product-esports) .gallery-trigger { overflow: hidden; border: 1px solid #dbe3eb; background: #fff; box-shadow: 0 20px 42px -32px rgba(15,23,42,.6); }
body:not(.product-esports) .gallery-trigger::after { content: "View"; position: absolute; right: .8rem; bottom: .8rem; padding: .4rem .6rem; border-radius: .4rem; background: rgba(29,53,87,.88); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

body:not(.product-esports) .section-intro { max-width: 40rem; margin: 0 0 3rem; color: #64748b; font-size: 1.05rem; line-height: 1.7; }

body:not(.product-esports) #how-to-play ol { position: relative; display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1rem; }
body:not(.product-esports) #how-to-play ol::before { content: ""; position: absolute; top: 1.5rem; bottom: 1.5rem; left: 50%; width: 2px; background: linear-gradient(#8bb0cc,#d7ae46 52%,#8bb0cc); transform: translateX(-50%); }
body:not(.product-esports) #how-to-play li { position: relative; align-items: center; width: calc(50% - 2rem); min-height: 7.5rem; padding: 1.35rem 1.5rem; border: 1px solid #cedde8; border-radius: 1rem .25rem 1rem 1rem; background: linear-gradient(135deg,#fff 55%,#f2f7fb); box-shadow: 8px 10px 0 rgba(63,127,165,.07),0 22px 38px -32px rgba(15,23,42,.55); transition: transform .25s ease,border-color .25s ease; }
body:not(.product-esports) #how-to-play li:nth-child(even) { margin-left: calc(50% + 2rem); border-radius: .25rem 1rem 1rem 1rem; }
body:not(.product-esports) #how-to-play li::after { content: ""; position: absolute; top: 50%; right: -2.45rem; width: .8rem; height: .8rem; border: 3px solid #fff; border-radius: 50%; background: #4979ad; box-shadow: 0 0 0 2px #4979ad; transform: translateY(-50%); }
body:not(.product-esports) #how-to-play li:nth-child(even)::after { right: auto; left: -2.45rem; background: #bd7a19; box-shadow: 0 0 0 2px #bd7a19; }
body:not(.product-esports) #how-to-play li:hover { border-color: #749bb9; transform: translateY(-3px); }
body:not(.product-esports) #how-to-play li span { width: 2.8rem !important; height: 2.8rem !important; border: 1px solid #bcd1e1; border-radius: 50%; background: #e7f1f8 !important; color: #295e87 !important; font-family: "DM Sans",sans-serif; box-shadow: inset 0 0 0 5px #fff; }
body:not(.product-esports) #how-to-play li p { padding-top: 0 !important; font-size: 1rem; line-height: 1.55; }

body:not(.product-esports) .spec-grid { grid-template-columns: repeat(12,minmax(0,1fr)); gap: .8rem; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body:not(.product-esports) .spec-item { position: relative; grid-column: span 3; min-height: 9rem; overflow: hidden; padding: 1.5rem; border: 1px solid #cfdee9; border-left: 4px solid #4979ad; border-radius: .85rem .2rem .85rem .85rem; background: linear-gradient(145deg,#fff,#f4f8fb); box-shadow: 7px 8px 0 rgba(63,127,165,.07); }
body:not(.product-esports) .spec-grid--5 .spec-item { grid-column: span 4; }
body:not(.product-esports) .spec-grid--5 .spec-item:nth-child(n+4) { grid-column: span 6; }
body:not(.product-esports) .spec-grid--6 .spec-item { grid-column: span 4; }
body:not(.product-esports) .spec-grid--4 .spec-item { grid-column: span 3; }
body:not(.product-esports) .spec-index { position: absolute; right: .8rem; bottom: -.35rem; color: rgba(63,127,165,.09); font: 800 4rem/1 "DM Sans",sans-serif; }
body:not(.product-esports) .spec-item p { position: relative; z-index: 1; }
body:not(.product-esports) .spec-item p:last-child { max-width: 85%; font-size: 1.05rem; line-height: 1.5; }
body:not(.product-esports) .spec-item:hover { border-left-color: #bd7a19; background: #fff; transform: translateY(-3px); }

body:not(.product-esports) .faq-item { margin-bottom: .7rem; padding: 0 1.25rem; border: 1px solid #dbe3eb; border-radius: .75rem; background: #fff; box-shadow: 0 12px 28px -26px rgba(15,23,42,.55); }

@media(max-width:900px){body:not(.product-esports) .detail-hero{min-height:0}body:not(.product-esports) #overview>div{grid-template-columns:1fr;gap:1rem}body:not(.product-esports) #overview .detail-kicker,body:not(.product-esports) #overview h2,body:not(.product-esports) #overview>div>p:last-child{grid-column:1;grid-row:auto}body:not(.product-esports) .spec-item,body:not(.product-esports) .spec-grid--5 .spec-item:nth-child(n+4),body:not(.product-esports) .spec-grid--6 .spec-item{grid-column:span 6}}
@media(max-width:640px){body:not(.product-esports){overflow-x:hidden}.product-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.product-meta span{max-width:none}.product-meta span:last-child:nth-child(odd){grid-column:1/-1}body:not(.product-esports) .detail-hero>div{max-width:100%;box-sizing:border-box;grid-template-columns:minmax(0,1fr)}body:not(.product-esports) .hero-copy p{max-width:100%;overflow-wrap:anywhere}body:not(.product-esports) .hero-visual{width:100%;max-width:100%}body:not(.product-esports) .detail-section{padding:5.5rem 0}body:not(.product-esports) .detail-section::before{top:1.5rem;left:1.5rem;font-size:3rem}body:not(.product-esports) .section-intro{margin-bottom:2rem}body:not(.product-esports) #how-to-play ol{gap:1rem;padding-left:1.4rem}body:not(.product-esports) #how-to-play ol::before{left:.35rem;transform:none}body:not(.product-esports) #how-to-play li,body:not(.product-esports) #how-to-play li:nth-child(even){width:100%;margin-left:0;border-radius:.25rem .85rem .85rem .85rem}body:not(.product-esports) #how-to-play li::after,body:not(.product-esports) #how-to-play li:nth-child(even)::after{right:auto;left:-1.46rem}body:not(.product-esports) .spec-grid{grid-template-columns:1fr}body:not(.product-esports) .spec-item,body:not(.product-esports) .spec-grid--5 .spec-item:nth-child(n+4),body:not(.product-esports) .spec-grid--6 .spec-item{grid-column:1}.standard-visual-label{top:.7rem;right:.7rem;max-width:calc(100% - 1.4rem);white-space:normal}}

/* Compact product presentation for physical and accessible products */
body:not(.product-esports) .detail-hero {
    min-height: 0;
    padding: 8.25rem 0 4.25rem;
    background: radial-gradient(circle at 82% 22%, rgba(63,127,165,.16), transparent 23rem), linear-gradient(135deg,#fff 0%,#f4f8fb 65%,#edf5f8 100%);
}
body:not(.product-esports) .detail-hero > div { gap: clamp(2rem,5vw,5rem); }
body:not(.product-esports) .hero-copy { padding: 1rem 0; }
body:not(.product-esports) .detail-hero h1 { max-width: 12ch; margin-top: 1.1rem; margin-bottom: 1rem; font-size: clamp(2.7rem,5vw,4.8rem); }
body:not(.product-esports) .detail-hero .hero-copy > p { max-width: 32rem; margin-bottom: 1.5rem; font-size: 1.08rem; }
body:not(.product-esports) .detail-hero .hero-copy > a { padding: .75rem 1.25rem; border-radius: .55rem; box-shadow: 0 10px 18px -12px rgba(0,95,115,.8); }
body:not(.product-esports) .hero-visual { max-width: 34rem; justify-self: end; }
body:not(.product-esports) .detail-section { padding: 4.25rem 0; }
body:not(.product-esports) .detail-section:nth-child(even) { background-color: #f6f9fb; }
body:not(.product-esports) .detail-section h2 { font-size: clamp(1.85rem,3vw,2.65rem); }
body:not(.product-esports) .detail-section::before { top: 1.3rem; font-size: 3rem; }
body:not(.product-esports) .section-intro { margin-bottom: 1.75rem; font-size: .95rem; }
body:not(.product-esports) #overview > div { gap: 1.5rem 3rem; }
body:not(.product-esports) #overview > div > p:last-child { padding: 1.35rem 1.5rem; font-size: 1rem; line-height: 1.65; }
body:not(.product-esports) #highlights h2 { margin-bottom: 1.5rem; }
body:not(.product-esports) #highlights ul { gap: .75rem; }
body:not(.product-esports) #highlights li { min-height: 0; padding: 1rem 1rem 1rem 3.25rem; font-size: .92rem; }
body:not(.product-esports) #highlights li::before { top: .9rem; left: 1rem; width: 1.6rem; height: 1.6rem; }
body:not(.product-esports) #gallery h2 { margin-bottom: .5rem; }
body:not(.product-esports) #gallery .mb-10 { margin-bottom: 1.5rem; }
body:not(.product-esports) .gallery-trigger { border-radius: .75rem; }
body:not(.product-esports) #how-to-play ol { gap: .75rem; }
body:not(.product-esports) #how-to-play li { min-height: 5.75rem; padding: 1rem 1.25rem; font-size: .92rem; }
body:not(.product-esports) #how-to-play li span { width: 2.35rem !important; height: 2.35rem !important; }
body:not(.product-esports) #specs .section-intro { margin-bottom: 1.5rem; }
body:not(.product-esports) .spec-item { min-height: 7rem; padding: 1.15rem; }
body:not(.product-esports) .spec-item p:last-child { font-size: .95rem; }
body:not(.product-esports) #buy .buy-panel { border-radius: 1rem; overflow: hidden; background: linear-gradient(120deg,#173e5c,#0a7377); box-shadow: 0 22px 44px -30px rgba(15,23,42,.7); }
body:not(.product-esports) #buy .buy-panel > div { padding: 2rem; }
body:not(.product-esports) #buy .buy-panel h2 { margin-bottom: .75rem; font-size: clamp(1.8rem,3vw,2.5rem); }
body:not(.product-esports) #buy .buy-panel img { min-height: 220px; max-height: 280px; opacity: .9; }
body:not(.product-esports) .faq-item { margin-bottom: .5rem; }

/* AppsGoolee-only esports arena */
.product-esports {
    --game-navy: #061052;
    --game-blue: #1235d7;
    --game-cyan: #20e0ff;
    --game-lime: #c5f900;
    --game-violet: #5428a6;
    background: var(--game-navy);
}

.product-esports main {
    overflow: hidden;
    color: #dce8ff;
    background: var(--game-navy);
}

.product-esports .detail-hero {
    position: relative;
    isolation: isolate;
    min-height: 820px;
    border-bottom: 1px solid rgba(32, 224, 255, 0.3);
    background:
        radial-gradient(circle at 78% 30%, rgba(32, 224, 255, 0.22), transparent 25%),
        linear-gradient(rgba(32, 224, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 224, 255, 0.055) 1px, transparent 1px),
        linear-gradient(135deg, #061052, #1235d7 58%, #5428a6);
    background-size: auto, 42px 42px, 42px 42px, auto;
}

.product-esports .detail-hero::after {
    content: "APPSGOOLEE // ENTER THE GRID";
    position: absolute;
    right: -1vw;
    bottom: -0.1em;
    z-index: -1;
    color: rgba(255, 255, 255, 0.045);
    font: italic 900 clamp(4rem, 9vw, 9rem)/0.8 Impact, sans-serif;
    white-space: nowrap;
}

.product-esports .detail-eyebrow {
    border: 1px solid var(--game-cyan);
    border-radius: 0;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    background: rgba(32, 224, 255, 0.12);
    color: var(--game-cyan);
    box-shadow: 0 0 18px rgba(32, 224, 255, 0.16);
}

.product-esports .detail-eyebrow::before {
    border-radius: 0;
    background: var(--game-lime);
    box-shadow: 0 0 10px var(--game-lime);
}

.arena-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.arena-status span {
    padding: 0.35rem 0.65rem;
    border-left: 2px solid var(--game-lime);
    background: rgba(7, 19, 95, 0.7);
    color: #dce8ff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.product-esports .detail-hero h1 {
    color: #fff !important;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-style: italic;
    text-shadow: 5px 6px 0 rgba(3, 11, 67, 0.7);
}

.product-esports .detail-hero .title-accent {
    color: var(--game-lime);
    text-shadow: 4px 5px 0 #07135f, 0 0 24px rgba(197, 249, 0, 0.3);
}

.product-esports .detail-hero p {
    color: #cbd9ff !important;
}

.product-esports main .bg-blue-600 {
    border-radius: 0;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    background: linear-gradient(105deg, var(--game-lime), #efff45) !important;
    color: #07135f !important;
    box-shadow: 0 0 24px rgba(197, 249, 0, 0.28);
}

.product-esports .hero-visual {
    position: relative;
    border: 1px solid rgba(32, 224, 255, 0.6);
    border-radius: 0 !important;
    clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
    background: #07135f;
    box-shadow: 14px 14px 0 rgba(32, 224, 255, 0.1), 0 0 38px rgba(32, 224, 255, 0.2);
}

.arena-corner {
    position: absolute;
    z-index: 2;
    padding: 0.45rem 0.7rem;
    background: var(--game-lime);
    color: #07135f;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.arena-corner-top { top: 0; right: 0; }
.arena-corner-bottom { bottom: 0; left: 0; background: var(--game-cyan); }

.product-esports .detail-section {
    position: relative;
    border-color: rgba(32, 224, 255, 0.16);
    background:
        repeating-linear-gradient(115deg, transparent 0 76px, rgba(32, 224, 255, 0.025) 76px 78px),
        linear-gradient(145deg, #09176c, #10258e 55%, #19147a);
}

.product-esports .detail-section::after {
    position: absolute;
    right: 2vw;
    bottom: 0;
    z-index: 0;
    color: rgba(255, 255, 255, 0.035);
    font: italic 900 clamp(4rem, 8vw, 8rem)/0.8 Impact, sans-serif;
    letter-spacing: 0.04em;
    pointer-events: none;
}

.product-esports #overview::after { content: "01 // INTEL"; }
.product-esports #highlights::after { content: "02 // POWER UPS"; }
.product-esports #gallery::after { content: "03 // VISUAL FEED"; }
.product-esports #trailer::after { content: "04 // REPLAY"; }
.product-esports #how-to-play::after { content: "05 // MATCH FLOW"; }
.product-esports #specs::after { content: "06 // LOADOUT"; }
.product-esports #buy::after { content: "07 // PLAYER ACCESS"; }
.product-esports #policy::after { content: "08 // PROTOCOL"; }
.product-esports #faq::after { content: "09 // SUPPORT"; }

.product-esports .detail-section > div {
    position: relative;
    z-index: 1;
}

.product-esports .detail-section h2::after {
    content: "";
    display: block;
    width: min(13rem, 48vw);
    height: 0.35rem;
    margin-top: 1rem;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
    background: linear-gradient(90deg, var(--game-lime) 0 34%, var(--game-cyan) 34% 74%, transparent 74%);
    filter: drop-shadow(0 0 7px rgba(32, 224, 255, 0.5));
}

.product-esports #highlights ul li,
.product-esports #how-to-play ol li,
.product-esports .faq-item {
    border: 1px solid rgba(32, 224, 255, 0.2);
    border-left: 3px solid var(--game-cyan);
    padding: 1rem 1.2rem;
    background: rgba(7, 19, 95, 0.48);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.product-esports #highlights ul li:hover,
.product-esports #how-to-play ol li:hover {
    border-color: var(--game-lime);
    transform: translateX(5px);
    background: rgba(18, 53, 215, 0.55);
}

.product-esports #highlights ul li,
.product-esports #how-to-play ol li {
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.product-esports #trailer .aspect-video {
    border: 1px solid var(--game-cyan);
    border-radius: 0;
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
    box-shadow: 12px 12px 0 rgba(32, 224, 255, 0.1), 0 0 32px rgba(32, 224, 255, 0.15);
}

/* AppsGoolee esports navigation and footer shell */
.product-esports .site-global-nav {
    border-bottom: 1px solid rgba(32, 224, 255, 0.42) !important;
    background: rgba(6, 16, 82, 0.94) !important;
    box-shadow: 0 12px 34px rgba(3, 11, 67, 0.34);
    backdrop-filter: blur(18px);
}

.product-esports .site-nav-brand span,
.product-esports .site-nav-links .nav-category-link,
.product-esports .site-nav-menu-button {
    color: #eef6ff !important;
}

.product-esports .site-nav-links .nav-category-link {
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.product-esports .site-nav-links .nav-category-link:hover { color: var(--game-cyan) !important; }

.product-esports .site-nav-contact {
    border-radius: 0 !important;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    background: var(--game-lime) !important;
    color: var(--game-navy) !important;
    box-shadow: 0 0 20px rgba(197, 249, 0, 0.24);
}

.product-esports .nav-dropdown {
    border: 1px solid rgba(32, 224, 255, 0.4) !important;
    border-radius: 0 !important;
    background: #081562 !important;
}

.product-esports .nav-dropdown a { color: #dce8ff !important; }
.product-esports .nav-dropdown a:hover { background: rgba(32, 224, 255, 0.12) !important; color: var(--game-cyan) !important; }

.product-esports footer {
    border-color: rgba(32, 224, 255, 0.2) !important;
    background:
        linear-gradient(rgba(32, 224, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 224, 255, 0.035) 1px, transparent 1px),
        #050d43 !important;
    background-size: 34px 34px !important;
}

.product-esports footer :is(h4, .font-display, .text-slate-900) { color: #fff !important; }
.product-esports footer :is(p, a, .text-slate-500, .text-slate-600) { color: #aebfe7 !important; }
.product-esports footer a:hover { color: var(--game-cyan) !important; }
.product-esports footer a[aria-label] { border-color: rgba(32, 224, 255, 0.38) !important; border-radius: 0 !important; background: rgba(32, 224, 255, 0.06); }
.product-esports footer a[aria-label] svg { color: var(--game-cyan) !important; }

.product-esports .detail-section:nth-child(even) {
    background:
        radial-gradient(circle at 88% 15%, rgba(32, 224, 255, 0.11), transparent 22rem),
        linear-gradient(135deg, #101c7c, #081562 58%, #2a197f);
}

.product-esports .detail-section h2 { color: #fff !important; text-shadow: 3px 4px 0 rgba(3, 11, 67, 0.6); }
.product-esports .detail-section p,
.product-esports .detail-section li { color: #cbd9ef !important; }
.product-esports .detail-kicker { color: var(--game-cyan); }
.product-esports .detail-kicker::before { content: "// "; color: var(--game-lime); }

.product-esports .detail-card,
.product-esports .spec-grid {
    border-color: rgba(32, 224, 255, 0.35);
    border-radius: 0;
    background: rgba(7, 19, 95, 0.78);
    box-shadow: 8px 8px 0 rgba(32, 224, 255, 0.08);
}

.product-esports .spec-item {
    background: rgba(7, 19, 95, 0.88);
}

.product-esports .spec-item:hover { background: rgba(18, 53, 215, 0.72); }
.product-esports .spec-item p:last-child { color: #fff !important; }

.product-esports .buy-panel {
    border: 1px solid var(--game-cyan);
    border-radius: 0;
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    background: linear-gradient(125deg, #061052, #1235d7 65%, #5428a6);
    box-shadow: 12px 12px 0 rgba(32, 224, 255, 0.1);
}

.product-esports .faq-item { border-color: rgba(32, 224, 255, 0.25); }
.product-esports .faq-button { color: #fff; }
.product-esports .faq-button span { color: var(--game-lime); }
.product-esports .text-brand-700 { color: var(--game-cyan) !important; }

@media (max-width: 767px) {
    .product-esports .detail-hero { min-height: auto; }
    .product-esports .detail-hero::after { font-size: 16vw; }
}

.detail-kicker {
    color: #9a6818;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.detail-card {
    border: 2px solid #f1f5f9;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 14px 36px -28px rgba(15, 23, 42, 0.4);
}

/* Product gallery */
.gallery-image {
    aspect-ratio: 16 / 10;
    border-radius: 1rem;
    object-fit: cover;
    transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.gallery-image:hover {
    transform: translateY(-7px) scale(1.015);
    box-shadow: 0 24px 50px -24px rgba(15, 23, 42, 0.45);
}

.gallery-trigger {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 1rem;
    cursor: zoom-in;
}

.gallery-trigger:focus-visible {
    outline: 3px solid #d7ae46;
    outline-offset: 4px;
}

.gallery-lightbox {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.25rem 1.5rem;
    background: rgba(4, 13, 30, 0.94);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.gallery-lightbox[hidden] {
    display: none;
}

.gallery-lightbox.is-open {
    opacity: 1;
}

.gallery-lightbox img {
    max-width: min(92vw, 90rem);
    max-height: 82vh;
    border-radius: 0.75rem;
    object-fit: contain;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.96);
    transition: transform 0.22s ease;
}

.gallery-lightbox.is-open img {
    transform: scale(1);
}

.gallery-lightbox p {
    margin-top: 1rem;
    color: #cbd5e1;
    font-size: 0.75rem;
    text-align: center;
}

.lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(215, 174, 70, 0.65);
    border-radius: 50%;
    background: #1d3557;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
}

.lightbox-open {
    overflow: hidden;
}

/* Product specifications */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #e2e8f0;
}

.spec-item {
    padding: 1.25rem;
    background: #fff;
    transition: background 0.25s ease;
}

.spec-item:hover {
    background: #fffaf0;
}

/* Navy-and-gold product actions */
main .bg-blue-600 {
    background-color: #1d3557 !important;
}

main .bg-blue-600:hover,
main .hover\:bg-blue-700:hover {
    background-color: #0b2a66 !important;
}

main .text-brand-700 {
    color: #9a6818 !important;
}

main .bg-brand-500 {
    background-color: #d7ae46 !important;
}

main .bg-blue-100 {
    background-color: #fff4d6 !important;
}

main .text-blue-700 {
    color: #76500f !important;
}

/* Purchase and download panel */
.buy-panel {
    overflow: hidden;
    border-radius: 1rem;
    background: #1d3557;
    box-shadow: 0 24px 60px -30px rgba(15, 23, 42, 0.6);
}

.buy-panel .bg-blue-600 {
    background: #d7ae46 !important;
    color: #172238 !important;
}

.buy-panel .bg-blue-600:hover {
    background: #e5c46f !important;
}

.download-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 0.75rem;
}

.download-badge,
.download-badge.app-store {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.download-badge:hover {
    transform: translateY(-4px) scale(1.025);
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.25));
}

.download-badge img,
.download-badge.app-store img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Expandable FAQ */
.faq-item {
    border-bottom: 1px solid #e2e8f0;
}

.faq-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.25rem 0;
    color: #0f172a;
    font-weight: 700;
    text-align: left;
}

.faq-button span {
    transition: transform 0.25s ease;
}

.faq-item.open .faq-button span {
    transform: rotate(45deg);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0;
    color: #64748b;
    transition: grid-template-rows 0.3s ease, padding 0.3s ease;
}

.faq-answer > span {
    overflow: hidden;
}

.faq-item.open .faq-answer {
    grid-template-rows: 1fr;
    padding: 0 0 1.25rem;
}

/* Scroll and hero entrance animations */
.detail-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.detail-reveal.is-visible {
    opacity: 1;
    transform: none;
}

.hero-copy {
    animation: heroIn 0.85s ease both;
}

.hero-visual {
    animation: heroIn 0.85s 0.12s ease both;
}

@keyframes heroIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .detail-reveal {
        opacity: 1;
        transform: none;
    }
}

/* Mobile layout */
@media (max-width: 767px) {
    .detail-hero {
        padding: 8rem 0 4rem;
    }

    .detail-section {
        padding: 5rem 0;
    }

    .spec-grid {
        grid-template-columns: 1fr;
    }

    .download-badges {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .download-badge {
        width: min(100%, 17rem);
        height: auto;
    }

    .download-badge.app-store {
        align-items: center;
        justify-content: center;
        width: min(100%, 17rem);
        height: auto;
    }

    .download-badge img {
        width: 100%;
        height: auto;
    }

    .download-badge.app-store img {
        width: min(100%, 15rem);
        height: auto;
    }
}

/* Desktop badge sizing and alignment */
@media (min-width: 768px) {
    .download-badges {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
    }

    .download-badge {
        flex: 0 0 auto;
        width: auto;
        height: 4.5rem;
    }

    .download-badge img {
        width: auto;
        height: 100%;
    }

    .download-badge.app-store {
        flex: 0 0 auto;
        justify-content: flex-start;
        width: auto;
        height: 4.5rem;
        padding-left: 0.75rem;
    }

    .download-badge.app-store img {
        width: auto;
        height: 3.5rem;
    }
}

/* Final visual pass: make the standard product family clearly distinct */
body:not(.product-esports) main { background: #eef4f7; }
body:not(.product-esports) .detail-hero {
    padding: 7.25rem 0 3.5rem;
    background: radial-gradient(circle at 78% 30%, rgba(79,183,189,.22), transparent 24rem), linear-gradient(125deg,#102f4a 0%,#174d68 58%,#0a7377 100%);
}
body:not(.product-esports) .detail-hero::after { color: rgba(255,255,255,.07); }
body:not(.product-esports) .detail-hero h1 { color: #fff !important; }
body:not(.product-esports) .detail-hero .title-accent { color: #f2c45f; }
body:not(.product-esports) .detail-hero .hero-copy > p { color: #d8e8ee !important; }
body:not(.product-esports) .detail-eyebrow { border: 1px solid rgba(242,196,95,.65); background: rgba(255,255,255,.1); color: #fff; }
body:not(.product-esports) .hero-visual { border: 8px solid rgba(255,255,255,.92); border-radius: 1.1rem !important; box-shadow: 14px 14px 0 rgba(242,196,95,.72), 0 28px 50px -25px rgba(0,0,0,.8) !important; }
body:not(.product-esports) .standard-visual-label { background: #f2c45f; color: #173e5c; }
body:not(.product-esports) .detail-section { padding: 3.75rem 0; background-color: #eef4f7; }
body:not(.product-esports) .detail-section:nth-child(even) { background-color: #fff; }
body:not(.product-esports) .detail-section h2 { color: #173e5c; }
body:not(.product-esports) .detail-kicker { color: #0a7377; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
body:not(.product-esports) .detail-section h2::after { width: 4rem; height: .22rem; margin-top: .7rem; background: linear-gradient(90deg,#f2c45f 0 45%,#0a7377 45%); }
body:not(.product-esports) #highlights li { border-top: 3px solid #0a9396; border-left: 1px solid #d4e1e7; border-radius: .65rem; background: #fff; box-shadow: 0 12px 24px -20px rgba(16,47,74,.8); }
body:not(.product-esports) #highlights li:nth-child(even) { border-top-color: #d7ae46; }
body:not(.product-esports) .gallery-trigger { border-radius: .65rem; box-shadow: 0 14px 26px -22px rgba(16,47,74,.8); }
body:not(.product-esports) .spec-item { border-top: 3px solid #0a9396; border-left: 1px solid #cfdee9; border-radius: .65rem; background: #fff; box-shadow: 0 10px 20px -18px rgba(16,47,74,.8); }
body:not(.product-esports) .spec-item:nth-child(even) { border-top-color: #d7ae46; }
body:not(.product-esports) #buy .buy-panel { background: linear-gradient(120deg,#102f4a,#0a7377); }
body:not(.product-esports) #buy .buy-panel h2 { color: #fff !important; }
body:not(.product-esports) #buy .buy-panel p:not(.text-blue-300) { color: #e5f2f4 !important; }
body:not(.product-esports) #buy .buy-panel .text-blue-300 { color: #f2c45f !important; }
body:not(.product-esports) #buy .buy-panel .bg-blue-600 { background: #f2c45f !important; color: #102f4a !important; box-shadow: 0 8px 16px -10px rgba(0,0,0,.7); }
body:not(.product-esports) #buy .buy-panel .bg-blue-600:hover { background: #ffe09a !important; color: #102f4a !important; }
/* Keep store badges inside the copy column instead of letting their artwork overflow */
body:not(.product-esports) #buy .download-badges { align-items: flex-start; max-width: 100%; }
body:not(.product-esports) #buy .download-badge { width: 15.5rem !important; height: 4.25rem !important; max-width: 100%; padding: 0 !important; overflow: hidden; }
body:not(.product-esports) #buy .download-badge img { display: block; width: auto !important; height: 100% !important; max-width: 100%; object-fit: contain; object-position: left center; }
body:not(.product-esports) #buy .download-badge.app-store { width: 15.5rem !important; height: 4.25rem !important; }
body:not(.product-esports) #buy .download-badge.app-store img { height: 3.55rem !important; max-width: 100%; }
body:not(.product-esports) #faq .faq-item { background: #fff; }