@charset "utf-8";
/* =====================================================================
   Honda Online Store — Mobile stylesheet  (โหลดเฉพาะ <= 768px)
   ทุก rule ห่อใน @media max-width:768px อีกชั้นเพื่อความปลอดภัย
   -> ไม่กระทบ desktop เด็ดขาด
   ครอบคลุม 2 หน้า: Homepage (main.php) + Product List (product/list.php)
   ===================================================================== */

@media screen and (max-width: 768px) {

/* ---------- base / reset ---------- */
#page { min-width: 0 !important; width: 100%; }
body  { overflow-x: hidden; }

/* ---------- HEADER : คงหน้าตาเดิม + ทำให้ fixed เพื่อ fade ซ่อน/โชว์ตอน scroll ----------
   (พฤติกรรม fade อยู่ใน mobile.js ; CSS แค่เตรียม fixed + transition) */
#header {
	position: fixed; top: 0; left: 0; width: 100%;
	z-index: 9999; background: #FBFBFB;
	-webkit-transition: -webkit-transform .3s ease, opacity .3s ease;
	transition: transform .3s ease, opacity .3s ease;
}
#header.header-hidden {
	-webkit-transform: translateY(-110%);
	transform: translateY(-110%);
	opacity: 0;
}
/* เผื่อพื้นที่ใต้ header (mobile.js จะตั้งค่าจริงตามความสูง header อีกที) */
#container { padding-top: 48px; }
/* ให้เมนู off-canvas (เปิดด้วย hamburger) อยู่เหนือ fixed header เวลาเปิด */
#sidebar { z-index: 10000; }

/* ---------- เมนูบน: ซ่อนลิงก์ APPARELS / MOTORCYCLE ACCESSORIES / COLLECTABLE
   (เดิมล้นเป็น 2 แถว) เหลือเฉพาะแฮมเบอร์เกอร์ — เมนูทั้งหมดอยู่ในแฮมเบอร์เกอร์แทน ---------- */
#header #nav ul li:not(#menu-trigger) { display: none !important; }
#header #nav { float: left; width: auto; }
#header #nav ul li#menu-trigger { float: left; margin: 0; }
#header #nav ul li#menu-trigger img { display: block; }

/* ---------- #slider : ใหญ่/เต็ม scene + ลูกศร + จุดใหญ่ขึ้น ---------- */
#slider { position: relative; }
#slider .flexslider,
#slider .flexslider .slides,
#slider .flexslider .slides > li { height: 48vh; }
#slider .flexslider .slides img {
	width: 100%; height: 48vh; display: block;
	object-fit: cover; object-position: center center;
}
#slider .flexslider .flex-control-nav { bottom: 10px; }
#slider .flexslider .flex-control-paging li a { width: 11px; height: 11px; }
/* ปุ่มลูกศร (inject โดย mobile.js) */
#slider .m-slider-prev,
#slider .m-slider-next {
	position: absolute; top: 50%; margin-top: -22px;
	width: 44px; height: 44px; line-height: 44px; text-align: center;
	font-size: 40px; color: #fff; cursor: pointer; z-index: 50;
	text-shadow: 0 1px 4px rgba(0,0,0,.55);
	-webkit-user-select: none; user-select: none;
	-webkit-tap-highlight-color: transparent;
}
#slider .m-slider-prev { left: 4px; }
#slider .m-slider-next { right: 4px; }

/* ---------- #homenav : แถวแนวนอน -> เรียงแนวตั้ง + ชิดกัน (ไม่มีช่องว่าง) ---------- */
#slider .flexslider { margin: 0; }        /* override margin:auto -> hero ชิดแบนเนอร์ */
#homenav { margin: 0; }
#homenav ul { margin: 0; padding: 0; }
#homenav ul li { width: 100%; float: none; margin: 0; }   /* เดิม 8px -> 0 ชิดกันสนิท */
#homenav ul li:first-child { margin-left: 0; }
#homenav ul li a { display: block; font-size: 0; line-height: 0; }  /* กัน gap ใต้ภาพ inline */
#homenav ul li a img { width: 100%; display: block; vertical-align: top; }

/* ---------- การ์ดสินค้า : ปรับขนาด font ให้พอดี 2 คอลัมน์ (เฉพาะ font/height ปลอดภัยต่อ carousel) ---------- */
ul.product-list li { height: auto; }
ul.product-list li h5    { font-size: 16px; height: auto; }
ul.product-list li .name { font-size: 14px; }
ul.product-list li p     { font-size: 14px; height: auto; }

/* =====================================================================
   (A) HOMEPAGE  (main.php)
   ===================================================================== */

