/*
File Name       :    Root CSS
Created by      :    Pauline Thelliez
For the website :    Clays Shooting 
*/
@font-face {
	font-family: 'Manrope-Regular';
	src: url('../fonts/Manrope-Regular.woff') format('woff');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'Manrope-SemiBold';
	src: url('../fonts/Manrope-SemiBold.woff') format('woff');
	font-weight: 600;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'Manrope-Bold';
	src: url('../fonts/Manrope-Bold.woff') format('woff');
	font-weight: 700;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Libre Baskerville';
	font-style: normal;
	font-weight: normal;
	src: local('Libre Baskerville'), url('LibreBaskerville-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Libre Baskerville Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Libre Baskerville Italic'), url('LibreBaskerville-Italic.woff') format('woff');
}

@font-face {
	font-family: 'Libre Baskerville Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Libre Baskerville Bold'), url('LibreBaskerville-Bold.woff') format('woff');
}
:root {
	/*Color*/
    --ultra:#181a1b;
	--dark: #172728;
	--light: #ffffff;

	/*Size*/
	--d-h1: 95px;
	--d-h2: 60px;
	--d-h3: 48px;
	--d-h4: 34px;
	--d-h5: 24px;
	--d-h6: 20px;

	--m-h1: 45px;
	--m-h2: 40px;
	--m-h3: 32px;
	--m-h4: 25px;
	--m-h5: 20px;
	--m-h6: 18px;

	--size-txt-button: 20px;
	--subhead: 20px;
	--body-text-1: 22px;
	--body-text-2: 16px;

	/*Font*/
	--font-button: 'Libre Baskerville Regular', 'Times New Roman', serif;
	--title: 'Libre Baskerville Regular', 'Times New Roman', serif;
	--prg: 'Manrope-Regular', sans-serif;

}

@media (max-width: 992px) {
	h1 {
		font-size: var(--m-h1) !important;
	}
	h2 {
		font-size: var(--m-h2) !important;
	}
	h3 {
		font-size: var(--m-h3) !important;
	}
	h4, .single-product h1{
		font-size: var(--m-h4) !important;
	}
	h5 {
		font-size: var(--m-h5) !important;
	}
	h6 {
		font-size: var(--m-h6) !important;
	}
}
@media (min-width: 993px) {
	h1 {
		font-size: var(--d-h1) !important;
	}
	h2 {
		font-size: var(--d-h2) !important;
	}
	h3, .single-product h1 {
		font-size: var(--d-h3) !important;
	}
	h4{
		font-size: var(--d-h4) !important;
	}
	h5, .h4-cj  {
		font-size: var(--d-h5) !important;
	}
	h6 {
		font-size: var(--d-h6) !important;
	}
}
html,
body {
	background-color: var(--dark);
	color: var(--light);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--title);
	font-weight: 500;
	text-transform: uppercase;
}
p {
	font-family: var(--prg);
	font-size: var(--body-text-2);
	font-weight: 200;
	letter-spacing: 0.5px;
}

a {
	text-decoration: none;
}
.subheader, div.subheader p {
	font-size: var(--subhead)!important;
	font-weight: 700!important;
	font-family: var(--prg)!important;
}
.bt1 {
	font-size: var(--body-text-1);
}
.txt-light {
	color: var(--light);
}
.txt-dark {
	color: var(--dark);
}
.txt-center{
	text-align: center;
}

.none {
	display: none;
}
.m-auto{
    margin: auto;
}
@media (max-width: 765px) {
	.d-none-sm {
		display: none;
	}
    .d-flex-sm {
		display: flex;
	}
    .m-auto-sm{
        margin: auto;
    }
}

@media (min-width: 766px) {   
	.d-none-lg{
		display: none;
	}
    .d-flex-lg{
		display: flex;
	}
}

/*Button*/
.btn, .wc-block-cart__submit-button, .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button{
	text-transform: uppercase;
	font-family: var(--font-button)!important;
	font-size: var(--m-h6);
	padding: 22px 50px;
	border: none;
	height: fit-content;
    width: fit-content;
	transition: all 0.5s;
	position: relative;
}
.btn-border{
    border: var(--dark) solid 2px !important;
    background-color: transparent !important;
    display: flex !important;
    gap: 15px;
    color: var(--dark) !important;
}
.btn-light,
.wc-block-cart__submit-button,
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button{
    color: var(--dark)!important;
    background-color: var(--light)!important;
}
.btn-dark{
    color: var(--light);
    background-color: var(--dark);
	border: none!important;
}
.btn-effect{
	cursor: pointer;
}
.btn-effect::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition: all 0.6s;
}
.btn-effect:hover::before {
	background-color: rgba(255,255,255,0.1);
	transform: scale(0);
}
.btn-light::after,
.wc-block-cart__submit-button::after,
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
	border: 1px solid rgba(255,255,255, 0.5);
	transform: scale(1.2,1.2);
}

.btn-light:hover::after, 
.wc-block-cart__submit-button:hover::after,
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button:hover::after {
	opacity: 1;
	transform: scale(1,1);
}

.price{
	font-family: "Manrope-Bold", sans-serif;
	font-weight: 900;
	font-size: 35px;
}
.quantity{
	max-width: 60px;
	min-height: 60px;
}
.action{
	display :flex;
	align-items: center;
    justify-content: space-around;
    gap: 15px;
}.site .button:focus, button:focus, input[type=submit]:focus, input[type=reset]:focus, .wp-block-search .wp-block-search__button:focus, .wp-block-button .wp-block-button__link:focus, .wp-block-file a.wp-block-file__button:focus{
	outline: none;
	outline-offset:0
}

/*Woocommerce message*/
@media only screen and (max-width: 768px) {
    .woocommerce-error li, .woocommerce-info, .woocommerce-message {
        padding: 1rem 1.5rem;
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

.price {
	font-size:16px!important
}
.wp-singular .woocommerce-variation-price .price{
	font-size:35px!important
}
.wp-singular .summary.entry-summary{
	margin-bottom: 3rem;
}
.wc-block-components-product-details span{
font-size:16px!important
}

}