/*
 * Product page — gallery, buy panel, composition tables, reviews.
 */

.product-page {
	padding-block: 2.5rem;
}

@media (width >= 64rem) {
	.product-page {
		padding-block: 3.5rem;
	}
}

.product-page__grid {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 2rem;
	row-gap: 2.5rem;
}

/* Stacked by default; side by side from the large breakpoint up. This base rule
   must stay above the media query — same specificity, so source order decides. */
.product-gallery,
.product-buy {
	grid-column: span 12;
}

@media (width >= 64rem) {
	.product-page__grid {
		margin-top: 3rem;
	}

	.product-gallery {
		grid-column: span 6;
	}

	.product-buy {
		grid-column: 8 / span 5;
	}
}

/* ─────────────────────────────────────────────────────── gallery ───── */

.product-gallery__thumbnails {
	margin-top: 0.75rem;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem;
}

.product-gallery__thumbnail {
	display: block;
	width: 100%;
	border: 1px solid transparent;
	transition: border-color var(--duration-swift) var(--ease-linear-out);
}

.product-gallery__thumbnail:hover {
	border-color: var(--ink-25);
}

.product-gallery__thumbnail[aria-current='true'] {
	border-color: var(--color-signal);
}

/* ────────────────────────────────────────────────────── buy panel ───── */

.product-buy__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.product-buy__name {
	margin-top: 1.25rem;
	color: var(--color-ink);
}

.product-buy__ingredient {
	margin-top: 0.5rem;
}

.product-buy__rating {
	margin-top: 1rem;
}

.product-buy__description {
	margin-top: 1.75rem;
	max-width: 60ch;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--color-ink-2);
}

.product-buy__price-row {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 1rem;
	row-gap: 0.5rem;
	border-top: 1px solid var(--color-line);
	padding-top: 1.5rem;
}

.product-buy__price {
	font-family: var(--font-mono);
	font-size: 1.5rem;
	color: var(--color-ink);
	font-variant-numeric: tabular-nums;
}

.product-buy__compare {
	font-family: var(--font-mono);
	font-size: 0.9375rem;
	color: var(--color-ink-4);
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
}

.product-buy__stock {
	margin-left: auto;
}

.product-buy__specification {
	margin-top: 0.5rem;
}

.product-buy__actions {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
}

.product-buy__add {
	flex: 1;
}

.product-buy__limits {
	margin-top: 0.75rem;
}

.product-buy__note {
	margin-top: 2rem;
}

.product-buy__detail {
	margin-top: 2.5rem;
}

/* ─────────────────────────────────────────────────── composition ───── */

.composition__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 1.5rem;
	row-gap: 0.25rem;
	padding-block: 0.625rem;
	border-top: 1px solid var(--color-line);
}

.composition__row:first-child {
	border-top: 0;
}

.composition__name {
	font-size: 0.875rem;
	color: var(--color-ink);
}

.composition__amount {
	text-align: right;
}

/* A ruled tick rather than a bullet, in the warning colour. */
.warning-list__item {
	display: flex;
	gap: 0.75rem;
}

.warning-list__item + .warning-list__item {
	margin-top: 0.625rem;
}

.warning-list__tick {
	margin-top: 0.5rem;
	height: 1px;
	width: 0.75rem;
	flex: none;
	background-color: var(--color-danger);
}

/* ─────────────────────────────────────────────────────── reviews ───── */

.review-grid {
	display: grid;
	column-gap: 2rem;
}

@media (width >= 48rem) {
	.review-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.review {
	border-bottom: 1px solid var(--color-line);
	padding-block: 1.75rem;
}

.review__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.review__title {
	margin-top: 0.75rem;
	font-weight: 600;
	color: var(--color-ink);
}

.review__body {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--color-ink-2);
}

.review__author {
	margin-top: 0.75rem;
}

.product-related {
	margin-top: 2.5rem;
} 

