@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* Remove underlines from all text across the site */
* { text-decoration: none !important; }

body{font-family:'Montserrat', Arial, Helvetica, sans-serif;padding:16px;color:#846D31}
html, body { max-width:100vw; overflow-x: hidden; }
main{margin-left:36px}

/* Page-specific backgrounds */
body.home{background-color:#D9C576;color:#A38C2E}
body.shop{background-color:#D9C576}
body.about{background-color:#E2D686}
body.contact{background-color:#E2D686}
body.cart-page{background-color:#E2D686}
body.product-page{background-color:#D9C576}

body.home header h1,
body.home header h1 a { color:#A38C2E !important; }
body.home header{ padding-left:360px; padding-top:140px; align-items:center; position:relative; z-index:2; }
body.home .header-left{ gap:12px; align-items:center; }
body.home header nav{ margin-left:12px; align-items:center; }

/* Header layout: company name and nav on one horizontal line */
header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:12px 24px;
}
header h1{margin:0;font-size:2.5rem}
.header-left{display:flex;align-items:center;gap:40px;white-space:nowrap}
header nav{display:flex;align-items:center;gap:12px}
header nav a{color:inherit;text-decoration:none}

/* Ensure header titles/links are not underlined, do not change color when clicked, and are at least 18px */
header h1, header nav a {
	font-size: 18px;
}
header nav a {
	font-weight: 600;
}
header nav a, header nav a:visited, header nav a:focus, header nav a:hover, header nav a:active {
	text-decoration: none;
	color: inherit;
}

/* Mobile hamburger button and mobile nav */
.hamburger{display:none;appearance:none;border:0;background-color:#3C787E;background-image:url('assets/images/menu.png');background-repeat:no-repeat;background-position:center;background-size:18px 18px;padding:0;width:42px;height:42px;border-radius:10px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.12);position:relative;z-index:2001;}
.hamburger .hamburger-box, .hamburger .hamburger-inner{display:none}

/* Mobile nav (hidden by default on small screens) */
#mobile-nav{display:flex;gap:12px}

@media (max-width:720px){
	body, html{overflow-x:hidden;}
	body.home header{padding-left:16px; padding-top:16px;}
	.hamburger{display:inline-flex;align-items:center;justify-content:center}
	header{flex-wrap:wrap;align-items:center;justify-content:space-between;}
	.header-left{gap:12px;flex:1;}
	#cart-icon{position:static;margin-left:auto;order:2;}
	#mobile-menu-button{order:1;}
	header nav{display:none !important}
	#mobile-nav{display:none}
	body.mobile-nav-open #mobile-nav{
		display:flex;
		position:fixed;
		left:0;top:0;right:0;bottom:0;
		flex-direction:column;
		align-items:flex-start;
		padding:80px 20px 20px 20px;
		gap:20px;
		background: #fff;
		z-index:2001;
	}
	body.mobile-nav-open{overflow:hidden}
	#mobile-nav a{display:block;width:100%;padding:14px 0;font-size:1.1rem;}
	main{margin-left:0;padding:16px;}
}

/* Site title: always styled and never underlined across all pages and states */
	header h1, header h1 a {
	color: inherit;
	text-decoration: none !important;
}
header h1 a, header h1 a:visited, header h1 a:focus, header h1 a:hover, header h1 a:active {
	color: inherit;
	text-decoration: none !important;
}

/* Make page titles slightly thicker */
h1, h2 { font-weight: 700; }
nav a{margin-right:12px}
#products{
	display:grid;
	grid-template-columns:1fr;
	gap:20px;
	max-width:66vw;
	min-width:560px;
	margin:0 auto;
	/* let the page (body) handle scrolling so the scrollbar appears at the viewport edge */
	padding-right:12px;
}

/* Shop page: add spacing below header and center product grid */
body.shop main{ margin-left:0; padding-top:48px; display:flex; justify-content:center }
body.shop #products{ margin:0 auto }
.product{
	border:1px solid #ddd;
	padding:0;
	width:100%;
	min-height:440px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	gap:0;
}
.product-link{
	display:block;
	flex:0 0 66.666%;
	overflow:hidden;
}
.product-image{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
}
.product-wrapper{
	flex:0 0 33.333%;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:12px 24px;
	box-sizing:border-box;
}
.product-title{
	font-size:1.1rem;
	font-weight:700;
	margin:0;
}
.product-price{
	font-size:1rem;
	color:#A38C2E;
	margin:0;
}
 .detail-card{
	display:grid;
	grid-template-columns:1fr;
	gap:20px;
	max-width:720px;
	margin:0 auto;
	padding:24px;
	border:1px solid #ddd;
	background:transparent;
}
.detail-image{
	width:auto;
	max-width:70%;
	height:50vh;
	display:block;
	object-fit:contain;
	margin:0 auto;
}
.detail-copy{
	background:#D9C576;
	padding:24px;
	border-radius:16px;
}
.detail-copy h2{
	margin:0;
	font-size:1.75rem;
}
.detail-meta{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
}
.detail-cost{
	font-size:1.2rem;
	font-weight:700;
	color:#846D31;
}
.detail-info, .detail-dropdown{display:none !important;}
.detail-description{margin:0 0 18px;line-height:1.6;}
#detail-qty{
	padding:10px 12px;
	border:1px solid #ccc;
	border-radius:12px;
	background:#D9C576;
	color:#433E0E;
	font-family:'Montserrat', Arial, Helvetica, sans-serif;
	-moz-appearance: textfield;
}
#detail-qty::-webkit-outer-spin-button,
#detail-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
#detail-add{
	padding:12px 18px;
	font-size:1rem;
	background:#A38C2E;
	color:#E2D686;
	border:none;
	border-radius:10px;
	cursor:pointer;
	transition: background .2s ease;
}
#detail-add:hover{
	background:#3C787E;
}
#detail-add:disabled{
	opacity:.7;
	cursor:default;
}
.detail-info div{
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:.98rem;
}
.detail-info strong{
	font-weight:700;
}
 .detail-info span{
	color:#A38C2E;
}
.detail-actions{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	gap:18px;
	margin-top:24px;
	flex-wrap:wrap;
}
.detail-qty-control{
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:10px;
	font-size:.95rem;
	color:#A38C2E;
}
.qty-input-wrap{
	display:flex;
	align-items:center;
	gap:8px;
}
.qty-input-wrap input{
	width:80px;
	min-width:64px;
	padding:10px 12px;
	text-align:center;
	border:1px solid #ccc;
	border-radius:12px;
	background:#D9C576;
	color:#433E0E;
}
.qty-button{
	appearance:none;
	border:1px solid #A38C2E;
	background:#A38C2E;
	color:#E2D686;
	width:38px;
	height:38px;
	border-radius:10px;
	cursor:pointer;
}
.qty-button:hover{
	background:#3C787E;
}
.detail-note{
	margin:0;
	color:#A38C2E;
	font-size:.95rem;
	line-height:1.5;
}
#cart-contents{margin-top:8px}

/* Home page hero layout */
body.home main{
	position:relative;
	min-height:calc(100vh - 90px);
	margin-left:0;
	padding-top:180px;
}
.home-hero{
	display:grid;
	place-items:center;
	min-height:calc(100vh - 90px);
	padding:0 16px;
	text-align:center;
}
.home-logo{
	position:fixed;
	top:0;
	left:0;
	width:320px;
	max-width:40vw;
	height:auto;
	object-fit:contain;
	z-index:1;
}
.home-heading{
	position:relative;
	z-index:2;
	max-width:720px;
	padding:32px;
	background:rgba(255,255,255,0.72);
	border-radius:24px;
	box-shadow:0 12px 30px rgba(0,0,0,0.12);
}
.home-heading h2{
	margin:0 0 14px;
	font-size:3rem;
	line-height:1.05;
}
.home-heading p{
	margin:0;
	font-size:1.05rem;
	color:#5e4f30;
}

/* Cart page button branding */
body.cart-page button,
body.cart-page #checkout,
body.cart-page #promo-apply {
	background:#D9C576 !important;
	color:#433E0E !important;
}
body.cart-page #promo-code{
	background:#D9C576 !important;
	color:#433E0E !important;
}

