html, body { height: 100%; }

body{
	background-color: #f8f9fa;
	display: flex;
	flex-direction: column;
	font-family: 'Noto Sans Thai', system-ui, -apple-system, BlinkMacSystemFont,
							 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.filter-sidebar { background: white; border-radius: 12px; position: sticky; top: 20px; height: fit-content; }
.product-card { background: white; border-radius: 12px; transition: all 0.3s ease; height: 100%; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
/* Product card thumbnail : full thumbnail with center crop */
.product-image{
	width: 100%;
	height: 240px;              /* ความสูง thumbnail คงที่ */
	object-fit: cover;          /* ครอปให้เต็ม */
	object-position: center;    /* โฟกัสตรงกลาง */
	background: #f2f2f2;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	display: block;
}
.price { color: #2563eb; font-weight: 600; }
.discount-badge { position: absolute; top: 10px; right: 10px; background: #dc2626; color: white; padding: 4px 8px; border-radius: 6px; font-size: 0.875rem; }

.wishlist-btn { position: absolute; top: 10px; left: 10px; background: white; border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }

.wishlist-btn:hover { background: #fee2e2; color: #dc2626; }
.rating-stars { color: #fbbf24; }
.category-badge { background: #e5e7eb; color: #4b5563; padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; }
.filter-group { border-bottom: 1px solid #e5e7eb; padding-bottom: 1rem; margin-bottom: 1rem; }
.color-option { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; position: relative; }
.color-option.selected::after { content: ''; position: absolute; inset: -3px; border: 2px solid #2563eb; border-radius: 50%; }
.sort-btn { background: white; border: 1px solid #e5e7eb; padding: 8px 16px; border-radius: 8px; transition: all 0.2s; }
.sort-btn:hover { background: #f3f4f6; }
.cart-btn { background: #14532d; color: white; border: none; transition: all 0.2s; }
.cart-btn:hover { background: #00be6f; transform: translateY(-2px); }

h1, h2, h3, h4, h5 {
		font-weight: 600;
		letter-spacing: 0.2px;
}

.main-content {
	flex: 1;
}
.hero-title {
		font-weight: 700;
}
/* ปรับระยะบรรทัดให้ชิดขึ้น */
.tight-line {
		line-height: 1.5;   /* ค่าแนะนำ: 1.35 – 1.45 */
}
footer {
	background: #14532d; /* หรือสีตามที่คุณใช้ */
	color: white;
	padding: 20px 0;
	text-align: center;
}

.white-space-nowrap {
  white-space: nowrap;
}

.text-favourite {
	color: #d63384 !important; /* ชมพู Bootstrap, หรือเปลี่ยนเป็นสีอื่นที่คุณต้องการ */
}

/* Modal large image: show full image within viewport */
#imageModal .modal-body{
	display: flex;
	align-items: center;
	justify-content: center;
}

#modalImage{
	width: 100%;
	height: auto;
	max-height: 80vh;      /* ไม่ให้สูงเกินจอ */
	object-fit: contain;   /* สำคัญ: ไม่ครอป */
	background: #000;      /* optional: ถ้าอยากให้ตัดกับภาพ */
}


/* About - Story Gallery (2 per row, equal crop) */


/* mobile -> 1 per row */
@media (max-width: 576px){
	.story-gallery{ grid-template-columns: 1fr; }
}

.category-desc-card{
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
}

.category-desc-header{
	background: linear-gradient(90deg, rgba(25,135,84,.14), rgba(25,135,84,.04));
	border-bottom: 1px solid rgba(0,0,0,.06);
}

.category-desc-icon{
	width:46px;height:46px;
	border-radius: 999px;
	display:flex;align-items:center;justify-content:center;
	background: rgba(25,135,84,.14);
	color: #198754;
	flex: 0 0 46px;
}

.category-desc-muted{ color: rgba(33,37,41,.75); }

.category-desc-box{
	background: rgba(25,135,84,.06);
	border: 1px solid rgba(25,135,84,.12);
	border-radius: 14px;
	padding: 14px 16px;
}

.category-desc-text{
	line-height: 1.75;
	font-size: .98rem;
	margin: 0;
}

.category-desc-divider{
	border-top: 1px dashed rgba(25,135,84,.28);
	margin: 12px 0;
}

.clamp-5{
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.story-lead {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

/* ชื่อเว็บ */
.story-brand {
	font-size: 1.8rem;   /* เด่นขึ้นชัด */
	font-weight: 700;    /* ให้มีน้ำหนักมากกว่าสโลแกน */
	letter-spacing: 0.6px;
	color: #1f3d2b;      /* เขียวเข้มเดียวกับธีม */
	margin-bottom: 0.6rem;
}

/* สโลแกนหลัก (เด่นขึ้น) */
.story-slogan {
	font-size: 1.6rem; /* ~26px */
	font-weight: 500;
	line-height: 1.4;
	color: #1f3d2b;
	margin-bottom: 0.75rem;
}

/* คำอธิบายภาษาไทย */
.story-tagline-th {
	font-size: 1.05rem;
	color: #6c757d;
}

/* Responsive */
@media (max-width: 768px) {
	.story-brand {
		font-size: 1.45rem;
	}
}

/* Gallery wrapper */
.story-gallery {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Shared row style */
.story-row {
	display: grid;
	gap: 1.25rem;
}

/* 3 images row */
.story-row-3 {
	grid-template-columns: repeat(3, 1fr);
}

/* 2 images row */
.story-row-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* Card = ratio wrapper */
.story-card {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;   /* ปรับได้: 1/1, 3/4, 16/9 */
	overflow: hidden;
	border-radius: 14px;
	background: #f4f4f4;
}

/* Image fit */
.story-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;      /* crop กลาง */
	object-position: center;
	display: block;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.story-row-3 {
		grid-template-columns: 1fr;
	}
	.story-row-2 {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
	 Category Description Card (Products page) - PRO STYLE
	 (Make it look like the screenshot: green header + box TH/EN)
	 ========================================================= */

	 
	 .category-desc-card:hover{
		 box-shadow: 
			 0 8px 24px rgba(0,0,0,0.06),
			 0 2px 6px rgba(0,0,0,0.08);
	 }
	 
.category-desc-card .badge.text-bg-success{
		 background: rgba(25,135,84,.95) !important;
		 backdrop-filter: blur(6px);
	 }

.category-desc-header{
	background: #eef7f2; /* soft green like screenshot */
	border-bottom: 1px solid rgba(0,0,0,.06);
}

.category-desc-icon{
	width: 46px;
	height: 46px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(25,135,84,.14);
	color: #198754;
	flex: 0 0 46px;
}

.category-desc-muted{
	color: rgba(33,37,41,.70);
}

/* Inner body area padding looks nicer */
#categoryDescBody .p-3,
#categoryDescBody .p-md-4{
	background: #fff;
}

/* TH/EN box */
.category-desc-box{
	background: #f3faf6;
	border: 1px solid rgba(25,135,84,.14);
	border-radius: 14px;
	padding: 16px 18px;
}

.category-desc-text{
	line-height: 1.75;
	font-size: .98rem;
	margin: 0;
}

.category-desc-divider{
	border-top: 1px dashed rgba(25,135,84,.28);
	margin: 14px 0;
}

/* Badge in header */
.category-desc-card .badge.text-bg-success{
	background-color: #198754 !important;
	font-weight: 600;
}

/* Hide/Show button look */
#btnToggleCatDesc{
	border-color: rgba(25,135,84,.45) !important;
	color: #198754 !important;
	background: #fff !important;
	border-radius: 10px;
	padding: 6px 12px;
}

#btnToggleCatDesc:hover{
	background: rgba(25,135,84,.08) !important;
}

/* Responsive: keep header tidy on mobile */
@media (max-width: 576px){
	.category-desc-header .d-flex.align-items-start.gap-3{
		gap: 10px !important;
	}
	.category-desc-icon{
		width: 40px; height: 40px; flex-basis: 40px;
	}
}

/* ป้องกันล้นจอแนวนอน */
html, body { overflow-x: hidden; }

/* Navbar responsive (mobile) */
@media (max-width: 576px){
	.navbar .container-fluid{ flex-wrap: wrap; padding-left: 10px; padding-right: 10px; }

	.navbar .navbar-brand{
		max-width: 100%;
		white-space: normal !important;
		overflow: hidden;
	}

	.navbar .navbar-brand span{
		display: inline;
		white-space: normal !important;
		overflow-wrap: anywhere;
		line-height: 1.15;
		font-size: 1.05rem !important;
	}

	.navbar .navbar-brand small{
		display: block;
		white-space: normal !important;
		font-size: 0.75rem !important;
		line-height: 1.2;
		opacity: .95;
	}

	.navbar .navbar-brand img{ height: 32px !important; }
}