@import url('https://fonts.googleapis.com/css2?family=Arima:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {
    --white: #FFFFFF;
    --onyx: #101010;
    --apricot: #FFEEC1;
    --bg-warm: #F7F3EC;
    --text-primary: #101010;
    --text-secondary: #3D3D3D;
    --accent-gold: #C98A00;
    --accent-honey: #F5B800;
    --border: #E8DDBB;
    --muted: #fefefe;
    
    --bottom-nav-selected: var(--accent-honey);
    --bottom-nav-not-selected: #888888;

    --font-heading: 'Arima', serif;
    --font-body: 'Roboto', sans-serif;
}

/* Global Font Overrides */
body,
html,
button,
input,
select,
textarea {
    font-family: 'Roboto', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Arima', serif !important;
}


.pr-outlined-button,
.pr-plus-minus-button {
    background-color: var(--bg-warm) !important;
}

.pr-outlined-button {
    border: 1.5px solid var(--onyx) !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Add to cart: golden outline on white */
.pr-outlined-button.sh-product-plus-minus-button:first-of-type {
    background-color: var(--white) !important;
    border-color: var(--accent-gold) !important;
    color: var(--accent-gold) !important;
}

/* Buy Now: solid black */
.pr-outlined-button.sh-product-plus-minus-button:last-of-type {
    background-color: var(--onyx) !important;
    color: var(--white) !important;
}

.pr-outlined-button.sh-product-plus-minus-button:first-of-type:hover {
    background-color: #F2F2F2 !important;
    border-color: var(--accent-gold) !important;
    color: var(--accent-gold) !important;
}

.pr-outlined-button.sh-product-plus-minus-button:first-of-type:active {
    background-color: #E5E5E5 !important;
    border-color: var(--accent-gold) !important;
    color: var(--accent-gold) !important;
}

.pr-outlined-button.sh-product-plus-minus-button:last-of-type:hover {
    background-color: #2A2A2A !important;
    border-color: #2A2A2A !important;
    color: var(--white) !important;
}

.pr-outlined-button.sh-product-plus-minus-button:last-of-type:active {
    background-color: #404040 !important;
    border-color: #404040 !important;
    color: var(--white) !important;
}

.universal-btn-style {
    font-family: var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    height: 38px !important;
    min-height: 38px !important;
}

@media (max-width: 480px) {
    .flex.w-full.items-stretch.gap-2.min-h-\[40px\] {
        flex-direction: column-reverse !important;
        gap: 4px !important;
    }

    .pr-outlined-button.sh-product-plus-minus-button {
        padding-left: 6px !important;
        padding-right: 6px !important;
        min-width: 0 !important;
    }

    .pr-outlined-button.sh-product-plus-minus-button .pr-outlined-button-label {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

#footer {
    background-color: #202020 !important;
    color: var(--white) !important;
}

.three-col-footer__heading {
    color: inherit !important;
}

#sh-footer-git svg {
    color: var(--white) !important;
}

.vertical-soc-cont .sh-social-icon {
    background-color: var(--white) !important;
}

.vertical-soc-cont .sh-social-icon img {
    filter: invert(1);
}

.sh-home-page-prod-section .sh-solid-button:hover {
    background-color: var(--accent-gold);
}

.app-bar {
    background-color: var(--white) !important;
    color: var(--text-primary) !important;
}

.app-bar-main svg {
    color: var(--text-primary) !important;
}

.search-container:before {
    background-color: var(--text-primary) !important;
}

.search-field .search-input {
    color: var(--text-primary) !important;
}

.pr-plus-minus-button {
    background-color: var(--accent-honey) !important;
    color: var(--onyx) !important;
}

.badge {
    background-color: var(--accent-gold);
    color: var(--white) !important;
}

/* Mobile Bottom Navigation Styling */
#bottom-nav {
    background-color: var(--onyx) !important;
}

.sh-bottom-nav-unselected,
.bottom-nav__buttons.sh-bottom-nav-unselected,
.sh-bottom-nav-unselected svg,
.sh-bottom-nav-unselected .MuiBottomNavigationAction-label {
    color: var(--bottom-nav-not-selected) !important;
}

.sh-bottom-nav-selected,
.bottom-nav__buttons.sh-bottom-nav-selected,
.sh-bottom-nav-selected svg,
.sh-bottom-nav-selected .MuiBottomNavigationAction-label,
.MuiBottomNavigationAction-root.Mui-selected,
.MuiBottomNavigationAction-root.Mui-selected svg,
.MuiBottomNavigationAction-root.Mui-selected .MuiBottomNavigationAction-label {
    color: var(--bottom-nav-selected) !important;
}

/* Trusted Badges */
.shoopy-trusted-badges-wrapper {
    font-family: 'Noto Sans', sans-serif;
    margin: 0;
    padding: 0;
    color: #222222;
}

.shoopy-trusted-badges-list {
    display: grid;
    gap: 10px;
    align-items: stretch;
    list-style: none;
    padding: 0;
    margin: 0;
}

.shoopy-trusted-badges-list--one {
    grid-template-columns: 1fr;
}

.shoopy-trusted-badges-list--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shoopy-trusted-badges-list--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shoopy-trusted-badges-list--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shoopy-trusted-badge-item {
    display: flex;
    align-items: center;
    min-width: 0;
}

.shoopy-trusted-badge-link,
.shoopy-trusted-badge-item {
    box-sizing: border-box;
}

.shoopy-trusted-badge-item {
    border: none !important;
    border-radius: 8px;
    padding: 12px 14px;
    background: transparent !important;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.shoopy-trusted-badge-item:hover {
    background: transparent !important;
    transform: translateY(-1px);
}

.shoopy-trusted-badge-icon {
    width: 34px;
    height: 34px;
    border: 1px solid #000000 !important;
    border-radius: 50%;
    background: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 10px;
}

.shoopy-trusted-badge-icon svg {
    display: block;
    width: 17px;
    height: 17px;
    fill: #000000 !important;
}

.shoopy-trusted-badge-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15px;
    line-height: 1.3;
    color: #222222;
    white-space: normal;
}

@media (max-width: 480px) {
    .shoopy-trusted-badges-list {
        gap: 8px;
    }

    .shoopy-trusted-badge-item {
        padding: 10px 11px;
    }

    .shoopy-trusted-badge-icon {
        width: 30px;
        height: 30px;
        margin-right: 8px;
    }

    .shoopy-trusted-badge-icon svg {
        width: 15px;
        height: 15px;
    }

    .shoopy-trusted-badge-label {
        font-size: 10px;
    }
}

.product-component-name {
    font-size: 2em !important;
}