/*
Theme Name: Storefront Child
Theme URI: https://woocommerce.com/storefront/
Description: A child theme of Storefront.
Template: storefront
Text Domain: storefront-child
*/
:root {
    --theme-primary-base: #5C3C30;
    --theme-secondary-base: #FF7176;
    --theme-accent-base: #FF7176;
    --theme-tag-base: #FBAEC0;
    --theme-tag-ship-in-hrs: #E8C69C;
    --theme-tag-darker-base: #FF898D;
    --theme-tag-lighter-base: #F6B999;
    --theme-success-base: #7ED321;
    --theme-warning-base: #F0BD47;
    --theme-error-base: #FF7176;
    --theme-semi-accent-base: #F0BD47;
    --theme-body-base: #F2F2F2;
    --theme-primary-20-base: rgba(92, 60, 48, 0.2);
    --theme-primary-30-base: rgba(92, 60, 48, 0.3);
    --theme-primary-40-base: rgba(92, 60, 48, 0.4);
    --theme-primary-50-base: rgba(92, 60, 48, 0.5);
    --theme-accent-50-base: rgba(255, 113, 118, 0.5);
    --theme-accent-70-base: rgba(255, 113, 118, 0.7);
    --theme-on-sale-70-base: rgba(255, 104, 140, 0.7);
    --theme-on-sale-tag: #FF688C;
    --theme-semi-accent-50-base: rgba(240, 189, 71, 0.5);
    --theme-pointer-color-70-base: rgba(255, 106, 19, 0.7);
    --theme-weak-base: #999999;
    --theme-block-bg-base: #BFBFBF;
    --theme-border-base: #BFBFBF;
    --theme-border-lighter-base: #E0E0E0;
    --theme-background-white-smoke: #F8F8F8;
    --theme-background-lighter-base: #FFF0F1;
    --theme-background-lighter-base-2: #FEFBFC;
    --theme-pointer-color: #FF6A13;
    --theme-vip-0-color: #696977;
    --theme-vip-1-color: #376477;
    --theme-vip-2-color: #9F5300;
    --theme-vip-3-color: #372ABF;
    --theme-external-circle-color: rgba(224, 224, 224, 0.3);
    --theme--vip-0-circle-color: #c5c4ca;
    --theme--vip-0-external-circle-color: rgba(197, 196, 202, 0.3);
    --theme--vip-1-circle-color: #85B4C1;
    --theme--vip-1-external-circle-color: rgba(133, 180, 193, 0.3);
    --theme--vip-2-circle-color: #D0AF78;
    --theme--vip-2-external-circle-color: rgba(208, 175, 120, 0.3);
    --theme--vip-3-circle-color: #211917;
    --theme--vip-3-external-circle-color: rgba(33, 25, 23, 0.3);
    --theme-vip-level-text-color: rgba(153, 153, 153, 0.5);
    --theme-level-info-vip2-color: #946110;
    --theme-progress-bar-color: #FFC9C6;
    --theme-progress-bar-start-color: #FFC580;
    --theme-progress-bar-end-color: #FF889C;
    --theme-split-line-color: #E3E4E5;
    --theme-primary-base-hover: #695147;
    --theme-accent-base-hover: #FF9999;
    --theme-semi-accent-base-hover: #FCD874;
    --theme-skeleton-base-1: #e0e0e0;
    --theme-skeleton-base-2: #e6e6e6;
    /* 颜色变量 */

    --aqua-blue:#3998aa;
	--black:#000000;
	--blue:#5fc5cf;
	--blush:#fbecde;
	--blush:#fbecde;
	--blushing-pink:#f4ccc5;
	--blush-pink:#f4ccc5;
	--brown:#5f4d3a;
	--burgundy:#481c30;
	--burnt-orange:#8d4833;
	--cabernet:#2f0610;
	--candy-pink:#F5B2C0;
	--celadon:#ace1af;
	--champagne:#e9d2ac;
	--charcoal-gray:#49413F;
	--chocolate:#322928;
	--coral:#fda987;
	--daffodil:#fff88b;
	--dark-navy:#262731;
	--dark-royal-blue:#070e41;
	--dusty-blue:#798b9a;
	--dusty-rose:#b2797f;
	--emerald-green:#00685d;
	--fuchsia:#c83173;
	--gold:#f2b45e;
	--grape:#381732;
	--green-black:#183425;
	--ink-blue:#083644;
	--jade:#14837c;
	--lavender:#58418c;
	--light-blue:#aad6e5;
	--lilac:#c9abe8;
	--mist-blue:#a8d6e0;
	--mulberry:#8a0a4a;
	--ocean-blue:#0075a6;
	--orange:#ee830e;
	--orchid:#471740;
	--papaya:#ca4731;
	--pearl-pink:#cfa38d;
	--petal:#ffddd8;
	--plum:#633267;
	--red:#ff0000;
	--royal-blue:#052769;
	--sage:#93bca0;
	--silver:#c3c3c3;
	--sky-blue:#afc6d2;
	--spa:#9cd8ce;
	--stormy:#384250;
	--tahiti:#684f84;
	--taupe:#847869;
	--white:#ffffff;
	--wine-red:#58191f;
	--wisteria:#6e6585;
	--yellow:#fff2ab;
	--canary:#f2ecb2;
	--dark-green:#2b4939;
	--dusk:#745d6b;
	--dusty-pink:#bb9495;
	--dusty-purple:#95809f;
	--dusty-sage:#91baa4;
	--eucalyptus:#759d82;
	--gray:#696c7f;
	--green:#008000;
	--hot-pink:#e395c5;
	--hunter-green:#355e3b;
	--ivory:#f5f5ec;
	--jay-blue:#274995;
	--light-burgundy:#65112b;
	--light-champagne:#f0dfc3;
	--light-gray:#d2d0c5;
	--light-pink:#faddd7;
	--light-purple:#8c83c8;
	--light-royal-blue:#2c4192;
	--mauve:#d7a3be;
	--mint-green:#9be8d8;
	--mist:#c2ded2;
	--mustard-yellow:#c9913c;
	--navy-blue:#252d50;
	--off-white:#f8f7f2;
	--olive-green:#627d54;
	--peach:#f9d8b3;
	--peach-fuzz:#f0c6a2;
	--peach-pink:#f3dac4;
	--peacock:#025869;
	--pink:#f9e4e4;
	--purple:#36255b;
	--regency:#342c51;
	--rust:#68332d;
	--sage-green:#bcb88a;
	--salmon:#faa68e;
	--silver-gray:#746f73;
	--slate-blue:#5b7c99;
	--slate-gray:#708090;
	--steel-blue:#7087b4;
	--steel-grey:#71797e;
	--tangerine:#ffa500;
	--teal:#008080;
	--turquoise:#53b3b2;
	--vermilion:#e34234;
	--vintage-mauve:#c292a1;
	--wasabi:#accbb4;
	--cinnamon-rose:#70363b;
	--pool:#1594a7;
	--dark-red:#840000;
	--dusk:#554551;
	--ivory:#f7f2e4;
	--regency:#240076;
	--watermelon:#ea848f;
	--khaki:#c3b091;
	--emerald:#00685d;
    --rose-gold: #DEA193;
    --paprika: #C75b44;
}

