/* NORMALIZE */

.notranslate {
    translate: no;
}

.card h2 {
    font-size: 32px;
    margin: 10px 0;
}

.card {
  background: #1e2533;
  border-radius: 10px;
  flex: 1 1 300px;
  position: relative;
  border: 1px solid #3a4255;
  box-shadow:none;
}

.hidden {
  display: none !important; 
}

/* NORMALIZE */

.card__shine {
    --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMyI+PC9yZWN0Pgo8L3N2Zz4=");
    --space: 6%;
    --angle: 133deg;
    --imgsize: 500px;
    --red: #f80e7b;
    --yel: #eedf10;
    --gre: #21e985;
    --blu: #0dbde9;
    --vio: #c929f1;
}

/*

HOLO

*/
.card[data-rarity="rare holo"] .card__shine {
    --space: 1.5%;
    --h: 21;
    --s: 70%;
    --l: 50%;
    --bars: 4%;
    --bar-color: rgba(255, 255, 255, 0.6);
    --bar-bg: rgb(10, 10, 10);
    clip-path: inset( 11.5% 8.5% 44.5% 8.5% );
    background-image: repeating-linear-gradient( 90deg, hsl(calc(var(--h)*0), var(--s), var(--l)) calc(var(--space)*0), hsl(calc(var(--h)*0), var(--s), var(--l)) calc(var(--space)*1), black calc(var(--space)*1.001), black calc(var(--space)*1.999), hsl(calc(var(--h)*1), var(--s), var(--l)) calc(var(--space)*2), hsl(calc(var(--h)*1), var(--s), var(--l)) calc(var(--space)*3), black calc(var(--space)*3.001), black calc(var(--space)*3.999), hsl(calc(var(--h)*2), var(--s), var(--l)) calc(var(--space)*4), hsl(calc(var(--h)*2), var(--s), var(--l)) calc(var(--space)*5), black calc(var(--space)*5.001), black calc(var(--space)*5.999), hsl(calc(var(--h)*3), var(--s), var(--l)) calc(var(--space)*6), hsl(calc(var(--h)*3), var(--s), var(--l)) calc(var(--space)*7), black calc(var(--space)*7.001), black calc(var(--space)*7.999), hsl(calc(var(--h)*4), var(--s), var(--l)) calc(var(--space)*8), hsl(calc(var(--h)*4), var(--s), var(--l)) calc(var(--space)*9), black calc(var(--space)*9.001), black calc(var(--space)*9.999), hsl(calc(var(--h)*5), var(--s), var(--l)) calc(var(--space)*10), hsl(calc(var(--h)*5), var(--s), var(--l)) calc(var(--space)*11), black calc(var(--space)*11.001), black calc(var(--space)*11.999), hsl(calc(var(--h)*6), var(--s), var(--l)) calc(var(--space)*12), hsl(calc(var(--h)*6), var(--s), var(--l)) calc(var(--space)*13), black calc(var(--space)*13.001), black calc(var(--space)*13.999), hsl(calc(var(--h)*7), var(--s), var(--l)) calc(var(--space)*14), hsl(calc(var(--h)*7), var(--s), var(--l)) calc(var(--space)*15), black calc(var(--space)*15.001), black calc(var(--space)*15.999), hsl(calc(var(--h)*8), var(--s), var(--l)) calc(var(--space)*16), hsl(calc(var(--h)*8), var(--s), var(--l)) calc(var(--space)*17), black calc(var(--space)*17.001), black calc(var(--space)*17.999), hsl(calc(var(--h)*9), var(--s), var(--l)) calc(var(--space)*18), hsl(calc(var(--h)*9), var(--s), var(--l)) calc(var(--space)*19), black calc(var(--space)*19.001), black calc(var(--space)*19.999), hsl(calc(var(--h)*10), var(--s), var(--l)) calc(var(--space)*20), hsl(calc(var(--h)*10), var(--s), var(--l)) calc(var(--space)*21), black calc(var(--space)*21.001), black calc(var(--space)*21.999), hsl(calc(var(--h)*11), var(--s), var(--l)) calc(var(--space)*22), hsl(calc(var(--h)*11), var(--s), var(--l)) calc(var(--space)*23), black calc(var(--space)*23.001), black calc(var(--space)*23.999), hsl(calc(var(--h)*12), var(--s), var(--l)) calc(var(--space)*24), hsl(calc(var(--h)*12), var(--s), var(--l)) calc(var(--space)*25), black calc(var(--space)*25.001), black calc(var(--space)*25.999), hsl(calc(var(--h)*13), var(--s), var(--l)) calc(var(--space)*26), hsl(calc(var(--h)*13), var(--s), var(--l)) calc(var(--space)*27), black calc(var(--space)*27.001), black calc(var(--space)*27.999), hsl(calc(var(--h)*14), var(--s), var(--l)) calc(var(--space)*28), hsl(calc(var(--h)*14), var(--s), var(--l)) calc(var(--space)*29), black calc(var(--space)*29.001), black calc(var(--space)*29.999), hsl(calc(var(--h)*15), var(--s), var(--l)) calc(var(--space)*30), hsl(calc(var(--h)*15), var(--s), var(--l)) calc(var(--space)*31), black calc(var(--space)*31.001), black calc(var(--space)*31.999) ), repeating-linear-gradient( 90deg, var(--vio), var(--blu), var(--gre), var(--yel), var(--red), var(--vio) ), repeating-linear-gradient( 90deg, var(--bar-bg) calc(var(--bars)*2), var(--bar-color) calc(var(--bars)*3), var(--bar-bg) calc(var(--bars)*3.5), var(--bar-color) calc(var(--bars)*4), var(--bar-bg) calc(var(--bars)*5), var(--bar-bg) calc(var(--bars)*12) ), repeating-linear-gradient( 90deg, var(--bar-bg) calc(var(--bars)*2), var(--bar-color) calc(var(--bars)*3), var(--bar-bg) calc(var(--bars)*3.5), var(--bar-color) calc(var(--bars)*4), var(--bar-bg) calc(var(--bars)*5), var(--bar-bg) calc(var(--bars)*9) ), radial-gradient( farthest-corner circle at var(--mx) var(--my), rgba(230, 230, 230, 0.85) 0%, rgba(200, 200, 200, .1) 25%, rgb(0, 0, 0) 90% );
    background-blend-mode: soft-light, soft-light, screen, overlay;
    background-position: center, calc(((50% - var(--posx)) * 25) + 50%) center, calc(var(--posx)*-1.2) var(--posy), var(--pos), center;
    background-size: 100px 100px, 200% 200%, 237% 237%, 195% 195%, 120% 120%;
    filter: brightness(calc((var(--hyp) + 0.7)*0.7)) contrast(3) saturate(.35);
}

