/* GENERATED by tools/gadgetx/build-css.mjs from tools/gadgetx/shared.css. Do not edit: change the source and re-run the script. */
/* GadgetX skin for the shared Zenis storefront pages (shop, product, cart,
   checkout, customer area, blog, faq, contact, compare, wishlist, combos, CMS
   pages, mini-cart, buy-now modal, mobile menu, bottom nav, flash messages).
   Loaded only while GadgetX is the active theme; every selector is scoped to
   the GadgetX body.

   1. The Zenis CSS variables are re-pointed at the GadgetX tokens under the
      GadgetX body, so most shared components follow the GadgetX palette — and
      its dark mode — without being restyled one by one.
   2. Component fixes where a Zenis variable plays two roles (--colorWhite is
      both a surface and the text on filled buttons) or where a component uses
      literal colours. Glass only on a few small surfaces (cards stay plain). */

/* ---------- 1. Zenis variables -> GadgetX tokens ---------- */
html body:where(.home_gadgetx) {
    --themeColorOne: var(--gx-primary);
    --themeColorTwo: var(--gx-primary-2);
    --colorGreen: var(--gx-success);
    --colorRed: var(--gx-danger);
    --colorYellow: var(--gx-star);
    --colorOlive: var(--gx-violet);
    --paraColor: var(--gx-muted);
    --colorBlack: var(--gx-text);
    --colorWhite: var(--gx-surface);
    --lightBg: var(--gx-surface-2);
    --lightBg2: var(--gx-surface-2);
    --headingFont: var(--gx-font-head);
    --bodyFont: var(--gx-font-body);
    --ratingColor: var(--gx-star);
    --boxShadow: var(--gx-shadow-md);
    --bpMobileAccent: var(--gx-primary);
    --bpMobileAccentRgb: var(--gx-primary-rgb);
}

:where(body.home_gadgetx) main,
:where(body.home_gadgetx) section {
    color: var(--gx-text);
}

:where(body.home_gadgetx) .shop_page,
:where(body.home_gadgetx) .shop_details,
:where(body.home_gadgetx) .cart_page,
:where(body.home_gadgetx) .checkout_page,
:where(body.home_gadgetx) .dashboard,
:where(body.home_gadgetx) .wishlist_page,
:where(body.home_gadgetx) .compare_page,
:where(body.home_gadgetx) .faq_page,
:where(body.home_gadgetx) .contact_us,
:where(body.home_gadgetx) .cms_page,
:where(body.home_gadgetx) .blog_2,
:where(body.home_gadgetx) .blog_details,
:where(body.home_gadgetx) .category_page,
:where(body.home_gadgetx) .flash_sell_page,
:where(body.home_gadgetx) .sign_in,
:where(body.home_gadgetx) .sign_up,
:where(body.home_gadgetx) .forgot_password,
:where(body.home_gadgetx) .combo_details {
    font-family: var(--gx-font-body);
    color: var(--gx-text);
}

:where(body.home_gadgetx) .shop_page :is(h1, h2, h3, h4, h5, h6),
:where(body.home_gadgetx) .shop_details :is(h1, h2, h3, h4, h5, h6),
:where(body.home_gadgetx) .cart_page :is(h1, h2, h3, h4, h5, h6),
:where(body.home_gadgetx) .checkout_page :is(h1, h2, h3, h4, h5, h6),
:where(body.home_gadgetx) .dashboard :is(h1, h2, h3, h4, h5, h6),
:where(body.home_gadgetx) .blog_details :is(h1, h2, h3, h4, h5, h6),
:where(body.home_gadgetx) .faq_page :is(h1, h2, h3, h4, h5, h6),
:where(body.home_gadgetx) .contact_us :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--gx-font-head);
    color: var(--gx-text);
}

:where(body.home_gadgetx) :is(.sidebar_category, .shop-cat-tree-wrapper, .sidebar_blog, .popular_blog_text, .blog_text, .dashboard_sidebar_menu) :is(a, li, p, span) {
    font-family: var(--gx-font-body);
}

/* restore list bullets inside rich text (the GadgetX reset removes them) */
:where(body.home_gadgetx) :is(.cms_page_content, .shop_details_description, .blog_details_left .details_text, .blog_details_text) ul {
    list-style: disc;
    padding-left: 1.4em;
    margin-bottom: 1em;
}