/* === NAV E-SPORT - TEMA LAKUTOTO === */
  .nav-link--upgrade{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;

    padding:10px 18px;
    border:1px solid #F4B000;
    border-radius:8px;

    color:#fff !important;
    font-weight:700;
    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            #050505 0%,
            #111827 38%,
            #003B8F 68%,
            #008CFF 100%
        ) !important;

    box-shadow:
        0 0 8px rgba(0,140,255,.45),
        0 0 14px rgba(244,176,0,.25),
        inset 0 0 8px rgba(244,176,0,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* Kilau berjalan */
.nav-link--upgrade::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;

    background:linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,255,255,.08) 35%,
        rgba(255,215,70,.55) 50%,
        rgba(255,255,255,.08) 65%,
        transparent 100%
    );

    transform:skewX(-20deg);
    animation:esportShine 3.5s ease-in-out infinite;
}

/* Glow biru lembut */
.nav-link--upgrade::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:8px;
    box-shadow:inset 0 0 10px rgba(0,140,255,.25);
    pointer-events:none;
}

/* Hover minimalis */
.nav-link--upgrade:hover{
    transform:translateY(-2px);
    border-color:#FFD43B;

    box-shadow:
        0 0 10px rgba(0,140,255,.65),
        0 0 18px rgba(244,176,0,.45),
        inset 0 0 10px rgba(244,176,0,.25);
}

/* Animasi shimmer */
@keyframes esportShine{
    0%{
        left:-120%;
        opacity:0;
    }
    20%{
        opacity:1;
    }
    45%{
        left:130%;
        opacity:1;
    }
    55%,
    100%{
        left:130%;
        opacity:0;
    }
}

/* =========================================================
   LAKUTOTO 3D ARTICLE CARD
   BLACK + GOLD + OCEAN BLUE
   DENGAN INTERNAL SCROLL
   ========================================================= */

.lakutoto-article-3d{
    position:relative;

    width:100%;
    max-width:1100px;

    /* =====================================================
       BATASI TINGGI CARD
       ===================================================== */
    max-height:650px;

    /* Scroll hanya di dalam artikel */
    overflow-y:auto;
    overflow-x:hidden;

    margin:35px auto;
    padding:32px 28px;

    color:#f5f7ff;
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.8;

    /* =====================================================
       BACKGROUND 3D
       ===================================================== */
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(0,174,255,.20),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 100%,
            rgba(255,193,7,.18),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #050505 0%,
            #111111 45%,
            #030303 100%
        );

    /* =====================================================
       BORDER
       ===================================================== */
    border:2px solid #e7b900;
    border-radius:24px;

    /* =====================================================
       3D DEPTH
       ===================================================== */
    box-shadow:
        0 0 0 2px rgba(0,174,255,.20),
        0 0 25px rgba(0,174,255,.20),
        0 0 45px rgba(255,193,7,.14),
        12px 14px 0 #070707,
        16px 18px 0 rgba(0,174,255,.16);

    /* Efek perspektif */
    transform:
        perspective(1200px)
        rotateX(.5deg);

    /* =====================================================
       SCROLLBAR FIREFOX
       ===================================================== */
    scrollbar-width:thin;
    scrollbar-color:#ffd000 #080808;
}


/* =========================================================
   LAPISAN BORDER 3D
   ========================================================= */

.lakutoto-article-3d::before{
    content:"";

    position:absolute;

    inset:7px;

    border:1px solid rgba(255,215,0,.35);

    border-radius:19px;

    pointer-events:none;

    z-index:1;
}


/* =========================================================
   GARIS NEON ATAS
   ========================================================= */

.lakutoto-article-3d::after{
    content:"";

    position:absolute;

    top:0;
    left:8%;

    width:84%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #008cff,
            #ffd000,
            #fff4a3,
            #ffd000,
            #008cff,
            transparent
        );

    box-shadow:
        0 0 8px #008cff,
        0 0 18px #ffd000;

    animation:
        lakutotoLine 4s linear infinite;

    z-index:3;
}