/*

GALAXY HOLO

*/
.card[data-rarity="rare holo galaxy"] .card__glare {
    background-image: radial-gradient( farthest-corner circle at var(--mx) var(--my), rgba(222, 245, 250, 0.7) 10%, rgba(255, 255, 255, 0.5) 20%, rgba(0, 0, 0, 0.5) 90% );
}

.card[data-rarity="rare holo"]:not([data-gallery="true"]) .card__glare:after, .card[data-rarity="rare holo galaxy"] .card__glare:after {
    content: "";
    clip-path: inset( 11.5% 8.5% 44.5% 8.5% );
    background-image: radial-gradient( farthest-corner circle at var(--mx) var(--my), rgb(229, 239, 255) 5%, rgba(100, 100, 100, 0.5) 35%, rgba(0, 0, 0, 0.9) 80% );
}

.card[data-rarity="rare holo galaxyFullshine"] .card__shine {
    --space: 4%;
    clip-path: inset( 11.5% 8.5% 44.5% 8.5% );
    background-image: var(--galaxy), url(''), url(''), repeating-linear-gradient( 82deg, rgb(219, 204, 86) calc(var(--space)*1), rgb(121, 199, 58) calc(var(--space)*2), rgb(58, 192, 183) calc(var(--space)*3), rgb(71, 98, 207) calc(var(--space)*4), rgb(170, 69, 209) calc(var(--space)*5), rgb(255, 90, 180) calc(var(--space)*6), rgb(255, 90, 180) calc(var(--space)*7), rgb(170, 69, 209) calc(var(--space)*8), rgb(71, 98, 207) calc(var(--space)*9), rgb(58, 192, 183) calc(var(--space)*10), rgb(121, 199, 58) calc(var(--space)*11), rgb(219, 204, 86) calc(var(--space)*12) ), radial-gradient( farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, 0.6) 5%, rgba(150, 150, 150, .3) 40%, rgb(0, 0, 0) 100% );
    background-blend-mode: color-dodge, color-burn, saturation, screen;
    background-position: var(--galaxybg, cover), var(--galaxybg, cover), var(--galaxybg, cover), calc(((50% - var(--posx)) * 2.5) + 50%) calc(((50% - var(--posy)) * 2.5) + 50%), center;
    background-size: cover, cover, cover, 400% 900%, cover;
    filter: brightness(.75) contrast(1.2) saturate(1.5);
    mix-blend-mode: color-dodge;
}

.card[data-rarity="rare holo galaxy"] .card__shine {
    --space: 4%;
    clip-path: inset( 11.5% 8.5% 44.5% 8.5% );
    background-image: var(--galaxy), var(--galaxy), var(--galaxy), repeating-linear-gradient( 82deg, rgb(219, 204, 86) calc(var(--space)*1), rgb(121, 199, 58) calc(var(--space)*2), rgb(58, 192, 183) calc(var(--space)*3), rgb(71, 98, 207) calc(var(--space)*4), rgb(170, 69, 209) calc(var(--space)*5), rgb(255, 90, 180) calc(var(--space)*6), rgb(255, 90, 180) calc(var(--space)*7), rgb(170, 69, 209) calc(var(--space)*8), rgb(71, 98, 207) calc(var(--space)*9), rgb(58, 192, 183) calc(var(--space)*10), rgb(121, 199, 58) calc(var(--space)*11), rgb(219, 204, 86) calc(var(--space)*12) ), radial-gradient( farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, 0.6) 5%, rgba(150, 150, 150, .3) 40%, rgb(0, 0, 0) 100% );
    background-blend-mode: color-dodge, color-burn, saturation, screen;
    background-position: var(--galaxybg, cover), var(--galaxybg, cover), var(--galaxybg, cover), calc(((50% - var(--posx)) * 2.5) + 50%) calc(((50% - var(--posy)) * 2.5) + 50%), center;
    background-size: cover, cover, cover, 400% 900%, cover;
    filter: brightness(.75) contrast(1.2) saturate(1.5);
    mix-blend-mode: color-dodge;
}

.card[data-rarity="rare holo"][data-subtypes^="stage"] .card__shine, .card[data-rarity="rare holo galaxy"][data-subtypes^="stage"] .card__shine, .card[data-rarity="rare holo"][data-subtypes^="stage"] .card__glare:after, .card[data-rarity="rare holo galaxy"][data-subtypes^="stage"] .card__glare:after {
    clip-path: polygon(91.78% 10%, 57% 10%, 53.92% 12.00%, 17% 12%, 16% 14%, 12% 16%, 8.5% 16%, 7.93% 47.41%, 92.07% 47.41%);
}

.card[data-rarity="rare holo"][data-subtypes^="supporter"] .card__shine, .card[data-rarity="rare holo galaxy"][data-subtypes^="supporter"] .card__shine, .card[data-rarity="rare holo"][data-subtypes^="supporter"] .card__glare:after, .card[data-rarity="rare holo galaxy"][data-subtypes^="supporter"] .card__glare:after {
    clip-path: inset(14.5% 7.9% 48.2% 8.7%);
}

