/*
		SPACING SYSTEM (px)
		2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

		FONT SIZE SYSTEM (px - rem use dp)
		10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

		MAIN COLOR: #C9A227 
		MAIN DARK COLOR: #A8821E 
		SECONDARY/ACCENT COLOR: #1F3D2B 
		
		Background: #FFF8E6
		Text: #14110B
		Muted text: #7A664A 

*/

:root{
	
	/* --- main colors */
	

  --color-primary-lightest: #efe3be;
  --color-primary-light: #dfc77d;
  --color-primary: #C9A227;
  --color-primary-dark: #B8860B;
  --color-primary-darkest: #A8821E;

		
	/* --- Accent --- */
	
  /* --color-secondary: #1F3D2B; */
  --color-secondary: #384B30;
  --color-secondary-light: #9ca598;
	
	--color-surface-layer: #FFFBF2; 
  --color-border: #E9DEC8;
	
		
	/* -- Background Colors */
	
	
  --color-bg: #FFF8E6;
	--color-dk-bg:#333;	
	
	
	/* --- font colors */
	
	
  /* --color-text: #141004; */
	
  --color-text: #282008;
	--color-text-primary:#141004;
	--color-text-primary-light:#faf6e9;
	--color-text-secondary: #060c09;
  --color-text-white: #fff;
  --color-text-muted: #7A664A;
  --color-text-muted-dk: #62523b;
  --color-text-muted-lt: #a29480;
	
	
	/* --- font sizes */
	
	
  --text-h1: 5.6rem;
  --text-h2: 4.0rem;
  --text-h3: 2.8rem;
  --text-h4: 2.2rem;
  --text-xxxlg: 3.6rem;
  --text-xx-med-lg: 3.2rem;
  --text-xxlg: 2.6rem;
  --text-xlg: 2rem;
  --text-lg: 1.8rem;
  --text-body: 1.6rem;
  --text-small: 1.4rem;
  --text-xsmall: 1.0rem;
	
		
	/*---- Spacing  */
	
	
  --line-heading: 1.15;
	--line-body: 1.6;
	
	--space-0_5: .5rem;
	--space-1: .8rem;
  --space-2: 1.6rem;
  --space-3: 2.4rem;
  --space-3_5: 2.8rem;
  --space-4: 3.2rem;
  --space-5: 4.8rem;
  --space-6: 6.4rem;
	
	
	/*---- Layout  */
	
	--container-sm: 108rem;
	--container-md: 120rem; /* main */
	--container-lg: 130rem;
	--container-xl: 150rem;

  --pad-page: 2.4rem;
  --radius: 1.2rem;
	
	
	/*---- Margins  */
	
  --mrg-xsm: .75rem;
  --mrg-sm: 1.2rem;
  --mrg-nrm: 1.8rem;
  --mrg-med: 2.4rem;
  --mrg-medLg: 3.2rem;
  --mrg-lg: 4.0rem;
  --mrg-lger: 5rem;
  --mrg-xlg: 6.4rem;
  --mrg-xxlg: 8.2rem;
  --mrg-xxxlg: 10rem;

	
	
	/* -- box shadow */
	
  --shadow-sm: 0 1px 2px rgba(20, 17, 11, 0.10);
  --shadow-md: 0 4px 12px rgba(20, 17, 11, 0.11);
  --shadow-lg: 0 8px 24px rgba(20, 17, 11, 0.13);
  --shadow-xlg: 1px 10px 30px rgba(20, 17, 11, 0.25);
  --shadow-xxlg: 2px 12px 40px rgba(20, 17, 11, 0.35);
	
}



/* ---------- Google fonts ------------- */


/*// SEE README FILE FOR FONT IMPLEMENTATION - AND ChatGPT-PUG TEMPLATES */


/* /// rubik */

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-Light.woff2') format('woff2');
}

@font-face {
	font-family: 'Rubik';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-LightItalic.woff2') format('woff2');
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Rubik';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-Italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-Medium.woff2') format('woff2');
}

@font-face {
	font-family: 'Rubik';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-MediumItalic.woff2') format('woff2');
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-SemiBold.woff2') format('woff2');
}

@font-face {
	font-family: 'Rubik';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-ExtraBold.woff2') format('woff2');
}

@font-face {
	font-family: 'Rubik';
	font-style: italic;
	font-weight: 800;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-ExtraBoldItalic.woff2') format('woff2');
}



/*/// PlayFair Display */




@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/img/fonts/playfair/PlayfairDisplay-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/img/fonts/playfair/PlayfairDisplay-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/img/fonts/playfair/PlayfairDisplay-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/img/fonts/playfair/PlayfairDisplay-MediumItalic.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/img/fonts/playfair/PlayfairDisplay-SemiBoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/img/fonts/playfair/PlayfairDisplay-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/img/fonts/playfair/PlayfairDisplay-BoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/img/fonts/playfair/PlayfairDisplay-ExtraBold.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/img/fonts/playfair/PlayfairDisplay-ExtraBoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("/img/fonts/playfair/PlayfairDisplay-BlackItalic.woff2") format("woff2");
}


 /*// Cairo */
 
 
 
 @font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/img/fonts/cairo/Cairo-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/img/fonts/cairo/Cairo-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/img/fonts/cairo/Cairo-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/img/fonts/cairo/Cairo-Bold.woff2') format('woff2');
}



/* // Inter */


/* Inter (18pt) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/img/fonts/inter/Inter_18pt-Thin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/img/fonts/inter/Inter_18pt-ExtraLight.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/img/fonts/inter/Inter_18pt-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/img/fonts/inter/Inter_18pt-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/img/fonts/inter/Inter_18pt-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/img/fonts/inter/Inter_18pt-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/img/fonts/inter/Inter_18pt-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/img/fonts/inter/Inter_18pt-ExtraBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/img/fonts/inter/Inter_18pt-Black.woff2') format('woff2');
}




/* ------------------- Generic CSS -------------------- */


/* //		Generic styles 	// */


*,
*::before,
*::after {
	
  margin: 0;
  padding: 0;
  box-sizing: inherit;
	
}


html {
	
  font-size: 62.5%;
  box-sizing: border-box;

}


body{
	
	line-height: 1;			
	
	font-family:'Inter' , 'Rubik', serif;
	/* font-family: 'Rubik', serif; */
	
	/* font-family: "Cairo", serif; */
	
	/* //		Stretched Footer to bottom  */
	
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	
	color: var(--color-text)
	
}

/* //	Ensure main added on every page  */

main{
	
	display: flex;
	flex-direction: column;
	flex:1;
	width: 100%;
	
}

/* //	Add this class to div wrapper around block content   */

.tailwind_stretch{
	
	display: flex;
	flex-direction: column;
	flex:1;
	min-height: 0;
}


h1, h2, h3,h4{
	
	line-height: 1;		
  /* font-family: "Playfair Display", serif; */
  font-family: "Cairo", serif;
}


.sm-container,
.container,
.med-container,
.wide-container {
	
  margin: 0 auto;	
}

.sm-container { max-width: var(--container-sm); }

.container    { max-width: var(--container-md); }

.med-container{ max-width: var(--container-lg); }

.wide-container{ max-width: var(--container-xl); }


/*/------------	 Helpers  -----------/*/


.two-col-grid{
	
	
	display: grid;
	
	grid-template-columns: 1fr 1fr;
}



/* // Heading helpers */


.heading_big--center{
  font-size: var(--text-h2);
  text-align: center;
  line-height: var(--line-heading);
}

.heading_med--center{
  font-size: var(--text-h3);
  text-align: center;
  line-height: var(--line-heading);
}

.heading_sm--center{
  font-size: var(--text-h4);
  text-align: center;
  line-height: var(--line-heading);
}

.heading_med{
  font-size: var(--text-h3);
  line-height: var(--line-heading);
}

.heading_sm{
  font-size: var(--text-h4);
  line-height: var(--line-heading);
}


.muted-text{
	color: var(--color-text-muted);
}

/* // Margin Bottom helpers */


.mrgbtm--sm  { margin-bottom: var(--space-0_5); } /* 12px */
.mrgbtm--med { margin-bottom: var(--space-3); }   /* 24px */
.mrgbtm--lg  { margin-bottom: var(--space-3_5); } /* 40px */
.mrgbtm--xlg { margin-bottom: var(--space-6); }   /* 64px */



/* // Viewport helpers */


.full-vh{
	
	min-height: 100vh;
}



.eighty-vh{
	
	min-height: 80vh;
}


.seventy-five-vh{
	
	min-height: 75vh;
}


.seventy-vh{
	
	min-height: 70vh;
}

.sixty-five-vh{
	
	min-height: 65vh;
}


.sixty-vh{
	
	min-height: 60vh;
}

.fifty-vh{
	
	min-height: 50vh;
}


.forty-vh{
	
	min-height: 40vh;
}


/* // section divider */


.section-divider--middle {
	
	height: 1px;
	border: 0;
	margin: 0 0 6rem;
	
	background: linear-gradient(
	 to right,
	 transparent,
	 rgba(201,155,40,.2),
	 transparent
	);
	
}

.section-divider {
	
  height: 1px;
  border: 0;
	margin: 0 0 6rem;

  background: linear-gradient(
    to right,
    transparent,
    rgba(201,155,40,.3),
    transparent
  );

}





/* //		Links with Lucide Icons 			// */


.main_header{
	

		background-color: var(--color-bg);	
		 border-bottom: 1px solid rgba(20,17,11,0.10);
}

.header__user--link:link,
.header__user--link:visited {
	width: 2rem;
	height: 2rem;
	stroke-width: 1;
	
	color: var(--color-secondary);
	
	
}

.user__cart--link, .user__wishlist--link {
	
	
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	
}



span.user__cart--span, span.user__wishlist--span{
	
	/* background-color: rgba(255, 0, 0, 1); */
	background-color: var(--color-primary-light);

	height: 1rem;
	width: 1rem;;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	
	font-size: var(--text-xsmall);
	font-weight: 500;
	padding: .5rem 0 ;
	outline: 2px solid var(--color-dk-bg);	
}

span.user__cart--span{
	
	position: absolute;
	bottom: -35%;
	right: -35%;		
}


 span.user__wishlist--span{	
		
	position: absolute;
	bottom: -35%;
	right: -35%;
 }
 
 
 /* // Input default behaviour adjustemnt */

 

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset; 
  -webkit-text-fill-color: var(--color-text);  
  transition: background-color 9999s ease-in-out 0s; 
}


/*// Optional: keep your border consistent while autofilled */

input:-webkit-autofill {
  border: 1px solid rgba(31, 61, 43, 0.22);
  border-radius: 10px;
}


/*------------ Site Styling -----------------*/


/* //			Set font family each time			// */




/* //----			Header	/	Footer Pages 				----// */


.header{
	max-width: 146rem;
	margin: 0 auto;
	display: flex;
	align-items: center;

  padding: .75rem 0 ; 
	
	gap: 4rem;
 

}


.header__logo--box{	
/* flex: 0 0 20%; */
flex: 0 0 12.5%;
display: flex;
align-items: center;
justify-content: center;


}

.header__logo--box a {
    display: flex;
  
    width: 100%;              /* ensure it fills the container */
}

.header__logo{
	

   max-height: 6rem;  
  width: auto;
  display: block;
}



.header__heading{
	
	font-size: var(--text-h4);
}



/*/ Navigation /*/


.header__nav--box{
	
flex:1;
}


ul.header__nav--list{
	
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rem;	
	/* gap: 3.2rem; */
	list-style: none;
	
	
	background-color: var(--color-bg);
	
	/* font-family: "Playfair Display", serif; */
	
	font-family: "Cairo", serif;
	
	font-size: var(--text-xlg);
	font-weight: 600;
  /* letter-spacing: 0.04em; */
	
}
	


li a.header__nav--link:link,
li a.header__nav--link:visited{
	
	display: inline-block;
	text-decoration: none;
	color: var(--color-text);
	transition: all .2s;
	padding: .1rem .75rem;
	border-bottom: 2px solid  transparent;
	
}


li a.header__nav--link:hover,
li a.header__nav--link:active{	
	
	text-decoration: none;
	
	padding: .1rem .75rem;
	
}


li a.header__nav--link--dropdown:link,
li a.header__nav--link--dropdown:visited{
	
	display: block;
	text-decoration: none;
	color: var(--color-text);
	transition: all .2s;
	padding: .5rem 2rem;
	border-bottom: 2px solid  transparent;

}



.dropdown{
	
	position: relative;

}

.dropdown-menu{
	
	display: none;	
	position: absolute;
	padding: 1.2rem 1rem;
	background-color: var(--color-bg);
	border: 1px solid rgba(20, 17, 11, 0.10);
  box-shadow: var(--shadow-lg);
	top: 100%;
	
	/* font-size: var(--text-body); */
	font-size: 1.4rem;
	
	z-index: 100;
	
}

.dropdown-menu a{
	
	text-decoration: none;
	color: var(--color-text);

}


.dropdown:hover .dropdown-menu {
	
	display: flex;
	gap: 2rem;
	flex-direction: column;
	

}

.header__user--login-button{
	
	justify-self: end;
	align-self: center;
	padding-right: 4rem;
}



/* // Account // */


.header__user{
	
display: grid;
grid-template-columns: 1fr 1fr;


}

.header__user--settings{

/* flex: 0 0 25%; */
flex: 0 0 12.5%;

}


.header__login--user {
	
	font-size: var(--text-lg);
	color:var(--color-text);
}

.header__login--link:link,
.header__login--link:visited{
	
	
	color: var(--color-secondary);
	font-size: var(--text-body);
	font-weight: 600;
	
	text-decoration: none;
	
	padding:.25rem .85rem;

	letter-spacing: .1rem;
	
	border: 1px solid var(--color-secondary);
	
}



.header__account--link:link,
.header__account--link:visited{
	
	text-decoration: none;
	color:var(  --color-text);
	font-size: var(--text-body);
	
}



.header__user--icons {
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.2rem;
	
	gap: 2rem;

}

	.header__user--button {
		
		display: flex;
		align-items: center;
		justify-content: center;
	}


	/* //						Banner 					// */
	
	.header__banner--preview{
		
		padding: .85rem 0;
		
		display: flex;
		align-items: center;
		justify-content: center;
		
		background-color: var(--color-primary-darkest);
	
		color: #fff;
		
		font-size: var(--text-lg);
		
		font-weight: 400;
	}
	
	

/* //						Footer Page 					// */




.footer{
	
	background-color: var(--color-bg);
	padding:2rem 0 3.2rem;
	 border-top: 1px solid rgba(20,17,11,0.10);
}

.footer-container{
	
	max-width: 152rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5,1fr);
	gap: 3.6rem;
}

.footer_logo-box{
	display: flex;
	flex-direction: column;
	gap:1.2rem;
	align-items: center;
	text-align: center;
	
	font-size: var(--text-small);
}

.footer__address{
	font-size: var(--text-small);
	padding: 0 2.4rem;
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	gap: 1rem;
}

.footer__address a:link,
.footer__address a:visited{
	
	font-weight: 600;
	margin-bottom: 1.2rem;
}
.footer__socials{
	
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}


.footer_socials-icon{
	
	width: 4rem;
	height: 4rem;
	

}

.footer__contact {
	
	display: flex;	
	flex-direction: column;	
		justify-content: center;
	gap: 1.2rem;	
		padding: 0 2.4rem;
}


.footer__contact h4{
	
	/* font-family: 'Rubik' , serif; */
	
	font-family: "Cairo", serif;
	
	font-size: var(--text-small);
}

.footer_contact-link:link,
.footer_contact-link:visited{
	
	font-size: var(--text-small);
	text-decoration: none;
	color: var(--color-text);
}