/* 定义 Thin 字重 */
@font-face {
    font-family: Gotham;
    font-weight: 300;
    font-style: normal;
    src: url('./fonts/Gotham-Book.otf') format('opentype');
}

/* 定义 Medium 字重 */
@font-face {
    font-family: Gotham;
    font-weight: 400;
    font-style: normal;
    src: url('./fonts/Gotham-Medium.otf') format('opentype');
}

/* 定义 Medium 字重 */
@font-face {
    font-family: Gotham;
    font-weight: 500;
    font-style: normal;
    src: url('./fonts/Gotham-Medium.otf') format('opentype');
}

/* 定义 Bold 字重 */
@font-face {
    font-family: Gotham;
    font-weight: 700;
    font-style: normal;
    src: url('./fonts/Gotham-Bold.otf') format('opentype');
}

@font-face {
    font-family: BlackerProDisplayLight;
    font-style: normal;
    src: url('./fonts/BlackerProDisplayLight.otf') format('opentype');
}

body {
    font-family: Gotham, Microsoft YaHei, sans-serif;
    /* 默认使用 medium */
    color: #5c3c30;
}

html {
    /* scroll-behavior: smooth; */
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
    color: var(--theme-primary-base);
}

ul,
li,
p {
    margin: 0;
    padding: 0;
}

input,
textarea,
select {
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--theme-border-base) !important;
}

input[type="checkbox"] {
    cursor: pointer;
    border-radius: 0;
    width: 16px;
    height: 16px;
    border-width: 1px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border: 1px solid #555;

}

input[type="checkbox"]:checked {
    background: url(./images/yes.svg);
}

input:hover,
textarea:hover,
select:hover,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--theme-primary-base) !important;
}

button {
    padding: 0;
}

.select2-selection--single {
    border-radius: 0 !important;
}

input.select2-search__field {
    border-color: var(--theme-border-base);
    background-color: white !important;
}

.hover-item:hover {
    opacity: 0.9;
}

a:focus {
    outline: none;
}

.underline-hover:hover {
    cursor: pointer;
    position: relative;
}

.underline-hover:hover::after {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 2px;
    background: #FF7176;
}

select {
    color: var(--theme-primary-base);
    background-color: #fff;
    border: 1px solid var(--theme-border-base);
    background-image: none;
    border-radius: 0;
    outline: none;
}

/* 评分颜色 */
.star-rating span:before {
    color: #f0bd47 !important;
}

p.stars.selected a.active:before,
p.stars:hover a:before,
p.stars.selected a:not(.active):before,
p.stars.selected a.active:before {
    color: #f0bd47 !important;
}

/* 隐藏edit */
.post-edit-link,
.edit-link {
    display: none;
}

/* 按钮样式 */
.wp-element-button {
    background-color: var(--theme-primary-base) !important;
    text-decoration: initial !important;
    outline: none !important;
    box-shadow: none !important;
}

.wp-element-button:hover {
    background-color: var(--theme-primary-base-hover);
}

/* tippy全局样式 */
[data-tippy-root] .tippy-box {
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: var(--theme-primary-base);
}

[data-tippy-root] .tippy-arrow {
    color: white;
}