/*

V

*/
.card[data-rarity*="rare holo v"] .card__shine, .card[data-rarity*="rare holo v"] .card__shine:after {
    --space: 5%;
    --angle: 133deg;
    --imgsize: 500px;
    background-image: var(--grain), repeating-linear-gradient( 0deg, rgb(255, 119, 115) calc(var(--space)*1), rgba(255,237,95,1) calc(var(--space)*2), rgba(168,255,95,1) calc(var(--space)*3), rgba(131,255,247,1) calc(var(--space)*4), rgba(120,148,255,1) calc(var(--space)*5), rgb(216, 117, 255) calc(var(--space)*6), rgb(255, 119, 115) calc(var(--space)*7) ), repeating-linear-gradient( var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10% , #0e152e 12% ), radial-gradient( farthest-corner circle at var(--mx) var(--my), rgba(0, 0, 0, .1) 12%, rgba(0, 0, 0, .15) 20%, rgba(0, 0, 0, .25) 120% );
    background-blend-mode: screen, hue, hard-light;
    background-size: var(--imgsize) 100%, 200% 700%, 300% 100%, 200% 100%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
    filter: brightness(.8) contrast(2.95) saturate(.5);
}

.card[data-rarity="rare holo v"] .card__shine:after {
    content: "";
    background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy);
    background-size: var(--imgsize) 100%, 200% 400%, 195% 100%, 200% 100%;
    filter: brightness(1) contrast(2.5) saturate(1.75);
    mix-blend-mode: soft-light;
}

/*

VMAX

*/
.card[data-rarity="rare holo vmax"] .card__shine {
    --space: 6%;
    --angle: 133deg;
    --imgsize: 60% 30%;
    background-image: var(--Vmaxbg), repeating-linear-gradient( -33deg, rgb(206, 42, 36) calc(var(--space)*1), rgb(157, 170, 223) calc(var(--space)*2), rgb(45, 153, 146) calc(var(--space)*3), rgb(29, 151, 36) calc(var(--space)*4), rgb(181, 64, 228) calc(var(--space)*5), rgb(206, 42, 36) calc(var(--space)*6) ), repeating-linear-gradient( var(--angle), rgba(14, 21, 46, 0.5) 0%, hsl(180, 10%, 50%) 2.5%, hsl(83, 50%, 35%) 5%, hsl(180, 10%, 50%) 7.5%, rgba(14, 21, 46, 0.5) 10% , rgba(14, 21, 46, 0.5) 15% ), radial-gradient( farthest-corner circle at var(--mx) var(--my), rgba(6, 218, 255, 0.6) 0%, rgba(38, 235, 127, 0.6) 25%, rgba(155, 78, 228, 0.6) 50%, rgba(228, 78, 90, 0.6) 75% );
    background-blend-mode: color-burn, screen, soft-light;
    background-size: var(--imgsize), 1100% 1100%, 600% 600%, 200% 200%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
    filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2.5) saturate(.6);
}

.card-grid.svelte-12sq7m7 {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2vw;
    transform-style: preserve-3d;
    height: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 50px;
    position: relative
}

.card-grid.active.svelte-12sq7m7 {
    z-index: 99
}

@media screen and (max-width: 1366px) {
    /* main {
        color: white;
        padding: 50px;
        max-width: 100%;
        margin: auto;
        min-height: 128% !important;
    } */
}

@media screen and (min-width: 600px) {
    .card-grid.svelte-12sq7m7 {
        grid-template-columns:1fr 1fr
    }
}

@media screen and (min-width: 900px) {
    
    .card-grid.svelte-12sq7m7 {
        grid-template-columns:1fr 1fr 1fr
    }
}

.card__glare.svelte-y0attf {
    transform: translateZ(1.4px);
    background: radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.8) 10%,rgba(255,255,255,.65) 20%,rgba(0,0,0,.5) 90%);
    mix-blend-mode: overlay;
    opacity: var(--o)
}

.card__glare.holo.svelte-y0attf:not(.v):not(.vmax):not(.vstar) {
    opacity: calc(var(--o)*.8);
    filter: brightness(.8) contrast(1.5)
}

.card__glare.v.svelte-y0attf,.card__glare.vfull.svelte-y0attf,.card__glare.vmax.svelte-y0attf,.card__glare.vstar.svelte-y0attf {
    filter: brightness(.9) contrast(1.75);
    background: radial-gradient(farthest-corner circle at var(--mx) var(--my),rgb(255,255,255) 0%,rgba(133,137,141,.33) 45%,rgba(100,100,100,.65) 120%);
    opacity: calc(var(--o)*.66)
}

.card__glare.vmax.svelte-y0attf {
    background: radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.75) 0%,rgba(99,99,99,.35) 45%,rgba(0,0,0,1) 120%)
}

.card[data-rarity="rare holo"][data-gallery=true] .card__glare.svelte-y0attf {
    background: radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.8) 10%,rgba(255,255,255,.6) 35%,rgba(0,0,0,1) 85%)
}

.card[data-rarity="radiant rare"] .card__glare.svelte-y0attf {
    background-image: radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.9) 10%,rgba(255,255,255,.6) 30%,rgba(0,0,0,.8) 80%)
}

.card__shine.svelte-8e4zv4 {
    display: grid;
    overflow: hidden;
    z-index: 3;
    transform: translateZ(1px);
    background: transparent;
    mix-blend-mode: color-dodge;
    filter: brightness(.85) contrast(2.75) saturate(.65);
    background-size: cover;
    background-position: center;
    opacity: var(--o)
}

.card__shine.svelte-8e4zv4:before {
    grid-area: 1/1;
    transform: translateZ(1px)
}

.card__shine.svelte-8e4zv4:after {
    grid-area: 1/1;
    transform: translateZ(1.2px);
    border-radius: var(--radius)
}

:root {
    --mx: 50%;
    --my: 50%;
    --s: 1;
    --o: 0;
    --tx: 0px;
    --ty: 0px;
    --rx: 0deg;
    --ry: 0deg;
    --pos: 50% 50%;
    --posx: 50%;
    --posy: 50%;
    --hyp: 0
}

