/* RESET STYLING */
*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {font-family: var(--ff-primary); font-size: 13px; line-height: 22px; -webkit-font-smoothing: antialiased; overflow-x: hidden;color: var(--c-body);background-color: #fff;scrollbar-width: thin;}
h1,h2,h3,h4,h5,h6 {margin: 0;font-weight: 500; line-height: 1.2;}
ul, ol {margin: 0; padding: 0;}
li {font-size: var(--fs-base, 16px);}
p {margin: 0;}
a {color: #000; text-decoration: none; font-size: var(--fs-base, 16px); width: fit-content;display: block;-webkit-tap-highlight-color: transparent;}
p a {display: inline;color: var(--c-anchor);font-weight: 600;}
button {font-size: var(--fs-base, 16px); background-color: transparent; color: #fff; border: none; cursor: pointer; font-family: var(--ff-primary);}
img, picture {max-width: 100%; height: auto; vertical-align: middle; font-style: italic;}
picture {display: block;}
svg {vertical-align: middle;}
input, textarea, select {width: 100%; font-family: var(--ff-primary);outline: none;border: none;}
input::placeholder {font-family: var(--ff-primary);}
select {appearance: none;}
textarea {resize: none;font-family: var(--ff-primary);}
section {overflow-x: hidden;overflow-y: hidden;}
sup, sub {position: relative;line-height: 0;vertical-align: baseline;}
sup {top: -.5em;}
sub {bottom: -.25em;}

/* MODIFIER CLASSES */
.container {width: 100%; max-width: var(--container-size); margin-inline: auto;padding-inline: var(--container-px);}
.container-blog {width: 100%; max-width: var(--container-sm); margin-inline: auto; padding-inline: var(--container-px);}

:root {
    /* CONTAINER SIZE */
    --container-size : 1300px;
    --container-sm : 1230px;
    --container-px : 15px;
    /* FONT-FAMILY */
    --ff-primary : "roboto", system-ui, sans-serif;
    /* FONT-SIZE */
    --fs-2xl : 52px;
    --fs-xl : 40px;
    --fs-lg : 32px;
    --fs-md : 28px;
    --fs-sm :  24px;
    --fs-xs : 20px;
    --fs-base : 16px;
    --fs-2xs : 14px;
    /* COLORS */
    --c-primary : #00a9ed;

    --c-bg : #f7f7f7;
    --c-footer-bg : #f9f9f9;
    --c-home-bg : #f0f3ef;
    --c-body : #212529;
    --c-heading : #172337;
    --c-notice-bg : #9e0044;
    --c-hover : #166382;
    --c-hover-lg : #0d7eab;
    --c-border : #e7e3e3;
    --c-ul-border : #ebebeb;
    --c-br-input : #e5e5e5;
    --c-input : #a5a5a5;
    --c-footer-para : #17233f;
    --c-blue : #0000ff;
    --c-anchor-blue : #007bff;
    --c-card-anchor : #222222;
    --c-content-br : #ccc;
    --c-rating : #358639;
    --c-pricing : #767676;
    --c-category : #f1f3f6;
    --c-br-product-input : #a8a8a8;
    --c-shadow : #ececec;
    --c-pagination : #d2e1ec;
    --c-progress-bg : #e9ecef;
    --c-progress : #ff0000;
    --c-reviews : #999;
    --c-detail-pricing : #e62e04;
    --c-price-sh : #e0e0e0;
    --c-yt-btn : #f00;
    --c-orange : #ff6600;
    --c-detail-cart : #ff9f00;
    --c-detail-buy : #fb641b;
    --c-checkout-anchor : #545454;
    --c-checkout-input : #d9d9d9;
    --c-checkout-sh : #e1e1e1;
    --c-checkout-num : #727272e6;
    --c-checkout-price : #323232;
    --c-checkout-select : #333333;
    --c-checkout-shipping : #535353;
    --c-checkout-pricing : #717171;
    --c-cart-br : #ddd;
    --c-order-num : #2e5cb6;
    --c-order-confirm-br : #e6e6e6;
    --c-order-proceed-payment : #dc3545;
    --c-order-proceed-hover : #c82333;
    --c-heading-after : #e83632;
    --c-complaint-br : #c6c6c6;
    --c-input-complaint : #ced4da;
    --c-affiliate : #f2f3f8;
    --c-affiliate-input : #495057;
    --c-affiliate-btn : #f14708;
    --c-sell-heading : #ffa500;
    --c-step2-bg : #1ba5a7;
    --c-step4-bg : #ffb13b;
    --c-sitemap-shadow : #848484;
    --c-blog-br : #dcdedf;
    --c-blog-trending-bg : #ffe5e5;
    --c-blog-trending : #f55;
    --c-blog-header : #17222b;
    --c-blog-lgt : #17222b4d;
    --c-blog-carousel : #c1c4c6;
    --c-blog-carousel-hover : #1091ff;
    --c-blog-city : #9199a0;
    --c-blog-date : #29333c;
    --c-blog-bg : #ecedee;
    --c-blog-excerpt : #39424a;
    --c-blog-read : #747a80;
    --c-blog-fb : #3b5998;
    --c-blog-fb-dark : #334d82;
    --c-blog-twitter : #1da1f2;
    --c-blog-twitter-dark : #1b87ca;
    --c-blog-yt : #ff5050;
    --c-blog-yt-dark : #d04648;
    --c-blog-insta : #9b45d5;
    --c-blog-insta-dark : #803db3;
    --c-blog-author :  #e4e5e6;
    --c-blog-author-date : #73797f;
    --c-auth-br : #d7d8d9;
    --c-header-dark-br : #0c589e;
    --c-responsive-br : #C5C5C5;
    --c-more-br : #d4d0d0;
    --c-responsive-bg : #f1f1f1;
    --c-footer-first : #666;
    --c-handshake : #ed0055;
    --c-footer-linkedin : #007bb5;
    --c-footer-insta : #c32aa3;
    --c-detail-progress : #eee;
    --c-cart-bg : #7f8180;
    --c-detail-whatsapp : #28a745;
    --c-detail-tabs : #84807d;
    --c-detail-description : #efefef;
    --c-modal-tick-br : #A5DC86;
    --c-alert-txt : #575757;
    --c-alert-continue : #28215C;
    --c-alert-checkout : #f58220;
    --c-buy-now-close : #093793;
    --c-landmark : #fff3f3;
    --c-landmark-br : #e74c3c;
    --c-orangered : #ff4500;
    --c-field-bg : #f0f0f0;
    --c-yellow : #ffc107;
    --c-buy-now-green : #008000;
    --c-table-bg : #f9f7f7;
    --c-table-br : #979494;
    --c-first-gradient : linear-gradient(rgb(249, 200, 69), rgb(213, 100, 5));
    --c-second-gradient : linear-gradient(rgb(142, 204, 254), rgb(219, 239, 255));
    --c-third-gradient : linear-gradient(rgb(150, 244, 128), rgb(134, 245, 133));
    --c-fourth-gradient : linear-gradient(rgb(192, 228, 242), rgb(255, 216, 0));
    --c-fifth-gradient : linear-gradient(rgb(244, 153, 251), rgb(174, 214, 253));

    /* BORDER RADIUS */
    --br-base : 10px;
    /* TRANSITION */
    --trans-3 : 0.3s ease;
    /* FILTER */
    --filter-search : brightness(0) saturate(100%) invert(31%) sepia(67%) saturate(1458%) hue-rotate(199deg) brightness(83%) contrast(88%);
    --filter-hover : brightness(0) saturate(100%) invert(33%) sepia(33%) saturate(4040%) hue-rotate(174deg) brightness(90%) contrast(90%);
}

/* ====================
HEADER 
==================== */
.header-top {display: flex; align-items: center; justify-content: center; gap: 30px;}
.header-top > * {width: calc(50% - 15px);}
.header-top .text-wrapper {overflow: hidden; white-space: nowrap;}
.header-top .advance-text {display: none;}
.header-top .marquee {width: max-content; display: flex; gap: 10px; animation: marquee 25s linear infinite;}
.header-top p {font-size: 13px; font-weight: 700; color: #000;}
.header-top ul {display: flex; align-items: center; justify-content: end;}
.header-top li {display: flex; align-items: center; justify-content: center; list-style: none;}
.header-top li a {display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #000;}
.header-top li span {font-size: 13px; font-weight: 700; color: #000;}
header {background-color: var(--c-primary); padding-block: 9px;}
header .logo img {height: 42px;}
header .container {display: flex; align-items: center; justify-content: center; gap: 30px;}
header .left-col {width: calc(67% - 15px); display: flex; align-items: center; justify-content: start;}
header .search-form {width: 100%; max-width: 500px; display: flex; align-items: center; justify-content: center; background-color: #fff; padding: 6px 12px; border-radius: 4px; margin-inline: 80px auto; gap: 8px;}
header .search-form input {border-radius: 0; border: 0; flex: 1; min-height: 26px;}
header .search-form button[aria-label="submit-btn"] {display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-width: 26px; min-height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; flex-shrink: 0;}
header .search-form img {width: 20px; height: 20px; filter: var(--filter-search);}
header .container > ul {width: calc(33% - 15px); display: flex; align-items: center; justify-content: end; }
header .container li {list-style: none;}
header .container .search-btn {display: none;}
header .social {margin-right: 10px;}
header .profile-icon {display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; margin-left: 40px; text-wrap: nowrap;}
header .cart {display: flex; align-items: center; justify-content: center; margin-left: 40px; position: relative; cursor: pointer;}
header ul img {filter: invert(1); transition: var(--trans-3);}
header ul a:hover img {filter: var(--filter-hover);}
header .cart label {font-size: 14px; color: #fff; cursor: pointer;}
header .count-cart {width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; line-height: 1; background-color: #fff; border-radius: 50%; position: absolute; top: -9px; left: -9px; cursor: pointer;}
header .profile-icon:hover {color: var(--c-hover);}
header .cart:hover label {color: var(--c-hover);}
header .menu-btn {display: none;}
.bottom-header {border-bottom: 1px solid var(--c-border);}
.bottom-header .menu-bar {display: none;}
.bottom-header li {list-style: none;}
.bottom-header .container > ul {display: flex;}
.bottom-header .container > ul:has(> :nth-child(10)) > li:nth-child(n + 10) {display: none;}
.bottom-header .container > ul > li > a {font-size: 12px; font-weight: 700; text-transform: uppercase; color: #000; padding: 10px 12px; position: relative;}
.bottom-header .container > ul > li:has( > ul ) {position: relative;}
.bottom-header .container > ul button {display: none;}
.header-notice {display: flex; align-items: center; justify-content: center; background-color: var(--c-notice-bg);}
.header-notice p {font-size: 14px; text-align: center; color: #fff;}
.header-search {width: 100%; height: 100vh; display: none; align-items: center; justify-content: center; background-color: #000000d9; position: fixed; top: 0; left: 0; z-index: 1; transition: top var(--trans-3);}
.header-search .close-search {width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background-color: #fff; position: absolute; top: 25px; right: 25px; border-radius: 4px;}
.header-search .close-search img {filter: var(--filter-search);}
.header-search form {width: 100%; max-width: 500px; display: flex; align-items: center; justify-content: center; background-color: #fff; padding: 6px 12px; border-radius: 4px; margin-inline: auto;}
.header-search form input {border-radius: 0; border: 0;}
.header-search form img {filter: var(--filter-search);}
.header-bg {width: 100%; height: 100vh; display: none; position: fixed; top: 0; right: 0; background-color: #ffffff99; z-index: 9;}

/* ====================
BACK-TOP 
==================== */
.back-top {background-color: var(--c-primary); padding-block: 10px;}
.back-top a {color: #fff; display: flex; align-items: center; justify-content: center; margin-inline: auto;}
.back-top a img {-webkit-animation-name: bounce; -webkit-animation-duration: 1s; -webkit-animation-direction: alternate; -webkit-animation-timing-function: cubic-bezier(.5, 0.05, 1, .5); -webkit-animation-iteration-count: infinite; filter: invert(1);}
.back-top a span {display: block; font-size: 13px; text-transform: uppercase; padding-inline: 20px; transition: color var(--trans-3);}
.back-top a:hover span {color: var(--c-hover-lg);}
.back-top a img {transition: filter var(--trans-3);}
.back-top a:hover img {filter: var(--filter-hover);}

/* ====================
FOOTER 
==================== */
.responsive-footer {display: none;}
footer {background-color: var(--c-footer-bg); padding-top: 30px;}
footer .wrapper {display: flex; gap: 30px; align-items: start; padding-bottom: 13px; border-bottom: 1px solid #0000001a;}
footer .wrapper > * {width: calc(16.666667% - 24px);}
footer .wrapper > :last-child {width: calc(33.333333% - 24px);}
footer .footer-menu > :first-child {display: block; font-size: 14px; font-weight: 700; color: var(--c-heading); margin-bottom: 5px;}
footer .footer-menu li {list-style: none;}
footer .footer-menu li a {font-size: 12px; color: var(--c-heading); transition: color 0.1s; margin-bottom: 3px;}
footer .footer-menu li a:hover {color: var(--c-hover-lg);}
footer .footer-menu p {font-size: 12px; color: var(--c-heading); margin-bottom: 13px;}
footer .footer-menu form {width: 100%; display: flex; margin-bottom: 30px;}
footer .footer-menu input {font-size: 12px; color: var(--c-input); background-color: var(--c-footer-bg); padding: 8px 12px; border: 1px solid var(--c-br-input); border-right: 0; border-radius: 4px 0 0 4px;}
footer .footer-menu form button {width: 100%; max-width: 130px; font-size: 14px; text-transform: uppercase; color: #fff; background-color: var(--c-primary); transition: background-color 0.1s;}
footer .footer-menu form button:hover {background-color: var(--c-hover-lg);}
footer .location {font-size: 12px; color: var(--c-heading); text-decoration: underline;}
footer .location > span {width: 24px; display: inline-block; padding-right: 10px;}
footer .payments {display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 15px;}
footer .payments p {font-size: 13px; color: var(--c-footer-para);}
footer .payments p a {font-size: 13px; font-style: italic; font-weight: 400; color: var(--c-blue); text-decoration: underline;}
.mobile-bottom-nav {display: none;}


/* ====================
BREADCRUMB 
==================== */
.breadcrumb { padding-block: 12px; margin-bottom: 5px;}
.breadcrumb > * {display: inline-block; padding-right: 18px; position: relative;}
.breadcrumb > :last-child {padding-right: 0;}
.breadcrumb > :not(:last-child)::after {width: 14px; height: 14px; background: no-repeat center / contain url("../images/icons/chevron-right.svg"); position: absolute; inset: 0; margin-block: auto; margin-left: auto; content: ""; filter: brightness(0) saturate(100%) invert(45%) sepia(14%) saturate(271%) hue-rotate(167deg) brightness(96%) contrast(93%);}
.breadcrumb li {list-style: none;}
.breadcrumb li > * {font-size: 12px; color: #000;}
.breadcrumb li > a {text-decoration: underline; transition: color 0.1s;}
.breadcrumb li > a:hover {color: var(--c-hover-lg);}
.breadcrumb li > span {font-weight: 700;}

/* ====================
ACCESSORIES CARDS
==================== */
.accessory-card .pic {width: 100%; max-width: 174px; height: 180px; overflow: hidden; margin-inline: auto;}
.accessory-card .pic img {height: 100%; transition: transform var(--trans-3);}
.accessory-card:hover .pic img {transform: scale(1.1);}
.accessory-card .bottom-box {padding: 10px;}
.accessory-card p {font-size: 14px; transition: color var(--trans-3); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;}
.accessory-card:hover p {color: var(--c-hover-lg);}
.accessory-card .rating {display: flex; align-items: center; justify-content: start; gap: 3px;}
.accessory-card .rating-star {display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 14px; line-height: 19px; color: #fff; background-color: var(--c-rating); padding: 3px 5px; border-radius: 3px; margin-bottom: 5px;}
.accessory-card .rating-all {font-size: 13px; color: #000; transition: color var(--trans-3);}
.accessory-card:hover .rating-all {color: var(--c-hover-lg);}
.accessory-card .pricing {display: flex; align-items: center; justify-content: start; gap: 10px;}
.accessory-card .price {font-size: 13px; font-weight: 700; color: #000; transition: color var(--trans-3);}
.accessory-card:hover .price {color: var(--c-hover-lg);}
.accessory-card .price-old {font-size: 13px; text-decoration: line-through; color: var(--c-pricing);}

/* ====================
PAGINATION 
==================== */
.pagination ul {display: flex; align-items: center; justify-content: center; gap: 3px; margin-block: 16px;}
.pagination li {list-style: none;}
.pagination li.active a {color: #000;}
.pagination a {width: 28px; height: 32px; font-size: 13px; display: flex; align-items: center; justify-content: center; color: var(--c-primary); background-color: var(--c-pagination);}
.pagination ul > :where(:first-child, :last-child) img {filter: brightness(0) saturate(100%) invert(46%) sepia(81%) saturate(1412%) hue-rotate(164deg) brightness(97%) contrast(101%);} 
 
/* ====================
PRODUCT VIDEO PAGE 
==================== */
.buy-now-page .buy-product {background-color: var(--c-shadow); padding-block: 12px; margin-bottom: 10px;}
.buy-now-page .buy-product .container {display: flex; align-items: start; justify-content: start; gap: 15px;}
.buy-now-page .buy-product p {font-size: 16px; width: 100%; max-width: 436px;}
.buy-now-page .buy-product a {font-size: 14px; font-weight: 600; color: #000; margin-block: 10px 16px;}
.buy-now-page .buy-product-form.container {max-width: 400px;}
.buy-now-page .buy-product-form > :first-child {font-size: 22px; font-weight: 500; line-height: 1.2; color: #fff; margin-bottom: 10px; text-align: center; padding: 10px; background: linear-gradient(to right,#442e93 0,#25a5d8 100%);}
.buy-now-page input, .buy-now-page select {height: 40px; font-size: 16px; color: var(--c-checkout-select); padding: 8px 12px; border: 1px solid var(--c-checkout-input); border-radius: 5px; margin-bottom: 10px;}
.buy-now-page select {font-size: 13px; background-image: url("../images/icons/chevron-down.svg"); background-repeat: no-repeat; background-position: 97% center; background-size: 14px;}
.buy-now-page .discount-note {font-size: 12px; font-weight: 700; padding-left: 10px; color: var(--c-buy-now-green);}
.buy-now-page table {width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.buy-now-page table tr {background-color: var(--c-table-bg); }
.buy-now-page table tr th {padding: 5px 10px; border: 1px solid var(--c-table-br); color: #000; text-align: start;}
.buy-now-page table tr td {padding: 5px 10px; border: 1px solid var(--c-table-br); text-align: center; color: #000; }
.buy-now-page #delivery_ajax, .buy-now-page #price_ajax {font-weight: 700;}
.buy-now-page form button {width: 100%; height: 40px; color: #fff; background-color: var(--c-detail-buy); font-size: 20px; cursor: pointer; padding: 6px 12px; border-radius: 5px; margin-bottom: 10px;}

.buy-now-page form .custom-select {position: relative; width: 100%;}
.buy-now-page form .custom-select-trigger {width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; text-align: left; background-color: #fff; color: #000; border: 1px solid #ddd; border-radius: 4px; padding: 8px 12px; cursor: pointer;}
.buy-now-page form .custom-select-value {white-space: normal; word-break: break-word; overflow-wrap: break-word; line-height: 1.4;}
.buy-now-page form .custom-select-arrow {flex: none; font-size: 10px; transition: transform 0.2s;}
.buy-now-page form .custom-select.active .custom-select-arrow {transform: rotate(180deg);}
.buy-now-page form .custom-select-options {display: none; position: absolute; top: calc(100% + 4px); left: 0; width: 100%; max-height: 220px; overflow-y: auto; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); list-style: none; margin: 0; padding: 4px 0; z-index: 20;}
.buy-now-page form .custom-select.active .custom-select-options {display: block;}
.buy-now-page form .custom-select-options li {font-size: 13px; line-height: 1.4; white-space: normal; word-break: break-word; overflow-wrap: break-word; padding: 8px 12px; cursor: pointer;}
.buy-now-page form .custom-select-options li:hover {background-color: #f5f5f5;}
.buy-now-page form .custom-select-options li.selected {background-color: #eef7ff; font-weight: 700;}




@keyframes marquee {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%);
    }
}

@-webkit-keyframes bounce { 
    from { 
        -webkit-transform: translate3d(0, 0, 0); 
        transform: translate3d(0, 0, 0); 
    } 
    to { 
        -webkit-transform: translate3d(0, 10px, 0); 
        transform: translate3d(0, 10px, 0); 
    } 
} 

@media only screen and (max-width: 1600px) {
    .bottom-header .container > ul {position: relative;}
    .bottom-header .container > ul > li:has( > ul ) {position: static;} 
    .bottom-header .container > ul > li > ul {right: 0 !important; left: 0 !important;}
}

@media only screen and (max-width: 1400px) {
    /* FOOTER */
    footer .wrapper {gap: 20px;}
    footer .wrapper > * {width: calc(16.666667% - 16px);}
    footer .wrapper > :last-child {width: calc(33.333333% - 16px);}
}

@media only screen and (max-width: 1200px) {
    /* HEADER */
    header .profile-icon {margin-left: 15px;}   
    header .cart {margin-left: 20px;}
    header .social {margin-right: 6px;}
    .bottom-header .container > ul > li > a {padding: 10px;}
    .bottom-header .container > ul > li > ul {left: 0;}
    header .search-form {max-width: 350px;}
    /* FOOTER */
    footer {padding-top: 20px;}
    footer .wrapper {gap: 10px;}
    footer .wrapper > * {width: calc(16.666667% - 8px);}
    footer .wrapper > :last-child {width: calc(33.333333% - 8px);}
    footer .footer-menu form {margin-bottom: 14px;}
    footer .footer-menu form button {max-width: 110px;}
    footer .location {line-height: 19px;}
    footer .location > span {width: 18px; padding-right: 4px;}
    footer .payments {padding-block: 10px;}
}

@media only screen and (min-width: 993px) {
    /* HEADER */
    .bottom-header .container > ul a {transition: color 0.1s;}
    .bottom-header .container > ul > li:hover > a {color: var(--c-hover-lg);}
    .bottom-header .container > ul > li:has(ul) > a::after {display: inline-block; margin-left: 3.06px; vertical-align: 3.06px; border-top: 3.6px solid; border-right: 3.6px solid transparent; border-bottom: 0; border-left: 3.6px solid transparent; content: "";}
    .bottom-header .container > ul > li > ul {column-count: 4; background-color: #fff; padding: 15px 20px; border: 1px solid var(--c-ul-border); position: absolute; top: 100%; z-index: 1; box-shadow: 0 0 3px 0 #0000001a; border-radius: 4px; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: visibility var(--trans-3), opacity var(--trans-3), transform var(--trans-3);}
    .bottom-header .container > ul > li:hover > ul {visibility: visible; opacity: 1; transform: unset;}
    .bottom-header .container > ul:has( > :nth-child(7)) > li:nth-child(n+7) > ul {right: 0; left: unset;}
    .bottom-header .container > ul > li > ul > li {width: 200px; break-inside: avoid; padding-inline: 10px; margin-bottom: 5px;}
    .bottom-header .container > ul > li > ul > li a:not(:has(strong)) a {font-weight: 500;}
    .bottom-header .container > ul > li > ul > li strong {font-weight: 800; transition: color 0.1s;}
    .bottom-header .container > ul > li > ul > li strong:hover a {color: var(--c-hover-lg);}
    .bottom-header .container > ul > li > ul > li a {width: 100%; font-size: 12px; color: #000;}
    .bottom-header .container > ul > li > ul > li:hover > a {color: var(--c-hover-lg);}
    .bottom-header .container ul ul ul li:hover a {color: var(--c-hover-lg);}
} 

@media only screen and (max-width: 992px) {
    /* HEADER */
    .header-top {gap: 20px;}
    .header-top .text-wrapper {display: none;}
    .header-top .advance-text {display: block; font-size: 14px; font-weight: 700; text-align: center;}
    .header-top .advance-text p {font-size: 14px; font-weight: 700; text-align: center;}
    .header-top ul {display: none;}
    header .left-col {width: 50%;}
    header .container {flex-wrap: wrap; gap: 10px;}
    header .search-form {order: 3; max-width: unset; width: 100%; margin-inline: unset;}
    header .container > ul {width: 33%; margin-left: auto;}
    header ul img {width: 20px; height: 20px; object-fit: contain;}
    header .container .search-btn {display: block;}
    header .social {margin-right: 4px;}
    header .social, header .profile-icon span, header .cart label {display: none;}
    header .cart {margin-left: 15px;}
    header .profile-icon {margin-left: 10px;}
    header .count-cart {width: 16px; height: 16px; font-size: 9px; top: -8px; left: -7px;}
    header .menu-btn {display: block;}
    header .menu-btn img {filter: invert(1);}
    .bottom-header {border-bottom: 0; position: relative;}
    .bottom-header .container > ul {width: 100%; max-width: 300px; height: 100vh; padding-top: 69px; flex-direction: column; background-color: #fff; position: fixed; top: 0; left: -100%; z-index: 10; overflow-y: auto; transition: left var(--trans-3); scrollbar-width: thin; scrollbar-color: #0a4b87 #0e65b6;}
    .bottom-header .container > ul.active {left: 0;}
    .bottom-header .menu-bar {width: 100%; max-width: 300px; display: flex !important; align-items: center; justify-content: space-between; background-color: var(--c-primary); padding: 10px; border-bottom: 1px solid var(--c-header-dark-br); position: fixed; top: 0; z-index: 11;}
    .bottom-header .menu-bar > :first-child {padding: 0; width: fit-content;}
    .bottom-header .menu-bar .close-btn {display: block; filter: invert(1);}
    .bottom-header .container > ul:has(> :nth-child(10)) > li:nth-child(n + 10) {display: block;} 
    .bottom-header .container > ul > li > a {font-size: 13px; font-weight: 700; width: 100%; line-height: 19px; padding-block: 11px; text-transform: uppercase; letter-spacing: 0.3px;}
    .bottom-header .container > ul > li {border-bottom: 1px solid var(--c-responsive-br);}
    .bottom-header .container > ul > li.active {border-bottom: 0; background-color: var(--c-responsive-br);}
    .bottom-header .container > ul > li.active > a {order: 2; padding-block: 15px;}
    .bottom-header .container > ul > li.active > button {order: 1; justify-content: start;}
    .bottom-header .menu-hidden {display: none !important;}
    .bottom-header .container > ul > li > ul {display: none; left: unset;}
    .bottom-header .container > ul > li:has( > ul ) {display: flex; flex-wrap: wrap;}
    .bottom-header .container > ul > li:has( > ul ) > a {order: 1; width: 75%;}
    .bottom-header .container > ul > li:has( > ul ) button {order: 2; width: 25%; display: flex; align-items: center; justify-content: end; padding: 4px 12px; color: #000;}
    .bottom-header .container > ul > li:has( > ul ) button svg {width: 25px; height: 25px; transition: transform var(--trans-3);}
    .bottom-header .container > ul > li.active > button svg {transform: rotate(180deg);}
    .bottom-header .container > ul > li:has( > ul ) > ul {order: 3; width: 100%;}
    .bottom-header .container > ul > li:has( > ul ) > ul.active {display: block; background-color: #fff;}
    .bottom-header .container > ul > li > ul > li {border-bottom: 1px solid var(--c-responsive-br);}
    .bottom-header .container > ul > li > ul > li > ul {display: none;}
    .bottom-header .container > ul > li > ul > li strong a {width: 100%; font-size: 13px; line-height: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; padding: 11px 10px;}
    .bottom-header .container > ul > li:has( ul ul.active ) > a {display: none;}
    .bottom-header .container > ul > li:has( ul ul.active ) > button {display: none;}
    .bottom-header .container > ul > li > ul > li:has(ul) {display: flex; flex-wrap: wrap;}
    .bottom-header .container > ul > li > ul > li:has(ul) > strong {order: 1; width: 75%;}
    .bottom-header .container > ul > li > ul > li.active:has(ul) {background-color: var(--c-responsive-br); border-bottom: 0;}
    .bottom-header .container > ul > li > ul > li.active:has(ul) > strong {order: 2;}
    .bottom-header .container > ul > li > ul > li.active:has(ul) > strong > a {padding-block: 15px;}
    .bottom-header .container > ul > li > ul > li.active:has(ul) > button {order: 1; justify-content: start;}
    .bottom-header .container > ul > li > ul > li.active button {padding: 7px 10px;}
    .bottom-header .container > ul > li > ul > li.active button svg {transform: rotate(180deg);}
    .bottom-header .container > ul > li > ul > li:has(ul) ul {order: 3; width: 100%;}
    .bottom-header .container ul ul ul.active {display: block; background-color: #fff;}
    .bottom-header .container ul ul ul li {border-bottom: 1px solid var(--c-responsive-br);}
    .bottom-header .container ul ul ul a {width: 100%; font-size: 13px; font-weight: 700; line-height: 19px; text-transform: uppercase; letter-spacing: 0.3px; padding: 11px 10px;}
    .header-search {display: flex; top: -100%;}
    .header-search.active-search {top: 0;}
    .header-bg.active-bg {display: block;}
    /* FOOTER */
    .responsive-footer {display: block; }
    .responsive-footer .footer-block {background-color: var(--c-responsive-bg); padding-block: 30px 23px;}
    .responsive-footer .footer-block .container > :first-child {display: block; font-size: 16px; font-weight: 700; text-align: center; color: var(--c-footer-first); margin-bottom: 8px;}
    .responsive-footer .contact-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 30px; margin-bottom: 13px;}
    .responsive-footer .contact-grid p {font-size: 12px; color: var(--c-heading);}
    .responsive-footer .contact-grid p a {font-size: 12px; font-weight: 400; color: var(--c-blue); text-decoration: underline;}
    .responsive-footer .affiliate-link a {width: 100%; font-size: 16px; font-weight: 400; text-decoration: underline; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--c-handshake); margin-bottom: 13px;}
    .responsive-footer .affiliate-link a img {filter: brightness(0) saturate(100%) invert(17%) sepia(69%) saturate(7228%) hue-rotate(331deg) brightness(89%) contrast(110%);}
    .responsive-footer .footer-menu {font-size: 12px; color: var(--c-heading); margin-bottom: 13px;}
    .responsive-footer .responsive-form {display: flex; align-items: center; justify-content: center; }
    .responsive-footer .responsive-form input {height: 32px; font-size: 12px; background-color: var(--c-footer-bg); color: var(--c-input); padding: 6px 12px; border: 1px solid var(--c-br-input);}
    .responsive-footer .responsive-form button {width: 100%; max-width: 130px; height: 32px; font-size: 14px; text-align: center; color: #fff; background-color: var(--c-primary);}
    .responsive-footer .responsive-bottom {background-color: var(--c-heading); padding-top: 30px;}
    .responsive-footer .footer-location a span {display: inline-block; margin-right: 5px; filter: brightness(0) saturate(100%) invert(15%) sepia(99%) saturate(7297%) hue-rotate(5deg) brightness(109%) contrast(116%);}
    .responsive-footer .footer-location a {font-size: 14px; text-decoration: underline; color: #fff;}
    .responsive-footer .footer-social {display: flex; align-items: center; justify-content: start; gap: 13px; margin-block: 25px 5px;}
    .responsive-footer .footer-social a {width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 12%; }
    .responsive-footer .footer-social a > img {filter: invert(1);}
    .responsive-footer .footer-social .fb-link {background-color: var(--c-blog-fb);}
    .responsive-footer .footer-social .yt-link {background-color: var(--c-progress);}
    .responsive-footer .footer-social .linkedin-link {background-color: var(--c-footer-linkedin);}
    .responsive-footer .footer-social .insta-link {background-color: var(--c-footer-insta);}
    .responsive-footer .footer-social .tiktok-link {background-color: #000;}
    .responsive-footer .copyrights {line-height: 30px;}
    .responsive-footer .copyrights > * {font-size: 13px; color: #fff; text-align: center; }
    .responsive-footer .copyrights a {width: 100%; font-size: 13px; font-style: italic; font-weight: 400; text-decoration: underline; text-align: center;}
    .responsive-footer .payments {display: flex; align-items: center; justify-content: center; padding-bottom: 5px;}
    footer {display: none;}
    footer .wrapper {flex-wrap: wrap;}
    footer .wrapper > * {width: calc(25% - 7.5px);}
    footer .wrapper > :last-child {width: 100%;}
    footer .payments {gap: 20px;}
    /* ACCESSORY CARD */
    .accessory-card {border: 1px solid #eae5e5; padding-inline: 5px;}
}

@media only screen and (max-width: 768px) {
    /* HEADER */
    .header-top {gap: 15px;}
    
    /* FOOTER */
    footer .wrapper > * {width: calc(33.33333% - 6.67px);}
    footer .wrapper > :nth-child(4), footer .wrapper > :last-child {width: calc(50% - 5px);}
    footer .payments {gap: 10px; flex-direction: column;}
}

@media only screen and (max-width: 576px) {
    body {padding-bottom: 43px;}
    .container, .container-blog {padding-inline: 12px;}
    /* HEADER */
    .header-top {flex-direction: column; gap: 2px; padding-block: 4px;}
    .header-top > * {width: 100%;}
    .header-top ul {justify-content: center;}
    /* FOOTER */
    footer {padding-top: 15px;}
    footer .wrapper > * {width: calc(50% - 5px);}
    footer .wrapper > :last-child {width: 100%;}
    /* BOTTOM NAV */
    .mobile-bottom-nav {width: 100%; display: block; position: fixed; bottom: 0; left: 0; z-index: 11;}
    .mobile-bottom-nav ul {display: flex; align-items: center; justify-content: center;}
    .mobile-bottom-nav ul > :first-child  {background-color: var(--c-footer-insta);}
    .mobile-bottom-nav li {width: 100%; list-style: none;}
    .mobile-bottom-nav li img {filter: invert(1);}
    .mobile-bottom-nav li a {width: 100%; text-align: center; padding: 10px;}
    .mobile-bottom-nav li span {font-size: 14px; color: #fff;}
    .mobile-bottom-nav ul > :nth-child(2) {background-color: var(--c-primary); transform: skewX(-20deg); margin-left: -10px;}
    .mobile-bottom-nav ul > :nth-child(3) {background-color: #0c880a; transform: skewX(-20deg); margin-left: -10px; position: relative;}
    .mobile-bottom-nav ul > :nth-child(2) a, .mobile-bottom-nav ul > :nth-child(3) a {transform: skewX(20deg);}
    .mobile-bottom-nav ul > :nth-child(3)::after {width: 20px; height: 100%; background-color: #0c880a; position: absolute; inset: 0; margin-block: auto; margin-inline: auto -18px; content: "";}
    .mobile-bottom-nav .bottom-buy-now  {background-color: var(--c-detail-buy) !important; transform: skewX(-20deg) !important; margin-left: -10px !important; position: relative !important;}
    .mobile-bottom-nav .bottom-buy-now a {height: 43px; color: #fff !important; transform: skewX(20deg) !important;}
    .mobile-bottom-nav .bottom-buy-now::after {background-color: var(--c-detail-buy) !important;}

    /* ACCESSORIES CARD */
    .accessory-card .rating-star {font-size: 12px; padding: 2px 5px;}
    .accessory-card .rating-all {font-size: 12px;}
    .accessory-card .pricing {gap: 6px;}
}

@media only screen and (max-width: 480px) {
    .container {padding-inline: 8px;}
    .header-search form {padding-block: 10px;}
    /* BACK TOP TOP */
    .back-top a span {padding-inline: 12px;}
    /* ACCESSORIES CARD */
    .accessory-card .bottom-box {padding: 5px;}
    .accessory-card .pic {height: 150px;}
}

@media only screen and (max-width: 360px) {
    .mobile-bottom-nav li a {padding: 10px 5px;}
    .mobile-bottom-nav li a span {font-size: 12px;}
}