.footer_back-to-top {
	
	display: flex;
	align-items: flex-start;
}


.back-to-top_arrow:link,
.back-to-top_arrow:visited{
	
	text-decoration: none;
	border: 1px solid #333;
	font-size: 2.4rem;
	padding: 0 1.2rem;
	color: var(--color-text); 
	
}




/* //----						Login Page 					----// */


.login{
	
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 6.4rem;
	
	padding: 10rem 8rem;
		
 background-image:
    radial-gradient(circle at 50% 45%,
      rgba(255,255,255,0.93) 0%,
      rgba(255,255,255,0.95) 35%,
      rgba(255,255,255,0.97) 100%
    ),
  url('/img/logo/default-logo.png');

		
	background-repeat: no-repeat, no-repeat;
	background-position: 50% 50%, 50% 0%; 
}



.login__form-heading h1 {
	
  text-align: center;
  margin-bottom: var( --mrg-lg);
  font-size: var(  --text-h2);
  letter-spacing: 0.2px;	
}


 
.login__form{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 0;             
  background-color: transparent;
}

.signup__form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;                
  background-color: transparent;
  column-gap: 2.4rem;        
  row-gap: 1.8rem;          
}

.signup__form--group{
		
		display: flex;
		flex-direction: column;
		gap: 1rem;
}


 
 .login__form--box{
  padding: 2.4rem 3.2rem; /* was 3.2rem 0 */
  background: #FFF8E6;
  border: 1px solid rgba(201, 155, 40, 0.18);
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.06);
	height: 100%;
}



.login__form input,
.signup__form input {
	
 	width: 100%;
  box-sizing: border-box;

  height: 4.4rem;
  padding: 0 1.4rem;

  background: #fff;         
  color: var(--color-text);

  border: 1px solid rgba(31, 61, 43, 0.22);
  border-radius: 10px;

  outline: none;
}



.login__form input:focus,
.signup__form input:focus{
  border-color: #1F3D2B;
  box-shadow: 0 0 0 3px rgba(31, 61, 43, 0.16);
}

.login__form input:-webkit-autofill,
.login__form input:-webkit-autofill:hover,
.login__form input:-webkit-autofill:focus,
.signup__form input:-webkit-autofill,
.signup__form input:-webkit-autofill:hover,
.signup__form input:-webkit-autofill:focus{
	-webkit-box-shadow: 0 0 0 1000px #fff inset; /* must match base background */
	-webkit-text-fill-color: var(--color-text);
	transition: background-color 9999s ease-in-out 0s;
}


.login__form--submit,
.signup__form--submit{
  width: 100%;          /* fill available space... */
  max-width: 22rem;     /* ...but never go huge */
  height: 4.4rem;

  padding: 0 2.2rem;    /* better than .5rem 0 */
	
  font-size: var(--text-body);
  color: var(--color-text-white);


  background: var(--color-primary);     
  color: #1B1B1B;                      
  border: 1px solid rgba(0,0,0,0.14);    
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  border-radius: 10px;
  cursor: pointer;
}

.login__form--submit:hover,
.signup__form--submit:hover{
  filter: brightness(0.97);
}


/* login form is flex */
.login__form--submit{
  align-self: center;
}

/* signup form is grid */
.signup__form--submit{

  justify-self: center;
	align-self: center;
}


.login__form--label,
.signup__form--label{
  font-size: var(--text-body);  
  font-weight: 500;
  letter-spacing: 0.1px;
	color: var(--color-text-muted);

}

.login__form input,
.signup__form input{
  margin-bottom: 1.4rem; 
	font-size: var(--text-body);
}



.signup__form input{
  width: 100%;
  min-width: 0;       
  box-sizing: border-box;
}


	.signup__form--group-submit{
		
		display: flex;
		align-items: center;
		padding-top:1rem;
	}


.forgot-password:link,
.forgot-password:visited{
	
	
	text-decoration: none;
	color: var(--color-text);
	font-size: 1.4rem;
	text-align: center;
	padding-top: 2rem;
}



/* //------------						Home Page 					----------------// */


.homePage__hero {
	
	position: relative;
	overflow: hidden;
	/* padding: 8rem 0; */
	width: 100vw;
	min-height: calc(100vh - 7rem);
	margin-left: calc(-50vw + 50%);

	/* background-image: url('/img/other_imgs/hero__img.jpeg'); */
	background-image: url('/img/other_imgs/hero__img-1.jpeg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	
	display: flex;
	justify-content: center;
	
	align-items:flex-end;
	
margin-bottom: 6rem;
 
}

.homePage__hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.17);
}

.homePage__hero--box{
	
	z-index: 1000;
}


.homePage__hero-flex{
	
	
	display: flex;
	flex-direction: column;
	gap: 2.4rem;	
	
	text-align: center;
	
	padding-bottom: 21.6rem;
	
	color: var(--color-text-primary-light); 
	
	/* color: var(--color-text);  */
	/* color: var(--color-text-muted-dk);  */	


}


	
.hero__cta-box{
	
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin-top: 1\.8rem;
	flex-wrap: wrap;
	
	
}




.homePage__hero-cta:link,
.homePage__hero-cta:visited{

	display: inline-block;
	position: relative;
	
	background-color: var(--color-primary-dark);
	color:var(--color-text-white);

	font-size: 1.6rem;
	font-weight: 600;
	text-decoration: none;

	padding: 1rem 2.8rem;
	
	margin-bottom: 2rem;
	
	box-shadow: 0 2px 8px rgba(184, 134, 11, 0.25);	
	
	border-radius: 3px;
	
	 transition: all 0.3s ease;
	 
	 min-width: 20rem;

}


.homePage__hero-cta:hover,
.homePage__hero-cta:active{
	

	background-color: var(--color-primary-darkest);
  box-shadow: 0 4px 14px rgba(184, 134, 11, 0.4);
  transform: translateY(-2px);
}



.homePage__hero-cta::after {
	content: '→';
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%) translateX(-5px);
	opacity: 0;
	transition: all .3s ease;
}




.homePage__hero-cta:hover::after,
.homePage__hero-cta:active::after {
	
	transform: translateY(-50%) translateX(0);
	opacity: 1;
}




 
 
	


.homePage-productList{
	
 padding: 0 2rem 6rem ;
}


.homePage--heading {
	font-family: 'Cairo', sans-serif;
  /* font-style: italic; */
	font-size: 5.2rem;	
	
	max-width: 80rem;
	
	/* line-height: .9; */
	
}



.homePage--sub-heading{
	
	font-family: 'Rubik', sans-serif;

  font-size: 2.4rem;
  font-weight: 500;	
	margin: 0 auto 4rem;
	line-height: 1.3;
 
}



.homePage--p {
	
	font-size: 1.4rem;
	line-height: 1.5;
	letter-spacing: .05rem;
	color: var(--color-text-muted)
		
}




/* /// latest products */

.productList p,
.productList a,
strong
{	
	font-size: var(--text-small);

}


.barongList	{
	
		display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem ,20.5rem));
	align-items: center;
	justify-content: center;
	column-gap:3.8rem;
	row-gap:4.8rem;
	padding: 2rem 0;
	
}

.productList	{
	
	
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem ,20rem));
	align-items: center;
	justify-content: center;
	gap:4rem;

	
}

.productList__bags {
		
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem ,18rem));
	align-items: center;
	justify-content: center;
	gap:3.2rem;

	}



.productList--heading-box{
	
	padding:3rem 0 3rem;
}


.productList__product {
	
	box-shadow: var(--shadow-lg);
	transition: all .3s;	
	
}


.productList__product:hover {
	
	transform: scale(1.02) translateY(-1%);	
	box-shadow: var(--shadow-xlg);
}



.productList-box{
	
	display: flex;
	flex-direction: column;
	gap: 1.4rem;	
}


.productList-box--img {
	
	width: 100%;	
}


	.productList__bag-box--img 	{
	
	width: 100%;	
	display: flex;
	align-items: center;
	justify-content: center;
}




.productList-box--heading h4{
  position: relative;
	
  display: block;
  width: 100%;
  text-align: center;
  padding-right: 2.2rem;
}


.productList-box--heading h4::after{
  content: '→';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) translateX(-5px);
  opacity: 0;
  transition: all .3s ease;
}


.productList__product:hover .productList-box--heading h4::after{
  opacity: .7;
  transform: translateY(-50%) translateX(0);
}





.productList__img{
	
  width: 100%;
  height: 100%;          
  object-fit: cover;
  object-position: top;
  display: block;	
	aspect-ratio: 3/4;
  overflow: hidden;
}

.productList__group--box.muted-text{
  justify-content: center; /* instead of space-between */
  gap: .8rem;   
	font-size: var(--text-small)           /* small controlled gap */;
}



.productList__group--box{
	
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	padding-bottom: 1.2rem;
}

.productList__group--box.muted-text p{
	
	padding: 0 1.75rem;
	
}

.product__group--box-link{
	
	display: flex;
	align-items: center;
	justify-content: center;

	
	padding: .75rem 0;
	
  background-color: var(--color-secondary-light); 
}

.productList-box--heading h4{
	
	/* font-family: 'Rubik' , serif; */
	
		font-family: "Inter", serif;

		
	font-weight: 400;
	text-align: center;
	font-size: var(--text-body);
	padding: .75rem 0;
	
}



.productList__page--link:link,
.productList__page--link:visited{
	
	color: var( --color-text);	
	font-weight: 500;
	
	text-decoration: none;
}

.price--single{
  width: 100%;
  text-align: center;
}

.price--old{
  text-decoration: line-through;
  opacity: .55;
}

.price--new{
  font-weight: 600;
 color: #7a2e2e; /* muted red */
}




.homePage-services{
	
	padding: 0 0 6rem;

}

/* .homePage-services h2{
	
	
	margin:0 2rem 3.8rem;
} */

.homePage__services--grid{
	

	display: grid;
	align-items: center;
	justify-content: center;
	grid-template-columns: repeat(auto-fit, minmax(25rem, 35rem));
	gap: 4.8rem;
	
	padding: 0 2rem;
	background: #fff;
	
}


.homePage__services--grid-box{
	

  display: grid;
  grid-template-rows: auto auto 1fr;
  row-gap: 1.2rem;
  padding: 3.2rem 2rem;
  border: 1px solid var( --color-primary-lightest);
  border-radius: 1.2rem;
	justify-items: center;
	
	 box-shadow: var(--shadow-md);
	
}

.services--icon-box{
	
	width: 7rem;
	height: 7rem;
	margin: 0 auto 2.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #c9a227 0%, #b8922a 100%);
	border-radius: 50%;
	
}


.services-icon{
	
	width: 4rem;
  height: 4rem;
  display: block;
	

}

	.services--heading-box h3{
		
	/* font-family: 'Rubik', sans-serif; */
	
		font-family: "Cairo", serif;
		
	font-size: var(--text-xlg);
	font-weight: 500;
	margin-bottom: 1rem;
	

		
	}

.services--text-box{
	text-align: center;
	line-height: 1.5;
	font-size: var(--text-small);
	color:var(--color-text-muted);
}



.homePage-how-it-works{
	
		padding: 0 2rem 9rem;

}



.homePage-how-it-works h2{	
	
	margin-bottom: 4rem;
	
}


.homePage-how-it-works--grid{
	
  margin: 0 auto;
	padding: 0 1rem;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 3rem;
 
}


.how-it-works--box{
	
	display: flex;
	flex-direction: column;
	gap:1.2rem;
	margin-left: .5rem;

}


.how-it-works--box-heading h4{
	
	color: var(--color-primary);
	font-size: var(--text-h2);
	margin-bottom: 1rem;
	
}

	
.how-it-works--box-sub-heading p{
	

  font-size: 2rem;
  font-weight: 600;

}
		
.how-it-works--box-p p{
	
	font-size: 1.6rem;
  
	color: var(--color-text-muted-lt);
	
	
}


.homePage-shoe-collection {

	margin-bottom:3.2rem;

  width: 100vw;
  margin-left: calc(50% - 50vw);

  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.08) 0%,
      rgba(0,0,0,0.05) 60%,
      rgba(0,0,0,0.10) 100%),
    var(--color-secondary-light);
}

.homePage-shoe-collection-container{
	
	max-width: 120rem;
	margin: 0 auto;
	display: grid;
	align-items: center;
	grid-template-columns:6fr 7fr;
	gap:10rem;
	padding: 0 4rem;

}

.sub-heading-light{
	color: var(--color-text-primary-light);
}

.shoe_heading-dark {
	
	color: var(--color-text-secondary);
	
}

.homePage-shoe-collection-text-box{
	
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
	color:var(--color-text-secondary);
	font-size: var(--text-body);
  line-height: 1.5;
  max-width: 40rem;       
 
  opacity: 0.95; 
}

.homePage-shoe-collection-text-box h2{
	

  font-size: var(--text-xxxlg);

  line-height: 1.1;
	
	font-size: 2.8rem;
    font-weight: 500;
    /* margin: 0 auto 4rem; */
		
		color: var(--color-text-primary);
    line-height: 1.3;
 
}




.homePage__shoes-link--box{
	
	display: flex;
}

.homePage-shoe-collection-text-box p{
	
	max-width: 44ch;
  font-size: var(--text-body);
  line-height: 1.5;
  opacity: 0.9;
	color: var(--color-surface-layer)
	
}
	
.homePage__shoes-link:link,
.homePage__shoes-link:visited{
	
	text-decoration: none;
	color:var(--color-text-secondary);
	
	display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .65rem 1.7rem;

  font-weight: 600;

  background: var(--color-primary-lightest);

  box-shadow: var(--shadow-sm);
	
	    border: none;
    border-radius: 0;

	transition: all .2s;
}

.homePage__shoes-link:hover,
.homePage__shoes-link:active{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}



.homePage-shoe-collection-image-box{
		
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);

  width: 42rem;
  height: 26rem;

	padding: 1.6rem 0 ;
	
	 align-self: center;   

}
	
.homePage-shoe-collection-image{
		
		display: flex;
		align-items: center;
		justify-content: center;
}


.shoe_collection-shoe{
	
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 4px solid rgba(255,255,255,0.65);
	
}


.shoes-1{
	
 grid-column: 1 / span 5;
  grid-row: 1 / span 6;
}

.shoes-2{	
	
  grid-column: 5 / span 5;
  grid-row: 2 / span 5;
}

.shoes-3{
	
	  grid-column: 3 / span 4;
  grid-row: 6 / span 4;
}


.watermark-btm--bg {
	
	background-image:
  radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.95) 0%,  
    rgba(255,255,255,0.94) 100%
  ), url('/img/logo/default-logo.png');
		
	background-repeat: no-repeat, no-repeat;
  background-position: top ;
	background-size: 140% 140%,min(1200px, 90vw) ;	

}