.card.svelte-166jv0z.svelte-166jv0z {
    /* IMPORTANT EFFECT */
    --radius: 4.55% / 3.5%;
    /* --back: #004177;
    --glow: #69d1e9; */
    z-index: calc(var(--s) * 100);
    transform: translateZ(.1px);
    -webkit-transform: translate3d(0,0,.1px);
    will-change: transform,visibility;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d
}

.card.interacting.svelte-166jv0z.svelte-166jv0z {
    z-index: calc(var(--s) * 120)
}

.card.active.svelte-166jv0z .card__translater.svelte-166jv0z,.card.active.svelte-166jv0z .card__rotator.svelte-166jv0z {
    touch-action: none
}

.card__translater.svelte-166jv0z.svelte-166jv0z,.card__rotator.svelte-166jv0z.svelte-166jv0z {
    display: grid;
    perspective: 600px;
    transform-origin: center;
    -webkit-transform-origin: center;
    will-change: transform
}

.card__translater.svelte-166jv0z.svelte-166jv0z {
    width: auto;
    position: relative;
    transform: translate3d(var(--tx),var(--ty),0) scale(var(--s));
    -webkit-transform: translate3d(var(--tx),var(--ty),0) scale(var(--s))
}

.card__rotator.svelte-166jv0z.svelte-166jv0z {
    transform: rotateY(var(--rx)) rotateX(var(--ry));
    transform-style: preserve-3d;
    -webkit-transform: rotateY(var(--rx)) rotateX(var(--ry));
    -webkit-transform-style: preserve-3d;
    box-shadow: 0 10px 20px -5px #0000002c; /* IMPORTANT */
    border-radius: var(--radius);
    outline: none;
    transition: box-shadow .4s ease,outline .2s ease
}

button.card__rotator.svelte-166jv0z.svelte-166jv0z {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: top;
    padding: 0
}

.card.active.svelte-166jv0z .card__rotator.svelte-166jv0z {
    box-shadow: 0 0 10px 0 var(--glow),0 0 10px 0 var(--glow),0 0 30px 0 var(--glow)
}

.card__rotator.svelte-166jv0z.svelte-166jv0z:focus {
    box-shadow: 0 0 10px 0 var(--glow),0 0 10px 0 var(--glow),0 0 30px 0 var(--glow)
}

.card.active.svelte-166jv0z .card__rotator.svelte-166jv0z:focus {
    box-shadow: 0 10px 30px 3px #000
}

.card__rotator.svelte-166jv0z * {
    width: 100%;
    display: grid;
    grid-area: 1/1;
    border-radius: var(--radius);
    image-rendering: optimizeQuality;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d
}

.card__rotator.svelte-166jv0z img.svelte-166jv0z {
    outline: 1px solid transparent;
    aspect-ratio: .716;
    height:auto !important; /* NORMALIZE AUTO OLD 461px */
}

.card__back.svelte-166jv0z.svelte-166jv0z {
    background-color: var(--back);
    transform: rotateY(180deg) translateZ(1px);
    -webkit-transform: rotateY(180deg) translateZ(1px);
    backface-visibility: visible
}

.card__front.svelte-166jv0z.svelte-166jv0z,.card__front.svelte-166jv0z .svelte-166jv0z {
    backface-visibility: hidden
}

.card__front.svelte-166jv0z.svelte-166jv0z {
    opacity: 1;
    transition: opacity .33s ease-out
}

.loading.svelte-166jv0z .card__front.svelte-166jv0z {
    opacity: 0
}

.loading.svelte-166jv0z .card__back.svelte-166jv0z {
    transform: rotateY(0);
    -webkit-transform: rotateY(0deg)
}

.back-to-top.svelte-1eve913 a.svelte-1eve913 {
    color: inherit;
    text-decoration: none
}

/*

VSTAR

*/
.card[data-rarity="rare holo vstar"][data-supertype="MagicTG"] .card__shine, .card[data-rarity="rare holo vstar"][data-supertype="MagicTG"] .card__shine:after {
    --space: 5%;
    --angle: 133deg;
    --imgsize: 18% 15%;
    background-image: var(--Vstar), repeating-linear-gradient( 0deg, rgb(255, 119, 115) calc(var(--space)*1), rgba(255,237,95,1) calc(var(--space)*2), rgba(168,255,95,1) calc(var(--space)*3), rgba(131,255,247,1) calc(var(--space)*4), rgba(120,148,255,1) calc(var(--space)*5), rgb(216, 117, 255) calc(var(--space)*6), rgb(255, 119, 115) calc(var(--space)*7) ), repeating-linear-gradient( var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10% , #0e152e 12% ), radial-gradient( farthest-corner circle at var(--mx) var(--my), rgba(0, 0, 0, .1) 12%, rgba(0, 0, 0, .15) 20%, rgba(0, 0, 0, .25) 120% );
    background-blend-mode: soft-light, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
    filter: brightness(calc((var(--hyp) * .5) + 0.5)) contrast(2) saturate(.75);
}

.card[data-rarity="rare holo vstar"][data-supertype="MagicTG"] .card__shine:after {
    content: "";
    background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
    background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy);
    filter: brightness(calc((var(--hyp) * .5) + 0.8)) contrast(1.5) saturate(1.75);
    mix-blend-mode: exclusion;
}

/*

FULL / ALTERNATE ART

*/
.card[data-rarity="rare ultra"][data-supertype="MagicTG"] .card__shine, .card[data-rarity="rare ultra"][data-supertype="MagicTG"] .card__shine:after {
    --space: 5%;
    --angle: 133deg;
    --imgsize: 50% 42%;
    background-image: var(--illusion), repeating-linear-gradient( 0deg, rgb(255, 119, 115) calc(var(--space)*1), rgba(255,237,95,1) calc(var(--space)*2), rgba(168,255,95,1) calc(var(--space)*3), rgba(131,255,247,1) calc(var(--space)*4), rgba(120,148,255,1) calc(var(--space)*5), rgb(216, 117, 255) calc(var(--space)*6), rgb(255, 119, 115) calc(var(--space)*7) ), repeating-linear-gradient( var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10% , #0e152e 12% ), radial-gradient( farthest-corner circle at var(--mx) var(--my), rgba(0, 0, 0, .1) 12%, rgba(0, 0, 0, .15) 20%, rgba(0, 0, 0, .25) 120% );
    background-blend-mode: exclusion, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
    background-position: center center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
    filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2) saturate(1.5);
}