/* =========================================================
   ANIMASI GARIS NEON
   ========================================================= */

@keyframes lakutotoLine{

    0%{
        transform:translateX(-30%);
        opacity:.5;
    }

    50%{
        opacity:1;
    }

    100%{
        transform:translateX(30%);
        opacity:.5;
    }

}


/* =========================================================
   CUSTOM SCROLLBAR CHROME / EDGE / SAFARI
   ========================================================= */

.lakutoto-article-3d::-webkit-scrollbar{
    width:9px;
}


.lakutoto-article-3d::-webkit-scrollbar-track{
    background:#080808;

    border-radius:10px;

    box-shadow:
        inset 0 0 5px rgba(255,255,255,.05);
}


.lakutoto-article-3d::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            180deg,
            #00aaff,
            #ffd000,
            #00aaff
        );

    border-radius:10px;

    border:1px solid #111;

    box-shadow:
        0 0 8px rgba(0,174,255,.7),
        0 0 14px rgba(255,208,0,.35);
}


.lakutoto-article-3d::-webkit-scrollbar-thumb:hover{

    background:
        linear-gradient(
            180deg,
            #ffd000,
            #fff4a3,
            #ffd000
        );

}


/* =========================================================
   PARAGRAF
   ========================================================= */

.lakutoto-article-3d p{

    position:relative;

    margin:0 0 18px;

    padding:18px 20px;

    color:#e8ecf5;

    font-size:16px;

    text-align:justify;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(0,0,0,.35)
        );

    border-left:4px solid #e5b900;

    border-bottom:
        1px solid rgba(0,153,255,.35);

    border-radius:12px;

    /* 3D paragraph */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        5px 6px 0 rgba(0,0,0,.45),
        0 0 12px rgba(0,132,255,.06);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


/* =========================================================
   PARAGRAF HOVER
   ========================================================= */

.lakutoto-article-3d p:hover{

    transform:
        translateY(-3px)
        translateX(2px);

    border-left-color:#00aaff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        7px 9px 0 rgba(0,0,0,.55),
        0 0 20px rgba(0,153,255,.18);

}


/* =========================================================
   HEADING H2 3D
   ========================================================= */

.lakutoto-article-3d h2{

    position:relative;

    margin:34px 0 20px;

    padding:
        15px
        20px
        15px
        24px;

    color:#ffd21a;

    font-size:25px;

    font-weight:900;

    line-height:1.25;

    text-transform:uppercase;

    letter-spacing:.5px;

    /* =====================================================
       BACKGROUND HEADING
       ===================================================== */

    background:
        linear-gradient(
            135deg,
            #181818 0%,
            #050505 60%,
            #111 100%
        );

    /* =====================================================
       BORDER
       ===================================================== */

    border:2px solid #e5b900;

    border-left:7px solid #008cff;

    border-radius:13px;

    /* =====================================================
       TEXT 3D
       ===================================================== */

    text-shadow:
        1px 1px 0 #9b7100,
        2px 2px 0 #765600,
        3px 3px 0 #493500,
        0 0 10px rgba(255,208,0,.28);

    /* =====================================================
       BOX 3D
       ===================================================== */

    box-shadow:
        6px 7px 0 #050505,
        9px 10px 0 rgba(0,132,255,.22),
        0 0 20px rgba(255,193,7,.12);

    transform:
        translateZ(8px);

}


/* =========================================================
   KILATAN NEON PADA H2
   ========================================================= */

.lakutoto-article-3d h2::after{

    content:"";

    position:absolute;

    right:18px;

    top:50%;

    width:7px;
    height:7px;

    background:#00aaff;

    border-radius:50%;

    box-shadow:
        0 0 7px #00aaff,
        0 0 15px #00aaff,
        0 0 25px #ffd000;

    transform:
        translateY(-50%);

}


/* =========================================================
   LINK
   ========================================================= */