/* NEW ARRIVAL : ซ่อนหัว, คง "วงกลม" h3/h4 กึ่งกลาง, สินค้าเป็นกริด 2 คอลัมน์ */
.arrival h1, .arrival h2 { display: none; }
.arrival h3 { font-size: 30px; margin: 25px 0 0; }
.arrival h4 { margin: 20px auto 0; }
.arrival ul#gender { margin: 15px auto 10px; }
.arrival ul#gender li a { padding: 6px 14px; font-size: 14px; }
.arrival .wrap { width: 94%; margin-bottom: 20px; }
/* รีเซ็ตการวางลอย (desktop วางชิ้น 1,2 แบบ absolute) */
.arrival .wrap ul.product-list li:nth-child(1),
.arrival .wrap ul.product-list li:nth-child(2) { position: static; }
.arrival ul.product-list li { width: 46%; margin: 0 2% 20px; float: left; }

/* MEN / WOMEN : banner เต็มกว้าง + สินค้าเป็น carousel ทีละ 2 (สร้างด้วย mobile.js) + ปุ่ม More */
#homepage .product-row { margin: 0 0 40px; }
#homepage .product-row .banner { width: 100%; margin-bottom: 10px; }
/* neutralize flexslider chrome เดิมสำหรับ carousel ที่เราสร้าง */
#homepage .product-row .mobile-carousel {
	position: relative; margin: 0; background: transparent;
	border: 0; border-radius: 0; box-shadow: none;
}
#homepage .product-row .mobile-carousel ul.slides li { margin: 0; height: auto; }
#homepage .product-row .mobile-carousel ul.slides li .photo img { width: 80%; }
/* ลูกศร ‹ › ของ carousel (flexslider directionNav) */
#homepage .product-row .mobile-carousel .flex-direction-nav { margin: 0; }
#homepage .product-row .mobile-carousel .flex-direction-nav a {
	position: absolute; top: 50%; margin: -20px 0 0; display: block;
	width: 40px; height: 40px; line-height: 40px; text-align: center;
	font-size: 0; color: #e95513; opacity: 1; cursor: pointer;
	background: none; text-shadow: none; overflow: hidden;
}
#homepage .product-row .mobile-carousel .flex-direction-nav a:before { display: none; } /* ลบ glyph เดิมของ flexslider */
#homepage .product-row .mobile-carousel .flex-direction-nav .flex-prev { left: 0; }
#homepage .product-row .mobile-carousel .flex-direction-nav .flex-next { right: 0; }
#homepage .product-row .mobile-carousel .flex-direction-nav .flex-prev:after { content: '\2039'; font-size: 40px; }
#homepage .product-row .mobile-carousel .flex-direction-nav .flex-next:after { content: '\203a'; font-size: 40px; }
/* ปุ่ม More (รีไซเคิลจาก .readmore VIEW MORE) */
#homepage .product-row .readmore { text-align: center; margin-top: 15px; }
#homepage .product-row .readmore a { display: inline-block; padding: 8px 24px; }

/* =====================================================================
   (B) PRODUCT LIST / หลังกด VIEW MORE  (product/list.php) — scope #product
   ===================================================================== */

/* banner (รูปเดี่ยว) แสดงใหญ่เต็ม scene */
#product .banner { width: 100%; }
#product .banner img {
	width: 100%; height: 45vh; display: block;
	object-fit: cover; object-position: center center;
}

/* แถบ filter / sort : เต็มกว้าง วางซ้อน ใช้ง่ายบนมือถือ */
#product .wrap { width: 94%; }
#product h1 { font-size: 24px; }
#product h2 { font-size: 14px; }
#product .filter { width: 100%; }
#product .filter h5 { display: block; margin-bottom: 6px; }
#product .filter select,
#product .sort-result-page select {
	width: 100%; max-width: 100%; padding: 8px;
	font-size: 16px; box-sizing: border-box; /* 16px กัน iOS zoom ตอนโฟกัส */
}
#product .sort-result-page { width: 100%; }
#product .sort-result-page .sort   { display: block; width: 100%; margin-bottom: 8px; }
#product .sort-result-page .result { display: block; width: 100%; margin-bottom: 8px; }

/* วงรี "MEN'S APPARELS" (li แรก = โลโก้) -> เต็มกว้างกึ่งกลาง */
#product ul.product-list li:first-child {
	width: 100%; float: none; height: auto; min-height: 0;
	text-align: center; margin: 0 0 20px;
}
#product ul.product-list li:first-child img { width: 60%; max-width: 200px; margin: 0 auto; }

/* กริดสินค้า 2 คอลัมน์ */
#product ul.product-list li { width: 46%; margin: 0 2% 20px; float: left; }

/* =====================================================================
   (C) PRODUCT DETAIL / หน้า Shop  (product/detail.php) — scope #product-detail
   เลย์เอาต์เดิม 3 คอลัมน์ (thumb 10% / photo 55% / desc 35%) เบียดมากบนมือถือ
   -> เปลี่ยนเป็นคอลัมน์เดียวแบบหน้าร้านมาตรฐาน: ภาพใหญ่บนสุด แล้วรายละเอียดกึ่งกลาง
   ===================================================================== */