.detail-note{
	margin:0;
	color:#A38C2E;
	font-size:.95rem;
	line-height:1.5;
}
#cart-contents{margin-top:8px}

/* Cart icon (fixed top-right) */
#cart-icon{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	background: transparent;
	padding:0;
	border-radius:0;
	box-shadow:none;
	color:#333;
	width: 33px;
	height: 33px;
}
#cart-icon svg{display:block}
#cart-icon img{display:block;width:100%;height:100%;object-fit:contain;background:transparent;border:none}

#cart-count{
	display:none;
	color: #3C787E;
	padding: 0;
	margin: 0;
	font-weight:700;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	font-size: 19px;
	line-height: 1;
	position:absolute;
	/* place the qty just to the lower-right of the icon without overlapping double-digit numbers */
	bottom: -8px;
	right: -8px;
	transform: none;
	background: transparent;
	border: none;
	box-shadow: none;
}

/* Shop page: add spacing below header and center product grid */
body.shop main{ margin-left:0; padding-top:96px; display:flex; justify-content:center }
body.shop #products{ margin:0 auto }
body.product-page main{ margin-left:0; padding-top:96px; display:flex; justify-content:center }
body.product-page .detail-card{max-width:720px; margin:0 auto;}

/* Global viewport scrollbar styling: rounded thumb in #433E0E */
body{overflow-x:hidden}
body{
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #433E0E transparent;
}
/* WebKit browsers */
body::-webkit-scrollbar{
  width:12px;
}
body::-webkit-scrollbar-track{ background: transparent; }
body::-webkit-scrollbar-thumb{
	background:#433E0E;
	border-radius:999px;
}

@media (max-width:480px){
	#cart-icon{position:relative;padding:0}
	header{justify-content:space-between}
	.header-left{gap:16px}
}

/* Cart row styles */
.cart-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.06)}
.cart-controls button{border:none;background:#fff;border-radius:6px;cursor:pointer;padding:6px}
.cart-controls .cart-rem{background:transparent;color:#A38C2E;padding:6px 10px}

.cart-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;margin-right:12px;flex-shrink:0}

.vertical-qty button{display:block;padding:4px;border-radius:6px;border:1px solid rgba(0,0,0,0.06);background:#E2D686;color:#A38C2E;font-weight:700}
.vertical-qty{display:flex;flex-direction:column}