.homePage-contact--cta{
	
	text-align:center;
	padding: 2rem 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.homePage-contact--cta p{
	
	font-size: var(--text-body);
	margin-bottom: 1rem;
	
}


.cta-heading{
	display: flex;
	align-items: center;
	justify-content: center;
}


.cta-heading h2{
font-size: 2.4rem;
    font-weight: 500;
    margin: 0 auto 1rem;
    line-height: 1.3;
}

.homePage_contact-cta:link,
.homePage_contact-cta:visited{
	font-size: var(--text-xlg);
	padding: 1.2rem 3.2rem;
}



/* //--------------					Static Sales / services Pages 				-----------// */


.salesPage, .customizationPage , .rentalGuidePage, .rentalsPage ,  .servicesPage {
	padding: 8rem 0 10rem 0;
}


.salesPage--heading-box , .rentalGuidePage--heading-box , .servicesPage--heading-box , .customizationPage--heading-box , .rentalsPage--heading-box{
	display: flex;
	flex-direction: column;
	
	max-width: 75rem;
}

 .customizationPage--heading-box{

	gap: 3rem;
	
	
}

.rentalsPage--heading-box{

	gap: 1.4rem;
	
	
}

.rentalGuidePage--heading-box{

	gap: 1.4rem;
	
	
}

.salesPage--heading-box{
	gap: 2.4rem;
	
	
}

.servicesPage--heading-box{
	
	gap: 2rem;
	
 }


.salesPage__benefits , .customizationPage__benefits , .customizationPage__benefits--form,  .rentalsPage__benefits , .servicesPage__benefits {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	
	list-style: none;
}

 .servicesPage__actions {
	margin-top: 1.2rem;
}


.salesPage__actions {
	margin-top: 0.5;
}


.servicesPage__actions , 	.rentalsPage__actions{
	
	display: flex;
	align-items: center;
	gap: 4rem;
}

.salesPage--heading,  .customizationPage--heading , .rentalsPage--heading, .rentalGuidePage--heading  , .servicesPage--heading {
	font-size: 3.6rem;
	font-weight: 600;
}

.salesPage__tagline, .rentalGuidePage__tagline , .customizationPage__tagline , .rentalsPage__tagline , .servicesPage__tagline  {
	font-size: 2rem;
	font-weight: 500;
}

.salesPage__text , .rentalGuidePage__text  , .rentalsPage__text , .servicesPage__text  {
	font-size: 1.6rem;
	line-height: 1.6;
	
}

.salesPage__benefit,  .rentalsPage__benefit , .servicesPage__benefit  {
	font-size: 1.6rem;
}



.salesPage__cta:link,
.customizationPage__cta:link,
.rentalsPage__cta:link,
.servicesPage__cta:link,
.salesPage__cta:visited, 
.rentalsPage__cta:visited, 
.servicesPage__cta:visited, 
.customizationPage__cta:visited {
	display: inline-block;
	
	background-color: var(--color-primary-dark);
	color: var(--color-text-white);
	
	font-size: 1.4rem;
	font-weight: 600;
	text-decoration: none;

	padding: 1.2rem 2.4rem;
	border-radius: 3px;

	box-shadow: 0 2px 8px rgba(184, 134, 11, 0.25);
	
	transition: all 0.3s ease;
	margin-top: 2rem;
}

.salesPage__cta:hover,
.customizationPage__cta:hover,
.rentalsPage__cta:hover,
.servicesPage__cta:hover,
.customizationPage__cta:active,
.rentalsPage__cta:active,
.servicesPage__cta:active,
.salesPage__cta:active {
	background-color: var(--color-primary-darkest);
	box-shadow: 0 4px 14px rgba(184, 134, 11, 0.4);
	transform: translateY(-2px);
}

	/* //--------------				Logo bg 				-----------// */

.servicesPage , .customizationPage , .rentalsPage, .salesPage,.customContactPage {
	
	/* position: relative;
	overflow: hidden;
	width: 100vw;
	min-height: calc(100vh - 7rem);
	margin-left: calc(-50vw + 50%);
	
	background-image: url('/img/logo/default-logo.png');
	background-repeat: no-repeat;
	background-size: cover; */
	
	background-image:
  radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.94) 0%,  
    rgba(255,255,255,0.93) 100%
  ), url('/img/logo/default-logo.png');
		
	background-repeat: no-repeat, no-repeat;
  background-position: top ;
	background-size: 140% 140%,min(1100px, 90vw) ;	
	background-position: 50% 50%, 50% 18%;
	


	
}

/* .servicesPage::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0, 0.1);
}
	
*/

/* //--------------					Sales Main Page 				-----------// */

.salesPage__benefits li,
.servicesPage__benefits	li,
.customizationPage__benefits li,
.rentalsPage__benefits li,
.customizationPage__benefits--form li{
	
	display: flex;
	align-items: center;
	gap: .65rem;
	
}

.salesPage__benefit	img,
.servicesPage__benefit img,
.customizationPage__benefit img,
.rentalsPage__benefit img{
	
	width: 1.4rem;
	height: 1.4rem;
}


/* //--------------				Services Main Page 				-----------// */



/* //--------------				Customization Page 				-----------// */


.customizationPage__grid , .salesPage__grid{
	
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 6.4rem;
}

.customizationPage--img,
.salesPage--img{
	
	width: 100%;
	
	border-radius: 12px;
}



/* //--------------				Rentals Page 				-----------// */



.rentalsPage__actions a:link,
.rentalsPage__actions a:visited{
	
	margin-top: 1.4rem;

}

.rentalsPage--heading{
	
	margin-bottom: 1rem;
}


.rentalsPage__tagline {
	margin-bottom: 1rem;
}


/*/// Guidelines  */


/* 	
	.rentalGuidePage {
	padding: 8rem 0 10rem 0;
	background-color: var(--color-background-light);
}

.rentalGuidePage--box {
	max-width: 82rem;
	margin: 0 auto;
	padding: 4.8rem 5.2rem;
	background-color: rgba(255, 248, 235, 0.88);
	border: 1px solid rgba(184, 134, 11, 0.22);
	border-radius: 8px;
	box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.04);
	backdrop-filter: blur(2px);
}

.rentalGuidePage--heading-box {
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
}

.rentalGuidePage--heading {
	font-size: 5rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--color-text-dark);
	margin: 0;
}

.rentalGuidePage__tagline {
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-text-dark);
	margin: 0;
}

.rentalGuidePage__text {
	font-size: 1.9rem;
	line-height: 1.8;
	color: var(--color-text-dark);
	margin: 0;
	max-width: 68rem;
}

.rentalGuidePage__guidelines {
	list-style: none;
	margin: 1.6rem 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.rentalGuidePage__guideline {
	position: relative;
	padding-left: 2.8rem;
	font-size: 1.8rem;
	line-height: 1.7;
	color: var(--color-text-dark);
}

.rentalGuidePage__guideline::before {
	content: '';
	position: absolute;
	top: 1.1rem;
	left: 0;
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	background-color: var(--color-primary-dark);
}

.rentalGuidePage__guideline strong {
	font-weight: 700;
	color: var(--color-text-dark);
}

.rentalGuidePage__note {
	margin-top: 2.4rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(184, 134, 11, 0.18);
	font-size: 1.7rem;
	line-height: 1.7;
	color: var(--color-text-dark);
}
 */
 
 .rentalGuidePage {
	padding: 5rem 0 6rem 0;
	background-color: var(--color-background-light);
}

.rentalGuidePage--box {
	max-width: 78rem;
	margin: 0 auto;
	padding: 3.2rem 3.6rem;
	background-color: rgba(255, 248, 235, 0.9);
	border: 1px solid rgba(184, 134, 11, 0.2);
	border-radius: 6px;
	box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.03);
}

.rentalGuidePage--heading-box {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.rentalGuidePage--heading {
	font-size: 4.2rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--color-text-dark);
	margin: 0;
}

.rentalGuidePage__tagline {
	font-size: 1.9rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-text-dark);
	margin: 0;
}

.rentalGuidePage__text {
	font-size: 1.65rem;
	line-height: 1.4;
	color: var(--color-text-dark);
	margin: 0;
	max-width: 60rem;
}

.rentalGuidePage__guidelines {
	list-style: none;
	margin: 1.2rem 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .65rem;
}

.rentalGuidePage__guideline {
	position: relative;
	padding-left: 2.2rem;
	font-size: 1.55rem;
	line-height: 1.55;
	color: var(--color-text-dark);
}

.rentalGuidePage__guideline::before {
	content: '';
	position: absolute;
	top: 0.95rem;
	left: 0;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background-color: var(--color-primary-dark);
}

.rentalGuidePage__guideline strong {
	font-weight: 700;
	color: var(--color-text-dark);
}

.rentalGuidePage__note {
	margin-top: 1.8rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(184, 134, 11, 0.16);
	font-size: 1.6rem;
	line-height: 1.6;
	color: var(--color-text-dark);
}



/* //--------------					Product List Page 				-----------// */


.main_barong-list{
	
	display: grid;
	grid-template-columns: 1fr 4fr;
	column-gap: 2rem;
	
	
	
	
}


.barong-page--list	{
	
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem ,17.5rem));
	align-items: start;
	justify-content: center;
	column-gap:4.6rem;
	row-gap:6rem;

	
}

.productList--sub-heading {
	
	   font-size: 2.4rem;
    font-weight: 500;
   
    line-height: 1.3;
		
		padding: 2rem 0 ;
	
	
}


.productListPage__img{
	
  width: 100%;
  height: 100%;          
  object-fit: cover;
  object-position: top;
  display: block;	
	aspect-ratio: 3/4;
  overflow: hidden;
}


/* // Filtering */

	.barong-list__filter{
		
		display: flex;
		flex-direction: column;
		
		gap: 2rem;
	}


	.barong-list__filter-gender ul,
	.barong-list__filter-category ul,
	.barong-list__filter-size ul,
	.barong-list__filter-color ul{
		
		list-style: none;
		
		display: flex;		
		flex-direction: column;
		
		gap: 1.8rem;
		
	}
	.barong-list__filter-gender ul:last-child,
	.barong-list__filter-category ul:last-child,
	.barong-list__filter-size ul:last-child,
	.barong-list__filter-color ul:last-child{
		
		margin-bottom: 1.2rem;
		
	}
	
	
	
	.barong-list__filter-gender a:link,
	.barong-list__filter-gender a:visited,
	.barong-list__filter-category a:link,
	.barong-list__filter-category a:visited,
	.barong-list__filter-size a:link,
	.barong-list__filter-size a:visited,
	.barong-list__filter-color a:link,
	.barong-list__filter-color a:visited{
		
		
		border: none;
		background-color: transparent;
		
		font-size: var(--text-small);
		text-decoration: none;
		color: var(--color-text);
	}
	
	.barong-list__filter--btn-box{
		
		padding: 0rem 0 .6rem;
		
		margin-bottom: 1.8rem;
		
		border-bottom: 1px solid var(--color-primary-darkest);
	}

	
	
.barong-list__filter-btn{
	
	border: none;		
	background-color: transparent;
	
	font-size: var(--text-xlg);		
	font-weight: 600;
	
	cursor: pointer;
	
}


.barong-list__filter-size #barong-list--ul-size {
	display: none;
}

.barong-list__filter-size #barong-list--ul-size.display--filter-list {
	display: flex;
}



.barong-list__filter-color #barong-list--ul-color {
	display: none;
}

.barong-list__filter-color #barong-list--ul-color.display--filter-list {
	display: flex;
}


.barong-list__filter-category #barong-list--ul-category {
	display: none;
}

.bag-list--ul-color , #bag-list--ul-color{
	
	display: none;
}

.bag-list--ul-category , #bag-list--ul-category{
	
	display: none;
}


.barong-list__filter-category #barong-list--ul-category.display--filter-list {
	display: flex;
}

.barong-list__filter-category #bag-list--ul-category.display--filter-list {
	display: flex;
}

.barong-list__filter-color #bag-list--ul-color.display--filter-list {
	display: flex;
}



.barong-list__filter-clear {
	
	/* margin-bottom: 1rem; */
	
	display: flex;
	align-items: center;
	justify-content: flex-end;
	
	
	
}
	
	.barong-list__filter-clear  a:link,
	.barong-list__filter-clear  a:visited{
		
		display: inline-block;
		
	text-decoration: none;
	
	color: var(--color-text);
	border: 1px solid var(--color-secondary);

	
	padding:.2rem .5rem;
	border-radius: 8px;
	
	font-size: 1.3rem;
	font-weight: 400;
	
	transition: all .2s;
}


	.barong-list__filter-clear  a:hover,
	.barong-list__filter-clear  a:active{
		
		background-color: var(--color-secondary);
		color: var(--color-text-primary-light);
		
		transform: scale(1.03) translateY(-8%);
		
		box-shadow: 1px 2px 12px rgba(136, 136, 136, 0.8);
	
}




	.barong-list__filter-category{
		
		margin-bottom: 6.4rem;
	}


	.productList_filter-sort--box {	
/* 	
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	
	gap: 6rem; */
	margin-bottom: var(--mrg-lg);	
}