.lakutoto-article-3d a{

    color:#ffd21a;

    font-weight:800;

    text-decoration:none;

    text-shadow:
        1px 1px 0 #755700,
        0 0 8px rgba(255,210,0,.3);

    transition:
        color .3s ease,
        text-shadow .3s ease;

}


/* =========================================================
   LINK HOVER
   ========================================================= */

.lakutoto-article-3d a:hover{

    color:#00b7ff;

    text-shadow:
        1px 1px 0 #00557a,
        0 0 10px rgba(0,174,255,.7);

}


/* =========================================================
   STRONG / TEXT PENTING
   ========================================================= */

.lakutoto-article-3d strong{

    color:#ffd21a;

    text-shadow:
        1px 1px 0 #765600,
        0 0 8px rgba(255,210,0,.25);

}


/* =========================================================
   CORNER GOLD
   ========================================================= */

.lakutoto-article-3d .corner-gold{

    position:absolute;

    width:45px;
    height:45px;

    pointer-events:none;

    z-index:4;

}


/* =========================================================
   GOLD CORNER TOP LEFT
   ========================================================= */

.lakutoto-article-3d .corner-gold.top-left{

    top:0;
    left:0;

    border-top:
        5px solid #ffd000;

    border-left:
        5px solid #ffd000;

    border-radius:
        20px 0 0 0;

}


/* =========================================================
   GOLD CORNER BOTTOM RIGHT
   ========================================================= */

.lakutoto-article-3d .corner-gold.bottom-right{

    right:0;
    bottom:0;

    border-right:
        5px solid #ffd000;

    border-bottom:
        5px solid #ffd000;

    border-radius:
        0 0 20px 0;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:768px){

    .lakutoto-article-3d{

        width:auto;

        max-height:520px;

        margin:20px 10px;

        padding:
            24px
            15px;

        border-radius:18px;

        box-shadow:

            0 0 0 2px
            rgba(0,174,255,.15),

            0 0 20px
            rgba(0,174,255,.15),

            7px 8px 0 #050505;

    }


    /* =====================================================
       MOBILE SCROLLBAR
       ===================================================== */

    .lakutoto-article-3d::-webkit-scrollbar{

        width:7px;

    }


    /* =====================================================
       MOBILE H2
       ===================================================== */

    .lakutoto-article-3d h2{

        font-size:20px;

        padding:
            13px
            15px;

        box-shadow:

            4px 5px 0 #050505,

            6px 7px 0
            rgba(0,132,255,.2);

    }


    /* =====================================================
       MOBILE PARAGRAPH
       ===================================================== */

    .lakutoto-article-3d p{

        font-size:15px;

        padding:15px;

        text-align:left;

    }


    /* =====================================================
       MOBILE CORNER
       ===================================================== */

    .lakutoto-article-3d .corner-gold{

        width:35px;
        height:35px;

    }


}


/* =========================================================
   EXTRA SMALL MOBILE
   ========================================================= */

@media(max-width:480px){

    .lakutoto-article-3d{

        max-height:480px;

        margin:
            15px 8px;

        padding:
            20px 12px;

        border-radius:16px;

    }


    .lakutoto-article-3d h2{

        font-size:18px;

        margin:
            25px 0 16px;

    }


    .lakutoto-article-3d p{

        font-size:14px;

        line-height:1.7;

    }

}

.product-buy__note{
    position:relative;

    margin-top:2rem;
    padding:1.15rem 1.25rem 1.2rem;

    overflow:hidden;

    color:#EAF2FF;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(0,140,255,.12),
            transparent 45%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(255,215,0,.08),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #11151D 0%,
            #07090D 55%,
            #030406 100%
        );

    border:1px solid rgba(255,215,0,.30);
    border-radius:12px;

    box-shadow:
        0 0 15px rgba(0,0,0,.55),
        0 0 18px rgba(255,190,0,.08),
        inset 0 1px 0 rgba(255,255,255,.07);

    /* Supaya teks tetap tajam */
    text-shadow:none;
}