#product-detail .breadcrumb { padding: 10px 15px; }
#product-detail .breadcrumb a { font-size: 14px; }
#product-detail .breadcrumb img { margin: 0 6px; }

#product-detail #detail { padding: 22px 0 28px; }
#product-detail #detail .wrap {
	width: 92%;
	display: flex; flex-direction: column; align-items: center;
}
#product-detail #detail .wrap br { display: none; }   /* ตัด br.clear ที่ดัน order */

/* 1) ภาพสินค้าใหญ่ เต็มกว้าง กึ่งกลาง (บนสุด) */
#product-detail #detail #photo {
	order: 1; width: 100%; float: none; text-align: center; margin: 0 0 14px;
}
#product-detail #detail #photo img { width: 100%; max-width: 340px; }
#product-detail #detail #photo img.shadow { display: none; }   /* กัน absolute เพี้ยนบนมือถือ */

/* 2) แถวรูปย่อ (gallery thumbnail) ใต้ภาพ จัดกึ่งกลาง */
#product-detail #detail #thumb { order: 2; width: 100%; float: none; margin: 0 0 18px; }
#product-detail #detail #thumb ul { text-align: center; font-size: 0; margin: 0; padding: 0; }
#product-detail #detail #thumb ul li {
	display: inline-block; float: none; width: 56px; height: 56px; margin: 0 5px;
}
#product-detail #detail #thumb ul li a img { width: 52px; }

/* 3) รายละเอียดสินค้า เต็มกว้าง กึ่งกลาง */
#product-detail #detail #desc { order: 3; width: 100%; float: none; text-align: center; }
#product-detail #detail #desc h2 { font-size: 14px; color: #888; word-break: break-word; }
#product-detail #detail #desc h3 { font-size: 30px; line-height: 1.1em; padding: 8px 0; margin: 4px 0; }
#product-detail #detail #desc h4 { font-size: 18px; margin: 8px 0 0; }
#product-detail #detail #desc #note { font-size: 14px; color: #666; margin: 4px 0 0; }
#product-detail #detail #desc #color { margin: 14px 0; }
#product-detail #detail #desc #size-field { margin: 0 auto; max-width: 280px; }
#product-detail #detail #desc #size-field label { display: block; font-size: 20px; margin-bottom: 6px; }
#product-detail #detail #desc #size-field select {
	width: 100%; max-width: 280px; padding: 10px; font-size: 16px;   /* 16px กัน iOS zoom */
	box-sizing: border-box; border: 1px solid #ccc; background: #fff;
}
#product-detail #detail #desc #price { margin-top: 22px; font-size: 30px; }
#product-detail #detail #desc a#button {
	display: block; width: 100%; max-width: 280px; margin: 16px auto 0;
	padding: 14px 10px; font-size: 22px; text-align: center; box-sizing: border-box;
}

/* "There's More To See" : กริด 2 คอลัมน์ เหมือนหน้าอื่น */
#product-detail .product-row { margin: 34px 0 8px; }
#product-detail .product-row h3 { font-size: 30px; }
#product-detail .product-row h4 { font-size: 15px; padding: 0 12px; }
#product-detail .product-row ul.product-list { margin-top: 22px; }
#product-detail .product-row ul.product-list li { width: 46%; margin: 0 2% 20px; float: left; }

/* =====================================================================
   (D) สัดส่วนรูปสินค้าในกริด ให้สูงเท่ากัน ดูเป็นระเบียบ (arrival / list / related)
   ===================================================================== */
.arrival ul.product-list li .photo img,
#product ul.product-list li .photo img,
#product-detail .product-row ul.product-list li .photo img {
	width: auto; max-width: 100%; height: 150px; object-fit: contain;
}

/* =====================================================================
   (E) FOOTER  (include/footer.php) — คอลัมน์เรียงเต็มกว้าง กึ่งกลาง (มือถือ)
   ===================================================================== */
#footer { padding: 28px 0 34px; }
#footer .col {
	float: none; width: 100%; padding: 0 20px; margin: 0 0 22px;
	box-sizing: border-box; text-align: center;
}
#footer .col#copyright { margin-bottom: 0; }

#footer #subscribe h2 { margin-bottom: 12px; }
#footer #subscribe #field-subscribe { margin: 0 auto 12px; max-width: 320px; }
#footer #subscribe #field-subscribe form { display: flex; }
#footer #subscribe input[type=text] { width: auto; flex: 1 1 auto; box-sizing: border-box; }
#footer #subscribe input[type=submit] { flex: 0 0 auto; margin-left: 6px; }
#footer #subscribe p { line-height: 1.25em; }

#footer #nav ul { margin: 0; padding: 0; text-align: center; }
#footer #nav ul li { display: inline-block; margin: 0 12px 8px; }

#footer #copyright { color: #888; font-size: 14px; margin-top: 8px; }

} /* end @media */