/* // sorting */


	.productList_sort-box{
		
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	
	
	



.product-sort-form{
	
	display: flex;
	align-items: center;
	/* justify-content: space-around; */
	justify-content: flex-end;
	
	gap: 6rem;
}


.product-sort--row	{
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}


.product-sort--row--box{
	
	display: flex;
	align-items: center;
	gap: 1rem;	
}



.product-sort--row--box button{

	font-size: var(--text-body);
	font-weight: 600;
	padding: .25rem .6rem;
}


.product-sort--row label{
	
	font-size: var(--text-body);
	/* font-weight: 600;	 */
}


.product-sort--row select{
	
	font-size: var(--text-small);
	
	border: none;
}


.product-sort--row select option{
	
		font-size: var(--text-body);
}


.sort_submit--btn{
	
	border: none;
	background-color: var(--color-primary);
	color: var(--color-primary-lightest);
	padding: .25rem .5rem;
	cursor: pointer;
	
}


.shoeListPage__img , .accsListPage__img , .bagsListPage__img{
	
	
	object-fit: cover;
  object-position: top;
  display: block;
  overflow: hidden;
}


.shoeListPage__img , .accsListPage__img{
	
  width: 100%;
  height: 100%;          
	
}

.bagsListPage__img{
	
	width: 90%;
	height: 90%;          
	
	
}


/* //-------------						Product Page 					-------------// */



.productPage-box{
	
	display: grid;
	
	grid-template-columns: 1fr 1fr;
	gap: 4.8rem;
	

	padding: 6rem 0;
}


.productPage-box--left{
	
	display: grid;
	grid-template-columns: 2fr 7fr;
	gap: 3.2rem;
	
}

	
.productPage-box--left-left{
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


.productPage-box--img{
	
	width: 85%;
	height: auto;
}



.productPage-box--left-right{
	
	display: grid;
	align-items: center;
	justify-items: center;	
}


.productPage-box--right{
	
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	padding: 2.4rem 0 0 2.4rem;	
}


.productPage__product--heading-box{
	
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;	
	/* margin-bottom: 2.8rem; */
	row-gap: 1rem;
}

.productPage-heading-flex{
	
	display: flex;
	align-items: center;
	gap: 3rem;
	
}


h4.productPage__product-name {	
	
	font-size: var(--text-xxxlg);

}


p.productPage_sku{
	
	font-size: var(--text-small);
	font-weight: 400;
	grid-column: 1/2;
}


.productPage__price--box-flex{
	
	display: flex;
	gap: 2rem;
	padding: .5rem 0 1.6rem;
	
	font-size: 3rem;
}


.productPage__price--old{
	
	font-size: var(--text-lg);
	opacity: 0.35;

}

.productPage__price--current {
	
	font-size: 3rem;
	font-weight: 600;
	padding: .5rem 0 1.6rem;
}


.productPage-wishlist--box{
	

display: flex;
/* align-items: center; */
justify-content: center;
	
}

.productPage__wishlist--btn {
	
	border:none;
	background-color: inherit;
	width: 40%;
	
	cursor: pointer;
}

.productPage__wishlist--btn svg {
    width: 2.2rem;
    height: 2.2rem;
    stroke: var(--color-primary);
    fill: none;
		transition: all .2s;
		margin-right: .5rem;
}

.productPage__wishlist--btn:hover svg {
    fill: var(--color-primary);
 
}

.productPage__wishlist--active svg {
	fill: var(--color-primary);
}

.productPage__text-price--box{
	
	display: grid;
	grid-template-columns: 3fr 1fr;
	
	margin-bottom:3.2rem;
}

.productPage__product-details-heading {
	display: inline-block;
	font-size: var(--text-small);
	
	/* font-family: 'Rubik' , serif; */
	
		font-family: "Cairo", serif;
	
	color: var(--color-text-muted);
	font-weight: 500;
	letter-spacing: .05em;
  text-transform: uppercase;
	padding-bottom: .2rem;
	border-bottom: 1px solid rgba(201, 163, 39, 0.35) ;

}


.productPage__product--text-box{
	
	display: flex;
	flex-direction: column;
	gap: 2.8rem;		
}

.productPage__product-style{
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 3.2rem;
}


.productPage__product--price-box{
	
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	align-items:center;
}

	.productPage__product-description{
		
		line-height: 1.25;
		margin-bottom: .65rem;
		color: var(--color-text-muted-dk);
	}


.productPage__product--p {
	
	font-size: var(--text-lg);
	
}

p.productPage__product--strike-price {	
	
	font-size: var(--text-lg);	
	text-decoration: line-through;	
}


	.productPage__variant-size{
		
		position: relative;
		
			margin-bottom:2.4rem;
		
	
	}


.productPage__variant-size--btn{
	
	display: inline-block;
	text-decoration: none;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	background-color: inherit;
	border: 1px solid transparent; 
	cursor: pointer;

	transition: all .2s;
	
	border-bottom: 1px solid rgba(51, 51, 51, 0.105);
	
	font-weight: 500;
	
}

.productPage__variant-size--btn:hover{	
	
	
	
	border-bottom: 1px solid rgba(51, 51, 51, 0.5);
border-bottom: 1px solid var(--color-text-muted);
	
	transition: all .2s;	
	

}



.productPage__variant-size--flex{
	
	display: flex;
	gap: 1rem;
			margin-bottom:1.4rem;

}



.productPage__variant-size-guide--box{
	
	/* display: none;	 */
	opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
	
	position: absolute;
	transition: all .3s;
}


.size_guide-img{	
	
	width: 67.5%;	
	display: block;
	margin-left: -2.4px;
}


.size_guide--active{
	
	
	
	box-shadow: var(--shadow-lg);
	opacity: 1;
  transform: translateY(0);
  visibility: visible;
	
	transition: all .2s;
	
}



.product__size--btn {
	
	display: inline-block;
	
	background-color: var(--color-secondary);
	color: var(--color-text-white);
	
	font-weight: 600;
	
	border: none;
	
	padding: .5rem 1.2rem;
	
	cursor: pointer;	
}



.product__size--btn.selected {
	
	outline: 2px solid #333;
	outline-offset: 2px;
	color: #333;
	background-color: var(--color-bg);
}




.productPage__product--btn-box {
	
	display: grid;
	grid-template-columns: repeat(3,1fr);
	column-gap: 4.8rem;
	align-items: center;

}

.productPage__product-btn{
	
	border: none;
	color: var(--color-text-primary-light);
	font-weight: 600;
	
	padding: 1rem 2rem;
	
	border-radius: 4px;
	
	cursor: pointer;	
}



.productPage-buyItNow{
	
	background-color: var(--color-primary-darkest);
	outline: 2px solid  var(--color-primary-darkest);
	
}



.productPage-addtocart{
	
outline: 2px solid var(--color-primary-light);
color: var(--color-primary-darkest);
transition: all .2s;
}



.productPage-addtocart:hover{	
	
outline: 2px solid  var(--color-primary-darkest);
background-color: var(--color-primary-darkest);
color: var(--color-text-primary-light);
	
}



.productPage__product--btn-box a:link,
.productPage__product--btn-box a:visited{

	outline: 2px solid var(--color-primary-light);
	color: var(--color-primary-darkest);
	transition: all .2s;
	text-align: center;
	font-size: 1.1rem;
	transition: all .2s;
	padding: 1.2rem;
	width: 17.5rem;

	text-decoration: none;	
}


.productPage__product--btn-box a:hover,
.productPage__product--btn-box a:active{

	outline: 2px solid  var(--color-primary-darkest);
	background-color: var(--color-primary-darkest);
	color: var(--color-text-primary-light);

}



.productPage__quantity{
	
	display: flex;
	align-items: center;
	gap: 2rem;

	margin-bottom: 3.2rem;
	
}


.productPage__quantity label{
	
	font-size: 1.3rem;
	
}
.productPage__quantity input{

	font-size: 1.3rem;
	border: 1px solid rgba(201, 163, 39, 0.685) ;
	padding: .25rem .5rem;
	border-radius: 4px;
	width: 20%;
	
}


.productPage_login--add-cart{
	font-size: 1.3rem;
	text-decoration: none;
	text-align: center;
	
}



/* //---------------						About Page 				---------------// */

.aboutPage , .contactPage {
	
padding:1rem 0;
background-image:
  radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.94) 0%,  
    rgba(255,255,255,0.93) 100%
  ), url('/img/logo/default-logo.png');
		
	background-repeat: no-repeat, no-repeat;
  background-position: top ;
	background-size: 140% 140%,min(1100px, 90vw) ;	
	background-position: 50% 50%, 50% 18%;
 
}

.aboutPage-grid{
	
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-template-rows: repeat(10,1fr);
	align-items: center;
	
	row-gap: 1.4rem;
	


	
}

.abouPage-left{
	grid-column: 4/10;
	grid-row: 6/7;
	z-index: 1000;
	



}

.aboutPage-right {
	grid-column: 4/7;
	grid-row: 1/6;
	


}

.aboutPage--image-box{
	
	width: 100%;              /* pick a size */
  aspect-ratio: 1 / 1;       /* forces a square */
  border-radius: 50%;
  overflow: hidden;          /* this is the crop */

  border: 2px solid transparent;

	
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.95),  
    0 0 0 5px rgba(201,155,40,0.28),    
    0 12px 34px rgba(0,0,0,0.10); 

	
}

.aboutPage--heading-box{
	
	font-size: 4.2rem;	
	letter-spacing: .35rem;


}



.aboutPage-img{	
	
	width: 100%;
  height: 100%;
  object-fit: cover; 
 
  transform: scale(1.05);   
  border-radius: 0;         

          /* keep square inside the crop */
  display: block;      /* soft lift */
}


.aboutPage-right-text {
	
	grid-column: 4/12;
	grid-row: 7/13;
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2.4rem;
	
	margin-bottom: 1.2rem;		

	font-size: 1.3rem;
	line-height: 1.5;	
	
	color: var(--color-text-muted-dk);	
}



.aboutPage-right-text-left {
	
	display: flex;
	
	flex-direction: column;
	gap: 1rem;
}

.aboutPage-right-text-right {
	
	display: flex;
	flex-direction: column;
	
	gap: 1.1rem;
}
.aboutPage-right-text-right h4{
	
	font-size: 1.6rem;
	margin-top: .15rem;
}
	
	.aboutPage-right-text-right-end {
	
		font-weight: 600;
		font-size: var(--text-small);
		display: flex;
		flex-direction: column;
		gap: .5rem;
	}

/* //---------------					Contact Page 				---------------// */





.contactPage__cards--box {
	
	display: grid;
	grid-template-columns: repeat(4,1fr);
	/* align-items: center; */
 align-items: stretch;
	justify-content: space-between;
	gap: 2.4rem;
	padding: 2rem;
	

}


.contactPage__card{
	
	display: flex;
	flex-direction: column;
	align-items: center;
  height: 18rem; /* adjust to whatever fits best */

	gap: 1rem;
	padding: 1.2rem .8rem;
	text-align: center;
	
	outline: 1px solid #c9a32761;
	border-radius: 4px;
	
	background-color: #fff;
	
	
  border: 1px solid rgba(20,17,11,.10);
  box-shadow:
    0 18px 50px rgba(20,17,11,.08),
    0 2px 8px rgba(20,17,11,.04);
	
	
}

	.contactPage__card-details.contactPage__card-details-center{
		
	margin-top: 1.6rem;
		
		
	}
.contactPage__card-icon img{
	
	width: 6rem;
	height: 6rem;
	display: block;
	
}



.contactPage__card-heading h4{
	
	/* font-family: 'Rubik' , serif; */
	
		font-family: "Cairo", serif;
	
	font-size: 2rem;
	font-weight: 500;
}




.contactPage__card-details p{
	
	font-size: var(--text-body);
	color: var(--color-text-muted-lt);
	font-weight: 400;
}



.contactPage__card--link:link,
.contactPage__card--link:visited{
  text-decoration: none;
  color: inherit;
  display: flex;    
	transition:all .2s;         
}



.contactPage__card--link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(201,155,40,.22), var(--shadow-sm);
  border-radius: 4px;
}



.contactPage__card--link:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}



.contactPage__grid {
	display: grid;
	grid-template-columns: 10fr 9fr;
	gap: 2.4rem;
	align-items: start;
	
	
}


.contactPage__textbox{
	
padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 2.4rem;

	box-sizing: border-box;
}


.contactPage__form-section{
	
	
padding: 2.4rem 5rem 4rem;
}

.contactPage__form-text{
	
	display: flex;
	
	flex-direction: column;
	
	gap: 2.8rem;
}

.contactPage__form-text p{
	

	color: var(--color-text-muted-dk);
	

}

.contactPage__form-text p:first-child{
	font-size: 2.3rem;
	font-weight: 400;
	line-height: 1.35;
	margin-bottom: 1.4rem;
}

.contactPage__form-text p:not(:first-child){
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.45;
max-width: 56rem;
color: var(--color-text-muted);
}

.contactPage__form{
	
	margin: 0 auto;

	width: 82%;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 2rem;
	
  border: 1px solid rgba(20,17,11,.10);
  box-shadow:
    0 18px 50px rgba(20,17,11,.10),
    0 2px 8px rgba(20,17,11,.05);	
	
  border-radius: 8px;      
  padding:1rem 0;  
	
	/* background: radial-gradient(circle at 50% 50%,
  rgba(201,155,40,.1) 0%,
  rgba(201,155,40,.08) 55%,
  rgba(201,155,40,.06) 80%
) */
 
background-color: #fff;


}



.contactPage__form-heading h2{
	
	font-size: var(--text-h2);
	margin-bottom: .75rem;
	
}




.contactPage__form-heading  p{
	text-align: center;
	font-size: var(--text-small);
	margin-bottom: 1.2rem;
}



.contactPage__form-box{
	
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding: 1rem 3rem;
	width: 100%;
	box-sizing: border-box;
	

	
}

.contactPage__method-label {
	font-size: var(--text-small);
}


.contactPage__form-row{

	display: flex;
	flex-direction: column;
	gap: .5rem;

}

	
.contactPage__form-row label{
	
	font-size: var(--text-small);

	font-weight: 300;
}

	.contactPage--btn-box{
		
		display: flex;
		align-items: center;
		justify-content: center;
	}

.contactPage__form-row select{
	
	/* font-family: 'Rubik' , serif; */
	
		font-family: "Cairo", serif;
		
	font-weight: 300;

}


.contactPage__form-row option{
		
	/* font-family: 'Rubik' , serif; */
	
		font-family: "Cairo", serif;
		
	font-weight: 300;
}



.contactPage__form-row input,
.contactPage__form-row select,
.contactPage__form-row textarea{
	
	/* font-family: 'Rubik' , serif; */
	
		font-family: "Cairo", serif;
	
  width: 100%;
  padding: 0 .5rem;
  border-radius: 8px;
  border: 1px solid rgba(20,17,11,.18);
  font-size: 1.3rem;
  /* background: #fff; */
  background: var(--color-bg);
}


.contactPage__form-row textarea{
  height: auto;
  
  resize: vertical;
}


.contactPage__form-row input:focus,
.contactPage__form-row select:focus,
.contactPage__form-row textarea:focus{
  outline: none;
  border-color: rgba(201,155,40,.55);
  box-shadow: 0 0 0 4px rgba(201,155,40,.14);
}


.enquiry-label{
	
	align-self: flex-start;
}

	.contactPage__form-row-method{
		
		
		font-weight: 300;
	}
	.contactPage__form-row-method label{
		
		text-align: left;
		margin-bottom: 1rem;
	}
	
	


.contactPage__form-method{
	display: flex;
	align-items: center;
	justify-content: center;
	gap:5rem;
}

.contactPage__contact-methods{
	
	font-size: 1.4rem;
	
	display: flex;
align-items: center;
gap: 1rem;
}





.submit_form--button{
	
	/* font-family: 'Rubik' , serif; */
	
		font-family: "Cairo", serif;
		
	font-size: var(--text-small);
	font-weight: 500;
	border: none;
	padding: .15rem 1.7rem;
	background-color: var(--color-primary-light);
	color: var(--color-text);
	border-radius: 4px;
	box-shadow: var(--shadow-sm);
	
	 transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
	 
	 cursor: pointer;
	
}


.submit_form--button:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background-color: rgba(201,155,40,.28);
}


.submit_form--button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(201,155,40,.25), var(--shadow-sm);
}
	
.success-page{
	
	display: flex;
	place-items:center;
	flex:1;
	
	
	
}


.success-page--box{
	
	margin: 0 auto;
	
	display: flex;
	flex-direction: column;
	place-items:center;
	gap: 3.2rem;
	
}


.success-page--box h3{
	
	font-size: var(--text-xxxlg);
	
}


.success-page--box p{
	
	
	font-size: var(--text-xlg);
	
}

/* //---------------				Customizarion  Page 			---------------// */


		.customizationPage--paragraph-box{
			
			display: flex;
			
			flex-direction: column;
			
			gap: 1rem;
		}
		
		
		.customizationPage__text{
			
			font-size: 1.4rem;
			
			line-height: 1.2;
		}
		
		.customizationPage__benefit{
			
			font-size: 1.4rem;
		}


/* //---------------				Customizarion form Page 			---------------// */

.customContactPage{
	max-width: 112rem;
	margin: 0 auto;
	padding: 2.6rem 5rem 6rem;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}
.contactPage__form-heading h1 {
    font-size: var(--text-h2);
    margin-bottom: .75rem;
}


.customContactPage__grid {
	display: grid;
	grid-template-columns: 10fr 9fr;
	gap: 2.4rem;
padding-top: 4rem;
	
	
}

.customContactPage__textbox {
	max-width: 76rem;
	padding: 2.4rem 2rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 2.8rem;
	box-sizing: border-box;
	align-items: center;
	
}
.customContactPage__form-section {
	padding: 3rem 5rem 6rem 6rem;
	
}

.customContactPage__form-text {
	display: flex;
	flex-direction: column;
	gap: 2.2rem;
}

.customContactPage__form-text p {
	color: var(--color-text-muted-dk);
}

.customContactPage__form-text p:first-child {
	font-size: 2.3rem;
	font-weight: 400;
	line-height: 1.35;
	margin-bottom: 1.4rem;
}

.customContactPage__form-text p:not(:first-child) {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.45;

	color: var(--color-text-muted);
}

.customContactPage__form {
	margin: 0 auto;
	width: 87.5%;
	max-width: 56rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 2rem;
	border: 1px solid rgba(20,17,11,.10);
	box-shadow:
		0 18px 50px rgba(20,17,11,.10),
		0 2px 8px rgba(20,17,11,.05);
	border-radius: 8px;
	padding: .5rem 0;
	background-color: #fff;
}

.customContactPage__form-heading h2 {
	font-size: var(--text-h2);
	margin-bottom: .75rem;
}

.customContactPage__form-heading p {
	text-align: center;
	font-size: var(--text-small);
	margin-bottom: 1.2rem;
}