.card[data-rarity="rare ultra"][data-supertype="MagicTG"] .card__shine:after {
    content: "";
    background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
    background-position: center center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy);
    filter: brightness(calc((var(--hyp)*0.5) + .8)) contrast(1.6) saturate(1.4);
    mix-blend-mode: exclusion;
}

/*

TRAINER FULL-ART

*/
.card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__shine, .card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__shine:after {
    --space: 5%;
    --angle: 133deg;
    --imgsize: 25% 20%;
    background-image: var(--trainerbg), repeating-linear-gradient( 0deg, rgb(255, 119, 115) calc(var(--space)*1), rgba(255,237,95,1) calc(var(--space)*2), rgba(168,255,95,1) calc(var(--space)*3), rgba(131,255,247,1) calc(var(--space)*4), rgba(120,148,255,1) calc(var(--space)*5), rgb(216, 117, 255) calc(var(--space)*6), rgb(255, 119, 115) calc(var(--space)*7) ), repeating-linear-gradient( var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10% , #0e152e 12% ), radial-gradient( farthest-corner circle at var(--mx) var(--my), rgba(0, 0, 0, .1) 12%, rgba(0, 0, 0, .15) 20%, rgba(0, 0, 0, .25) 120% );
    background-blend-mode: difference, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
    filter: brightness(0.75) contrast(2.5) saturate(.75);
}

.card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__shine:after {
    content: "";
    background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
    background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy);
    filter: brightness(1.2) contrast(1) saturate(1.75);
    mix-blend-mode: exclusion;
}

/*

RAINBOW SECRET

*/
.card[data-rarity^="rare rainbow"] .card__shine, .card[data-rarity^="rare rainbow"] .card__shine:after {
    --rainbowspace: 9%;
    --overlayspace: 12%;
    --angle: -20deg;
    --angle2: 130deg;
    --imgsize: 130% 180%;
    background-image: var(--rainbow), repeating-linear-gradient( var(--angle), rgb(253, 71, 65) calc(var(--rainbowspace)*1), rgb(255, 243, 151) calc(var(--rainbowspace)*2), rgb(95, 255, 180) calc(var(--rainbowspace)*3), rgba(131,255,247,1) calc(var(--rainbowspace)*4), rgb(75, 198, 255) calc(var(--rainbowspace)*5), rgb(255, 73, 246) calc(var(--rainbowspace)*6), rgb(255, 56, 49) calc(var(--rainbowspace)*7) ), repeating-linear-gradient( var(--angle2), rgba(89, 46, 80, 0.5) calc(var(--overlayspace)*1), hsl(263, 43%, 76%) calc(var(--overlayspace)*2), rgb(223, 96, 202) calc(var(--overlayspace)*3), hsl(180, 57%, 56%) calc(var(--overlayspace)*4), rgba(14, 21, 46, 0.5) calc(var(--overlayspace)*5) , rgba(14, 21, 46, 0.5) calc(var(--overlayspace)*6) ), var(--illusion2);
    background-size: 20% 15%, 500% 500%, 1000% 1000%, var(--imgsize);
    background-position: center, calc( var(--posx) * 1.5 ) calc( var(--posy) * 1.5 ), calc( var(--posx) * 1.5 ) var(--posy), bottom left;
    background-blend-mode: color-burn, soft-light, normal;
    filter: brightness(calc((var(--hyp)*0.25) + 0.66)) contrast(2.2) saturate(.9);
}

.card[data-rarity^="rare rainbow"] .card__shine:after {
    content: "";
    background-position: center, 0% calc( var(--posy) * -1.75 ), calc( var(--posx) * -1.75 ) calc( var(--posy) * -1 ) , bottom left;
    mix-blend-mode: exclusion;
}

/*

RAINBOW SECRET FULL/ALT

*/
.card[data-rarity="rare rainbow alt"] .card__shine, .card[data-rarity="rare rainbow alt"] .card__shine:after {
    filter: brightness(calc((var(--hyp)*0.25) + 0.66)) contrast(3) saturate(.7);
}

/*

GOLD SECRET

*/
.card[data-rarity="rare secret"] .card__shine, .card[data-rarity="rare secret"] .card__shine:after {
    --angle: 110deg;
    --imgsize: 28% 23%;
    background-image: var(--glitter), repeating-linear-gradient( var(--angle), rgba(89, 46, 80, 0.5) 0%, hsl(39, 37%, 60%) 2.5%, rgb(216, 183, 92) 5%, hsl(39, 37%, 60%) 7.5%, rgba(14, 21, 46, 0.5) 10% , rgba(14, 21, 46, 0.5) 15% ), var(--metal);
    background-size: 25% 25%, 600% 100%, var(--imgsize);
    background-position: center, var(--posx) var(--posy), center;
    background-blend-mode: color-burn, darken;
    filter: brightness(calc((var(--hyp)*0.4) + 0.7)) contrast(3) saturate(.66);
}

.card[data-rarity="rare secret"] .card__shine:after {
    content: "";
    background-image: var(--glitter), repeating-linear-gradient( var(--angle), rgba(89, 46, 80, 0.5) 0%, hsl(39, 37%, 60%) 2.5%, rgb(216, 183, 92) 5%, hsl(39, 37%, 60%) 7.5%, rgba(14, 21, 46, 0.5) 10% , rgba(14, 21, 46, 0.5) 15% );
    background-position: center, calc( var(--posx) * -1 ) calc( var(--posy) * -1 ), center;
    filter: brightness(calc((var(--hyp)*0.3) + 0.7)) contrast(2.5) saturate(.66);
    mix-blend-mode: exclusion;
}

