/* =========================================================
   LUMEKH™ — SHOOPY BLACK & WHITE THEME
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

:root {
    --black: #000000;
    --white: #FFFFFF;
}

html,
body {
    color: #000000 !important;
    background-color: #FFFFFF !important;
}


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

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
strong,
b,
small,
div {
    color: #000000;
}


/* Keep white text when inside black elements */

button:hover *,
.sh-solid-button:hover *,
.sh-outlined-button:hover *,
.sh-product-buy-now-button:hover *,
.sh-product-card-enquiry:hover *,
.sh-product-enquiry:hover *,
.sh-bottom-nav-selected *,
[aria-selected="true"] *,
.active *,
.active * {
    color: #FFFFFF !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.sh-header-main {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    box-shadow: none !important;
    border-bottom: 1px solid #000000 !important;
}


/* Header text */

.sh-header-main,
.sh-header-main span,
.sh-header-main p,
.sh-header-main a {
    color: #000000 !important;
}


/* Header icons */

.sh-header-location-icon {
    fill: #000000 !important;
    stroke: #000000 !important;
}

.sh-header-account-icon {
    stroke: #000000 !important;
    fill: none !important;
}

.sh-header-cart-icon {
    stroke: #000000 !important;
    fill: none !important;
}

.sh-header-arrow-icon {
    fill: #000000 !important;
}

.sh-header-search-icon {
    stroke: #000000 !important;
    fill: none !important;
}

.sh-header-mob-menu-icon {
    color: #000000 !important;
    stroke: #000000 !important;
}


/* Cart badge */

.sh-header-cart-badge {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}


/* =========================================================
   ALL BUTTONS — NORMAL
   ========================================================= */

button,
.sh-solid-button,
.sh-outlined-button,
.sh-product-buy-now-button,
.sh-product-card-enquiry,
.sh-product-enquiry {

    background-color: #FFFFFF !important;
    color: #000000 !important;

    border: 2px solid #000000 !important;

    border-radius: 999px !important;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease !important;

    cursor: pointer;
}


/* Button text */

button *,
.sh-solid-button *,
.sh-outlined-button *,
.sh-product-buy-now-button *,
.sh-product-card-enquiry *,
.sh-product-enquiry * {
    color: #000000 !important;
}


/* =========================================================
   ALL BUTTONS — HOVER
   ========================================================= */

button:hover,
.sh-solid-button:hover,
.sh-outlined-button:hover,
.sh-product-buy-now-button:hover,
.sh-product-card-enquiry:hover,
.sh-product-enquiry:hover {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border: 2px solid #FFFFFF !important;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.30) !important;

    transform: translateY(-1px);
}


/* Hover button text */

button:hover *,
.sh-solid-button:hover *,
.sh-outlined-button:hover *,
.sh-product-buy-now-button:hover *,
.sh-product-card-enquiry:hover *,
.sh-product-enquiry:hover * {
    color: #FFFFFF !important;
}


/* =========================================================
   ACTIVE / PRESSED BUTTON
   ========================================================= */

button:active,
.sh-solid-button:active,
.sh-outlined-button:active,
.sh-product-buy-now-button:active,
.sh-product-card-enquiry:active,
.sh-product-enquiry:active {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border: 2px solid #FFFFFF !important;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.30) !important;

    transform: translateY(0);
}


/* =========================================================
   SELECTED / ACTIVE ELEMENTS
   ========================================================= */

.active,
.selected,
[aria-selected="true"],
[aria-current="page"] {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border-color: #000000 !important;
}


.active *,
.selected *,
[aria-selected="true"] *,
[aria-current="page"] * {

    color: #FFFFFF !important;

    fill: #FFFFFF !important;

    stroke: #FFFFFF !important;
}


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

.sh-product-card {

    background-color: #FFFFFF !important;

    color: #000000 !important;

    border: 1px solid #000000 !important;

    border-radius: 8px !important;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.12) !important;

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease !important;
}


.sh-product-card:hover {

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.20) !important;
}


/* Product card text */

.sh-product-card-name,
.sh-product-card-name *,
.sh-product-card-mrp,
.sh-product-card-mrp *,
.sh-product-card-price,
.sh-product-card-price * {

    color: #000000 !important;
}


/* =========================================================
   PRODUCT PRICE
   ========================================================= */

.sh-product-card-price {

    color: #000000 !important;

    font-weight: 600 !important;
}


/* =========================================================
   PRODUCT MRP
   ========================================================= */

.sh-product-card-mrp {

    color: #000000 !important;

    text-decoration: line-through;
}


/* =========================================================
   PRODUCT NAME
   ========================================================= */

.sh-product-card-name {

    color: #000000 !important;

    font-weight: 500 !important;
}


/* =========================================================
   DISCOUNT BADGE
   ========================================================= */