.customContactPage__form-box {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: .75rem 1.6rem;
	width: 95%;
	box-sizing: border-box;
}

.contactPage__method-label,
.customContactPage__method-label {
	font-size: var(--text-small);
}

.customContactPage__form-row {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.customContactPage__form-row label {
	font-size: var(--text-small);
	font-weight: 300;
}

.contactPage--btn-box {
	display: flex;
	align-items: center;
	justify-content: center;
}

.customContactPage__form-row select {
	font-family: "Cairo", serif;
	font-weight: 300;
}

.customContactPage__form-row option {
	font-family: "Cairo", serif;
	font-weight: 300;
}

.customizationPage__text-sm{
	
	font-size: 1.4rem;
  font-weight: 500;
	
}

.customizationPage__benefits--form{
	
	margin-bottom: 2.2rem;
}


.customContactPage__form-row input,
.customContactPage__form-row select,
.customContactPage__form-row textarea {
	font-family: "Cairo", serif;
	width: 100%;
	padding: 0 .5rem;
	border-radius: 8px;
	border: 1px solid rgba(20,17,11,.18);
	font-size: 1.2rem;
	background: var(--color-bg);
}

.customContactPage__form-row textarea {
	height: auto;
	resize: vertical;
}

.customContactPage__form-row input:focus,
.customContactPage__form-row select:focus,
.customContactPage__form-row textarea:focus {
	outline: none;
	border-color: rgba(201,155,40,.55);
	box-shadow: 0 0 0 4px rgba(201,155,40,.14);
}

.enquiry-label {
	align-self: flex-start;
}

.customContactPage__form-row-method {
	font-weight: 300;
}

.customContactPage__form-row-method label {
	text-align: left;
	/* margin-bottom: 1rem; */
	display: inline-block;
}

.customContactPage__form-method {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5rem;
}

.customContactPage__contact-methods {
	font-size: 1.4rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.customContactPage__contact-methods label {
	margin-bottom: 0;
}


.customContactPage--btn-box {
	display: flex;
	align-items: center;
	justify-content: center;
}

.enquiry-label-customization {
	align-self: flex-start;
}


.submit_form--button-customization{
	display: inline-block;
	border: none;
	border-radius: 6px;
	padding: .5rem 2rem;
	font-size: 1.4rem;
	font-weight: 500;
	font-family: "Cairo", serif;
	background-color: var(--color-primary-dark);
	color: var(--color-text-primary-light);
	cursor: pointer;
	transition: all 0.25s ease;
}

.submit_form--button-customization:hover{
	background-color: var(--color-primary);
	transform: translateY(-1px);
}


/* //---------------				Categories Page 			---------------// */



/* // Categroy list */


.categories_box{
	
	position: relative;	
}

	
.categories_img{
	
	width: 100%;
	height: auto;
	padding: 2rem;	
}


.categories_text-box{
	
		
}


.categories_text-box p{
	
	background-color: var(--color-bg);
	color: var(--color-text);
	
	font-size: var(--text-h4);
	text-align: center;
	
	padding: 1rem 2rem;
	
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%,-50%);
}




/* // Categroy Product list */


	p.cat_product-name{
		
		text-align: center;
		font-size: var(--text-lg);
		font-weight: 600;
	}
	
	
.cat_productList__product  {
	
	padding: 1.2rem 4rem;
	
}



/* // Reviews */


.productPage__reviews{
	
	padding: 2rem 0;	
}


h2.productPage__reviews--heading{
	
	font-size: var(--text-h4);	
}


.productPage__reviews--top-box{
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	font-size: var(--text-xlg);	
	
	margin-bottom: var(--mrg-lg);
}



.productPage__reviews--middle-box{
	
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(25rem,30rem));
	gap: 4rem;	
}


	.productPage__review--box		{		
		
		box-shadow: var( --shadow-md);
		padding: 2rem 3rem;		
	}
	
	


.productPage__review{
	
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: var(--mrg-nrm);
}


.productPage__review h4{
	
		font-size: var(--text-body);	
}


.productPage__review p{
	
			font-size: var(--text-small);		
}


.productPage__reviews--bottom-box{
	
	margin-bottom: var(--mrg-xlg);
}



.review-form{
	
	display: flex;
	align-items: flex-start;	
}


.review-form-row{
	
	display: flex;
	align-items: flex-start;
	gap: 1.6rem;	
}



.review-form-row label{	
	
	font-size: var(--text-xlg);		
}


.review-form-row input{	
	
	font-size: 1.6rem;
	font-weight: 600;
}


.review-form-row--input{
	
	flex:1;
}


.review-form-row--textarea{
	
	flex:0 0 80%;
}


.review-form-row--textarea textarea{
	
	width: 75%;
}


.rating_star--active{
	
	width: 2.4rem;
	height: 2.4rem;
	
	stroke-width: 2;
	
	color: var(--color-dk-bg);	
}


.rating_star--inactive{
	
	width: 2.4rem;
	height: 2.4rem;
	
	stroke-width: 2;
	
	color: var(--color-text-white);	
}





/* //--------------				User Account Pages 			--------------// */


/* //				Main Account Page 					// */


.myAccount__page-heading{
	
	padding: 4.8rem 0 2.8rem;

}
.myAccount__page-heading h2{	
	
	font-size: var(--text-xxlg);
  font-weight: 600;

}

.myAccount{
	
	 padding: 4.8rem 0 8rem;
}

.myAccount__flex--layout {		

	display: grid;
	grid-template-columns: 25rem 1fr;	
	gap: 6.4rem;	
	
	
	
	  align-items: start;
}



/* //		Side Menu 	// */


.myAccount__side-menu {
	
	background-color: var(--color-bg);
  border: 1px solid rgba(201, 155, 40, 0.18);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  padding: 2.4rem;
	
	align-self: stretch;
	
	height: 100%;
	
		display:flex;
	flex-direction:column;
	height:100%;

}

.myAccount__side-menu-main{
	
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.myAccount__side-menu--nav{
	flex:1;
	display:flex;
}

ul.myAccount__side-menu--ul{
	flex:1;
	display:flex;
	flex-direction:column;
}

ul.myAccount__side-menu--ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
	
}



.myAccount__side-menu--btn{
  width: 100%;
  text-align: left;
  padding: 1.2rem 1.2rem;
  border-radius: 10px;

  background: transparent;
  border: 1px solid transparent;

  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-text-muted-dk);
  cursor: pointer;
}

.myAccount__side-menu--btn:hover{
  background: rgba(201, 155, 40, 0.10);
}

ul.myAccount__side-menu--ul{
	min-height: 100%;
}

/* push logout group to bottom */
.myAccount__side-menu-logout{
	margin-top: auto;
	padding-top: 1.6rem;
	border-top: 1px solid rgba(201,155,40,0.18);
}

/* //		Main Content // */


.myAccount__main-content {		
	
	flex:1;	
	display: grid;	
	
}


.myAccount__main{
	
	display: grid;
	gap: 4rem;

}


.myAccount__main-profile--grid{
	
	display: grid;
	grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.myAccount__main-profile--box{
  grid-column: 1 / -1;
  grid-row: 1;
}

/* Bottom row */
.myAccount__main-address--box{
  grid-column: 1;
  grid-row: 2;
}

.myAccount__main-password--box{
  grid-column: 2;
  grid-row: 2;
}
.myAccount__main-profile--box,
.myAccount__main-address--box,
.myAccount__main-password--box{
  background-color:var(--color-bg);;
  border: 1px solid rgba(201, 155, 40, 0.18);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  padding: 1.8rem;
	
}


.myAccount__main--heading,
.myAccount__main-profile--box h3,
.myAccount__main-address--box h4,
.myAccount__main-password--box h4{
  margin-bottom: 1.6rem;
	padding-bottom: .4rem;
  /* border-bottom: 1px solid rgba(201, 155, 40, 0.2); */
  border-bottom: 1px solid rgba(56, 75, 48, 0.1);
	
	font-size: var(--text-lg);
}


.myAccount__main--details-container{	

	display: flex;
	align-items: center;

	
	gap: 6.4rem;	
}



.myAccount__main--heading{	
	
	font-size: var(--text-lg);

}


p.myAccount__main--name {
	
	
	font-size: var(--text-lg);
	margin-bottom: var(--mrg-lg);
}

p.myAccount__main--loggedIn{
	
	font-size: var(--text-body);
	margin-bottom: var(--mrg-medLg);
	
}

form.myAccount__main--user-form{
	
	display: flex;
	flex-direction: column;
	width: 100%;

}


.myAccount-form--group{
	display: grid;
  grid-template-columns: 6rem 1fr;

  align-items: center;
  margin-bottom: 1.6rem;
}

.myAccount-form--group label{
	
	font-size: var(--text-small);
}


.myAccount-form--group-btn	{
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.myAccount-form--group.myAccount-form--group--column{
	
  display: flex;
  flex-direction: column;
 	gap: .75rem;
  margin: 0;          /* kills extra spacing */
  padding: 0;
}

.form__address-flex{
	
	display: flex;
	flex-direction: column;
	gap: .75rem;
}




.myAccount-form--group--row label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.myAccount__main--user-form input{
	width: 100%;
	font-size: var(--text-body);
  box-sizing: border-box;
  height: 3.2rem;
  padding: 0 1rem;

  background: #fff;
  color: var(--color-text);
  border: 1px solid rgba(31, 61, 43, 0.22);
  border-radius: 10px;
  outline: none;
}


.myAccount__main--user-form input:focus{
  border-color: #1F3D2B;
  box-shadow: 0 0 0 3px rgba(31, 61, 43, 0.16);
}



button.myAccount__form--submit{
  background: var(--color-primary);
  color: #1B1B1B;
  border: 1px solid rgba(0,0,0,0.14);

  height: 3.2rem;
  padding: 0 1.2rem;
  border-radius: 10px;
  cursor: pointer;
}


.myAccount-form--group--column{
	
	flex-direction: column;

	margin-top: var(--mrg-nrm);
}



.myAccount-form--group--row{
  display: grid;
  grid-template-columns: 130px 1fr; /* was 170px */
  gap: 1.2rem;
  align-items: center;
  margin-bottom: 1.4rem;
}
	
.myAccount__main-address{
	
	display: flex;
	flex-direction: column;
	gap: .75rem;

	
}

.myAccount__main-address--row{
  display: grid;
  grid-template-columns: 120px max-content; /* instead of 1fr */
  gap: 1.2rem;
  padding: 0.6rem 0;
  justify-content: start; /* stops stretching */
}



.myAccount__main-address p{
	
	font-size: var(--text-small);		
}


.myAccount__main-orders--box{
	
	grid-column: 2/3;
}




/* // Cart / Wishlist  Page */


/* 
.myAccount__cart--grid{

	display: grid;	
	grid-template-columns: repeat(2, 1fr);	
	gap: 4.8rem;	
}
	


.myAccount__cart--item{	
	
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 1rem;
	padding: 1rem;
	
	background-color: var(--color-bg);
	
	box-shadow: var(--shadow-md);	
}

.myAccount__cart--img-box{
	

	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	align-self: flex-start;
}
	

.myAccount__cart--img{
	
	width: 100%;
	height: auto;	
}
	

.remove-cart--item, .remove-wishlist--item{
	
	position: absolute;
	top: 2px;
	left: 2px;
	width: 1.6rem;
	height: 1.6rem;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	border: none;	
}

.myAccount__cart--text-box{	

	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.myAccount__cart--item--btns{
	
	grid-column: span 2;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}


 */
 
 	.myAccount__main--wishlist h2{
		
		margin-bottom: 4rem;
		
	}

 .myAccount__cart--grid {
	
	display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 43rem));
  row-gap: 2.4rem;
  align-items: start;
  justify-content: space-between;

}


.myAccount__cart--item {	
	
  display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 2rem;

	width: 100%;
	position: relative;

  border-radius: 12px;

  background: rgba(251, 242, 220, 0.92);           
  border: 2px solid rgba(201,155,40,0.15);        
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
	transition: all .3s;
}



.myAccount__cart--item:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}

.myAccount__cart--img-box {

  width: 100%;
	aspect-ratio: 6/9;
	overflow: hidden;
	 border-top-left-radius: 10px;
	 border-bottom-left-radius: 10px;
	background: rgba(0,0,0,0.04);

 border-right:  1px solid rgba(201,155,40, 0.1);  
 
}

.myAccount__cart--img {
  width: 100%;
 height: 100%;
object-fit: cover;
object-position: center 18%;
display: block;
}

.myAccount__missing-product {
	grid-column: 1 / -1;
	position: relative;
	min-height: 12rem;
	padding: 2rem;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
}

.remove-cart--item, .remove-wishlist--item {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.2rem;
  height: 2.2rem;

  display: grid;
  place-items: center;

  border-radius: 999px;
	
  color: var(--color-primary);            
  border: 1px solid rgba(201,155,40,0.50);
  background: rgba(255,255,255,0.85);
	
  cursor: pointer;
	margin: .5rem .5rem 0 0 ;
	opacity: 0.85;
}

.remove-wishlist--item:hover , .remove-cart--item:hover{
  background: rgba(201,155,40,0.10);
  border-color: rgba(201,155,40,0.55);
	  opacity: 1;
}