/*

RADIANT

*/
.card[data-rarity*="radiant"] .card__shine {
    --barwidth: 1.2%;
    --space: 200px;
    clip-path: inset(2.8% 4% round 2.55% / 1.5%);
    background-image: repeating-linear-gradient( 0deg, hsl(180, 70%, 50%) calc(var(--space)*1), hsl(110, 80%, 50%) calc(var(--space)*2), hsl(80, 90%, 50%) calc(var(--space)*3), hsl(50, 90%, 50%) calc(var(--space)*4), hsl(80, 90%, 50%) calc(var(--space)*5), hsl(110, 80%, 50%) calc(var(--space)*6), hsl(180, 70%, 50%) calc(var(--space)*7) ), repeating-linear-gradient( 45deg, hsl(0,0%,10%) 0% , hsl(0,0%,10%) 1% , hsl(0,0%,10%) var(--barwidth), hsl(0,0%,20%) calc( var(--barwidth) + 0.01% ) , hsl(0,0%,20%) calc( var(--barwidth) * 2 ), hsl(0,0%,35%) calc( var(--barwidth) * 2 + 0.01% ) , hsl(0,0%,35%) calc( var(--barwidth) * 3 ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 3 + 0.01% ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 4 ) , hsl(0,0%,50%) calc( var(--barwidth) * 4 + 0.01% ) , hsl(0,0%,50%) calc( var(--barwidth) * 5 ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 5 + 0.01% ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 6 ) , hsl(0,0%,35%) calc( var(--barwidth) * 6 + 0.01% ) , hsl(0,0%,35%) calc( var(--barwidth) * 7 ) , hsl(0,0%,20%) calc( var(--barwidth) * 7 + 0.01% ) , hsl(0,0%,20%) calc( var(--barwidth) * 8 ) , hsl(0,0%,10%) calc( var(--barwidth) * 8 + 0.01% ) , hsl(0,0%,10%) calc( var(--barwidth) * 9 ) , hsl(0,0%,0%) calc( var(--barwidth) * 9 + 0.01% ) , hsl(0,0%,0%) calc( var(--barwidth) * 10 ) ), repeating-linear-gradient( -45deg, hsl(0,0%,10%) 0% , hsl(0,0%,10%) 1% , hsl(0,0%,10%) var(--barwidth), hsl(0,0%,20%) calc( var(--barwidth) + 0.01% ) , hsl(0,0%,20%) calc( var(--barwidth) * 2 ), hsl(0,0%,35%) calc( var(--barwidth) * 2 + 0.01% ) , hsl(0,0%,35%) calc( var(--barwidth) * 3 ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 3 + 0.01% ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 4 ) , hsl(0,0%,50%) calc( var(--barwidth) * 4 + 0.01% ) , hsl(0,0%,50%) calc( var(--barwidth) * 5 ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 5 + 0.01% ) , hsl(0,0%,42.5%) calc( var(--barwidth) * 6 ) , hsl(0,0%,35%) calc( var(--barwidth) * 6 + 0.01% ) , hsl(0,0%,35%) calc( var(--barwidth) * 7 ) , hsl(0,0%,20%) calc( var(--barwidth) * 7 + 0.01% ) , hsl(0,0%,20%) calc( var(--barwidth) * 8 ) , hsl(0,0%,10%) calc( var(--barwidth) * 8 + 0.01% ) , hsl(0,0%,10%) calc( var(--barwidth) * 9 ) , hsl(0,0%,0%) calc( var(--barwidth) * 9 + 0.01% ) , hsl(0,0%,0%) calc( var(--barwidth) * 10 ) );
    background-size: 400% 400%, 210% 210%, 210% 210%;
    background-position: calc( ((var(--posx) - 50%) * -2.5) + 50% ) calc( ((var(--posy) - 50%) * -2.5) + 50% ), calc( ((var(--posx) - 50%) * 1.5) + 50% ) calc( ((var(--posy) - 50%) * 1.5) + 50% ), calc( ((var(--posx) - 50%) * 1.5) + 50% ) calc( ((var(--posy) - 50%) * 1.5) + 50% );
    background-blend-mode: exclusion, darken, color-dodge;
    filter: brightness(.95) contrast(4) saturate(0.75);
    mix-blend-mode: color-dodge;
}

.card[data-rarity*="radiant"] .card__shine:after {
    content: "";
    background-image: var(--glitter), repeating-linear-gradient( 55deg, rgb(255, 161, 158) calc(var(--space)*1), rgb(85, 178, 255) calc(var(--space)*2), rgb(255, 199, 146) calc(var(--space)*3), rgb(130, 255, 213) calc(var(--space)*4), rgb(253, 170, 240) calc(var(--space)*5), rgb(148, 241, 255) calc(var(--space)*6), rgb(255, 161, 158) calc(var(--space)*7) );
    background-size: 25% 25%, 400% 100%;
    background-position: center, calc( ((var(--posx) - 50%) * -2.5) + 50% ) calc( ((var(--posy) - 50%) * -2.5) + 50% );
    filter: brightness(1) contrast(1) saturate(0);
    mix-blend-mode: soft-light;
    background-blend-mode: multiply;
}

.card[data-rarity*="radiant"] .card__shine:before {
    content: "";
    z-index: 7;
    grid-area: 1/1;
    background-image: radial-gradient( farthest-corner ellipse at calc( ((var(--mx)) * 0.5) + 25% ) calc( ((var(--my)) * 0.5) + 25% ), rgba(100, 100, 100, .5) 5%, rgba(50, 50, 50, .4) 15%, rgba(0, 0, 0, .6) 30% );
    background-image: radial-gradient( farthest-corner ellipse at calc( ((var(--mx)) * 0.5) + 25% ) calc( ((var(--my)) * 0.5) + 25% ), rgba(100, 100, 100, .8) 10%, rgba(50, 50, 50, .34) 20%, rgba(0, 0, 0, 1) 50% );
    background-position: center;
    background-size: 350% 350%;
    mix-blend-mode: multiply;
}