:where(body.home_gadgetx) :is(.cms_page_content, .shop_details_description, .blog_details_left .details_text, .blog_details_text) ol {
    list-style: decimal;
    padding-left: 1.4em;
    margin-bottom: 1em;
}

/* ---------- page banner / breadcrumb ---------- */
:where(body.home_gadgetx) .page_banner {
    position: relative;
    margin: 24px auto 0;
    max-width: 1320px;
    width: calc(100% - 24px);
    border-radius: 22px;
    overflow: hidden;
    background-image: var(--gx-img-page-banner) !important;
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid var(--gx-border);
}

:where(body.home_gadgetx) .page_banner_overlay {
    background: var(--gx-banner-fade, linear-gradient(90deg, rgba(var(--gx-bg-rgb), .86), rgba(var(--gx-bg-rgb), .45)));
    padding: 56px 0;
}

:where(body.home_gadgetx) .page_banner_text h2,
:where(body.home_gadgetx) .page_banner_text .bp-breadcrumb-title {
    color: var(--gx-text);
    font-family: var(--gx-font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.01em;
}

:where(body.home_gadgetx) .page_banner_text ul li,
:where(body.home_gadgetx) .page_banner_text ul li a {
    color: var(--gx-muted);
}

:where(body.home_gadgetx) .page_banner_text ul li a:hover {
    color: var(--gx-primary-2);
}

:where(body.home_gadgetx) .page_banner_text ul li::after {
    color: var(--gx-muted);
}

/* ---------- buttons ---------- */
:where(body.home_gadgetx) .common_btn,
:where(body.home_gadgetx) .common_btn_2,
:where(body.home_gadgetx) .view_all_btn,
:where(body.home_gadgetx) .cart_summary_btn a,
:where(body.home_gadgetx) .minicart_btn_area a,
:where(body.home_gadgetx) .mini-cart-actions a {
    border-radius: var(--gx-radius-sm);
    font-family: var(--gx-font-body);
    font-weight: 600;
}

/* doubled class: beats Zenis rules such as `.contact_form button` / `.wishlist_page .common_btn` */
:where(body.home_gadgetx) .common_btn.common_btn {
    background: var(--gx-primary);
    color: var(--gx-on-primary);
    border-color: var(--gx-primary);
    box-shadow: var(--gx-btn-glow);
}

:where(body.home_gadgetx) .common_btn.common_btn:hover,
:where(body.home_gadgetx) .common_btn.common_btn:focus-visible {
    background: var(--gx-primary-2);
    color: var(--gx-on-primary);
}

:where(body.home_gadgetx) .common_btn::before,
:where(body.home_gadgetx) .common_btn::after {
    background: var(--gx-primary-2);
}

:where(body.home_gadgetx) .common_btn_2,
:where(body.home_gadgetx) .view_all_btn {
    background: transparent;
    color: var(--gx-text);
    border: 1px solid var(--gx-border-strong);
}

:where(body.home_gadgetx) .common_btn_2:hover,
:where(body.home_gadgetx) .view_all_btn:hover {
    background: var(--gx-primary);
    border-color: var(--gx-primary);
    color: var(--gx-on-primary);
}

/* ---------- forms ---------- */
:where(body.home_gadgetx) :is(.single_input, .blog_form_input, .contact_form, .checkout_form_area, .sign_in_form, .dashboard_profile_info_edit) :is(input, select, textarea),
:where(body.home_gadgetx) .shop_page .form-select,
:where(body.home_gadgetx) .shop_page select,
:where(body.home_gadgetx) .form-control,
:where(body.home_gadgetx) .form-select,
:where(body.home_gadgetx) .nice-select {
    background-color: var(--gx-surface-2);
    color: var(--gx-text);
    border: 1px solid var(--gx-field-border);
    border-radius: var(--gx-radius-sm);
}

:where(body.home_gadgetx) :is(input, select, textarea)::placeholder {
    color: var(--gx-placeholder);
}

:where(body.home_gadgetx) :is(.single_input, .blog_form_input, .contact_form, .checkout_form_area, .sign_in_form) label {
    color: var(--gx-text);
}

:where(body.home_gadgetx) .nice-select .list {
    background: var(--gx-surface);
    border: 1px solid var(--gx-border);
}

:where(body.home_gadgetx) .nice-select .option:hover,
:where(body.home_gadgetx) .nice-select .option.focus,
:where(body.home_gadgetx) .nice-select .option.selected.focus {
    background: var(--gx-surface-2);
    color: var(--gx-text);
}

:where(body.home_gadgetx) .form-check-input {
    background-color: var(--gx-surface-2);
    border-color: var(--gx-check-border);
}

:where(body.home_gadgetx) .form-check-input:checked {
    background-color: var(--gx-primary);
    border-color: var(--gx-primary);
}

:where(body.home_gadgetx) .select2-container--default .select2-selection--single,
:where(body.home_gadgetx) .select2-dropdown {
    background: var(--gx-surface-2);
    border-color: var(--gx-field-border);
    color: var(--gx-text);
}

:where(body.home_gadgetx) .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--gx-text);
}