.product__size--btn.is-selected{
  outline: 2px solid rgba(201,155,40,0.65);
  outline-offset: 2px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

button.productPage__product-btn.wishlist-btns.wishlist-btn--atc, button.productPage__product-btn.wishlist-btns.wishlist-btn--bin{
	
	padding: .5rem 1rem;
	font-size: var(--text-small);
}


.productPage__variant-size--flex.wishlist-btn{
	
	margin-bottom: 0.75rem;
}


.productPage__variant-size--flex.wishlist-btn .product__size--btn{
  min-width: 2.8rem;
  height: 2.8rem;
  padding: 0 0.6rem;
  display: grid;
  place-items: center;
}


.myAccount__cart--text-box {
	
	padding: 1.2rem;
  display: flex;
  flex-direction: column;
	justify-content: space-between;
	gap:.65rem;

}

.myAccount__cart--item--btns {

  display: flex;
  gap: 2.4rem;
  justify-content:center;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}


p.myAccount__cart--name{
	
	font-size: var(--text-lg);
	font-weight: 600;
	
}


p.myAccount__cart--color,	p.myAccount__cart--style,	p.myAccount__cart--description ,p.myAccount__cart--oprice {
	
	font-size: var(--text-body);	
}


p.myAccount__cart--size,p.myAccount__cart--cprice {	

	font-size: var(--text-body);	
	font-weight: 600;	
}


.myAccount__cart--quantity{


	display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 0.8rem;
}


.myAccount__cart--quantity label{
	
	font-size: var(--text-body);	
	font-weight: 600;	
}

.myAccount__cart--quantity input{
	
	width: 20%;
	font-size: var(--text-small);			
}

.myAccount__cart__quantity{
	
  /* display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 0.8rem; */
	
	  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
	
	
}

.productPage__quantity--box{
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.productPage__quantity--box label{
  font-size: var(--text-small);
  opacity: 0.85;
}

.productPage__quantity--box input{
  width: 3.6rem;      /* fixed, not % */
  height: 2.4rem;
  text-align: center;
}

.productPage__quantity-price--box .myAccount__cart--cprice{
  font-size: var(--text-xlg);
  font-weight: 700;
	padding-right: 2rem;
}

.productPage__quantity-price--box{
  margin-left: auto; /* pushes price to the far right */
  display: flex;
  align-items: baseline;
}

p.myAccount__cart--color{
	
	margin-bottom: 1rem;
	color: var(--color-text-muted-dk);
}

.myAccount__cart--checkout{
	
	grid-column: span 2;
	display: grid;
	align-items: center;
	justify-content: center;
	padding: 4rem 0;
}


.myAccount__checkout--link:link,
.myAccount__checkout--link:visited{
	
	text-decoration: none;
	display: inline-block;
	
	background-color: var(--color-primary);
	
	color:  var(--color-text-primary-light);	
	font-size: 2rem;
	font-weight: 600;
	
	padding: .75rem 1.2rem;
	border-radius: 4px;	
}


p.myAccount__checkout--empty {	
	
	background-color: var(--color-text-muted);
	
	color: var(--color-text-white);
	font-size: 2rem;
	font-weight: 600;
	padding: .75rem;
	border-radius: 4px;		
}


.productPage__product-btn.wishlist-btns{
	
	font-size: var(--text-body);	
	padding: .5rem 1.2rem;
}


.wishlist-btns{
	
	background-color: var(--color-primary);
}



/* // orders histroy */



/* // main */


.myAccount__main--orders--flex{
	
	display: flex;
	flex-direction: column;
	gap: 2rem;
	
	max-height:none;
	overflow:visible;

}


.myAccount__main--orders-row {
	
	max-width: 88rem;   /* tweak 84–96rem */
	width: 100%;
	
	display:grid;
	grid-template-columns:1.4fr 1fr 1fr auto;
	gap:2.4rem;
	align-items:start;

	padding: .8rem 1.2rem;
	
	border-radius:12px;
	
background: rgba(251,242,220,0.75);
	border:1px solid rgba(201,155,40,0.22);
	box-shadow:0 14px 30px rgba(0,0,0,0.08);
}



/* // headings */

.myAccount__main--orders-text-box p:first-child{
	font-weight:700;
}
		
.myAccount__main--orders--headings{
	
	display:grid;
	grid-template-columns:1.4fr 1fr 1fr auto;
	gap:2.4rem;
	margin-bottom:1.2rem;
}
	
.myAccount__main--orders--headings h3{
	
	font-size:var(--text-body);
	font-weight:700;
	opacity:0.85;
}
	

		
/* // Boxes */



.myAccount__main--orders-product{	
	
	display:flex;
	gap:1.6rem;
	align-items:flex-start;
	margin-bottom: .5rem;
}


.myAccount__main--orders-address--box {	
	
	flex:1;	
}



.myAccount__main--orders-order {
	
	flex:0 0 20%;
}



	
/*// box elements  */


.myAccount__main--orders-img--box {
	
	flex:0 0 9rem;
	aspect-ratio:3/4;
	overflow:hidden;
	border-radius:10px;
	background:rgba(0,0,0,0.04);
	border:1px solid rgba(201,155,40,0.12);
}



.myAccount__main--orders-img--box img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center 12%;
	display:block;
}

/* text */
.myAccount__main--orders-text-box,
.myAccount__main--orders-address,
.myAccount__main--orders-order-text{
	display:flex;
	flex-direction:column;
	gap:0.6rem;
}

.myAccount__main--orders-text-box p,
.myAccount__main--orders-address p,
.myAccount__main--orders-order-text p{
	font-size:var(--text-small);
}

/* CTA matches site */
.myAccount__main--orders-link{
	display:flex;
	align-items:center;
	justify-content:center;
	
	align-self: center;
}

.myAccount__main--orders-link a:link,
.myAccount__main--orders-link a:visited{
	display:inline-block;
	white-space:nowrap;

	background:var(--color-primary);
	color:var(--color-text-white);
	text-decoration:none;

	font-size:var(--text-small);
	font-weight:600;

	padding:.7rem 1.1rem;
	border-radius:6px;
}


/* // Addresses */


/* =========================
   Addresses (Account)
   ========================= */

/* Header row: title + CTA (matches order page structure) */
.myAccount__sectionHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: var(--mrg-xlg);
}

/* Responsive card grid */
.myAccount__addressGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 3.2rem;
}

/* Card (panel-like) */
.addressCard {
	background-color: var(--color-bg);
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
	padding: 1rem 1.8rem;
	display: flex;
	flex-direction: column;
}

/* Top row: label + default pill */
.addressCard__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	margin-bottom: 1.6rem;
}

.addressCard__label {
	display: inline-block;
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	background-color: var(--color-dk-bg);
	color: var(--color-text-white);
	font-weight: 600;
	font-size: var(--text-small);
}

.addressCard__status {
	display: inline-block;
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	font-size: var(--text-small);
	background: rgba(201, 155, 40, 0.12);
	border: 1px solid rgba(201, 155, 40, 0.22);
	color: var(--color-text);
}

/* Body */
.addressCard__body {
	
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	
	font-size: var(--text-body);    
	line-height: 1.55;
}

.addressCard__line {
	display: flex;
	/* gap: 0.3rem; */
	align-items: baseline;
	
	font-size: 1.05em;
	font-weight: 600;
	letter-spacing: 0.2px;
}

.addressCard__muted {
	color: var(--color-text);
	opacity: 0.78;
		font-size: 0.95em;
	opacity: 0.82;
}

/* Actions row */
.addressCard__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
}


.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.55rem 0.95rem;
	border-radius: 8px;
	font-size: var(--text-small);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	line-height: 1;
	white-space: nowrap;
}

.btn--primary {
	background-color: var(--color-primary-dark);
	color: var(--color-text-white);
}

.btn--secondary {
	background: transparent;
	border-color: rgba(0, 0, 0, 0.18);
	color: var(--color-text);
}

.btn--danger {
	background: transparent;
	border-color: rgba(180, 0, 0, 0.25);
	color: rgba(180, 0, 0, 0.9);
}

/* Optional: hover states (keep subtle) */
.btn--secondary:hover {
	border-color: rgba(0, 0, 0, 0.28);
}

.btn--danger:hover {
	border-color: rgba(180, 0, 0, 0.4);
}




/* //address form page	 */


/* =========================
   Address Form (User)
   ========================= */

.addressForm{
	padding: 6rem 0;
}

/* Header */
.addressForm__header{
	max-width: 720px;
	margin: 0 auto 3.2rem auto;
	text-align: center;
}

.addressForm__title{
	font-size: var(--text-h2);
	margin-bottom: 1.2rem;
}

.addressForm__sub{
	opacity: 0.78;
	font-size: var(--text-body);
}

/* Card */
.addressForm__card{
	max-width: 860px;
	margin: 0 auto;
	background-color: var(--color-bg);
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.08);
	box-shadow: 0 10px 25px rgba(0,0,0,0.06);
	padding: 3.2rem;
}

/* Grid */
.addressForm__grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.4rem;
}

.addressForm__group{
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.addressForm__group--full{
	grid-column: 1 / -1;
}

/* Labels */
.addressForm__label{
	font-weight: 600;
	font-size: var(--text-small);
	letter-spacing: 0.2px;
}

/* Inputs */
.addressForm__input,
.addressForm__select{
	width: 100%;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.18);
	background: rgba(255,255,255,0.35);
	padding: 1.1rem 1.2rem;
	font-size: var(--text-body);
	outline: none;
}

.addressForm__select{
	appearance: none;
	background:
		linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.55) 50%),
		linear-gradient(135deg, rgba(0,0,0,0.55) 50%, transparent 50%),
		linear-gradient(to right, transparent, transparent);
	background-position:
		calc(100% - 18px) calc(50% - 2px),
		calc(100% - 12px) calc(50% - 2px),
		0 0;
	background-size:
		6px 6px,
		6px 6px,
		100% 100%;
	background-repeat: no-repeat;
	padding-right: 3.4rem;
}

/* Focus */
.addressForm__input:focus,
.addressForm__select:focus{
	border-color: rgba(201,155,40,0.65);
	box-shadow: 0 0 0 4px rgba(201,155,40,0.12);
}

/* Radios */
.addressForm__radioRow{
	display: flex;
	gap: 1.6rem;
	flex-wrap: wrap;
}

.addressForm__radio{
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.8rem 1.1rem;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,0.14);
	background: rgba(255,255,255,0.25);
	cursor: pointer;
	user-select: none;
}

.addressForm__radio input{
	transform: translateY(1px);
}

/* Actions */
.addressForm__actions{
	display: flex;
	justify-content: center;
	margin-top: 3.2rem;
}



/* Responsive */
@media (max-width: 700px){
	.addressForm__card{
		padding: 2.2rem;
	}
	.addressForm__grid{
		grid-template-columns: 1fr;
	}
}



/* // Update address form page	 */



.user--address-update select{
	
	width: 32.5%;	
	font-size: var(--text-xlg);
	color: var(--color-text-white);
	
	background-color: var(--color-dk-bg);
	padding: .25rem 0 .25rem 1.5rem;
	
	border: none;
}



.address__form--button--box{
	
	margin-top: var(--mrg-lg);
	display: grid;
	justify-content: center;
}
	
	
.address__form--button{
	
	padding: .5rem 2.4rem;
	
	font-size: var(--text-xlg);
	font-weight: 600;	
}

		
		
/* // Reviews	 */



.main_reviews-row {
	
	display: flex;	
	justify-content: space-around;
	
	background-color: var(--color-bg);
	
	padding: 1rem;
	
	box-shadow: var(--shadow-sm);
}



.main_reviews-row--headings{

	margin-bottom: var(--mrg-med);
	padding-bottom: 2.4rem;
	
	font-size: var(--text-h4);
	font-weight: 600;
	
	border-bottom: 2px solid #333;	
}



.main_reviews-img--box{
	
	flex:0 0 12.5%;
}

.main_reviews-img--box img{
	
	width: 100%;
	height: auto;
	
}

.main_reviews-row p{
	
	font-size: var(--text-xlg);	
}




/* // Bubbling  Classes	 */


.content-hidden{
	
	display:none;

}

.content-active{
	
	display:block;

}


/* //------------------				Checkout Page 			-------------------// */

/* 
.checkout__page--grid, 	.checkout__page--headings{
	
	
	display: grid;
	grid-template-columns: 7fr 3fr;
	gap: 10rem;	
}

.checkout__page--grid{
	
	padding: 4rem 0 6rem;
}


.homePage--sub-totals {
	
	justify-self: center;
}

.checkout__page--items{
	
	display: flex;
	flex-direction: column;
	gap: 2.4rem;	
}


.checkout__page--row{
	
	display: flex;
	gap: 3.2rem;

	box-shadow:var(--shadow-sm);
}


.checkout__page--img-box{
	
	flex:0 0 20%;	
	display: flex;
	align-items: center;
	justify-content: center;
}


.checkout__img{
	
	width: 100%;
	height: auto;
}



.checkout__page--text-box{
	
	flex:1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
}

p.checkout__name {	
	
	font-size: 2.4rem;
	font-weight: 600;
}


p.checkout__desc{
		
	font-size: var(--text-lg);
}



p.checkout__col, p.checkout__size ,	p.checkout__style  {
	
		font-size: var(--text-body);
}


p.checkout__price{
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	width: 12rem;
	height: 11rem;
	
	background-color: var(--color-bg);
	
	font-size: var(--text-xxxlg);
	font-weight: 600;
	
	border-radius: 50%;
	outline: 2px solid var(--color-dk-bg);
}



.checkout__page--price-box{
	
	flex:0 0 20%;	
	display: flex;
	align-items: center;
	justify-content: center;
}



p.creadit-card-address {
	
	text-align: center;
	font-size: var(--text-lg);
	font-weight: 600;
	margin-bottom: var(--mrg-nrm);
}


.checkout__form--address{
	
	box-shadow:var(--shadow-sm);	
}



.checkout__form--address-flex{
	
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	margin-bottom: var(--mrg-medLg);
	
	background-color:var( --color-primary-lightest) ;
	padding: 1rem;
	
}


.checkout__form--address-row {
	
	display: flex;
	align-items: center;
	justify-content: space-between;	
}
	

.checkout__form--address-row label{
	
	font-size: var(--text-body);	
}

	
.checkout__form--address-row input{
	
	border: none;
	font-size: var(--text-body);	

	text-align: right;	
}



.checkout__page--totals{
			
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 2rem;
		
	background-color:var( --color-primary-lightest) ;
		padding: 1rem;
	
	
}


.checkout__page--totals--row{
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	
}


.checkout__page--totals-p {
	
		font-size: var(--text-body);
	
}


.checkout__page--totals .checkout__page--totals--row:last-of-type p{
		
		margin: 2rem 0;
		font-weight: 600;
		font-size: 2rem;
}

.checkout__page-submit--btn{
	
	align-self: center;
	
	width: 50%;
	background-color: var(--color-secondary);
	
	color: var(--color-text-white);
	font-size: var(--text-body);
	font-weight: 600;
	
	padding: 1.2rem 0;
	
	border: none;
	border-radius: 4px;
	
	cursor: pointer;
}
 */
 
 
 
 /* // Rewrite for checkout page */

 
 /* =========================
   Checkout (safe refactor)
   ========================= */

.checkout__page--grid,
.checkout__page--headings{
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: 6.4rem;
}

.checkout__page--grid{
padding: 2.5rem 0 4rem; 
}


.checkout__header{
	padding: 6rem 0 1.2rem;
}

.homePage--sub-totals{
	justify-self: center;
}


/* =========================
   LEFT: items
   ========================= */

.checkout__page--items{
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
}


.checkout__page--row{
	display: grid;
	grid-template-columns: 16rem 1fr 16rem;
	align-items: start;
	gap: 2rem;

	padding: 1rem 0;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.08);
	background: rgba(201,155,40,0.10);
	box-shadow: 0 10px 25px rgba(0,0,0,0.06);
	overflow: hidden;
}



.checkout__page--img-box{
	height: 18rem;        /* key line */
	overflow: hidden;
	border-radius: 10px;
}

.checkout__img{
width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 10px;
}

/* text */

.checkout__page--text-box{

	display: flex;
	flex-direction: column;
	height: 100%;              /* key */
              /* optional: reduce from 2.2rem */
	padding: 1.4rem 1.2rem;
}

p.checkout__name{
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: 0.2px;
	margin-bottom: 1.2rem;
}

p.checkout__desc{
	font-size: var(--text-small);
color: var(--color-text-muted);
	line-height: 1.2;

	overflow: hidden;
}


.checkoutItem__meta{
	max-width: 16.5rem;      /* stops the long pill look */
}


/* price bubble */




.checkout__page--price-box{
	display: flex;
justify-content: center;
	align-self: stretch; 

}

.checkout__priceLabel{
	font-size: var(--text-small);
	font-weight: 700;
	opacity: 0.7;
	line-height: 1.1;
	margin: 0;
}

p.checkout__price{
	width: auto;
	height: auto;
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin: 0;

	font-size: 2.8rem;
	font-weight: 900;
	letter-spacing: 0.3px;
}

.checkout__priceWrap{
	margin-top: auto;   
	          /* key: sends it to the bottom */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	
	width: 85%;
	
	padding: 1rem;
	
	border-radius: 12px;
	background: rgba(255,255,255,0.55);
	border: 1px solid rgba(0,0,0,0.14);
	box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

.checkout__page--img-box,
.checkout__page--text-box,
.checkout__page--price-box{
	padding: 0;
	background: transparent;
}

.checkout__page--text-flex{
	margin-top: auto;          /* key */
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 3rem;
	align-items: end;
}


.checkout__page--text-right, .checkout__page--text-left{
	
	display: flex;
	flex-direction: column;
	gap: .65rem;
	
}


.checkout__page--text-left{
	
		display: flex;
	flex-direction: column;
	gap: .8rem;

	
}


.checkout__page--text-right{
	
	
}

p.checkout__col,
p.checkout__size,
p.checkout__style{
	
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	
	
	padding: .28rem .7rem;
	border-radius: 999px;

	background: rgba(255,255,255,0.22);  /* lighter */
	border: 1px solid rgba(0,0,0,0.06);  /* softer */
	
	box-shadow: 0 6px 14px rgba(0,0,0,0.04);
	
	font-size: var(--text-small);
	color: var(--color-text-muted-dk);
	margin: 0;
	line-height: 1.25;
}

/* =========================
   RIGHT: panel
   ========================= */

.checkout__page--right-box{
	/* keeps your hook class */
}

.checkoutPanel{
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.08);
	background: var(--color-bg);
	box-shadow: 0 10px 25px rgba(0,0,0,0.06);
	padding:2.4rem 2.4rem 1.2rem;
	position: sticky;
	top: 2.2rem;
}



