@font-face {
  font-family: Charter; /* set name */
  src: 
  url(fonts/charter/ttf/Charter\ Regular.ttf) format(truetype),
  url(fonts/charter/otf/Charter\ Regular.ttf) format(opentype),
  url(fonts/charter/webfonts/charter_regular-webfont.woff) format(woff);
  font-weight:400;
}

@font-face {
  font-family: OpenSans; /* set name */
  src: 
  url(fonts/open-sans/OpenSans-Regular.ttf) format(truetype);
  font-weight:400;
}

:root {
    --primary-color: #333333;
    --secondary-color: #555555;
    --spec-font-family: Charter, Times, Georgia;
    --font-family: OpenSans, Arial, Veranda;
    --font-size-base: 16px;
    --line-height-base: 1.5;
    --spacing-unit: 8px;
}

body {
    font-family:var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--primary-color);
    margin: 0;
    padding: 0;
}

a {
    text-decoration:none;
    outline:none;
    color:var(--primary-color)
}

strong {
    font-weight: 700;
}
.flex {
    display: flex;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--spec-font-family);
    font-weight: bold;
    line-height:1;
}

h1 {
    font-size:44px;
}
h2 {
    font-size:34px;
}
h3 {
    font-size:24px;
}
h4 {
    font-size:20px;
}
h5 {
    font-size:18px;
}
h6 {
    font-size:16px;
}

nav {
    font-family: var(--spec-font-family);
}

.spec-text {
    font-family: var(--spec-font-family);
}

.cont, #container {
    max-width:1300px;
    margin:0 auto;
    padding:0 20px;
}

/* Header Styling */
#branding {
    padding-top:40px;
    padding-bottom:20px;
}
#site-title {
    text-align:center;
}

img.sitelogo {
    max-width:300px;
    height:auto;
}

nav#menu {
    border-top:1px solid #eaeaea;
    border-bottom:1px solid #eaeaea;
    padding:10px 20px;
    margin-bottom:40px;
}
nav#menu ul.menu {
    display:flex;
    justify-content:center;
    gap:100px;
}

nav span.page-label {
    font-family:var(--font-family);
    float:left;
    font-size:12px;
    font-weight:bold;
    padding-top:3px;
}

#mobile-menu-toggle {
    display:none;
    width:30px;
    height:30px;
    background:url("/wp-content/themes/ksshop_theme/imgs/menu-open.svg") no-repeat;
    background-size:cover;
    background-position:center center;
    cursor:pointer;
    position:absolute;
    right:20px;
}

#mobile-menu-toggle.active {
    display:block;
    width:30px;
    height:30px;
    background:url("/wp-content/themes/ksshop_theme/imgs/menu-close.svg") no-repeat;
    background-size:cover;
    background-position:center center;
}

/* Footer */

footer#footer {
    justify-content: space-between;
    align-items: center;
    background:#111;
    padding-top:10px;
    padding-bottom:10px;
    color:#fff;
    margin-top:80px;
    font-size:12px;
}

footer#footer nav ul {
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

footer#footer nav ul li a{
    color:#ffffff;
    font-family: var(--font-family);
    font-size:12px;
}

.footer-logo {
    text-align:center;
}

/* Body Styling */

.collection-heading {
    text-align: center;
    margin-bottom: 60px;
}

.collection-heading h2 {
    font-size:18px;
    font-weight:bold;
    margin-bottom:5px;
}

.collection-heading span {
    font-size:14px;
}

/* Product Grid */
.product-grid {
    gap:2%;
    justify-content: center;
    margin-bottom:40px;
    align-items: flex-start;
}

.product-grid .product-item, .product-grid .promo-item {
    width:30%;
    flex-basis:30%;
    max-width:30%;
    min-width:200px;
    position:relative;
}

.product-grid .product-item .img-wrapper {
    background:#eaeaea;
    display:block;
    padding:40px;
    margin-bottom:40x;
}

.product-grid .product-item .img-wrapper img, .product-grid .promo-item img {
    width:100%;
}

.product-item a img, .promo-item a img {
   display:block;
   width:100%;
}

.product-overlay {
    position:absolute;
    top:0px;
    left:0px;
    justify-content: space-between;
    width:100%;
    padding:10px 20px 0px 20px;
}

.product-overlay .col-name {
    writing-mode: vertical-lr;
    width:30px;
    text-align:left;
    font-size:12px;
    font-weight: 600;
    color:#333;
}