:where(body.home_gadgetx) .select2-results__option--highlighted {
    background: var(--gx-primary) !important;
    color: var(--gx-on-primary) !important;
}

/* ---------- shop: sidebar, filters, range slider, sort bar, pagination ---------- */
:where(body.home_gadgetx) :is(.sidebar_category, .sidebar_range, .sidebar_status, .sidebar_stock_filter, .sidebar_variant_filter) {
    border-color: var(--gx-border);
}

:where(body.home_gadgetx) :is(.sidebar_category, .sidebar_range, .sidebar_status, .sidebar_stock_filter, .sidebar_variant_filter, .sidebar_blog) h3,
:where(body.home_gadgetx) .sidebar_category_header h3 {
    color: var(--gx-text);
    font-family: var(--gx-font-head);
}

:where(body.home_gadgetx) .sidebar_category a,
:where(body.home_gadgetx) .shop-cat-tree-wrapper a {
    color: var(--gx-text-soft);
}

:where(body.home_gadgetx) .sidebar_category a:hover,
:where(body.home_gadgetx) .shop-cat-tree-wrapper a:hover,
:where(body.home_gadgetx) .shop-cat-tree-wrapper a.active {
    color: var(--gx-primary-2);
}

:where(body.home_gadgetx) .price-range-slider .range-bar,
:where(body.home_gadgetx) .range_slider .bar {
    background: var(--gx-surface-3);
}

:where(body.home_gadgetx) .price-range-slider .ui-slider-range,
:where(body.home_gadgetx) .range_slider .bar .selected-bar {
    background: var(--gx-primary);
}

:where(body.home_gadgetx) .price-range-slider .ui-slider-handle,
:where(body.home_gadgetx) .range_slider .pointer {
    background: var(--gx-surface);
    border-color: var(--gx-primary);
}

:where(body.home_gadgetx) .range_slider .pointer-label,
:where(body.home_gadgetx) .range_slider .pointer-label.high,
:where(body.home_gadgetx) .range_slider .pointer-label.low {
    background: var(--gx-surface-2);
    color: var(--gx-text);
}

:where(body.home_gadgetx) .product_page_top,
:where(body.home_gadgetx) .shop_filter_area {
    color: var(--gx-muted);
}

:where(body.home_gadgetx) .shop_filter_btn,
:where(body.home_gadgetx) .product_page_top_button button {
    background: var(--gx-surface);
    color: var(--gx-text);
    border: 1px solid var(--gx-border);
    border-radius: var(--gx-radius-sm);
}

:where(body.home_gadgetx) .pagination_area .page-link,
:where(body.home_gadgetx) .pagination .page-link {
    background: var(--gx-surface);
    color: var(--gx-text);
    border: 1px solid var(--gx-border);
    border-radius: var(--gx-radius-sm);
}