.checkoutPanel__section{
	padding: 2rem 0;
	border-top: 1px solid rgba(0,0,0,0.08);
}

.checkoutPanel__section-totals{
	padding: .65rem 0;
	border-top: 1px solid rgba(0,0,0,0.08);
}

.checkoutPanel__section:first-child{
	border-top: none;
	padding-top: 0;
}

p.creadit-card-address{
	text-align: center;
	font-size: var(--text-xlg);
	font-weight: 700;
	margin-bottom: 1.6rem;
}

p.creadit-card-address-paypal{
	text-align: center;
	font-size: var(--text-xlg);
	font-weight: 700;
	padding: .5rem 0;


}

/* address form wrapper (keep original hook) */
.checkout__form--address{
	box-shadow: none; /* panel owns the shadow now */
}

/* Fields block */
.checkout__form--address-flex{
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-bottom: 0;
	background: transparent;
	padding: 0;
}

.checkout__form--address-row{
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	align-items: center;
	gap: 1.2rem;
}

.checkout__form--address-row label{
	font-size: var(--text-small);
	font-weight: 600;
	opacity: 0.9;
}

.checkout__form--address-row input,
.checkout__form--address-row select{
	width: 100%;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.18);
	background: rgba(255,255,255,0.35);
	padding: 0.5rem .75rem;
	font-size: 1.4rem;
	outline: none;
	text-align: left; /* fixes the “raw” look */
}

.checkout__form--address-row input:focus,
.checkout__form--address-row select:focus{
	border-color: rgba(201,155,40,0.65);
	box-shadow: 0 0 0 4px rgba(201,155,40,0.12);
}

/* =========================
   Totals
   ========================= */

.checkout__page--totals{
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	background: rgba(0,0,0,0.02);
	padding: 1.6rem;
	border-radius: 10px;
}

.checkout__page--totals--row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
}

.checkout__page--totals-p{
	font-size: var(--text-body);
}

.checkoutTotals__total{

	padding-top: 1.8rem;
	border-top: 1px solid rgba(0,0,0,0.1);
}

.checkoutTotals__total .checkout__page--totals-p{
	font-weight: 800;
	font-size: 2rem;
}

/* =========================
   Payment buttons
   ========================= */

.checkoutPanel__payments{
	display: flex;
	flex-direction: column;
	/* gap: 1rem; */
}

.checkout__page-submit--btn{
	align-self: center;
	width: 80%;
	background-color: var(--color-secondary);
	color: var(--color-text-white);
	font-size: var(--text-body);
	font-weight: 700;

	padding: 1rem 0;


	border: none;
	border-radius: 10px;
	cursor: pointer;
}


/* .orLine{
	
	text-align: center;
	margin-top: 1rem;
	} */
.pay-sep{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin: 1.6rem auto;     /* centers the whole thing */
  width: 100%;
  max-width: 70%;
  color: rgba(0,0,0,0.55);
  font-size: var(--text-body);
}

.pay-sep::before,
.pay-sep::after{
  content:"";
  flex:1;
  height:1px;
  background: rgba(0,0,0,0.14);
}

.pay-sep span{
  display:inline-block;
  padding: 0 2px;
  line-height: 1;
}

.paypal-no_address{
	text-align: center;
	margin-bottom: 1rem;
	color: var(--color-text-muted);
}

/* PayPal containers should expand naturally */
#paypal-button-container,
#paypal-button-container-guest{
	width: 100%;
}

 

	.checkout--afterpay_card{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 3rem;
	}
 

/* // Checkout Success Page */



.checkout__success-page{
	min-height: 60vh;
	display: grid;
	place-items: center;
	padding: 6rem 0;
}

.checkout__success--box{
	width: min(52rem, 92%);
	display: grid;
	gap: 1.4rem;

	padding: 3.2rem 3rem;
	background: var(--color-bg);
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
}

.checkout__success--icon{
	width: 4.4rem;
	height: 4.4rem;
	display: grid;
	place-items: center;

	border-radius: 50%;
	background: var(--color-primary-lightest);
	color: var(--color-dk-bg);
	font-weight: 800;
	font-size: 2.2rem;

	justify-self: center;
}

h2.checkout__success--heading{
	font-size: var(--text-h3);
	text-align: center;
	margin: 0;
}

.checkout__success--sub{
	text-align: center;
	font-size: var(--text-body);
	color: var(--color-text-muted);
	margin: 0;
}

.checkout__success--meta{
	text-align: center;
	font-size: var(--text-small);
	color: var(--color-text);
	margin: .4rem 0 0;
}

.checkout__success--metaValue{
	font-weight: 700;
	margin-left: .4rem;
}

.checkout__success--actions{
	/* display: grid;
	gap: 1rem;
	margin-top: 1.2rem; */

	display: grid;
	gap: 1rem;
	margin-top: 1.2rem;
	justify-items: center;

}

.checkout__success-btn:link,
.checkout__success-btn:visited{
	width: auto;            /* shrink to text */
	min-width: 22rem;  
	
	display: inline-block;
	text-decoration: none;
	text-align: center;
	
	font-size: var(--text-body);
	font-weight: 700;
	
	padding: 1.05rem 2.2rem;
	
	border-radius: 8px;
	transition: all .2s;
	
}
.checkout__success-btn:hover,
.checkout__success-btn:active{
	
	background-color: var(--color-primary);
	color: var(--color-text);


	
}

.checkout__success-btn--primary{
	background-color: var(--color-secondary);
	color: var(--color-text-white);
}

.checkout__success-btn--ghost{
	background: transparent;
	color: var(--color-dk-bg);
	outline: 1px solid rgba(0,0,0,0.18);
}




#paypal-button-container , 	#paypal-button-container-guest {
	
  margin-top: .5rem;
  text-align: center;
  /* border: 1px solid #ccc; */
  padding: 0 3.2rem;
  background-color: var(--color-bg);
}




/* //------------------				Order Page 			-------------------// */


h2.order_page--heading{
	font-size: var(--text-xxxlg);
	text-align: center;
	padding: 4rem 0 2.4rem;
	margin-bottom: var(--mrg-lg);
}

/* main grid */

.order_page--main-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.4rem;
	align-items: start;
}

/* cards */

.order_page--card{
	background: linear-gradient(180deg,
		rgba(251,242,220,0.96),
		rgba(251,242,220,0.90)
	);
	border: 1px solid rgba(201,155,40,0.26);
	box-shadow: 0 16px 36px rgba(0,0,0,0.10);
	border-radius: 12px;
	padding: 2rem;
	
	margin-bottom: 2rem;
}

.order_page--card-full{
	grid-column: 1 / -1;
	margin-top: 2.4rem;
}

/* headings inside cards */

h3.order_page-box--heading{
	text-align: left;
	font-size: var(--text-xlg);
	margin-bottom: 1.2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(201,155,40,0.16);
}

/* label/value rows */

.order_page--rows{
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding: 0;
}

.order_page--row{
	display: flex;
	justify-content: space-between;
	gap: 1.2rem;
}

.order_page--label{
	font-size: var(--text-small);
	font-weight: 600;
	opacity: .8;
}

.order_page--value{
	font-size: var(--text-small);
	font-weight: 700;
}

/* address block */

.order_page--block{
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(201,155,40,0.12);
}

.order_page--block-heading{
	font-size: var(--text-small);
	font-weight: 700;
	margin-bottom: .8rem;
}

p.order_page--user-p{
	font-size: var(--text-small);
}

/* products grid */

.order__page--order-headings,
.order__page--order-details{
	display: grid;
	grid-template-columns: 9rem 2fr 1fr 1fr;
	gap: 1.2rem;
	align-items: center;
}

.order__page--order-headings{
	margin-top: 1.2rem;
	margin-bottom: .8rem;
}

.order__page--order-headings h3{
	font-size: var(--text-small);
	font-weight: 700;
	opacity: .85;
}

/* each row in the products list */

.order__page--order-details{
	row-gap: 1.2rem;
}

.order__page--cell{
	display: flex;
	align-items: center;
}

/* product image wrapper */

.order__page--imgWrap{
	width: 9rem;
	aspect-ratio: 3 / 4;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(0,0,0,0.04);
	border: 1px solid rgba(201,155,40,0.12);
}

.order-image{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 12%;
	display: block;
}


/* //----------------		Reset Password Page 	-----------------// */



h2.resetPassword-heading{
	
	text-align: center;
	font-size: var(--text-h2);
	padding: 6.4rem 0;
}



section.resetPassword{
	
	
	display: grid;
	place-items: center;

}

.reset-password-form{
	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3.2rem;
	
}

.reset-password-row{
	
	display: flex;
	align-items: center;
	gap: 1.2rem;
}


.reset-password-row label{
	
font-size: var(--text-xxlg);
	
	
}

.reset-password-row input{
	
	display: inline-block;
	font-size: 2.4rem;
	border: none;
	background-color: var(--color-bg);
	color: var(--color-text);
	padding: .25rem .5rem;
	
}


.reset-password-btn{
	
	font-size: var(--text-xlg);
	background-color: var(--color-dk-bg);
	color: var(--color-text);
	border: none;
	padding: .25rem .5rem;
	margin-bottom: var(--mrg-xlg);
	
	cursor: pointer;

}






/*------------------------------ ------------------ -----------------------------------*/
/*------------------------------ -- Admin Styling -- ----------------------------------*/
/*------------------------------ ------------------ -----------------------------------*/


/* //						Header	 					// */

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

ul.admin-nav {
	
	list-style: none;
	display: flex;
	font-size: 2rem;
	align-items: center;
	gap: 6.4rem;
padding: 2rem 0;
	
}


ul.admin-nav li a{
	
	text-decoration: none;
	color: var(--color-text);
	font-weight: 600;
	
	  /* font-family: "Playfair Display", serif; */
		
	font-family: "Cairo", serif;
}



h1.admin_heading {
	
	font-size: var(--text-xxlg);
	text-align: center;
	/* margin-bottom: 2.4rem; */
	
	padding: 2rem 0;
}


.admin_header-info--box{
	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}



.admin_header-info--box a:link,
.admin_header-info--box a:visited{
	
	text-decoration: none;
	font-size: var(--text-body);
	
	
}


.admin_header-info--link{
	
	color: #555;
	
}



/* //						Home Page 					// */

.admin__home--main{
	
	padding: 0 2rem;
}

section.admin__home--grid {
	
	display: grid;
	
	grid-template-columns: 1fr 1fr 1fr;
	justify-items: center;
	gap: 4rem;
	padding: 10rem 0 0;
	
}



	.admin__home--box{
		
		display: flex;
		flex-direction: column;
		align-items: center;
		
		gap: 3.2rem;
		
		padding: 4rem;
		
		border: 1px solid var(--color-secondary);
		
		background-color: var(--color-bg);
		
		border-radius: 8px;
		
		width: 100%;
		
		text-align: center;
	}


.admin__home--box h3{
	
	font-size: var(--text-xxlg);
	
	
	
}


.admin__home--box p{
	
	font-size: var(--text-body);
	
}


.admin__home--box a:link,
.admin__home--box a:visited{
	
	color: var(--color-text-white);
	text-decoration: none;
	
	font-size: var(--text-body);
	
	background-color: var(--color-secondary);
	
	cursor: pointer;
	
	padding: 1rem 2.4rem;
	
	border-radius: 8px;
	
	
	
}


/*-----------------		Products		--------------------*/



/* //			Product List Page		/// */


.admin-productList__headings, .admin-product {
	
	display: grid;
	
	grid-template-columns:2fr 1fr 3fr 4fr 2fr 3fr 3fr 2fr 2fr 1fr;
	text-align: center;
	padding: 2rem .5rem;
	border-bottom: 2px solid var(--color-dk-bg);	
	
}

.admin-shoeList__headings, .admin-shoe {
	
	display: grid;
	
	grid-template-columns:2fr 1fr 3fr 4fr 2fr 3fr 3fr 2fr 2fr 1fr;
	text-align: center;
	padding: 2rem .5rem;
	border-bottom: 2px solid var(--color-dk-bg);	
	
}

img.admin-shoe__img{
	
	width:10rem;
	height: 8rem;
	object-fit: cover;

	
}





p.admin-productList_head {
	
	font-size: var(--text-body);
	
}

h4.admin-product__heading {
	
	text-align: left;
	padding-left: 2rem;
}

p.admin-product__text,	h4.admin-product__heading  {
	
	
	font-size: var(--text-body);
}

img.admin-product__img{
	
	width:85%;
	height: auto;
}


.admin_edit--arrow:link,
.admin_edit--arrow:visited{
	
	text-decoration: none;
	
	font-size: 1.8rem;
	
}

		.admin-product--loop{
			
			margin-bottom: 4rem;
		}


.newProduct--link-box{
	
	display: grid;
	justify-content: center;
	
	margin-bottom: 4rem;
		
		
	}
	
	

.product__new:link,
.product__new:visited{
		text-decoration: none;
	
	font-size: 1.8rem;
	
	background-color: var(--color-dk-bg);
color: var(--color-text-white);
	
	padding: .5rem .75rem;
	border-radius: 4px;
	
	
}


/* //			Product Item Page		/// */

.product--grid{
	
	
	column-gap: 12.4rem;
	
	
}

	section.product__images {
		
display: grid;
grid-template-rows: 1fr 1fr;
		
	
	}
	
.product__imagesArray{
	
	display: grid;
	grid-template-columns: repeat(3,1fr);
	column-gap: 2rem;
}

.product__img--cover{
	
	width: 100%;
	height: 100%;
	padding: 10rem;
}

.product__img--array{
	flex:1;
	width: 100%;
}

h2.product__item--heading{
	
	
	text-align: center;
	font-size: 4rem;
	padding: 3rem 0 2rem;
	
}

form.product__form,	form.product__form--create,
form.shoe__form--create , 	form.bag__form , 	form.bag__form--create, form.shoe__form, form.accs__form--create , form.accs__form{
	
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0 auto;
	
	padding: 4.8rem 0;
	
	
}

form.product__form{
	
	width: 100%;
	
}


form.product__form--create, 	form.bag__form--create ,form.shoe__form--create, form.accs__form--create{
	width: 50%;
	
}




.product__form--group{
	display: flex;
	justify-content: space-between;
	align-items: center;
	
}

.product__form--group label{	
	
	font-size: 2rem;
}


.product__form--group input{
	
	width:65%;	
	font-size: 2rem;
}

.product__form--grid-select{
	
	padding-top: 2.4rem;
	
	display: grid;
	
	grid-template-columns: 1fr 2fr;
	column-gap: 3.2rem;
	row-gap: 2rem;
}



.product__form--group--variant{
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 2rem;
}

.product__form--left .product__form--group{
	margin-bottom: 2rem;
}


.product__form--group select{
	
	width: 10.8rem;
}

.product__form--variant-row{
	
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: center;
	
}




.product__form--variant-row label{
	
	font-size: var(--text-body);
	justify-self: end;
}



