@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

.menu-link .title {
    font-family: "Poppins", sans-serif;
    letter-spacing: 0.3px;
    font-size: 13px;
    font-weight: 600;
}

.icon-3d-wrapper {
    width: 65px;
    height: 65px;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6px 10px rgba(0, 0, 0, 0.2),
        inset 0 3px 5px rgba(255, 255, 255, 0.5),
        inset 0 -3px 5px rgba(0, 0, 0, 0.2);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.icon-3d-wrapper:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 15px rgba(0, 0, 0, 0.25),
        inset 0 3px 5px rgba(255, 255, 255, 0.5),
        inset 0 -3px 5px rgba(0, 0, 0, 0.2);
}

.icon-3d-wrapper i {
    font-size: 1.6rem;
    color: white;
    text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
}

.bg-3d-red {
    background: linear-gradient(135deg, #ff4e50, #cb2d3e);
}
.bg-3d-blue {
    background: linear-gradient(135deg, #36d1dc, #5b86e5);
}
.bg-3d-gray {
    background: linear-gradient(135deg, #bdc3c7, #7f8c8d);
}
.bg-3d-gold {
    background: linear-gradient(135deg, #fad961, #f76b1c);
}
.bg-3d-envelope {
    background: linear-gradient(135deg, #69e43c, #3bc10b);
}

.menu-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.menu-link:hover .title {
    color: #0d6efd;
}

.cat-brand-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    padding: 10px 0;
}

.cat-brand-item:hover {
    background: #f8f9fa;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.cat-brand-img-box {
    width: 100px;
    height: 100px;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-brand-img-box .pr_lazy_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.cat-brand-title {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab_se_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.tab_cat_title li a {
    text-decoration: none;
    color: #878787;
    font-weight: 600;
    padding: 5px 15px;
    border-radius: 20px;
    transition: 0.3s;
}

.tab_cat_title li a.tt_active {
    background: #203d5c;
    color: #fff;
}

.custom-slider-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.custom-slider-height {
    height: 180px;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .custom-slider-height {
        height: 350px;
    }
}

.custom-slider-wrapper .bg_rp_norepeat {
    border-radius: 16px;
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: default !important;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: default !important;
}

.onsale {
    margin-top: -5px !important;
    margin-right: -5px !important;
}

.labeldiscount {
    padding: 7px !important;
}

/* ====================================================
   CSS CUSTOM UNTUK HALAMAN DETAIL PRODUK
   ==================================================== */

/* 1. Tipografi Judul & Harga */
h1.product_title.entry-title {
    font-family: "Poppins", sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #203d5c !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
}

.price_range {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #11998e !important;
    margin-bottom: 25px !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

.price_range del {
    font-size: 16px !important;
    color: #adb5bd !important;
    font-weight: 500 !important;
}

.price_range ins {
    text-decoration: none !important;
}

.variations.style__circle {
    background: #f8f9fa;
    border: 1px solid #eaeaea;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 25px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.swatch {
    margin-bottom: 0px !important;
}

.swatch__title {
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    color: #6c757d !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
    display: flex;
    align-items: center;
}

.swatch__title:last-child {
    margin-bottom: 0 !important;
}

.nt_name_current {
    font-weight: 700 !important;
    color: #2b2b2b !important;
    font-size: 15px !important;
    margin-left: 8px;
}

/* Tombol Add To Cart (Membesar & Menonjol) */
.single_add_to_cart_button {
    background: #0d6efd !important;
    color: #fff !important;
    height: 40px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-grow: 1 !important;
    min-width: 100px !important;
}

.nt_add_w.ts__03 {
    margin-left: 15px !important;
}

.single_add_to_cart_button:hover {
    background: #0b5ed7 !important;
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* Tombol Wishlist & Reminder (Kotak Ikon) */
.nt_add_w,
.nt_add_r {
    position: static !important; /* Menghapus posisi absolute bawaan */
    margin: 0 !important;
}

.wishlistadd i,
.reminderadd i {
    margin: 0 !important;
}

.pr_trust_seal {
    margin-top: 30px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px dashed #eaeaea !important;
}

.product_meta {
    font-family: "Poppins", sans-serif !important;
    font-size: 14px !important;
    color: #6c757d !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
    margin-bottom: 25px !important;
}

.product_meta span.cb {
    color: #203d5c !important;
    font-weight: 600 !important;
    min-width: 90px !important;
    display: inline-block !important;
}

.product_meta a.cg {
    color: #0d6efd !important;
    text-decoration: none !important;
    transition: 0.3s !important;
}

.product_meta a.cg:hover {
    color: #0b5ed7 !important;
    text-decoration: underline !important;
}

.social-share .at-share-btn-elements {
    display: flex !important;
    gap: 12px !important;
}

.kalles-social-media__btn {
    border-radius: 50% !important;
    border: 1px solid #eaeaea !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    background: #fff !important;
}

.kalles-social-media__btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08) !important;
    border-color: #d0d0d0 !important;
}

.detail_link {
    font-family: "Poppins", sans-serif !important;
    color: #203d5c !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    margin-top: 15px !important;
    padding-bottom: 2px !important;
    border-bottom: 1px solid transparent !important;
}

.detail_link i.facl-right {
    font-size: 12px !important;
    margin-left: 8px !important;
    transition: transform 0.3s ease !important;
}

.detail_link:hover {
    color: #0d6efd !important;
    border-bottom: 1px solid #0d6efd !important;
}

.detail_link:hover i.facl-right {
    transform: translateX(5px) !important;
}

/*  ADMIN */
input[type="submit"],
a.button {
    border: 1px solid #0d6efd !important;
    color: #0d6efd !important;
    background: transparent !important;
}

input[type="submit"],
a.button:hover {
    background: #0b5ed7 !important;
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.25) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

td .la-pencil-alt,
td .las.la-copy,
td .las.la-file {
    color: #0d6efd !important;
    transition: all 0.3s ease !important;
    padding: 5px !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #0d6efd !important;
    margin: 3px !important;
}

td .la-pencil-alt:hover,
td .las.la-copy:hover,
td .las.la-file:hover {
    color: #0d6efd !important;
    background-color: #e3f2fd !important;
    transform: scale(1.1) !important;
    box-shadow: 0 2px 5px rgba(13, 110, 253, 0.15) !important;
}

/* =========================================
   MODERN 3D NAVBAR OVERRIDE
   ========================================= */
#ntheader .ntheader_wrapper .header__mid {
    background: linear-gradient(
        135deg,
        rgba(146, 191, 219, 1) 0%,
        rgba(176, 216, 243, 0.98) 25%,
        rgba(196, 229, 248, 0.96) 50%,
        rgba(156, 201, 229, 0.94) 75%,
        rgba(136, 181, 209, 1) 100%
    ) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.6);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.15),
        0 4px 10px rgba(32, 61, 92, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3);

    overflow: visible;
}

/* Glass Highlight - Enhanced 3D */
#ntheader .ntheader_wrapper .header__mid::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60%;

    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0)
    );

    pointer-events: none;
}