/* =========================================================
   BORDER ATAS GOLD + BLUE
   ========================================================= */

.product-buy__note::before{
    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #006EFF,
            #39C8FF,
            #FFD700,
            #FFF3A6,
            transparent
        );

    box-shadow:
        0 0 8px rgba(0,140,255,.55),
        0 0 10px rgba(255,215,0,.35);

    animation:
        lakuNoteLine 4s linear infinite;
}


@keyframes lakuNoteLine{
    0%{
        left:-100%;
    }

    100%{
        left:100%;
    }
}


/* =========================================================
   AKSEN SAMPING BIRU
   ========================================================= */

.product-buy__note::after{
    content:"";

    position:absolute;

    top:12px;
    bottom:12px;
    left:0;

    width:3px;

    border-radius:0 4px 4px 0;

    background:
        linear-gradient(
            180deg,
            #39C8FF,
            #006EFF,
            #FFD700
        );

    box-shadow:
        0 0 8px rgba(0,140,255,.55);
}


/* =========================================================
   LABEL
   ========================================================= */

.product-buy__note .label--mark{
    position:relative;

    display:inline-flex;

    align-items:center;

    margin:0 0 .65rem;

    padding:.35rem .7rem;

    color:#050505 !important;

    font-family:
        "Orbitron",
        "Arial Black",
        Arial,
        sans-serif;

    font-size:.72rem;

    font-weight:900;

    letter-spacing:.8px;

    text-transform:uppercase;

    background:
        linear-gradient(
            135deg,
            #FFF3A6 0%,
            #FFD700 35%,
            #FFB000 70%,
            #B8860B 100%
        );

    border:1px solid #FFE66D;

    border-radius:5px;

    box-shadow:
        0 0 8px rgba(255,215,0,.28),
        inset 0 1px 0 rgba(255,255,255,.55);

    text-shadow:none;
}


/* =========================================================
   TITIK AKSEN PADA LABEL
   ========================================================= */

.product-buy__note .label--mark::before{
    content:"";

    width:6px;
    height:6px;

    margin-right:7px;

    border-radius:50%;

    background:#006EFF;

    box-shadow:
        0 0 5px #006EFF,
        0 0 9px rgba(0,140,255,.7);

    animation:
        lakuNotePulse 1.5s ease-in-out infinite;
}


@keyframes lakuNotePulse{
    0%,
    100%{
        opacity:.45;
        transform:scale(.85);
    }

    50%{
        opacity:1;
        transform:scale(1.15);
    }
}


/* =========================================================
   BODY TEXT
   ========================================================= */

.product-buy__note .notice__body{
    position:relative;

    margin:0;

    color:#E5EDF8 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:.92rem;

    line-height:1.75;

    font-weight:400;

    letter-spacing:.01em;

    /* Jangan gunakan glow berlebihan pada teks */
    text-shadow:
        0 1px 2px rgba(0,0,0,.8);
}


/* =========================================================
   LEAD TEXT
   ========================================================= */

.product-buy__note .notice__body--lead{
    color:#F0F5FC !important;
}


/* Highlight kata tertentu jika ada <strong> */
.product-buy__note strong{
    color:#FFD700;

    font-weight:800;

    text-shadow:
        0 0 5px rgba(255,215,0,.25);
}


/* =========================================================
   HOVER
   ========================================================= */

.product-buy__note:hover{
    border-color:rgba(255,215,0,.48);

    box-shadow:
        0 0 18px rgba(0,100,255,.12),
        0 0 22px rgba(255,190,0,.10),
        inset 0 1px 0 rgba(255,255,255,.08);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

    .product-buy__note{
        padding:
            1rem
            1rem
            1.05rem
            1.1rem;

        border-radius:10px;
    }

    .product-buy__note .label--mark{
        font-size:.66rem;

        padding:.32rem .58rem;
    }

    .product-buy__note .notice__body{
        font-size:.86rem;
        line-height:1.7;
    }
}