:where(body.home_gadgetx) .pagination_area .page-item.active .page-link,
:where(body.home_gadgetx) .pagination_area .page-link:hover,
:where(body.home_gadgetx) .pagination .page-item.active .page-link {
    background: var(--gx-violet);
    border-color: var(--gx-violet);
    color: var(--sf-secondary-contrast, #ffffff);
}

:where(body.home_gadgetx) .pagination_area .page-item.disabled .page-link {
    background: transparent;
    color: var(--gx-muted);
}

/* the shared product list in grids uses the GadgetX card (productCardInclude), give it room */
:where(body.home_gadgetx) .shop_page .gx_product_item,
:where(body.home_gadgetx) .wishlist_page .gx_product_item,
:where(body.home_gadgetx) .flash_sell_page .gx_product_item,
:where(body.home_gadgetx) .category_page .gx_product_item,
:where(body.home_gadgetx) .related_products .gx_product_item {
    height: 100%;
}

/* Row gap for product grids. The Zenis card (.product_item_2) carried its own
   bottom margin; the GadgetX card is height:100% with none, and the shop /
   category / wishlist / flash-deal grids are plain Bootstrap rows without a
   vertical gutter, so wrapped rows touched. Give every grid column that wraps
   a GadgetX card a bottom margin (slick slides keep the slider's own spacing). */
:where(body.home_gadgetx) [class*="col-"]:has(> .gx_product_item):not(.slick-slide) {
    margin-bottom: 24px;
}

@media (max-width: 767.98px) {
    :where(body.home_gadgetx) [class*="col-"]:has(> .gx_product_item):not(.slick-slide) {
        margin-bottom: 16px;
    }
}

/* Related Products is a Slick slider on a Bootstrap .row. Slick moves the columns
   out from under the row, so they lose the .row > * gutter padding while the row keeps
   its negative margin: the cards touched and the strip started 12px left of the
   heading. Give the slides the gutter back (slide padding = the gap between cards, and
   it cancels the row margin so the first/last card sit on the container edges, with
   room inside the clipped list for the card shadow). Slides stretch to equal height. */
:where(body.home_gadgetx) .related_products .slick-track {
    display: flex;
}

:where(body.home_gadgetx) .related_products .slick-slide {
    display: flex;
    height: auto;
    padding: 0 calc(var(--bs-gutter-x, 1.5rem) / 2);
}

:where(body.home_gadgetx) .related_products .slick-slide > .gx_product_item {
    flex: 1 1 auto;
}

/* Space between the toolbar above a product grid ("Showing x of y", sort and
   per-page selects) and the first row of cards. Zenis got this from the old
   card's own top margin; the GadgetX card has none, so the selects touched it. */
:where(body.home_gadgetx) .product_page_top {
    margin-bottom: 24px;
}

:where(body.home_gadgetx) .product_page_top .row {
    row-gap: 12px;
    align-items: center;
}

@media (max-width: 767.98px) {
    :where(body.home_gadgetx) .product_page_top {
        margin-bottom: 16px;
    }
}

/* ---------- product details ---------- */
:where(body.home_gadgetx) .shop_details_text .title,
:where(body.home_gadgetx) .shop_details_text h2 {
    color: var(--gx-text);
    font-family: var(--gx-font-head);
}

:where(body.home_gadgetx) .shop_details_text .price,
:where(body.home_gadgetx) .shop_details .price {
    color: var(--gx-primary-2);
}

:where(body.home_gadgetx) .shop_details_text .price del,
:where(body.home_gadgetx) .shop_details .price del {
    color: var(--gx-muted);
}

:where(body.home_gadgetx) .details_slider_thumb_item,
:where(body.home_gadgetx) .details_slider_nav_item {
    background: var(--gx-surface-2);
    border: 1px solid var(--gx-border);
    border-radius: var(--gx-radius);
    overflow: hidden;
}

:where(body.home_gadgetx) .details_qty_input,
:where(body.home_gadgetx) .details_qty_input input,
:where(body.home_gadgetx) .details_qty_input button {
    background: var(--gx-surface-2);
    color: var(--gx-text);
    border-color: var(--gx-border);
}

:where(body.home_gadgetx) .shop_details_des_area .nav-link,
:where(body.home_gadgetx) .shop_details_des_area .nav-tabs .nav-link {
    color: var(--gx-muted);
    background: transparent;
    border-color: transparent;
}

:where(body.home_gadgetx) .shop_details_des_area .nav-link.active {
    color: var(--gx-primary-2);
    border-bottom: 2px solid var(--gx-primary);
}

:where(body.home_gadgetx) .shop_details_des_area,
:where(body.home_gadgetx) .shop_details_description {
    color: var(--gx-text-soft);
}

/* ---------- cards / panels used across pages ---------- */
:where(body.home_gadgetx) :is(.cart_page_summary, .checkout_payment, .dashboard_overview_item, .dashboard_profile_info, .dashboard_recent_order, .dashboard_sidebar_area, .contact_info, .contact_form, .sign_in_form, .result_card, .bp-success-card, .faq_page .accordion-item, .blog_item, .popular_blog, .sidebar_blog, .cms_page_content, .compare_list_area) {
    background: var(--gx-surface);
    color: var(--gx-text);
    border: 1px solid var(--gx-border);
    border-radius: var(--gx-radius);
    box-shadow: var(--gx-shadow-sm);
}

:where(body.home_gadgetx) :is(.blog_text, .popular_blog_text) :is(a, .title) {
    color: var(--gx-text);
}

:where(body.home_gadgetx) :is(.blog_text, .popular_blog_text) a:hover {
    color: var(--gx-primary-2);
}

/* tables: cart, compare, orders */
:where(body.home_gadgetx) :is(.cart_table_area, .compare_list_area, .dashboard_order_table) table,
:where(body.home_gadgetx) :is(.cart_table_area, .compare_list_area, .dashboard_order_table) .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--gx-text);
    --bs-table-border-color: var(--gx-border);
    color: var(--gx-text);
    border-color: var(--gx-border);
}