.sh-product-card-discount-tag,
.sh-product-discount-tag {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border: 1px solid #000000 !important;

    font-weight: 500 !important;
}


.sh-product-card-discount-tag *,
.sh-product-discount-tag * {

    color: #FFFFFF !important;
}


/* =========================================================
   QUANTITY PLUS / MINUS
   ========================================================= */

.sh-product-plus-minus-button {

    background-color: #FFFFFF !important;

    color: #000000 !important;

    border: 2px solid #000000 !important;

    border-radius: 999px !important;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.15) !important;

    fill: #000000 !important;

    stroke: #000000 !important;
}


.sh-product-plus-minus-button:hover {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border-color: #FFFFFF !important;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.30) !important;
}


.sh-product-plus-minus-button:hover * {

    color: #FFFFFF !important;

    fill: #FFFFFF !important;

    stroke: #FFFFFF !important;
}


/* =========================================================
   ENQUIRY BUTTONS
   ========================================================= */

.sh-product-card-enquiry,
.sh-product-enquiry {

    background-color: #FFFFFF !important;

    color: #000000 !important;

    border: 2px solid #000000 !important;

    border-radius: 999px !important;
}


.sh-product-card-enquiry:hover,
.sh-product-enquiry:hover {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border-color: #FFFFFF !important;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.30) !important;
}


/* =========================================================
   BUY NOW
   ========================================================= */

.sh-product-buy-now-button {

    background-color: #FFFFFF !important;

    color: #000000 !important;

    border: 2px solid #000000 !important;

    border-radius: 999px !important;

    padding: 11px 25px !important;

    white-space: nowrap;
}


.sh-product-buy-now-button:hover {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border: 2px solid #FFFFFF !important;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.30) !important;
}


/* =========================================================
   CATEGORIES
   ========================================================= */

.sh-categories-container {

    background-color: #FFFFFF !important;

    color: #000000 !important;
}


.sh-category-card {

    margin: 0 10px 10px !important;

    padding-top: 8px !important;

    background-color: #FFFFFF !important;

    color: #000000 !important;

    border-radius: 8px !important;

    border: 1px solid #000000 !important;
}


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

.sh-category-card *,
.sh-categories-container * {

    color: #000000 !important;
}


/* =========================================================
   REMOVE TITLE DIVIDER
   ========================================================= */

.sh-row-title-divider {

    display: none !important;
}


/* =========================================================
   WISHLIST
   ========================================================= */

.sh-product-wishlist-desktop {

    background-color: #FFFFFF !important;

    border: 2px solid #000000 !important;

    border-radius: 999px !important;
}


.sh-product-wishlist-desktop:hover {

    background-color: #000000 !important;

    border-color: #FFFFFF !important;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.25) !important;
}


.sh-product-wishlisted-icon {

    fill: #000000 !important;

    stroke: #000000 !important;
}


.sh-product-not-wishlisted-icon {

    fill: none !important;

    stroke: #000000 !important;
}


.sh-product-wishlist-desktop:hover svg,
.sh-product-wishlist-desktop:hover .sh-product-wishlisted-icon,
.sh-product-wishlist-desktop:hover .sh-product-not-wishlisted-icon {

    fill: #FFFFFF !important;

    stroke: #FFFFFF !important;
}


/* =========================================================
   SHARE
   ========================================================= */

.sh-product-share-icon {

    stroke: #000000 !important;

    fill: none !important;
}


.sh-product-social-button {

    background-color: #FFFFFF !important;

    color: #000000 !important;

    border: 2px solid #000000 !important;

    border-radius: 999px !important;
}


.sh-product-social-button:hover {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border-color: #FFFFFF !important;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.30) !important;
}


/* =========================================================
   LOCATION POPUP
   ========================================================= */

.sh-location-modal,
.sh-location-modal *,
.sh-location-popup,
.sh-location-popup * {

    color: #000000 !important;
}


.sh-location-modal,
.sh-location-popup {

    background-color: #FFFFFF !important;

    border-color: #000000 !important;
}


/* Location close button */

.sh-location-modal button,
.sh-location-popup button {

    background-color: #FFFFFF !important;

    color: #000000 !important;

    border: 2px solid #000000 !important;

    border-radius: 999px !important;
}


