/* ================================================================
   TRAMPHARMA — Professional UI/UX Design System
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ─── CSS Design Tokens ─────────────────────────────────────── */
:root {
    --tp-navy:       #0d1b3e;
    --tp-navy-mid:   #1a3c6e;
    --tp-cyan:       #00b4d8;
    --tp-cyan-dark:  #0096c7;
    --tp-yellow:     #fcbe00;
    --tp-orange:     #f77f00;
    --tp-green:      #06d6a0;
    --tp-danger:     #ef233c;
    --tp-white:      #ffffff;
    --tp-light:      #f0f6ff;
    --tp-light-2:    #f8faff;
    --tp-gray:       #64748b;
    --tp-gray-light: #94a3b8;
    --tp-border:     #e2e8f0;
    --tp-text:       #1e293b;

    --grad-header:   linear-gradient(135deg, #0d1b3e 0%, #1a3c6e 100%);
    --grad-cyan:     linear-gradient(135deg, #00b4d8 0%, #0077b6 100%);
    --grad-yellow:   linear-gradient(135deg, #fcbe00 0%, #f77f00 100%);
    --grad-dark:     linear-gradient(180deg, #0a1628 0%, #071020 100%);
    --grad-light:    linear-gradient(135deg, #f8faff 0%, #eef4ff 100%);

    --shadow-sm:     0 2px 12px rgba(13,27,62,0.07);
    --shadow-md:     0 8px 30px rgba(13,27,62,0.12);
    --shadow-lg:     0 20px 60px rgba(13,27,62,0.16);
    --shadow-cyan:   0 8px 25px rgba(0,180,216,0.35);
    --shadow-yellow: 0 8px 25px rgba(247,127,0,0.3);

    --radius-sm:     6px;
    --radius:        12px;
    --radius-lg:     18px;
    --radius-pill:   50px;

    --ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --transition:    all 0.3s var(--ease);
}

/* ─── Globals ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--tp-text) !important;
    background: var(--tp-light-2) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { transition: var(--transition) !important; text-decoration: none !important; }
img { transition: transform 0.5s var(--ease); }

::selection { background: rgba(0,180,216,0.18); color: var(--tp-navy); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--tp-cyan); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tp-cyan-dark); }

a:focus-visible,
button:focus-visible,
input:focus-visible { outline: 2px solid var(--tp-cyan) !important; outline-offset: 2px !important; }


/* ================================================================
   HEADER — Top Bar
   ================================================================ */

.header {
    border-color: transparent !important;
}

.header-top {
    background: linear-gradient(90deg, #08132a 0%, #142244 50%, #08132a 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    padding: 9px 0 !important;
    position: relative;
    overflow: hidden;
}

.header-top::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0,180,216,0.06) 50%, transparent 100%);
    animation: tp-shimmer 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes tp-shimmer {
    0%, 100% { opacity: 0; }
    50%       { opacity: 1; }
}

.header-inner-start .s-name span a,
.header-inner-start .support p a {
    color: rgba(255,255,255,0.78) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.header-inner-start .s-name span a i,
.header-inner-start .support p a i {
    color: var(--tp-cyan);
    font-size: 12px;
}

.header-inner-start .s-name span a:hover,
.header-inner-start .support p a:hover { color: var(--tp-cyan) !important; }

.ovic-menu-wrapper ul li a {
    font-size: 12.5px !important;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ovic-menu-wrapper ul li a i { color: var(--tp-cyan); font-size: 12px; }
.ovic-menu-wrapper ul li a:hover { color: var(--tp-cyan) !important; }


/* ─── Header Middle ──────────────────────────────────────────── */

.header-mid {
    background: linear-gradient(135deg, #0f2146 0%, #1c3d72 100%) !important;
}

.heade-mid-inner {
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

/* Logo */
.logo .logo-image img {
    max-width: 200px !important;
    max-height: 58px;
    width: auto;
    filter: brightness(1.1);
    transition: var(--transition) !important;
}

.logo .logo-image:hover img {
    filter: brightness(1.25) drop-shadow(0 0 12px rgba(0,180,216,0.45));
    transform: scale(1.04);
}

/* Search */
.header__search { margin-left: -5px !important; }

.header__search-box .search-input,
.header__search-box .search-input-2 {
    background: rgba(255,255,255,0.97) !important;
    border: 2px solid rgba(255,255,255,0.12) !important;
    border-radius: var(--radius-pill) !important;
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 115px 0 175px !important;
    font-size: 14px !important;
    font-family: 'Rubik', sans-serif !important;
    color: var(--tp-text) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18), inset 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: var(--transition) !important;
}

.header__search-box .search-input::placeholder,
.header__search-box .search-input-2::placeholder {
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.header__search-box .search-input:focus,
.header__search-box .search-input-2:focus {
    border-color: var(--tp-cyan) !important;
    box-shadow: 0 0 0 4px rgba(0,180,216,0.14), 0 4px 24px rgba(0,0,0,0.1) !important;
    outline: none !important;
}

.header__search-box .button,
.header__search-box .button-2,
.header__search-box .button-3 {
    background: var(--grad-cyan) !important;
    color: white !important;
    border: none !important;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
    height: 48px !important;
    line-height: 48px !important;
    top: 0 !important;
    right: 0 !important;
    padding: 0 22px !important;
    font-size: 16px !important;
    font-weight: 500;
    transition: var(--transition) !important;
}

.header__search-box .button:hover,
.header__search-box .button-2:hover,
.header__search-box .button-3:hover {
    background: linear-gradient(135deg, #0096c7 0%, #005f91 100%) !important;
    box-shadow: var(--shadow-cyan) !important;
}

/* Header Actions */
.header-action {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 20px !important;
}

.header-action .icon-link,
.header-action .icon-link-2 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 14px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    transition: var(--transition) !important;
}

.header-action .icon-link:hover,
.header-action .icon-link-2:hover {
    background: rgba(0,180,216,0.14) !important;
    border-color: rgba(0,180,216,0.3) !important;
    transform: translateY(-2px);
}

.header-action .icon-link i { font-size: 22px !important; color: rgba(255,255,255,0.88) !important; margin-right: 0 !important; }
.header-action span.text { font-size: 13px !important; color: rgba(255,255,255,0.88) !important; }
.header-action span.sub { font-size: 11.5px !important; color: rgba(255,255,255,0.5) !important; opacity: 1 !important; }

/* WhatsApp CTA */
.block-userlink .icon-link {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
    border-color: transparent !important;
}
.block-userlink .icon-link:hover {
    background: linear-gradient(135deg, #20c45a 0%, #0f7a6e 100%) !important;
    box-shadow: 0 6px 20px rgba(37,211,102,0.38) !important;
}
.block-userlink .icon-link i,
.block-userlink .icon-link span,
.block-userlink .icon-link .sub { color: white !important; }

/* Email CTA */
.block-wishlist .icon-link {
    background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%) !important;
    border-color: transparent !important;
}
.block-wishlist .icon-link:hover {
    background: linear-gradient(135deg, #3a50d4 0%, #2d0896 100%) !important;
    box-shadow: 0 6px 20px rgba(67,97,238,0.38) !important;
}
.block-wishlist .icon-link i,
.block-wishlist .icon-link span,
.block-wishlist .icon-link .sub { color: white !important; }

/* Cart badge */
.header-action .count,
.header-action .count-2 {
    background: var(--tp-yellow) !important;
    color: var(--tp-navy) !important;
    font-weight: 800 !important;
    min-width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    font-size: 11px !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(252,190,0,0.5) !important;
}

/* Cart hover text color fix */
.header-action .icon-link-2:hover .text,
.header-action .icon-link-2:hover .sub,
.header-action .icon-link-2:hover i { color: white !important; }


/* ─── Header Bottom / Nav ──────────────────────────────────── */

.header__bottom {
    background: linear-gradient(90deg, #09162e 0%, #142042 60%, #09162e 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}

/* Category toggle button */
.cat-toggle-btn-1 {
    background: var(--grad-cyan) !important;
    color: white !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.6px !important;
    padding: 14px 20px !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    width: 100% !important;
    text-align: left !important;
    transition: var(--transition) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.cat-toggle-btn-1 i { font-size: 18px !important; margin-right: 0 !important; }
.cat-toggle-btn-1:hover { background: linear-gradient(135deg, #0096c7 0%, #0066a0 100%) !important; box-shadow: 0 4px 16px rgba(0,180,216,0.3) !important; }

/* Category dropdown menu */
.cat__menu ul { background: white !important; border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important; overflow: hidden; box-shadow: var(--shadow-md) !important; }

.cat__menu ul li a {
    color: var(--tp-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: var(--transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.cat__menu ul li:hover > a {
    color: var(--tp-cyan) !important;
    background: #f0f9ff !important;
    padding-left: 22px !important;
}

/* Main navigation */
.main-menu ul li {
    margin-right: 22px !important;
}

.main-menu ul li a {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    color: rgba(255,255,255,0.84) !important;
    padding: 15px 0 !important;
    text-transform: uppercase !important;
    position: relative !important;
    transition: var(--transition) !important;
}

.main-menu ul li a::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2.5px;
    background: var(--grad-cyan);
    border-radius: 2px;
    transition: width 0.35s var(--ease);
}

.main-menu ul li:hover > a::after,
.main-menu ul li a.active::after { width: 100%; }

.main-menu ul li:hover > a,
.main-menu ul li a.active { color: var(--tp-cyan) !important; }

/* Dropdown menus */
.main-menu ul li ul.submenu {
    border-radius: var(--radius) !important;
    border: none !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 12px 0 !important;
}

.main-menu ul li ul.submenu li a {
    padding: 8px 22px !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 500 !important;
    color: var(--tp-gray) !important;
}

.main-menu ul li ul.submenu li:hover > a {
    color: var(--tp-cyan) !important;
    padding-left: 28px !important;
    background: #f0f9ff !important;
}

/* Mega menu */
.mega-menu {
    border-radius: 0 0 var(--radius) var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    border: none !important;
}

.mega-menu .offer {
    background: linear-gradient(90deg, var(--tp-danger), #c9184a) !important;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Free shipping text */
.shopeing-text p {
    background: var(--grad-yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
}


/* ================================================================
   SECTIONS — Common Styles
   ================================================================ */

.light-bg-s { background: var(--grad-light) !important; }

/* Section headings */
.section__title.section__title-2 .st-titile,
.st-titile-d,
.st-titile-d-2 {
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    color: var(--tp-navy) !important;
    letter-spacing: -0.3px;
    position: relative;
    padding-bottom: 10px;
}

.section__title.section__title-2 .st-titile::after,
.st-titile-d::after,
.st-titile-d-2::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 44px; height: 3px;
    background: linear-gradient(90deg, var(--tp-cyan), var(--tp-yellow));
    border-radius: 3px;
    transition: width 0.4s var(--ease);
}

.section__head:hover .st-titile::after,
.section__head:hover .st-titile-d::after { width: 72px; }

/* "See all" buttons */
.button-wrap a,
.button-wrap-2 a {
    color: var(--tp-cyan) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
    padding: 8px 18px !important;
    border: 1.5px solid rgba(0,180,216,0.28) !important;
    border-radius: var(--radius-pill) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: var(--transition) !important;
}

.button-wrap a:hover,
.button-wrap-2 a:hover {
    background: var(--tp-cyan) !important;
    color: white !important;
    border-color: var(--tp-cyan) !important;
    box-shadow: var(--shadow-cyan) !important;
    transform: translateY(-2px) !important;
}


/* ================================================================
   SLIDER AREA
   ================================================================ */

.slider-area.light-bg-s { background: var(--grad-light) !important; }

.slider-title {
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    color: var(--tp-navy) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.6px;
}

.slider_text {
    color: #4a5568 !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
}

/* Shop Now CTA */
.st-btn-border {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--grad-cyan) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 13px 30px !important;
    border-radius: var(--radius-pill) !important;
    border: none !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 8px 24px rgba(0,119,182,0.38) !important;
    transition: var(--transition) !important;
}

.st-btn-border:hover {
    background: linear-gradient(135deg, #0096c7 0%, #005f91 100%) !important;
    box-shadow: 0 14px 36px rgba(0,119,182,0.5) !important;
    transform: translateY(-3px) scale(1.02) !important;
    color: white !important;
}

/* Swiper pagination */
.swiper-pagination-bullet {
    background: var(--tp-cyan) !important;
    opacity: 0.35 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

.swiper-pagination-bullet-active {
    opacity: 1 !important;
    width: 26px !important;
    background: var(--tp-cyan) !important;
}


/* ================================================================
   BANNER ITEMS
   ================================================================ */

.banner__item {
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
    transition: var(--transition) !important;
}

.banner__item:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-5px) !important;
}

.banner__img { overflow: hidden; border-radius: var(--radius); }
.banner__img img {
    border-radius: var(--radius) !important;
    transition: transform 0.55s var(--ease) !important;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.banner__item:hover .banner__img img { transform: scale(1.08) !important; }

.banner__content,
.banner__content-2 {
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    background: linear-gradient(to top, rgba(9,22,46,0.88) 0%, rgba(9,22,46,0.3) 70%, transparent 100%) !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
    padding: 18px 16px 14px !important;
}

.banner__content h6 a,
.banner__content-2 h6 a {
    color: white !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.3;
}

.banner__content h6 a:hover,
.banner__content-2 h6 a:hover { color: var(--tp-yellow) !important; }

.banner__content p,
.banner__content-2 p {
    color: rgba(255,255,255,0.72) !important;
    font-size: 12px !important;
    margin: 2px 0 0 !important;
    line-height: 1.4;
}


/* ================================================================
   PRODUCT CARDS
   ================================================================ */

.product__item,
.product__item-2 {
    background: var(--tp-white) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid #eef2f8 !important;
    overflow: hidden;
    transition: var(--transition) !important;
}

.product__item:hover,
.product__item-2:hover {
    box-shadow: 0 18px 48px rgba(13,27,62,0.14) !important;
    transform: translateY(-6px) !important;
    border-color: rgba(0,180,216,0.2) !important;
}

/* Thumbnail */
.product__thumb {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f0f6ff 0%, #e8f0f8 100%);
    border-radius: var(--radius) var(--radius) 0 0;
}

.product-image { overflow: hidden; }
.product-image a img {
    padding: 14px !important;
    transition: transform 0.55s var(--ease) !important;
    display: block;
    width: 100%;
    height: 185px;
    object-fit: contain;
}

.product__item:hover .product-image img { transform: scale(1.09) !important; }

/* Discount badge */
.product__offer {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    z-index: 2;
}

.product__offer .discount {
    display: inline-block !important;
    background: linear-gradient(135deg, #ef233c, #c9184a) !important;
    color: white !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 0 0 var(--radius-sm) 0 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 3px 8px rgba(239,35,60,0.35);
}

/* Quick-action overlay */
.product-action,
.product-action-2 {
    position: absolute !important;
    bottom: -52px !important;
    left: 0 !important; right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px !important;
    background: linear-gradient(to top, rgba(13,27,62,0.18) 0%, transparent 100%);
    transition: bottom 0.35s var(--ease) !important;
    z-index: 3;
}

.product__thumb:hover .product-action,
.product__thumb:hover .product-action-2 { bottom: 0 !important; }

.icon-box,
.icon-box-1 {
    background: white !important;
    color: var(--tp-navy) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.13) !important;
    transition: var(--transition) !important;
}

.icon-box:hover,
.icon-box-1:hover {
    background: var(--tp-cyan) !important;
    color: white !important;
    transform: scale(1.18) !important;
    box-shadow: var(--shadow-cyan) !important;
}

/* Product info */
.product__content,
.product__content-2 { padding: 14px 15px 10px !important; }

.product__content h6 a,
.product__content-2 h6 a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--tp-text) !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product__content h6 a:hover,
.product__content-2 h6 a:hover { color: var(--tp-cyan) !important; }

/* Stars */
.rating ul { display: flex; gap: 2px; }
.rating ul li a i { color: var(--tp-yellow) !important; font-size: 11px; }
.rating span { font-size: 11px !important; color: var(--tp-gray-light) !important; font-weight: 500; }

/* Price */
.price span {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--tp-navy) !important;
    letter-spacing: -0.3px;
}

/* "Get Price" button */
.product__add-cart { padding: 0 12px 12px !important; }

.cart-btn-3 {
    background: var(--grad-cyan) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    height: 40px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 14px rgba(0,119,182,0.2) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
}

.cart-btn-3:hover {
    background: linear-gradient(135deg, #0096c7 0%, #005f91 100%) !important;
    box-shadow: 0 8px 22px rgba(0,119,182,0.38) !important;
    transform: translateY(-2px) !important;
}


/* ================================================================
   CATEGORY CARDS
   ================================================================ */

.category-container { background: transparent !important; padding: 5px 0 20px !important; }

.category-box {
    background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1.5px solid #e8f0fb !important;
    padding: 22px 18px !important;
    margin-bottom: 20px !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition) !important;
    cursor: pointer;
}

.category-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tp-cyan), var(--tp-yellow));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
}

.category-box::after {
    content: '→';
    position: absolute;
    bottom: 16px; right: 18px;
    font-size: 18px;
    color: var(--tp-cyan);
    opacity: 0;
    transform: translateX(-8px);
    transition: var(--transition);
}

.category-box:hover::before { transform: scaleX(1); }
.category-box:hover::after { opacity: 1; transform: translateX(0); }

.category-box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 42px rgba(13,27,62,0.13) !important;
    border-color: rgba(0,180,216,0.25) !important;
}

.category-content h6 { font-size: 14.5px !important; font-weight: 600 !important; margin: 0 !important; }
.category-content h6 a { color: var(--tp-text) !important; }
.category-content h6 a:hover { color: var(--tp-cyan) !important; }


/* ================================================================
   DEAL PRODUCTS (Top Deals of the Day)
   ================================================================ */

.single-features-item,
.single-features-item-d,
.single-features-item-d-2 {
    background: var(--tp-white) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid #eef2f8 !important;
    overflow: hidden;
    transition: var(--transition) !important;
}

.single-features-item:hover,
.single-features-item-d:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-4px) !important;
    border-color: rgba(0,180,216,0.2) !important;
}

.features-thum {
    background: linear-gradient(135deg, #f0f6ff 0%, #e4eef8 100%);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.features-product-image img {
    padding: 16px !important;
    transition: transform 0.55s var(--ease) !important;
    width: 100%;
    height: 220px;
    object-fit: contain;
}

.single-features-item:hover .features-product-image img { transform: scale(1.07) !important; }

.product__content-d h6 a,
.product__content-d-2 h6 a {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--tp-navy) !important;
    line-height: 1.3;
}

.product__content-d h6 a:hover,
.product__content-d-2 h6 a:hover { color: var(--tp-cyan) !important; }

.features-des ul li {
    color: var(--tp-gray) !important;
    font-size: 13.5px !important;
    line-height: 1.6;
}

/* Progress bar */
.progress {
    height: 6px !important;
    border-radius: 3px !important;
    background: #e9ecf2 !important;
    overflow: visible !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--tp-cyan), var(--tp-cyan-dark)) !important;
    border-radius: 3px !important;
    position: relative;
    overflow: hidden;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    animation: tp-bar-shimmer 2.2s ease infinite;
}

@keyframes tp-bar-shimmer {
    0%   { left: -80%; }
    100% { left: 150%; }
}

.progress-rate span { font-size: 12px !important; color: var(--tp-gray) !important; font-weight: 500; }

/* Deal CTA */
.cart-btn-4 {
    display: block !important;
    background: var(--grad-yellow) !important;
    color: var(--tp-navy) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-align: center !important;
    padding: 13px 20px !important;
    border-radius: var(--radius-sm) !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    box-shadow: var(--shadow-yellow) !important;
    transition: var(--transition) !important;
}

.cart-btn-4:hover {
    background: linear-gradient(135deg, #f77f00 0%, #e05b00 100%) !important;
    color: white !important;
    box-shadow: 0 12px 32px rgba(247,127,0,0.5) !important;
    transform: translateY(-3px) !important;
}


/* ================================================================
   COUNTDOWN TIMER
   ================================================================ */

.offer-title {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--tp-gray) !important;
    letter-spacing: 0.4px;
    margin-right: 12px;
}

.countdown-inner { overflow: visible !important; background: transparent !important; }
.countdown-inner ul {
    display: flex !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
}

.countdown-inner ul li {
    background: var(--grad-header) !important;
    color: white !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 10px !important;
    min-width: 52px;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(13,27,62,0.22);
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.countdown-inner ul li span {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--tp-yellow) !important;
    display: block !important;
    line-height: 1.15 !important;
    font-variant-numeric: tabular-nums;
}


/* ================================================================
   MARQUEE / MOVING TEXT
   ================================================================ */

.moveing-text-area {
    background: linear-gradient(90deg, var(--tp-navy) 0%, #1c4080 50%, var(--tp-navy) 100%) !important;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
}

.ovic-running {
    background: transparent !important;
    padding: 12px 0 !important;
    display: flex;
    align-items: center;
}

.ovic-running .item {
    color: rgba(255,255,255,0.9) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ovic-running .item::before {
    content: '✦';
    color: var(--tp-yellow);
    font-size: 9px;
    margin-right: 4px;
}


/* ================================================================
   FEATURES BAR
   ================================================================ */

.features-2__area {
    background: linear-gradient(135deg, #0d1b3e 0%, #142a5a 100%) !important;
    position: relative;
    overflow: hidden;
}

.features-2__area::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(0,180,216,0.07) 0%, transparent 65%);
    pointer-events: none;
}

.features-2__lists { position: relative; z-index: 1; }

.features-2__item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 22px 20px !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    transition: var(--transition) !important;
}

.features-2__item:hover { background: rgba(0,180,216,0.07) !important; }

.features-2__icon { margin-right: 0 !important; }
.features-2__icon i {
    font-size: 30px !important;
    color: var(--tp-cyan) !important;
    transition: var(--transition) !important;
    display: block;
}

.features-2__item:hover .features-2__icon i {
    color: var(--tp-yellow) !important;
    transform: scale(1.18) !important;
}

.features-2__content h6 {
    color: white !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
}

.features-2__content p {
    color: rgba(255,255,255,0.48) !important;
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1.4;
}


/* ================================================================
   BRAND SLIDER
   ================================================================ */

.brand-slider,
.brand-slider-2 { background: transparent !important; }

.brand-item a img {
    filter: grayscale(0.5) opacity(0.65) !important;
    transition: var(--transition) !important;
}

.brand-item:hover a img {
    filter: grayscale(0) opacity(1) !important;
    transform: scale(1.06) !important;
}


/* ================================================================
   FOOTER
   ================================================================ */

footer,
.fotter-area { background: var(--grad-dark) !important; }

.footer__top {
    position: relative;
    border-top: 1px solid transparent;
    background-image: linear-gradient(var(--grad-dark), var(--grad-dark)),
                      linear-gradient(90deg, transparent, rgba(0,180,216,0.35), transparent) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

.footer__widget-title h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: white !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 22px !important;
    position: relative;
    padding-bottom: 14px;
}

.footer__widget-title h4::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 28px; height: 2px;
    background: linear-gradient(90deg, var(--tp-cyan), var(--tp-yellow));
    border-radius: 2px;
    transition: width 0.4s var(--ease);
}

.footer__widget:hover .footer__widget-title h4::after { width: 50px; }

.footer__link ul li,
.footer__link-2 ul li { margin-bottom: 11px !important; }

.footer__link ul li a,
.footer__link-2 ul li a {
    color: rgba(255,255,255,0.46) !important;
    font-size: 13.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    transition: var(--transition) !important;
}

.footer__link ul li a::before,
.footer__link-2 ul li a::before {
    content: '›';
    font-size: 17px;
    color: var(--tp-cyan);
    opacity: 0;
    transform: translateX(-6px);
    transition: var(--transition);
    line-height: 1;
}

.footer__link ul li a:hover,
.footer__link-2 ul li a:hover {
    color: white !important;
    padding-left: 10px !important;
}

.footer__link ul li a:hover::before,
.footer__link-2 ul li a:hover::before { opacity: 1; transform: translateX(0); }

.footer-text {
    color: rgba(255,255,255,0.42) !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
}

/* Newsletter */
.footer__newsletter-form { position: relative !important; }

.footer__newsletter-form .ft-newsl {
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px solid rgba(255,255,255,0.1) !important;
    border-radius: var(--radius-sm) !important;
    color: white !important;
    height: 48px !important;
    font-size: 13px !important;
    padding: 0 135px 0 16px !important;
    transition: var(--transition) !important;
}

.footer__newsletter-form .ft-newsl::placeholder { color: rgba(255,255,255,0.32) !important; }

.footer__newsletter-form .ft-newsl:focus {
    border-color: var(--tp-cyan) !important;
    background: rgba(255,255,255,0.1) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,180,216,0.14) !important;
}

.footer__newsletter-form .ft-newsl-btn {
    background: var(--grad-cyan) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.9px !important;
    padding: 0 18px !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
    height: 48px !important;
    line-height: 48px !important;
    transition: var(--transition) !important;
    position: absolute !important;
    right: 0 !important; top: 0 !important;
    border: none !important;
    cursor: pointer !important;
}

.footer__newsletter-form .ft-newsl-btn:hover {
    background: linear-gradient(135deg, #0096c7 0%, #005f91 100%) !important;
    box-shadow: var(--shadow-cyan) !important;
}

.provide-text { font-size: 11.5px !important; color: rgba(255,255,255,0.33) !important; line-height: 1.65 !important; }
.provide-text a { color: rgba(255,255,255,0.5) !important; text-decoration: underline !important; text-underline-offset: 2px; }
.provide-text a:hover { color: var(--tp-cyan) !important; }

/* Footer bottom */
.footer__bottom-2 { border-top: 1px solid rgba(255,255,255,0.06) !important; }

.footer__links p a {
    color: rgba(255,255,255,0.4) !important;
    font-size: 13px !important;
    transition: var(--transition) !important;
    padding: 0 10px !important;
}

.footer__links p a:hover { color: var(--tp-cyan) !important; }
.footer__links p a::before { color: rgba(255,255,255,0.2) !important; }

.copy-right-area p { color: rgba(255,255,255,0.38) !important; font-size: 13px !important; }
.copy-right-area p span { color: var(--tp-cyan) !important; font-weight: 600 !important; }
.copy-right-area p .main-color { color: var(--tp-yellow) !important; font-weight: 600 !important; }


/* ================================================================
   MINI CART
   ================================================================ */

.cart__mini {
    border-radius: var(--radius) !important;
    border-top: 3px solid var(--tp-cyan) !important;
    box-shadow: 0 24px 60px rgba(13,27,62,0.18) !important;
    overflow: hidden;
}

.wc-cart {
    display: block !important;
    text-align: center !important;
    padding: 10px !important;
    border: 2px solid var(--tp-cyan) !important;
    color: var(--tp-cyan) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
    transition: var(--transition) !important;
    letter-spacing: 0.4px;
}

.wc-cart:hover {
    background: var(--tp-cyan) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-cyan) !important;
}

.wc-checkout {
    display: block !important;
    text-align: center !important;
    padding: 10px !important;
    background: var(--grad-header) !important;
    color: white !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.4px;
    transition: var(--transition) !important;
}

.wc-checkout:hover {
    background: var(--grad-cyan) !important;
    color: white !important;
    box-shadow: var(--shadow-cyan) !important;
    transform: translateY(-2px) !important;
}

.cart__sub h6 { font-weight: 700 !important; font-size: 14px !important; }
.cart__sub span { color: var(--tp-cyan) !important; font-weight: 700 !important; font-size: 16px !important; }


/* ================================================================
   MODALS
   ================================================================ */

.modal-content {
    border-radius: var(--radius-lg) !important;
    border: none !important;
    box-shadow: 0 30px 80px rgba(13,27,62,0.22) !important;
    overflow: hidden;
}

.modal-backdrop { backdrop-filter: blur(3px); }

.product__modal-close { z-index: 10 !important; }
.product__modal-close button {
    background: #f1f5f9 !important;
    border: none !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    position: absolute !important;
    top: 14px !important; right: 14px !important;
}

.product__modal-close button:hover {
    background: var(--tp-danger) !important;
    color: white !important;
    transform: rotate(90deg) !important;
}

/* Package options */
.package-item {
    border: 2px solid var(--tp-border) !important;
    border-radius: var(--radius) !important;
    background: #f8faff !important;
    transition: var(--transition) !important;
    cursor: pointer;
}

.package-item:hover {
    border-color: var(--tp-cyan) !important;
    background: #f0f9ff !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 24px rgba(0,180,216,0.14) !important;
}

.package-item.selected {
    border-color: var(--tp-cyan) !important;
    background: linear-gradient(135deg, #e0f7ff, #f0f9ff) !important;
    box-shadow: 0 6px 18px rgba(0,180,216,0.22) !important;
}

.package-item.recommended {
    border-color: #06d6a0 !important;
    background: linear-gradient(135deg, #e8fff8, #f0fff8) !important;
}

/* Add to cart in modal */
#add-to-cart-btn.cart-btn {
    background: var(--grad-cyan) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 13px 24px !important;
    width: 100% !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    box-shadow: 0 6px 18px rgba(0,119,182,0.25) !important;
}

#add-to-cart-btn.cart-btn:hover {
    background: linear-gradient(135deg, #0096c7 0%, #005f91 100%) !important;
    box-shadow: 0 10px 28px rgba(0,119,182,0.42) !important;
    transform: translateY(-2px) !important;
}

.product__price span,
#product__price_modal,
#product_price_m {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--tp-navy) !important;
    letter-spacing: -0.4px;
}

/* Product modal add to cart link */
a#product_modal_button.cart-btn {
    display: inline-block !important;
    background: var(--grad-cyan) !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    transition: var(--transition) !important;
    box-shadow: 0 6px 18px rgba(0,119,182,0.25) !important;
}

a#product_modal_button.cart-btn:hover {
    background: linear-gradient(135deg, #0096c7 0%, #005f91 100%) !important;
    box-shadow: 0 10px 28px rgba(0,119,182,0.42) !important;
    transform: translateY(-2px) !important;
}


/* ================================================================
   OFFCANVAS (Mobile Menu)
   ================================================================ */

.offcanvas__area { background: white !important; }

.offcanvas__wrapper {
    border-right: none !important;
    box-shadow: 4px 0 30px rgba(13,27,62,0.14) !important;
}

.offcanvas__logo img { background: transparent !important; }

.offcanvas__close-btn {
    background: var(--grad-cyan) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 38px !important; height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: var(--transition) !important;
}

.offcanvas__close-btn:hover { transform: rotate(90deg) !important; box-shadow: var(--shadow-cyan) !important; }

.offcanvas__search form { position: relative; }

.offcanvas__search input {
    width: 100% !important;
    height: 46px !important;
    border: 2px solid var(--tp-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0 52px 0 16px !important;
    font-size: 14px !important;
    transition: var(--transition) !important;
    font-family: 'Rubik', sans-serif !important;
}

.offcanvas__search input:focus {
    border-color: var(--tp-cyan) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,180,216,0.12) !important;
}

.offcanvas__search button {
    position: absolute !important;
    right: 0 !important; top: 0 !important;
    height: 46px !important;
    padding: 0 16px !important;
    background: var(--grad-cyan) !important;
    color: white !important;
    border: none !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

/* Body overlay */
.body-overlay {
    background: rgba(9,22,46,0.68) !important;
    backdrop-filter: blur(4px) !important;
}


/* ================================================================
   TOAST NOTIFICATIONS
   ================================================================ */

#toastContainer > div,
#toastContainer .toast {
    background: white !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    border-left: 4px solid var(--tp-cyan) !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    color: var(--tp-text) !important;
    font-family: 'Rubik', sans-serif !important;
    font-weight: 500;
    margin-bottom: 10px !important;
    animation: tp-slide-in 0.3s var(--ease) !important;
    min-width: 260px;
}

@keyframes tp-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}


/* ================================================================
   BACK TO TOP / PROGRESS CIRCLE
   ================================================================ */

.progress-wrap {
    background: var(--grad-cyan) !important;
    box-shadow: var(--shadow-cyan) !important;
    border-radius: 50% !important;
    transition: var(--transition) !important;
}

.progress-wrap:hover { box-shadow: 0 8px 28px rgba(0,180,216,0.55) !important; transform: translateY(-3px) !important; }
.progress-wrap svg path { stroke: rgba(255,255,255,0.5) !important; }


/* ================================================================
   PRELOADER
   ================================================================ */

#preloader {
    background: linear-gradient(135deg, var(--tp-navy) 0%, #142a5a 100%) !important;
}

#preloader .spinner {
    width: 42px !important;
    height: 42px !important;
    border: 3px solid rgba(255,255,255,0.1) !important;
    border-top-color: var(--tp-cyan) !important;
    border-radius: 50% !important;
}

#preloader p {
    color: rgba(255,255,255,0.65) !important;
    font-size: 14px !important;
    font-family: 'Rubik', sans-serif !important;
    letter-spacing: 0.4px;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1199px) {
    .header__search { margin-left: 0 !important; }
    .header-action { margin-left: 10px !important; }
}

@media (max-width: 991px) {
    .features-2__item {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    }
    .slider-title { font-size: 1.7rem !important; }
}

@media (max-width: 767px) {
    .slider-title { font-size: 1.35rem !important; }
    .countdown-inner ul li { min-width: 46px; padding: 7px 8px !important; }
    .countdown-inner ul li span { font-size: 17px !important; }
    .product__item:hover { transform: translateY(-3px) !important; }
    .category-box:hover { transform: translateY(-3px) !important; }
    .banner__img img { height: 160px; }
}

@media (max-width: 575px) {
    .header-action .icon-link span.text,
    .header-action .icon-link span.sub { display: none !important; }
    .header-action .icon-link { padding: 10px !important; }
    .header-action .icon-link i { font-size: 20px !important; }
    .features-2__item { padding: 16px !important; }
}

/* ================================================================
   UTILITY — keeps existing class colors from bleeding through
   ================================================================ */

.d-blue-bg  { background: transparent !important; }
.d-ddark-bg { background: transparent !important; }