@charset "utf-8";


/* ------------------ SECTION ------------------ */
.banner-slider { overflow: hidden; }
.greeting { overflow: hidden; }
.featured-products { overflow: hidden; }
.our-catalog { overflow: hidden; }
.vdo-photo-orchid { overflow: hidden; }
.about-summary { overflow: hidden; }
.scrolling.home { top: -80px; left: calc(100vw - 70px); }


/* ------------------ LINE VERTICAL ------------------ */
.line-vertical-green02 {
	width: calc( 50% - 350px);
	height: 15vh;
	border-right: solid 1px var(--green02-color);
}
.line-vertical-purple04 {
	width: calc( 100% - 190px);
	height: 14vh;
	border-right: solid 1px rgba(108,86,123,.4);
}
.line-vertical-purple02 {
	width: 50%;
	height: 18vh;
	margin-top: 24px;
	float: right;
	border-left: solid 1px rgba(108,86,123,.4);
}

/* ------------------ WELCOME ------------------ */
.greeting { padding-top: 120px; }
h1.welcome { 
	font-size: clamp(28px, 14vw, 120px);
	font-weight: 900; 
	text-align: center; 
	color: var(--green02-color);
}
h3.welcome { 
	margin-top: 20px;
	font-size: 22px;
	text-align: center; 
	color: var(--green04-color);
}
p.welcome-text {
	max-width: 540px;
	padding: 0 20px;
	font-size: 17px;
}
img.welcome-logo { width: 80%; }
.break-holiday { display: none; }
.bottom-bar { background-color: var(--green01-color); }
.greeting { background: linear-gradient(to top, var(--green01-color) 35px, transparent 35px); }
.welcome-text {
	padding: 0 40px 35px;
}
.quote-mark {
  font-size: 2.2em;
  line-height: 0;
  vertical-align: middle;
  display: inline-block;
}


