/* Generic 
-------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&family=Noto+Sans+TC:wght@400;500&display=block');
body {
	font-family: 'Noto Sans TC', sans-serif;
	color: #676767 /*{1. Body | Text colour}*/;
}
a, a:hover, a:active, .btn-link, .btn-link:hover {
	color: #4f4f4f /*{1. Body | Link colour}*/;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h5, .h6 {
	font-family: 'Comfortaa', sans-serif /*{1. Body | Header font family}*/;
	font-weight: 700;
}
/* Header 
-------------------------------*/
header {
	background-color: #ffffff /*{2. Header | Background colour}*/;
}
header .header-topbar {
	border-bottom: 1px solid;
	border-color: #f3f3f3 /*{2. Header | Top bar border colour}*/;
}
header .header-topbar .navbar-nav a {
	color: #7a7a7a /*{2. Header | Topbar link colour}*/;
}
.header-menu {
	background-color: rgba(8, 88, 53, 1) /*{2. Header | Menu background colour}*/;
}
.header-menu .navbar-nav > li > a,
.navbar-mobile a.nav-link {
	color: rgba(255, 255, 255, 1) /*{2. Header | Menu link colour}*/;
}
header .btn-header i {
    color: #68615c /*{2. Header | Account/Cart/Search Icon colour}*/;
}
header .btn-header {
	color: #676767 /*{2. Header | Account/Cart/Search Link colour}*/;
}
/* Footer 
-------------------------------*/
.wrapper-footer {
	background-color: rgba(0, 155, 61, 1) /*{3. Footer | Background color}*/;
}
.wrapper-footer h4 {
	color: rgba(255, 230, 0, 1) /*{3. Footer | Heading colour}*/;
}
.wrapper-footer a, 
.wrapper-footer a:hover, 
.wrapper-footer a:active,
.wrapper-footer * {
	color: rgba(255, 255, 255, 1) /*{3. Footer | Text colour}*/;
}
footer .nav.list-social i {
    color: #f9c226 /*{3. Footer | Social icon colour}*/;
}
/* Buttons 
-------------------------------*/
/* Secondary button */
.btn-outline-secondary, .btn-default {
	color: #333333 /*{4. buttons | default-btn-text-colour}*/;
	background-color: #ffffff /*{4. buttons | default-btn-background-colour}*/;
	border-color: #cccccc /*{4. buttons | default-btn-border-colour}*/;
}
.btn-outline-secondary:hover, .btn-default:hover,
.btn-outline-secondary.disabled, .btn-default:disabled,
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle, .btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active, .show > .btn-default.dropdown-toggle {
	color: #333333 /*{4. buttons | default-btn-text-colour-hover}*/;
	background-color: #ebebeb /*{4. buttons | default-btn-hover-background-colour}*/;
	border-color: #adadad /*{4. buttons | default-btn-hover-border-colour}*/;
}
/* Primary button */
.btn-primary {
	color: #000000 /*{4. buttons | primary-btn-text-colour}*/;
	background-color: rgba(255, 230, 0, 1) /*{4. buttons | primary-btn-background-colour}*/;
	border: 0;
}
.btn-primary:hover,
.btn-primary.disabled, .btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
	color: rgba(255, 255, 255, 1) /*{4. buttons | primary-btn-hover-text-colour}*/;
	background-color: rgba(107, 196, 205, 1) /*{4. buttons | primary-btn-hover-background-colour}*/;
}
/* Success button */
.btn-success {
	color: #f9c226 /*{4. buttons | success-btn-text-colour}*/;
	background-color: #403c36 /*{4. buttons | success-btn-background-colour}*/;
	border: 0;
}
.btn-success:hover,
.btn-success.disabled, .btn-success:disabled,
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle {
	color: #f9c226 /*{4. buttons | success-btn-hover-text-colour}*/;
	background-color: #312e2a /*{4. buttons | success-btn-hover-background-colour}*/;
}
/*from makura*/
.color-swatch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: 4px;
    border-radius: 50%;
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid #ccc;
    transition: 0.2s ease;
}
/* hide radio */
.color-swatch input[type="radio"] {
    display: none;
}
/* hover (only when NOT selected) */
.color-swatch:hover {
    transform: scale(1.08);
    border-color: #888;
    box-shadow: 0 0 0 2px #0001;
}
/* active/selected state */
.color-swatch:has(input[type="radio"]:checked) {
    border-color: #000;
    box-shadow: 0 0 0 3px #0003;
    transform: scale(1.1);
}
/* cancel hover effect when selected */
.color-swatch:has(input[type="radio"]:checked):hover {
    transform: scale(1.1); /* same as active */
    border-color: #000;
    box-shadow: 0 0 0 3px #0003;
}
/* To hide the Stock Text- Availability in Product Detail page*/
.badge[itemprop="availability"] {
    display: none;
}