/*

TRAINER GALLERY HOLO

*/
.card[data-rarity="rare holo"][data-gallery="true"] .card__shine {
    --space: 5%;
    --angle: -22deg;
    --imgsize: 200% 400%;
    clip-path: inset(2.8% 4% round 2.55% / 1.5%);
    background-image: repeating-linear-gradient( var(--angle), rgba(174, 102, 202, 0.75) calc(var(--space)*1), rgba(228, 77, 72, 0.75) calc(var(--space)*2), rgba(216, 197, 55, 0.75) calc(var(--space)*3), rgba(124, 201, 62, 0.75) calc(var(--space)*4), rgba(80, 177, 170, 0.75) calc(var(--space)*5), rgba(136, 160, 255, 0.75) calc(var(--space)*6), rgba(176, 105, 204, 0.75) calc(var(--space)*7) );
    background-blend-mode: color-dodge;
    background-size: var(--imgsize);
    background-position: 0% calc(var(--posy) * 1), var(--posx) var(--posy);
    filter: brightness(calc((var(--hyp)*0.3) + 0.6)) contrast(2.3) saturate(1.1);
}

.card[data-rarity="rare holo"][data-gallery="true"] .card__shine:after {
    content: "";
    background-image: radial-gradient( farthest-corner ellipse at calc( ((var(--mx)) * 0.5) + 25% ) calc( ((var(--my)) * 0.5) + 25% ), rgb(255, 255, 255) 5%, rgba(55, 0, 55, .6) 25%, rgb(55, 55, 55) 90% );
    background-position: center;
    background-size: 200% 200%;
    filter: brightness(calc((var(--hyp)*0.2) + 0.4)) contrast(.85) saturate(1.1);
    mix-blend-mode: hard-light;
}

/*

TRAINER GALLERY V

*/
.card[data-rarity="rare holo v"][data-gallery="true"] .card__shine, .card[data-rarity="rare holo v"][data-gallery="true"] .card__shine:after {
    --space: 5%;
    --angle: 133deg;
    --img: var(--illusion);
    --imgsize: 60% 52%;
    background-image: var(--img), repeating-linear-gradient( 0deg, rgb(255, 119, 115) calc(var(--space)*1), rgba(255,237,95,1) calc(var(--space)*2), rgba(168,255,95,1) calc(var(--space)*3), rgba(131,255,247,1) calc(var(--space)*4), rgba(120,148,255,1) calc(var(--space)*5), rgb(216, 117, 255) calc(var(--space)*6), rgb(255, 119, 115) calc(var(--space)*7) ), repeating-linear-gradient( var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10% , #0e152e 12% ), radial-gradient( farthest-corner circle at var(--mx) var(--my), rgba(0, 0, 0, .1) 12%, rgba(0, 0, 0, .15) 20%, rgba(0, 0, 0, .25) 120% );
    background-blend-mode: exclusion, hue, hard-light;
    background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
    background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
    filter: brightness(calc((var(--hyp)*0.4) + .5)) contrast(2.5) saturate(1);
}

.card[data-rarity="rare holo v"][data-gallery="true"] .card__shine:after {
    content: "";
    background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
    background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy);
    filter: brightness(calc((var(--hyp)*0.5) + .7)) contrast(2) saturate(1);
    mix-blend-mode: exclusion;
}

.card[data-rarity="rare holo v"][data-gallery="true"][data-subtypes*="vmax"] .card__shine, .card[data-rarity="rare holo v"][data-gallery="true"][data-subtypes*="vmax"] .card__shine:after {
    --img: var(--illusion);
    --imgsize: 30% 26%;
}

* {
    box-sizing: border-box;
}

body, html {
    height: 100%;
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    scroll-padding-top: 2em;
    /* overflow: hidden; */
}

body {
    /* font-family: Roboto; */
    background-color:#ffffff;
    overflow-x: hidden;
}

/* 
a:hover, a:focus {
    color: var(--link-hover);
} */

main{
    background:url(../../assets/card/bg-teste.png) #3D3D3D center 130px no-repeat;
    width:100%;
    height:100%;
    background-size:contain;
}

main {
    color: white;
    padding: 50px;
    max-width:100%;
    margin: auto;
    /* min-height:100% !important; */
    min-height:940px;
}

header svg {
    width: 1em;
    fill: currentColor;
    position: relative;
    top: 2px;
    margin: 0 5px;
    display: inline-block;
}

@media screen and (min-width: 600px) {
    header {
        grid-template-columns: 0% 1fr;
    }

    .showcase {
        grid-column: 2;
        grid-row: 2/5;
    }
}

@media screen and (min-width: 900px) {
    header {
        grid-template-columns: 0% 1fr;
    }
}

.showcase {
    z-index: 99;
    max-width: min(330px, 80vw);
    margin:30px auto !important;
    /* margin: auto !important; */
}

mark {
    background: #006065;
    color: white;
    font-style: italic;
    font-weight: bold;
    padding-inline: 0.25em; border-radius: 3px;
}

.back-to-top {
    font-weight: bold;
    position: fixed;
    bottom: 1em;
    right: 1em;
    padding: .5em 1em;
    border-radius: 5em;
    background: var(--primary);
    color: rgb(5, 58, 71);
    text-decoration: none;
    box-shadow: 0 7px 13px -5px currentColor;
}

.PNL_options {
    position: absolute;
    top: 150px;
    left: 20px;
}

.PNL_Infos {
    position: absolute;
    top: 180px;
    right: 20px;
}

.PNL_ChooseCard {
    position: absolute;
    bottom: 60px;
    left: 0px;
}


/* CARTAS */

/* ESTILO PARA CARTAS */

.card-container {
    width: 280px;
    height: 395px;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    margin:0 auto;
    margin-bottom:50px;
}