.product-buy__add{
    position:relative !important;
    isolation:isolate;

    display:flex !important;
    align-items:center;
    justify-content:center;

    width:100%;
    min-height:54px;

    padding:3px !important;

    overflow:hidden;

    border:0 !important;
    border-radius:12px !important;

    background:#05070b !important;

    color:#fff !important;

    cursor:pointer;

    box-shadow:
        0 0 8px rgba(255,215,0,.35),
        0 0 20px rgba(0,140,255,.18),
        inset 0 0 15px rgba(255,215,0,.08);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   BORDER ANIMASI GOLD + BLUE
   ========================================================= */

.product-buy__add::before{
    content:"";

    position:absolute;
    inset:-150%;

    z-index:-2;

    background:
        conic-gradient(
            from 0deg,

            transparent 0deg,
            transparent 25deg,

            #006eff 55deg,
            #39c8ff 75deg,

            transparent 105deg,

            transparent 155deg,

            #b8860b 185deg,
            #ffd700 210deg,
            #fff3a6 225deg,

            transparent 255deg,

            transparent 320deg,

            #006eff 345deg,
            #39c8ff 360deg
        );

    animation:
        lakuBorderSpin 3s linear infinite;
}


/* =========================================================
   LAPISAN DALAM
   ========================================================= */

.product-buy__add::after{
    content:"";

    position:absolute;
    inset:3px;

    z-index:-1;

    border-radius:9px;

    background:
        linear-gradient(
            145deg,
            #111722 0%,
            #05070b 42%,
            #0a0d14 70%,
            #11100a 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(255,215,0,.12);
}


/* =========================================================
   ANIMASI BORDER
   ========================================================= */

@keyframes lakuBorderSpin{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }
}


/* =========================================================
   TEXT
   ========================================================= */

.product-buy__add .button__label{
    position:relative;
    z-index:2;

    display:inline-block;

    padding:10px 24px;

    font-family:
        "Orbitron",
        "Arial Black",
        Arial,
        sans-serif;

    font-size:15px;

    font-weight:900;

    letter-spacing:1.5px;

    color:#fff;

    text-transform:uppercase;

    background:
        linear-gradient(
            180deg,
            #fff7b0 0%,
            #ffd700 35%,
            #ffb000 65%,
            #d18b00 100%
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:
        0 1px 0 rgba(0,0,0,.8),
        0 0 6px rgba(255,215,0,.45);
}


/* =========================================================
   SHINE EFFECT
   ========================================================= */

.product-buy__add .button__label::after{
    content:"";

    position:absolute;

    top:-20%;
    left:-80%;

    width:35%;
    height:140%;

    transform:skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.75),
            transparent
        );

    animation:
        lakuButtonShine 3.5s ease-in-out infinite;
}


@keyframes lakuButtonShine{

    0%{
        left:-80%;
    }

    45%,
    100%{
        left:140%;
    }
}


/* =========================================================
   HOVER
   ========================================================= */

.product-buy__add:hover{

    transform:
        translateY(-2px)
        scale(1.01);

    box-shadow:
        0 0 10px rgba(255,215,0,.65),
        0 0 25px rgba(255,190,0,.35),
        0 0 40px rgba(0,110,255,.25),
        inset 0 0 18px rgba(255,215,0,.10);
}


/* =========================================================
   ACTIVE / CLICK
   ========================================================= */

.product-buy__add:active{
    transform:
        translateY(1px)
        scale(.98);

    box-shadow:
        0 0 8px rgba(255,215,0,.35),
        inset 0 0 20px rgba(0,140,255,.15);
}


/* =========================================================
   LINK DI DALAM BUTTON
   ========================================================= */

.product-buy__add a{
    position:relative;
    z-index:3;

    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    color:inherit;

    text-decoration:none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

    .product-buy__add{
        min-height:52px;
        border-radius:11px !important;
    }

    .product-buy__add .button__label{
        font-size:13px;
        letter-spacing:1.2px;
        padding:9px 18px;
    }
}