/* ------------------ FEATURED PRODUCTS ------------------ */
.featured-products { padding-top: 100px; }
.featured-head {
	width: 100%;
	margin-bottom: 23px;
	padding-top: 0;
	padding-right: 30px;
	position: relative;
	text-align: right;
	display: flex;
  	align-items: center;
	justify-content: flex-end; 
}
.featured-head h1 {
  margin: 0 10px 0 0;
  padding: 0;
  color: var(--green00-color);
  font-size: clamp(28px, 14vw, 74px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 3px;
  display: inline-block;
  overflow: hidden;
}

.featured-head .arrow-left,
.featured-head .arrow-right {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.featured-head .arrow-left { margin-right: 1px;}
.featured-head .arrows {
  display: flex;
  align-items: center;
  margin-left: auto;
}
ul.featured-list li .box {
	height: 100%;
	margin: 0;
	padding: 0;
	color: var(--green02-color);
	font-size: 22px;
	text-align: center;
	background: #bed9aa;
	border: solid 1px var(--green02-color) ;
	display: flex;
	flex-direction: column;
}
ul.featured-list li .box:hover { background:  var(--green00-color); }
ul.featured-list li .box p {
	margin: 0;
	padding: 10px 15px 13px;
	color: var(--green04-color);
	font-weight: normal;
	-moz-transition: all .4s cubic-bezier(.1,.7,.3,1);
	-webkit-transition: all .4s cubic-bezier(.1,.7,.3,1);
	-o-transition: all .4s cubic-bezier(.1,.7,.3,1);
	-ms-transition: all .4s cubic-bezier(.1,.7,.3,1);
	transition: all .4s cubic-bezier(.1,.7,.3,1);
}
ul.featured-list li .box:hover p {
	color: var(--white-color);
	-moz-transition: all .4s cubic-bezier(.1,.7,.3,1);
	-webkit-transition: all .4s cubic-bezier(.1,.7,.3,1);
	-o-transition: all .4s cubic-bezier(.1,.7,.3,1);
	-ms-transition: all .4s cubic-bezier(.1,.7,.3,1);
	transition: all .4s cubic-bezier(.1,.7,.3,1);
}
ul.featured-list li .box img {
	transform: scale(1);
	opacity: 1;
	-moz-transition: all .4s cubic-bezier(.1,.7,.3,1);
	-webkit-transition: all .4s cubic-bezier(.1,.7,.3,1);
	-o-transition: all .4s cubic-bezier(.1,.7,.3,1);
	-ms-transition: all .4s cubic-bezier(.1,.7,.3,1);
	transition: all .4s cubic-bezier(.1,.7,.3,1);
}
ul.featured-list li .box:hover img {
	transform: scale(1.15);
	opacity: 0.5;
	-moz-transition: all .4s cubic-bezier(.1,.7,.3,1);
	-webkit-transition: all .4s cubic-bezier(.1,.7,.3,1);
	-o-transition: all .4s cubic-bezier(.1,.7,.3,1);
	-ms-transition: all .4s cubic-bezier(.1,.7,.3,1);
	transition: all .4s cubic-bezier(.1,.7,.3,1);
}


/* ------------------ CATALOG ------------------ */
.our-catalog { 
	padding-bottom: 80px;
	background: linear-gradient(to bottom, var(--green01-color) 35px, transparent 35px);
	overflow: hidden;
}
.catalog-body {
  width: 100%;
  max-width: 100%; /* เริ่มต้นเต็ม */
  margin: 0 auto;
  padding: 100px 40px;
  color: var(--white-color);
  background-color: var(--purple04-color);
  position: relative;
  box-sizing: border-box;
  transition: max-width 0.3s ease; /* เพิ่ม transition */
}
.catalog-head {
    height: 100%;
	text-align: left;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.catalog-head h1 {
	color: var(--green00-color);
	font-size: clamp(28px, 14vw, 80px);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 3px;
}
.catalog-head p {
	padding-right: 60px;
	font-size: 17px;
}
ul.catalog-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 คอลัมน์ */
  grid-auto-rows: 200px;
  gap: 15px;
  padding: 0;
  margin: 0;
  list-style: none;
}

ul.catalog-list li {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}

ul.catalog-list li a {
	width: 100%;
	height: 100%;
	color: var(--purple01-color);
	background-color: var(--purple04-color);
	border: solid 1px rgba(255, 255, 255, .3);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 1s ease, color 0.6s ease;
}

/* hover ปกติ */
ul.catalog-list li a:hover {
  background-color: rgba(108,86,124,.55);
  border: solid 1px rgba(255, 255, 255, .7);
  color: var(--white-color);
}

/* เอฟเฟ็กท์สุ่ม (active) */
ul.catalog-list li.active a {
	color: var(--white-color);
	background-color: #9e90a9;
	border: solid 1px rgba(255,255,255,.7);
}

/* layout เพิ่มเติม */
ul.catalog-list li:nth-child(1) { grid-column: span 2; }
ul.catalog-list li:nth-child(3), ul.catalog-list li:nth-child(5) { grid-row: span 2; }
ul.catalog-list li:nth-child(10) { grid-column: span 2; }
ul.catalog-list li:nth-child(12), ul.catalog-list li:nth-child(14) { grid-row: span 2; }


/* ------------------ ABOUT ------------------ */
.about-summary { overflow: hidden; }
 h1.about-us-topic {
	font-size: clamp(28px, 14vw, 82px);
	font-weight: 900; 
	text-align: right; 
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--purple04-color);
}
 h2.about-us-topic {
	font-size: clamp(28px, 14vw, 60px);
	font-weight: 300; 
	text-align: right; 
	color: var(--purple03-color);
}
.about-us-head h3 {
	width: 80%;
	margin-left: auto;
	font-size: clamp(28px, 14vw, 30px);
	font-weight: 200; 
	text-align: center; 
	color: var(--purple02-color);
}
.about-us-head p {
	width: 80%;
	margin-left: auto;
	font-size: 17px;
	text-align: center;
}
.about-us-head img { float: right; }

.about-us-photo { 
	padding-top: 200px;
}
ul.about-us-photo {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 คอลัมน์ */
  grid-auto-rows: 200px;
  gap: 15px;
  padding: 0;
  margin: 0;
 margin-top: 60px;
  list-style: none;
}
ul.about-us-photo li {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
ul.about-us-photo li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

ul.about-us-photo li:nth-child(1) { margin-top: 50px; }
ul.about-us-photo li:nth-child(2) { grid-row: span 3; top: 100px; }
ul.about-us-photo li:nth-child(6) { margin-left: 50px; }
ul.about-us-photo li:nth-child(7) { margin-right: 50px; margin-top: 100px; }