.card-container-mvp{
    background:url(../../assets/card/bg-mvp.png) center/cover;
    width: 280px;
    height: 395px;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    margin-bottom:50px;
    border-radius:3mm;
}

/* Adicione estas media queries para responsividade */
@media (max-width: 1270px) {    
    #content {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 940px) {
    #content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    #content {
        grid-template-columns: 1fr;
    }
}

.titleCard p{
    margin-left:12px;
    line-height:1.5;
    font-size:16px;
}

.titleCard-mvp p{
    margin-left:12px;
    line-height:1.5;
    font-size:16px;
}

/* .art {
    width: 90%;
    height: 319px;
    margin: 3px auto;
    background-size:100%;
} */

.back {
    /* background-size:cover; */
    background:#F0ECEC;
    transform: rotateY(180deg);
}

        /* Novos estilos para os botões */
        .button-container {
            display: flex;
            gap: 8px;
            margin-top: 60px;
            justify-content: space-between;
        }

        /* .card-button {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 100px;
            font-family: 'ConthraxSB', sans-serif;
            font-size: 10px;
            cursor: pointer;
            transition: all 0.3s;
            background-color: #005CEA;
            background-color: #212529;
            color:white;
        } */

        .view-button {
            /* background-color: #2E5BFF; */
            background:none;
            border:2px solid #444444;
            color:#444444;
            /* border:2px solid #2E5BFF;
            color:#2E5BFF; */
            text-align:center;
        }

        .add-button {
            /* background-color: #27ae60; */
            /* background-color: #005CEA; */
            background-color: #0D0D0D;
            color: white;
        }

        .card-button:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

.hidden {
    display: none !important;
}

/* REMOVE BUTTON CART */

.card-button.cart-toggle.added {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.card-button.cart-toggle.added:hover {
    background-color: #bb2d3b !important;
    border-color: #bb2d3b !important;
}

/* PRODUTOS RELACIONADOS */

    /* Card container */
    .related-products-card {
      position: relative;
      /* padding: 2rem; */
      border-radius: 1rem;
    }

  .owl-carousel {
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  /* Product items */
  .owl-carousel .item {
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 2rem; */
    border-radius: 0.75rem;
    transition: transform 0.2s;
  }

    .owl-carousel .item p {
      /* color: #6c757d;
      font-size: 0.9rem; */
    }

    /* Custom nav buttons */
    .custom-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 45px;
      height: 45px;
      /* background: #0d6efd; */
      color: #444444;
      border:2px solid #444444;
      border-radius: 50%;
      font-size: 1.4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      z-index: 10;
      transition: background 0.3s;
    }

    .custom-nav:hover {
      /* background: #0b5ed7; */
      background:#0D0D0D;
      color:#fff;
      border:0;
    }

    .custom-nav-prev {
      left: 0px;
    }

    .custom-nav-next {
      right: 0px;
    }

.custom-nav.disabled {
  opacity: 0.4;
}


/* Responsive spacing for small screens */
@media (max-width: 576px) {
    .custom-nav-prev {
    left: -10px;
    }

    .custom-nav-next {
    right: -10px;
    }
}


/* Formatação de title */

.section-title {
border-left: 5px solid #8B2B38;
padding-left: 10px;
margin-bottom: 20px;
}
.feature-icon {
font-size: 3rem;
color: #8B2B38;
}

.tech-paragraph {
line-height: 1.6;
margin-bottom: 0;
}


/* REVIEW */

.btn-close-custom {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #fff;
    color: #000;
    font-size: 1.2rem;
    font-weight: bold;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    z-index: 1056;
}
.btn-close-custom:hover {
    background-color: #f1f1f1;
}
/* .review-thumb {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
} */
/* .review-thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
} */
.show-all-thumb:hover {
    filter: brightness(0.8) !important;
}
.carousel-item img {
    max-height: 600px;
    object-fit: contain;
}


/* REVIEW */

.review-score {
    margin-left: 10px;
    font-weight: bold;
}

.review-images-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.image-thumbnail-container {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}

.more-images-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    border-radius: 5px;
    cursor: pointer;
}

.review-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s;
    border-radius: 5px;
}

.review-thumb:hover {
    transform: scale(1.05);
}

.btn-close-custom {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-active {
    border: 3px solid #0d6efd;
}


.watermark-text {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 
        -2px -2px 0 #081A2D,
        2px -2px 0 #081A2D,
        -2px 2px 0 #081A2D,
        2px 2px 0 #081A2D;
    text-decoration: none;
}

/* Estilo dos botões do cart.js */
.cart-toggle {
    flex: 1;
    background: #061728;
    color: white;
    border: 0;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
}

.cart-toggle:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 23, 40, 0.4);
    background: #0a2a4a;
}

.cart-toggle.added {
    background: linear-gradient(135deg, #48bb78, #38a169) !important;
}

.cart-toggle.added:hover:not(.disabled) {
    background: linear-gradient(135deg, #3da769, #2d8554) !important;
    box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);
}

.cart-toggle.disabled {
    background: #6c757d !important;
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.cart-toggle .btn-icon {
    font-size: 18px;
}

/* Loading spinner */
.bi-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    line-height: 1.3;
    flex: 1;
    height:57px;
    margin-left:10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#details-product{
    border-bottom: 1px solid #dee2e6;
}

.details-shipping {
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #666;
    line-height: 0.8;
}

.custom-reviews-alert{
    border: 1px solid #dee2e6;
}

.original-price {
    font-size: 0.9rem;
    color: #5b5b5b;
    text-decoration: line-through;
    font-weight: 500;
}

/* ===============================
   Botão Enviar Bug - Adaptável
================================= */

.btn-submit-bug {
    background:#061728;
    border: 1px solid var(--color-accent);
    color:#fff;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 500;
    transition: var(--transition-default);
}

/* Hover */
.btn-submit-bug:hover {
    background:#fff;
    border:1px solid #dedede;
    transform: translateY(-2px);
    color:#000;
}