/* Additional 3D Shadow Bottom */
#ntheader .ntheader_wrapper .header__mid::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 8px;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0)
    );

    pointer-events: none;
}

#ntheader.sticky_prepared.live_stuck .ntheader_wrapper {
    background: linear-gradient(
        135deg,
        rgba(146, 191, 219, 1) 0%,
        rgba(176, 216, 243, 0.98) 25%,
        rgba(196, 229, 248, 0.96) 50%,
        rgba(156, 201, 229, 0.94) 75%,
        rgba(136, 181, 209, 1) 100%
    ) !important;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.15),
        0 5px 15px rgba(32, 61, 92, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    border-radius: 0 0 18px 18px;
}

/* Menu Item */
.nt_menu > li > a {
    position: relative;
    transition: all 0.3s ease;
}

.nt_menu > li:hover > a::after {
    width: 80%;
}

/* Hover Lift */
.nt_menu > li:hover > a {
    transform: translateY(-2px);
}

/* Dropdown - Clean, no 3D glass effect */
.nt_menu > li .sub-menu {
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.98),
        rgba(245, 250, 253, 0.96)
    ) !important;

    border-radius: 18px;

    border: 1px solid rgba(156, 201, 229, 0.25);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.12),
        0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Search Box - Enhanced 3D Effect */
.searchbox__main input,
#search_bar_mobile input {
    background: rgba(255, 255, 255, 0.95);

    border: none !important;

    border-radius: 12px !important;

    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(32, 61, 92, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.8);

    transition: 0.3s;
}

/* Search Input Active/Focus - No outline, enhanced 3D */
.searchbox__main input:focus,
#search_bar_mobile input:focus {
    outline: none !important;
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.04),
        0 6px 16px rgba(32, 61, 92, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

/* Search Button - 3D Effect */
.searchbox__main button,
#search_bar_mobile button {
    border-radius: 10px !important;

    background: linear-gradient(135deg, #7eb6d4, #5fa9d8);

    box-shadow:
        0 5px 12px rgba(21, 127, 204, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);

    transition: 0.3s;
}

.searchbox__main button:hover,
#search_bar_mobile button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(21, 127, 204, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Right Icons */
.nt_action > a,
.nt_action > div > a {
    transition: all 0.3s ease;
}

.nt_action > a:hover,
.nt_action > div > a:hover {
    transform: translateY(-2px) scale(1.08);
}

/* Cart & Notification Badge */
.tcount {
    background: linear-gradient(135deg, #7eb6d4, #4a90b8) !important;

    box-shadow: 0 4px 12px rgba(74, 144, 184, 0.4);
}

/* Logo - No floating effect */
.branding img {
    transition: all 0.35s ease;
}

@media (min-width: 767px) {
    .type_prs_countd_deal .medizin_laypout {
        padding: 0px 30px 10px !important;
    }
}

/* Recomendation */
.flex-home-item-donal {
    flex: 0 0 calc((100% - (5 * 10px)) / 6) !important;
    max-width: calc((100% - (5 * 10px)) / 6) !important;
}

@media only screen and (max-width: 600px) {
    .flex-home-item-donal {
        flex: 1 1 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }
}

@media only screen and (min-width: 600px) {
    .flex-home-item-donal {
        flex: 1 1 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }
}

@media only screen and (min-width: 768px) {
    .flex-home-item-donal {
        flex: 1 1 calc(25% - 10px) !important;
        max-width: calc(25% - 10px) !important;
    }
}

@media only screen and (min-width: 992px) {
    .flex-home-item-donal {
        flex: 0 0 calc((100% - (5 * 10px)) / 6) !important;
        max-width: calc((100% - (5 * 10px)) / 6) !important;
    }
}

@media only screen and (min-width: 1200px) {
    .flex-home-item-donal {
        flex: 0 0 calc((100% - (5 * 10px)) / 6) !important;
        max-width: calc((100% - (5 * 10px)) / 6) !important;
    }
}