.product-overlay .heart-fav {
    width:20px;
    height:20px;
    background-image:url(/wp-content/themes/ksshop_theme/imgs/heart.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
}

.product-title, .product-price {
    display:block;
    margin-top:10px;
    font-size:14px;
}

.product-grid .promo-item {
    overflow: hidden;
    outline: 1px solid #eaeaea;
}

.prod-2 .product-item {
    margin-top:40px;
}

/* Forms */
input[type="text"], input[type="search"], input[type="select"] {
  border: 1px solid #111;
  border-radius: 3px;
  font-size: 16px;
  padding: 5px;
}
input[type="submit"], button {
  padding: 8px;
  border: none;
  background: #111;
  color: #fff;
  min-width: 60px;
  border-radius: 3px;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}


/* 404 page */
body.error404 div#wrapper div#container,
body.search div#wrapper div#container
{
    text-align:center;
}

body.error404 div#wrapper div#container h1,
body.search div#wrapper div#container h1
 {
    margin-bottom:20px;
}

body.error404 div#wrapper div#container form.search-form,
body.search div#wrapper div#container form.search-form
{
    margin-top:20px;
}

/* WooCommerce Modifications */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    display:flex;
    justify-content: space-between;
    gap:80px;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image{
	width:100%;
	max-width:400px;
}

.woocommerce div.product > div {
    float:unset !important;
}
.woocommerce div.product div.images, .woocommerce div.product .summary {
    width:100% !important;
}

.woocommerce div.product .summary { 
    display:flex;
    gap:20px;
    font-size:14px;
    align-items:center;
    border-bottom:1px solid #eaeaea;
    padding-bottom:20px;
}

.woocommerce div.product h1.product_title {
    font-size:14px;
    font-weight:normal;
    font-family:var(--font-family);
}

/* Single Product */
.woocommerce .woocommerce-product-details__short-description {
    display:none;
}

.woocommerce .summary .product_meta {
    display:none;
}

.woocommerce .woocommerce-breadcrumb {
    display:none;
}

.woocommerce .summary form,
.woocommerce .summary form .single_variation_wrap,
.woocommerce .summary form .single_variation_wrap .variations_button,
.woocommerce .summary form table.variations tbody {
    display:flex;
    align-items:center;
    margin-bottom:0px !important;
    gap:10px;
}

.woocommerce .summary form table.variations {
    margin-bottom:0px !important;
}

.woocommerce .summary form table.variations tbody tr {
    position:relative;
    margin-right:20px;
    width:60px;
    overflow:hidden
}
.woocommerce .summary form table.variations tbody tr:last-child {
    margin-right:0px;
}

.woocommerce .summary form table.variations tbody td {
    position:absolute;
    top:0;
}

.woocommerce .summary form table.variations tbody td select {
    padding-top:30px;
    border:none;
    cursor:pointer;
}

.woocommerce .summary form table.variations tbody tr th:before {
  content:'+';
  display:inline-block;
  margin-right:5px;
  font-weight:bold;
}

.woocommerce .summary form .single_variation_wrap .single_variation {
    min-width:80px;
}

.woocommerce .summary form .single_variation_wrap .variations_button {
    min-width:170px;
}

.woocommerce div.product p.price {
    color:#111111;
}

.woocommerce button {
    background:#111111 !important;
    color:#fff !important;
    text-transform:uppercase;
    font-weight:normal !important;
    font-size:12px !important;
    line-height:22px !important;
}

.woocommerce button:hover {
    background:#333333 !important;
    color:#fff !important;
}

.woocommerce-tabs {
    margin-left:20px
}

.woocommerce-Tabs-panel {
    margin-left:20px !important;
}

.woocommerce-Tabs-panel, .woocommerce-Tabs-panel p, .woocommerce-Tabs-panel li {
    font-size:12px;
}

.woocommerce-Tabs-panel h2 {
    margin-bottom:20px;
    font-size:22px;
}

.woocommerce-Tabs-panel h2:first-child {
    display:none;
}

.woocommerce-Tabs-panel h2, 
.woocommerce-Tabs-panel h3,
.woocommerce-Tabs-panel h4,
.woocommerce-Tabs-panel h5,
.woocommerce-Tabs-panel h6{
    font-family:var(--font-family);
}

.woocommerce-Tabs-panel p, .woocommerce-Tabs-panel ul {
    margin-bottom:20px;
}

.woocommerce-Tabs-panel ul {
    list-style-type:disc;
    margin-left:10px;
    margin-top:-10px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li:before,
.woocommerce div.product .woocommerce-tabs ul.tabs:after,
.woocommerce div.product .woocommerce-tabs ul.tabs li:after {
    border:none;
    box-shadow:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background:none;
    font-size:14px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
    border-bottom:1px solid #333333;
    border-bottom-color:#333333 !important;
}