:where(body.home_gadgetx) :is(.cart_table_area, .compare_list_area, .dashboard_order_table) :is(th, td) {
    background: transparent;
    color: var(--gx-text);
    border-color: var(--gx-border);
}

:where(body.home_gadgetx) :is(.cart_table_area, .compare_list_area, .dashboard_order_table) thead th {
    background: var(--gx-surface-2);
    color: var(--gx-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

:where(body.home_gadgetx) :is(.cart_page_img, .product_item_list_img) img {
    background: var(--gx-surface-2);
    border-radius: var(--gx-radius-sm);
}

:where(body.home_gadgetx) .cart_page_details a,
:where(body.home_gadgetx) .cart_page_details .title {
    color: var(--gx-text);
}

:where(body.home_gadgetx) .cart_page_price,
:where(body.home_gadgetx) .grand-total {
    color: var(--gx-text);
}

:where(body.home_gadgetx) .cart_bulk_bar {
    background: var(--gx-surface-2);
    border-color: var(--gx-border);
    color: var(--gx-text);
}

/* checkout */
:where(body.home_gadgetx) .checkout_header,
:where(body.home_gadgetx) .checkout_zone_field {
    color: var(--gx-text);
}

:where(body.home_gadgetx) .checkout_payment label,
:where(body.home_gadgetx) .checkout_payment li {
    color: var(--gx-text);
    border-color: var(--gx-border);
}

/* customer area */
:where(body.home_gadgetx) .dashboard_sidebar_menu a,
:where(body.home_gadgetx) .dashboard_sidebar_menu li a {
    color: var(--gx-text-soft);
    border-radius: var(--gx-radius-sm);
}

:where(body.home_gadgetx) .dashboard_sidebar_menu a:hover,
:where(body.home_gadgetx) .dashboard_sidebar_menu a.active,
:where(body.home_gadgetx) .dashboard_sidebar_menu li.active a {
    background: rgba(var(--gx-primary-rgb), .12);
    color: var(--gx-primary-2);
}

:where(body.home_gadgetx) .dashboard_sidebar_user,
:where(body.home_gadgetx) .dashboard_sidebar_user :is(h3, p, a) {
    color: var(--gx-text);
}

:where(body.home_gadgetx) .dashboard_overview_item :is(h3, p, span) {
    color: var(--gx-text);
}

/* faq + accordions */
:where(body.home_gadgetx) .accordion {
    --bs-accordion-bg: var(--gx-surface);
    --bs-accordion-color: var(--gx-text);
    --bs-accordion-border-color: var(--gx-border);
    --bs-accordion-btn-color: var(--gx-text);
    --bs-accordion-btn-bg: var(--gx-surface);
    --bs-accordion-active-bg: var(--gx-surface-2);
    --bs-accordion-active-color: var(--gx-primary-2);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem var(--gx-focus-ring);
}

:where(body.home_gadgetx) .accordion-button {
    font-family: var(--gx-font-head);
    font-weight: 600;
}

:where(body.home_gadgetx) .accordion-button::after {
    filter: var(--gx-chev-filter);
}

:where(body.home_gadgetx) .accordion-body {
    color: var(--gx-text-soft);
}

/* auth pages */
:where(body.home_gadgetx) .sign_in_form :is(h2, h3, h4),
:where(body.home_gadgetx) .dont_account,
:where(body.home_gadgetx) .dont_account a {
    color: var(--gx-text);
}

:where(body.home_gadgetx) .dont_account a,
:where(body.home_gadgetx) .forgot a {
    color: var(--gx-primary-2);
}

/* alerts / flash */
:where(body.home_gadgetx) .sf-flash {
    background: var(--gx-surface);
    color: var(--gx-text);
    border: 1px solid var(--gx-border);
    border-left-width: 4px;
    border-radius: var(--gx-radius-sm);
}

:where(body.home_gadgetx) .sf-flash-error {
    border-left-color: var(--gx-danger);
}

:where(body.home_gadgetx) .sf-flash-error i {
    color: var(--gx-danger-ink);
}

:where(body.home_gadgetx) .sf-flash-success {
    border-left-color: var(--gx-success);
}

:where(body.home_gadgetx) .sf-flash-success i {
    color: var(--gx-success-ink);
}

:where(body.home_gadgetx) .alert {
    background: var(--gx-surface);
    color: var(--gx-text);
    border: 1px solid var(--gx-border);
}

:where(body.home_gadgetx) .alert-success {
    border-left: 4px solid var(--gx-success);
}

:where(body.home_gadgetx) .alert-danger {
    border-left: 4px solid var(--gx-danger);
}

:where(body.home_gadgetx) .alert-warning {
    border-left: 4px solid var(--gx-star);
}

:where(body.home_gadgetx) .invalid-feedback,
:where(body.home_gadgetx) .text-danger {
    color: var(--gx-danger-text) !important;
}

/* ---------- product cards of other shared lists + badges ---------- */
:where(body.home_gadgetx) .discount_list .discount,
:where(body.home_gadgetx) li.discount {
    background: var(--gx-danger);
    color: var(--gx-on-danger);
}

:where(body.home_gadgetx) .discount_list .new {
    background: var(--gx-tag-bg);
    color: var(--gx-violet-text);
}

:where(body.home_gadgetx) .product_item,
:where(body.home_gadgetx) .product_item_2 {
    background: var(--gx-surface);
    border: 1px solid var(--gx-border);
    border-radius: var(--gx-radius);
}

:where(body.home_gadgetx) .product_item .title,
:where(body.home_gadgetx) .product_item_2 .title {
    color: var(--gx-text);
}

:where(body.home_gadgetx) .product_item .price,
:where(body.home_gadgetx) .product_item_2 .price {
    color: var(--gx-primary-2);
}

/* combo cards (shared partial) */
:where(body.home_gadgetx) .combo_item,
:where(body.home_gadgetx) .combo-card,
:where(body.home_gadgetx) .bp-combo-card {
    background: var(--gx-surface);
    border: 1px solid var(--gx-border);
    border-radius: var(--gx-radius);
    color: var(--gx-text);
}

/* empty states */
:where(body.home_gadgetx) .empty_wishlist,
:where(body.home_gadgetx) .empty_compare {
    color: var(--gx-muted);
}

/* ---------- mini-cart offcanvas (shared, opened from the GadgetX header) ---------- */
:where(body.home_gadgetx) .mini_cart .offcanvas {
    background: var(--gx-bg-2);
    color: var(--gx-text);
    border-left: 1px solid var(--gx-border);
}

:where(body.home_gadgetx) .mini_cart .offcanvas-header {
    border-bottom: 1px solid var(--gx-border);
}

:where(body.home_gadgetx) .mini_cart .offcanvas-title {
    color: var(--gx-text);
}

/* Zenis paints the title with --colorWhite on a coloured header; GadgetX's header is plain */
:where(body.home_gadgetx) .mini_cart .offcanvas-header h5.offcanvas-title,
:where(body.home_gadgetx) .mini_cart .offcanvas-header h5.offcanvas-title span {
    color: var(--gx-text);
}

:where(body.home_gadgetx) .mini_cart .btn-close {
    background: transparent;
    color: var(--gx-text);
    opacity: .8;
}

:where(body.home_gadgetx) .mini_cart li,
:where(body.home_gadgetx) .mini_cart .mini_cart_text a,
:where(body.home_gadgetx) .mini_cart .mini_cart_text p,
:where(body.home_gadgetx) .mini_cart .mini-cart-empty {
    color: var(--gx-text);
    border-color: var(--gx-border);
}

:where(body.home_gadgetx) .mini_cart .mini_cart_img img {
    background: var(--gx-surface-2);
    border-radius: var(--gx-radius-sm);
}

:where(body.home_gadgetx) .minicart_btn_area,
:where(body.home_gadgetx) .mini-cart-actions {
    border-top: 1px solid var(--gx-border);
}

/* ---------- buy-now modal + search modal ---------- */
:where(body.home_gadgetx) .modal-content {
    background: var(--gx-surface);
    color: var(--gx-text);
    border: 1px solid var(--gx-border);
    border-radius: var(--gx-radius);
}

:where(body.home_gadgetx) .modal-header,
:where(body.home_gadgetx) .modal-footer,
:where(body.home_gadgetx) .bp-buynow-header,
:where(body.home_gadgetx) .bp-buynow-footer {
    border-color: var(--gx-border);
}

:where(body.home_gadgetx) .modal .btn-close {
    filter: var(--gx-close-filter);
}

:where(body.home_gadgetx) .bp-buynow-modal :is(h3, h4, h5, .bp-buynow-price) {
    color: var(--gx-text);
}

:where(body.home_gadgetx) .bp-buynow-opt {
    background: var(--gx-surface-2);
    color: var(--gx-text);
    border-color: var(--gx-border);
}

:where(body.home_gadgetx) .bp-buynow-opt.active {
    border-color: var(--gx-primary);
    color: var(--gx-primary-2);
}

:where(body.home_gadgetx) .bp-buynow-qty button,
:where(body.home_gadgetx) .bp-buynow-qty input {
    background: var(--gx-surface-2);
    color: var(--gx-text);
    border-color: var(--gx-border);
}

/* ---------- mobile menu, bottom nav (shared) ---------- */
:where(body.home_gadgetx) .mobile_menu_area .offcanvas {
    background: var(--gx-bg-2);
    color: var(--gx-text);
}

:where(body.home_gadgetx) .mobile_menu_area :is(a, li, button, p, span, h2, h3) {
    color: var(--gx-text);
}

:where(body.home_gadgetx) .mobile_menu_area :is(input) {
    background: var(--gx-surface-2);
    color: var(--gx-text);
    border-color: var(--gx-border);
}

:where(body.home_gadgetx) .mobile_menu_area .nav-link.active,
:where(body.home_gadgetx) .mobile_menu_area .nav-pills .nav-link.active {
    background: var(--gx-primary);
    color: var(--gx-on-primary);
}

:where(body.home_gadgetx) .mobile_menu_area .gx_theme_row {
    margin-bottom: 14px;
}

:where(body.home_gadgetx) .bp-mobile-bottom-nav {
    background: var(--gx-bar-bg);
    border-top: 1px solid var(--gx-border);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
}

:where(body.home_gadgetx) .bp-mbn-item,
:where(body.home_gadgetx) .bp-mbn-btn {
    color: var(--gx-muted);
}

:where(body.home_gadgetx) .bp-mbn-item.active,
:where(body.home_gadgetx) .bp-mbn-item:hover {
    color: var(--gx-primary-2);
}

:where(body.home_gadgetx) .bp-mbn-badge {
    background: var(--gx-primary);
    color: var(--gx-on-primary);
}

/* ---------- scroll-to-top + demo theme switcher ---------- */
:where(body.home_gadgetx) .progress-wrap {
    box-shadow: inset 0 0 0 2px var(--gx-border);
    background: var(--gx-surface);
}

:where(body.home_gadgetx) .progress-wrap::after {
    color: var(--gx-primary-2);
}

:where(body.home_gadgetx) .progress-wrap svg.progress-circle path {
    stroke: var(--gx-primary);
}

/* "Buy Now" (details page + mini-cart) is a success-coloured fill: pick the readable text colour */
:where(body.home_gadgetx) .details_btn_area .buy_now {
    background: var(--gx-success);
    color: var(--sf-success-contrast, #ffffff);
}

html[data-theme="dark"] body:where(.home_gadgetx) .details_btn_area .buy_now {
    color: #05221a;
}

/* mini-cart: plain header + the two footer buttons (View Cart = outline, Checkout = primary) */
:where(body.home_gadgetx) .mini_cart .offcanvas-header {
    background: var(--gx-bg-2);
    color: var(--gx-text);
}

:where(body.home_gadgetx) .mini_cart .offcanvas-header .btn-close {
    background: var(--gx-surface-2);
    color: var(--gx-text);
    border: 1px solid var(--gx-border);
    border-radius: var(--gx-radius-sm);
}

:where(body.home_gadgetx) .mini_cart .offcanvas-header .btn-close i {
    color: var(--gx-text);
}

:where(body.home_gadgetx) .minicart_btn_area .mini-cart-btn {
    background: transparent;
    color: var(--gx-text);
    border: 1px solid var(--gx-border-strong);
    box-shadow: none;
}

:where(body.home_gadgetx) .minicart_btn_area .mini-cart-btn:hover {
    background: var(--gx-surface-2);
    color: var(--gx-text);
}

:where(body.home_gadgetx) .minicart_btn_area .mini-cart-btn.buy_now {
    background: var(--gx-primary);
    color: var(--gx-on-primary);
    border-color: var(--gx-primary);
    box-shadow: var(--gx-btn-glow);
}

:where(body.home_gadgetx) .minicart_btn_area .mini-cart-btn.buy_now:hover {
    background: var(--gx-primary-2);
    color: var(--gx-on-primary);
}

:where(body.home_gadgetx) .minicart_btn_area .mini-cart-btn::after,
:where(body.home_gadgetx) .minicart_btn_area .mini-cart-btn::before {
    display: none;
}

/* Zenis fills these with --colorBlack (the GadgetX text colour, light in dark
   mode) and prints literal white text on top: use an inverse pair instead. */
:where(body.home_gadgetx) .cart_summary_btn .continue_shopping,
:where(body.home_gadgetx) .payment_success_text .go_btn,
:where(body.home_gadgetx) .special_product_banner .text .black_btn,
:where(body.home_gadgetx) .product_actions .product_add_cart_btn,
:where(body.home_gadgetx) .product_item .product_img .btn_list li a,
:where(body.home_gadgetx) .bp-livesearch-cat {
    background: var(--gx-text);
    color: var(--gx-bg);
    border-color: var(--gx-text);
}

:where(body.home_gadgetx) .cart_summary_btn .continue_shopping:hover,
:where(body.home_gadgetx) .payment_success_text .go_btn:hover {
    background: var(--gx-primary);
    color: var(--gx-on-primary);
}

:where(body.home_gadgetx) .common_btn::after,
:where(body.home_gadgetx) .error_text a::after {
    background: var(--gx-primary-2);
}

:where(body.home_gadgetx) .contact_info:hover span,
:where(body.home_gadgetx) .blog_details_right form button:hover,
:where(body.home_gadgetx) :is(.dashboard_invoice_logo_area .text, .dashboard_profile_info_edit h2, .dashboard_profile_info_list h2) a:hover {
    background: var(--gx-primary-2);
    color: var(--gx-on-primary);
}

:where(body.home_gadgetx) .bp-demo-switcher-fab {
    background: var(--gx-primary);
    color: var(--gx-on-primary);
}

/* shop price slider tooltips */
:where(body.home_gadgetx) .al-range-slider__tooltip {
    background: var(--gx-surface-2);
    color: var(--gx-text);
    border: 1px solid var(--gx-border);
}

:where(body.home_gadgetx) .al-range-slider__tooltip::before,
:where(body.home_gadgetx) .al-range-slider__tooltip::after {
    border-top-color: var(--gx-surface-2);
}

/* sign in / sign up / forgot password: the GadgetX auth art instead of the Zenis photo */
:where(body.home_gadgetx) .sign_in_img img {
    content: url(../images/gx_auth-light.webp);
    object-fit: cover;
    border-radius: var(--gx-radius);
}

html[data-theme="dark"] body:where(.home_gadgetx) .sign_in_img img {
    content: url(../images/gx_auth.webp);
}