/*
Theme Name: DMT Store Front
Theme URI: https://refreshtodeath.com
Author: Brian Bartholomew
Author URI: https://refreshtodeath.com
Description: DMT Store Front
Version: 1.0
License: GPL-2.0+
*/

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

html, body {
  font-family: "Hedvig Letters Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

a {
	color: #000;
}

a:hover {
	text-decoration: none;
}

.wc-block-components-button, .single_add_to_cart_button, .woocommerce ul.products li.product .button {
    background-color: #000 !important;
    color: #ffffff !important;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border 0.2s ease-in-out;
    outline: solid 1px #000;
}

.wc-block-components-button:hover, .single_add_to_cart_button:hover, .woocommerce ul.products li.product .button:hover {
    background-color: #ffffff !important;
    color: #000 !important;
}

.woocommerce ul.products li.product .button {
	border-radius: 3px;
	box-shadow: none;
	text-decoration: none;
	padding: calc(.667em + 2px) calc(1.333em + 2px);	
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

body {
    margin: 0;
    padding: 0;
}

header {
	background: #000;
	padding: 20px;
}

header img {
	margin: 0 auto;
	width: 150px;
}

header a {
	color: #fff;
	font-size: 14px;
}

.header-nav {
	display: flex;
	align-items: center;
}

.header-nav__social {
	display: flex;
	font-size: 18px;
	gap: 10px;
}

.header-nav .menu-main-menu-container {
	margin-left: auto;
}

.header-nav .menu-main-menu-container ul {
	display: flex;
	gap: 10px;
}

.header-nav .menu-main-menu-container ul li {
	color: #fff;
	list-style: none;
}

.header-nav .menu-main-menu-container ul li a {
	font-size: 16px;
	text-decoration: none;
}

.header-nav .menu-main-menu-container ul li a:hover {
	text-decoration: underline;
}

footer {
	background: #000;
	color: #fff;
	margin-top: 20px;
	padding: 30px;
	text-align: center;
}

.container {
	margin: 0 auto;
	max-width: 90%;
	padding: 20px 0;
}

.page-title, .woocommerce-result-count, .woocommerce-ordering, .woocommerce-tabs, .product_meta {
	display: none;
}

.products .product {
	text-align: center;
}

.woocommerce-container {
	padding: 30px 0;
}

.related {
	border-top: solid 1px #000;
	clear: both;
	padding-top: 15px;
}

.products .product .woocommerce-loop-product__link {
	color: #000;
	text-decoration: underline;
}

/* Hide on mobile (up to 768px) */
.hide-mobile {
  display: none !important;
}

/* Show only on mobile (up to 768px) */
.show-mobile {
  display: block !important;
}

.product .summary .product_title, .product .summary p.price, .product .single_variation {
	margin-bottom: 15px;
}

.product .summary .variations {
	text-align: left;
}

.product .single_varation_wrap {
	display: block;
}

.product .woocommerce-variation-add-to-cart {
	display: flex;
}

.product .quantity input {
	padding: 3px 5px;
}

.product .variations select {
	border: solid 1px #000;
	border-radius: 5px;
}

/* Media queries for non-mobile (tablet and up) */
@media (min-width: 768px) {
	.hide-mobile {
	display: block !important; /* show on tablet+ */
	}
	
	.show-mobile {
	display: none !important;  /* hide on tablet+ */
	}
	header img {
		width: 200px;
	}  
	
	.header-nav a {
		font-size: 22px;
	}
}

.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 {
	margin-bottom: 10px;
}

.page-content p {
	margin-bottom: 15px;
}

.product-long-description {
	margin-bottom: 15px;
}