.sh-location-modal button:hover,
.sh-location-popup button:hover {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border-color: #FFFFFF !important;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.30) !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

input,
textarea,
select {

    background-color: #FFFFFF !important;

    color: #000000 !important;

    border: 1px solid #000000 !important;

    border-radius: 8px !important;

    outline: none !important;
}


input::placeholder,
textarea::placeholder {

    color: #000000 !important;

    opacity: 0.55;
}


input:focus,
textarea:focus,
select:focus {

    border: 2px solid #000000 !important;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.15) !important;
}


/* =========================================================
   DROPDOWNS
   ========================================================= */

select option {

    background-color: #FFFFFF !important;

    color: #000000 !important;
}


/* =========================================================
   LINKS
   ========================================================= */

a {

    color: #000000 !important;

    text-decoration: none;
}


a:hover {

    color: #000000 !important;
}


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

.sh-footer-main {

    background-color: #FFFFFF !important;

    color: #000000 !important;

    border-top: 1px solid #000000 !important;

    box-shadow: none !important;
}


.sh-footer-main * {

    color: #000000 !important;
}


/* Footer icons */

.sh-footer-icon {

    color: #000000 !important;

    fill: #000000 !important;

    stroke: #000000 !important;
}


/* Footer icon hover */

.sh-footer-main a:hover .sh-footer-icon,
.sh-footer-icon:hover {

    color: #FFFFFF !important;

    fill: #FFFFFF !important;

    stroke: #FFFFFF !important;
}


/* =========================================================
   MOBILE BOTTOM NAVIGATION
   ========================================================= */

.sh-bottom-nav-main {

    background-color: #FFFFFF !important;

    border-top: 1px solid #000000 !important;

    color: #000000 !important;
}


.sh-bottom-nav-main * {

    color: #000000 !important;
}


/* Selected */

.sh-bottom-nav-selected {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    stroke: #FFFFFF !important;

    fill: none !important;
}


.sh-bottom-nav-selected * {

    color: #FFFFFF !important;

    stroke: #FFFFFF !important;
}


/* Unselected */

.sh-bottom-nav-unselected {

    background-color: #FFFFFF !important;

    color: #000000 !important;

    stroke: #000000 !important;
}


/* Bottom cart badge */

.sh-bottom-nav-cart-badge {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border: 1px solid #FFFFFF !important;
}


/* =========================================================
   GENERAL SVG ICONS
   ========================================================= */

svg {

    color: #000000;
}


/* Icons on normal white backgrounds */

svg:not(.sh-bottom-nav-selected svg) {

    stroke: currentColor;
}


/* =========================================================
   ACTIVE ICONS
   ========================================================= */

.active svg,
.selected svg,
[aria-selected="true"] svg,
[aria-current="page"] svg {

    color: #FFFFFF !important;

    stroke: #FFFFFF !important;

    fill: #FFFFFF !important;
}


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

[role="dialog"],
[role="dialog"] > div {

    background-color: #FFFFFF !important;

    color: #000000 !important;
}


[role="dialog"] h1,
[role="dialog"] h2,
[role="dialog"] h3,
[role="dialog"] h4,
[role="dialog"] p,
[role="dialog"] span,
[role="dialog"] label {

    color: #000000 !important;
}


/* =========================================================
   MODAL CLOSE BUTTON
   ========================================================= */

[role="dialog"] button {

    background-color: #FFFFFF !important;

    color: #000000 !important;

    border: 2px solid #000000 !important;

    border-radius: 999px !important;
}


[role="dialog"] button:hover {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border-color: #FFFFFF !important;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.30) !important;
}


/* =========================================================
   CHECK / SUBMIT BUTTONS
   ========================================================= */

button[type="submit"],
button[type="button"] {

    background-color: #FFFFFF !important;

    color: #000000 !important;

    border: 2px solid #000000 !important;

    border-radius: 999px !important;
}


button[type="submit"]:hover,
button[type="button"]:hover {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border: 2px solid #FFFFFF !important;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.30) !important;
}


/* =========================================================
   DISABLED ELEMENTS
   ========================================================= */

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {

    background-color: #FFFFFF !important;

    color: #000000 !important;

    border-color: #000000 !important;

    opacity: 0.55;
}


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

::-webkit-scrollbar {

    width: 8px;

    background: #FFFFFF;
}


::-webkit-scrollbar-thumb {

    background: #000000;

    border-radius: 10px;
}


::-webkit-scrollbar-track {

    background: #FFFFFF;
}


/* =========================================================
   REMOVE UNWANTED COLOUR STYLING
   ========================================================= */

.sh-product-card-price,
.sh-product-card-mrp,
.sh-product-card-name,
.sh-product-share-icon,
.sh-footer-icon,
.sh-header-search-icon {

    color: #000000 !important;
}


/* =========================================================
   FINAL BLACK & WHITE OVERRIDES
   ========================================================= */

.sh-header-main,
.sh-footer-main,
.sh-categories-container,
.sh-product-card {

    background-color: #FFFFFF !important;

    color: #000000 !important;
}


/* Active / hover final rule */

button:hover,
.sh-solid-button:hover,
.sh-outlined-button:hover,
.sh-product-buy-now-button:hover,
.sh-product-card-enquiry:hover,
.sh-product-enquiry:hover {

    background-color: #000000 !important;

    color: #FFFFFF !important;

    border-color: #FFFFFF !important;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.30) !important;
}


/* =========================================================
   END — LUMEKH™ BLACK & WHITE
   ========================================================= */