.product__form--variant-row input{
	
max-width: 5rem;
justify-self: end;
}


button.product__form--btn {
	
	width: 50%;
	align-self: center;
	margin-top: 2rem;
	padding: .75rem 0;
	font-size: 1.8rem;
	font-weight: 600;
	
	cursor: pointer;
	
	
}



img.product__form--img{
	
	width: 200px;
height: 200px;
	}
	
.product__form--btn-box,	.product__form--img-box,	.category__form--img-box{
	
	margin-bottom: 3rem;
	
	
}

	.category__form--img-box{
		
		
		display: flex;
		
		gap: 2rem;
	}

	input#product-image-array{
		
		margin-bottom: .5rem;
	}

.product__form--img-box label,	.category__form--img-box label{
	
	font-size:1.8rem;
	margin-bottom: 1rem;
	display: inline-block;
	
	
}

.product__form--img-box input{
	
	font-weight: 600;
	
}
			
.product__form--btn-box{
	
	display: flex;

	justify-content: center;
	gap: 3.6rem;
}


.product__form--img-box-new {
	
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3.6rem;
}


.product__form--img-box-new label{
	
	font-size: 2rem;
	font-weight: 600;
	
	
	
}

/*-----------------		Users 	--------------------*/


/* //			User List Page		/// */


.admin-userList__headings, 	.admin-user {
	
	display: grid;
	grid-template-columns: 3fr 3fr 2fr 2fr 2fr 1fr;
	align-items: center;
	text-align: center;
	padding: 2rem .5rem;
	border-bottom: 2px solid var(--color-dk-bg);
	
		font-size: var(--text-body);
	
	
	
	
}

p.admin-user__text,	h4.admin-user__heading  {
	
	
	font-size: var(--text-body);
}



section.admin-userList--form-role	{
	
	display: grid;
	align-items: center;
	justify-content: center;
	padding: 1rem 0 4.8rem;
	
}

.form_role--group {
	
	display: flex;
	align-items: center;
	gap: 2rem;
	
}

.form_role {
	
	padding: 2rem 0;
}


.form_role label{
	
	font-size: 3rem;
	font-weight: 600;
	
}


.form_role select{
	
	font-size: 1.8rem;
	padding: .25rem .75rem;
	
	border: none;
	
	border-radius: 4px;
	
	outline: 2px solid var(--color-dk-bg);
	
}

.edit_user--link:link,
.edit_user--link:visited{
	
	
	text-decoration: none;
color: var(--color-text-white);
	background-color: var(--color-dk-bg);
	border-radius: 4px;
	padding: .5rem;
}



/* //				My	User Page					/// */


.user__main--form{
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	
}

.user__form{
	
	display: flex;
	flex-direction: column;
	
}



/* //					User Page					/// */


section.admin__form--box {
	
	display: grid;
	justify-content: center;
}

	.admin__page--heading  {
		
		text-align:center;
		padding: 3.2rem 0 1.6rem;
		
	}
	
	h2.admin__page--heading  {
		
		font-size: 3.2rem;
		
	}
	
	h3.admin__page--heading  {
		font-size: 2.4rem;
	
	}
	
	.divider-flex{
		display: grid;
		grid-template-columns: repeat(3,1fr)
	}


form.admin__form--update, form.admin__form--create{
	
	display: flex;
	flex-direction: column;	
	gap: 2rem;
	
	padding: 4rem 0;
}

form.admin__form--update input{
	
	background-color: var(--color-primary-lightest);
}


form.admin__form--update{
	
color: var(--color-text-white);
	padding: 1.6rem 3.2rem;
}


.admin__form--group{
	
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6rem;
}

	

p.address-form-default{
	
	font-size: var(--text-body);
	text-transform: uppercase;
}

.admin__form--group label, .admin__form--group input, .admin__form--group select{
	
	font-size: 2.2rem;
}

.admin__form--group label{
	
	text-transform: uppercase;
	color:var(--color-text);
	
}

.admin__form--group input{
	
	width: 85%;
}




.admin__form--group-gap{
	

	gap: 10rem;
	
}
.admin__form--group-gap input{
	
width: 60%;
	
}


#user__form-submit,#new-user__form-submit,
#deactivateUser,#new-category--form-submit, #deleteUser  {
	
	width: 35%;
	align-self: center;
	margin-top: 2.4rem;
	
}



section.admin__create {
	
	margin-bottom: 4rem;
}


.admin__create--box{
	
	padding: 2.4rem 0;

	
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}


.admin__create--link:link,
.admin__create--link:visited{
	display: inline-block;
	text-decoration: none;
	
		font-size: var(--text-body);
	background-color: var(--color-bg);
	color: var(--color-text);
	
	padding: .75rem;
	
	outline: 2px solid var(--color-dk-bg);
	
	
}



.admin__form--buttons{
	
	display: flex;
	align-items: center;
	justify-content:center;
}

.admin__form--delete-user{
	
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

#deleteUser, #deactivateUser,#deactivateCategory, #discontinue-btn, #discontinue-shoes-btn, #discontinue-accs-btn ,#discontinue-bag-btn {
	width: 50%;
	background-color: rgba(255, 0, 0, 0.423);	
	cursor:pointer;
	padding: .25rem ;
	

	font-size: 1.6rem;
	font-weight: 600;
}


/* /// 	User Search		/// */


.user-search-form{
	
	display: flex;
	align-items: center;
	gap: 1rem;
	
}


.user-search-form input{
	
	font-size: 2rem;
	padding: .5rem;

	border: none;
	
	outline: 2px solid	var(--color-dk-bg);
	
	
	
}
.user-search-form button{
	
	border: none;
	
	background-color: inherit;
	
	cursor: pointer;
	
	
}

.form-icon{
	
	width: 3.2rem;
	height: 3.2rem;
	color: var(--color-text-muted);
	
}

.form-group-address{
	display: flex;
	flex-direction: column;
	gap: .5rem;

}

#addresses-13,
#addresses-23,
#addresses-33{
	
	background-color: var(--color-dk-bg);
	color: var(--color-text-white);
	padding: .5rem;

	
}


.form-group-address--labels{
	
	display: flex;
	justify-content: space-between;
	align-items: center;

}


.form-group-address--labels input{
	
border: none;
text-align: right;

}

.admin-product-flex{
	display: flex;
	flex-direction: column;
	margin-bottom: 3.2rem;
}



h4.admin-userPage--heading{
	
	font-size: 2.2rem;
	margin-bottom: 1rem;
	
	
}

/* //----------------Categories ---------------- */


/* //		Category List Page		/// */


.admin-categoryList__headings, 	.admin-category {
	
	display: grid;
	
	grid-template-columns:1fr 2fr 2fr 2fr 2fr 1fr ;
	text-align: center;
	padding: 2rem .5rem;
	border-bottom: 2px solid var(--color-dk-bg);
	
	
	
}

.admin-categoryList__headings{
	
	font-size: var(--text-body);
	font-weight: 600;
}

.categoryList_img{	
	
	width: 50%;	
	height: auto;
	
	justify-self: center;
}

p.admin-category__text,	h4.admin-category__heading  {
	
	
		font-size: var(--text-body);
}



.category__form--btn,.btn--submit, .user__form--btn-submit{
	
	width: 35%;
	align-self: center;
	
}




/* //---------------- Orders ---------------- */


/* // Order List Page */



.admin-orderList--grid{
	
	display: grid;
	
	grid-template-columns: 2fr 2fr 2fr 3fr 2fr 2fr 3fr 1fr 1fr;
	column-gap: 2.4rem;
	align-items: center;
	justify-items: center;
	padding-top: 6rem;
}


.admin-orderList--grid h3{
	
	font-size: 2rem;
	text-align: center;
	align-self: flex-start;
	margin-bottom: 2rem;
	
	
}
.admin-orderList--grid p{
	
	font-size: 1.8rem;
	
	
}


.product p, .address p{
	
	margin-bottom: .5rem;
}

 .address{
	
	display: flex;
	flex-direction: column;
justify-self: start;
	padding:1rem;
 }



 
 .admin-orderList-edit--link:link,
 .admin-orderList-edit--link:visited{	
	
	text-decoration: none;
	font-size: 2rem;	
	
	
 }
 
 textarea {
  resize: none;
}



.admin-orderList--search-box {
	
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.searchForm-orders {
	
	display: flex;
	align-items: center;
	gap: 1rem;
	
	text-align: center;
	
}


.searchForm-orders input{
	
	width:32.5rem;

	
	font-size: 2rem;
	font-weight: 600;
	border: none;
	border:1px solid var(--color-secondary);
	color: var(--color-text-muted);
	
	padding: .5rem;
	background-color: var(--color-bg);
	
	
}

.searchForm-orders button{
	
	border: none;
	cursor: pointer;
	background-color: inherit;
}


/* // Order page */

.admin-order--page {
	
	display: grid;
	place-items: center;
}


.admin-order-form--full{
	
	grid-column: span 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* justify-content: center; */
	justify-items: center;
	align-items: center;
	padding: 3.2rem 0;
	width: 100%;
	margin: 0 auto;
	
}

	.admin-top-left, 	.admin-top-right{
		
		display: flex;
		align-items: center;
		gap: 2rem;
	}

.admin-order--form-update{
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 80%;
	column-gap: 10rem;
	row-gap: 3.2rem;

}

.admin-order-left{
	align-self:start;
}

.admin-order-left,.admin-order-right{
	
	display: flex;
	flex-direction: column;
	gap:2.4rem;
}

	.admin-order-product-flex{
		
		display: flex;
		flex-direction: column;
		gap: .25rem;
	}

.admin-order-form--row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.admin-order-form--row h2 {
	
		font-size: var(--text-xlg);
	margin-bottom: 2.4rem;
}

.admin-order-form--row label, .admin-order-form--row input,
.admin-order-form--row textarea , .admin-order-form--full label,
.admin-order-form--full select, .admin-order-form--row select
{
	
		font-size: var(--text-body);
}

#admin-order-product{
	
	width: 32.5rem;
}


.admin-order-form--full label{
	
	background-color: var(--color-dk-bg);
color: var(--color-text-white);
	padding: .75rem 1.2rem;
	border-radius: 6px;
	
}

.admin-order-address--box{
	align-self: flex-start;
	
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.admin-order-address--box p{
	
	font-size: 1.2rem;
	color: #f32828be;
	font-weight: 600;
	
}

.admin-order-address--box label{
	
	align-self: flex-start;
	
}

.shipping-address-label{
	
	background-color: var(--color-dk-bg);
color: var(--color-text-white);
  padding: .75rem 1.2rem;
  border-radius: 6px;
}


.admin-order-form--submit{
	grid-column: span 2;
	justify-self: center;
	padding: 6rem 0;
	
	display: grid;
	justify-items: center;
	
}

.admin-orders-submit-btn{
	
	background-color: var(--color-dk-bg);
	color: var(--color-text-white);
	
	font-size: 2rem;
	
	padding: .75rem 1.2rem;
	border-radius: 6px;	
	
	border: none;
	
	cursor: pointer;
	

	
}

.submit-message p{
	font-size: 2.4rem;
color: #f32828be;
font-weight: 600;
margin-bottom: 3.2rem;
}

.admin-order-form--align--label label{
	
	align-self: flex-start;
}


.address-textarea--select{
	
	display: grid;
}


#shipaddress{
	margin-bottom: .75rem;
}




/* // Orders search */


.admin-order-back{
	
	display: grid;
	align-items: center;
	justify-items: center;
	padding: 4rem 0;
	
}

.backtoorders:link,
.backtoorders:visited{
	
	background-color: var(--color-dk-bg);
 color: var(--color-text-white);
  font-size: 2rem;
  padding: .75rem 1.2rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
	text-decoration: none;
}




/* ------------ Transactions ------------ */





.admin-transactionList--grid{
	
	display: grid;
	
	grid-template-columns: 2fr 3fr 3fr 3fr 1fr 2fr 2fr 1fr;
	column-gap: 2.4rem;
	align-items: center;
	justify-items: center;
	padding-top: 6rem;
}

.admin-transactionList--grid h3 {
	font-size: 2rem;
  text-align: center;
  align-self: flex-start;
  margin-bottom: 2rem;
}

.admin-transactionList--grid p {
	
	font-size: 1.6rem;
	margin-bottom: 2rem;
}





/* ------------ Discounts ------------ */


.create_discount-grid {
	
	
	display: grid;
	
	place-items: center;
}


.create_discount--block{
	
	margin-bottom: 4rem;
	
}


.create_discount--row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4.8rem;
	margin-bottom: 1rem;
}

.create_discount--row input,
.create_discount--radio input,
.create_discount--radio label,
.create_discount--row label{
	
	font-size: 2rem;
	
}



.create_discount--radio-flex {
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 3rem;
}


.create_discount--inputs{
	
	font-size: 2rem;
	display: flex;
	align-items: center;
	gap: 3rem;

}

.create_discount-inputs--flex{
	
	display: flex;
	gap: .75rem;
}


.admin-discountList--grid{
	display: grid;
  grid-template-columns: 2fr 2fr  2fr 3fr 3fr 3fr 3fr 2fr 2fr;
  column-gap: 2.4rem;
  align-items: center;
  justify-items: center;
  padding-top: 3rem;
	
}


.admin-discountList--grid h3{
	
	font-size: 2rem;
  text-align: center;
  align-self: flex-start;
  margin-bottom: 2rem;

	
	
}

	.admin-discountList--grid p{
		
		margin-bottom: 2rem;
	}


/* ----------- Alert /Error Page ------------ */

.alert {
	
	position: fixed;
  top: 7%;
  left: 50%;
	
  transform: translateX(-50%);
	
  z-index: 9999;
	
  color: var(--color-text-white);

  font-size: var(--text-xxlg);
  font-weight: 600;
  text-align: center;

	width: 100%;
	border-radius: 10px;

  padding: 2.8rem 12rem;
	
  box-shadow: var(--shadow-md);
	
border-top: 4px solid var(--color-secondary);
border-bottom: 4px solid var(--color-secondary);
	
	
}



.alert--success {
  background-color: var(--color-secondary);
	
}


.alert--error {
  background-color: rgba(255, 0, 0, 0.423);
}

.error {
	
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	gap: 6rem;
	padding: 6rem 0;
	
  max-width: 80rem;
  text-align: center;
	min-height: 62.5vh;
	
}



.error__title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--mrg-nrm);
}

.error__emoji {
	
  font-size: var(--text-xlg);
  margin-left: var(--mrg-sm);
	
}

.error__msg {
	
  font-size: var(--text-h2);
  font-weight: 700;
  max-width: 60rem;
  margin: 0 auto;
}

.heading-secondary--error{
	
	font-size: var(--text-xxlg);
}




/* ------------------- MEDIA QUERIES --------------------- */


/* /// 1200px */


@media (max-width: 75em) {
	
	html{
		
		font-size: 53.5%;
	}
	
}

/* /// 1050px */

@media (max-width: 63.5em) {
	
	html{
		
		font-size: 50%;
	}
	
}

/* /// 960px */

@media (max-width: 60em) {
	
html{
		
		font-size: 48.5%;
	}
	
.productList	{	

	grid-template-columns: repeat(auto-fit, minmax(15rem ,17rem));
	gap:3rem;

	
}

.homePage__services--grid{

	grid-template-columns: repeat(auto-fit, minmax(22.5rem, 30rem));
	gap: 3.2rem;	
	padding: 0 2rem;	
	
}
	.services--text-box
 {
  height: 6rem;
    line-height: 1.35;
 
}
}

/* /// 810px */

@media (max-width: 50.63em) {
	
html{
		
		font-size: 45%;
	}

}