/* =========================================================
   SOBHANI STORE
   WordPress Visual Override
   ---------------------------------------------------------
   accordion.css = system / behavior
   store-wp.css   = visual design
========================================================= */


/* =========================================================
   01. RESET
========================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

button,
input,
select {
	font: inherit;
}


/* =========================================================
   02. STORE PAGE
========================================================= */

.container-03-s {
	width: min(calc(100% - 48px), 1440px);
	margin-inline: auto;
}

.oshirase-a {
	font-size: 14px;
	line-height: 1.8;
	text-align: center;
}


/* =========================================================
   03. STORE INTRO
========================================================= */

.store-intro {
	width: min(calc(100% - 40px), 1200px);

	margin: 0 auto;
	padding: 80px 0 110px;

	color: #222;

	text-align: center;
}

.store-intro__label {
	margin: 0 0 28px;

	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .28em;
}

.store-intro__title {
	margin: 0;

	font-size: clamp(30px, 3.4vw, 48px);
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: .08em;
}

.store-intro__en {
	margin: 28px 0 0;

	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .32em;
}

.store-intro__text {
	margin-top: 45px;

	color: #777;

	font-size: 13px;
	font-weight: 300;
	line-height: 2.2;
	letter-spacing: .08em;
}

.store-intro__text p {
	margin: 0;
}


/* =========================================================
   04. INTERNAL DATA
========================================================= */

#fs_lblSize_H,
#fs_lblSize_W {
	display: none !important;
}


/* =========================================================
   05. PRODUCT AREA
   accordion.css の内部スクロールを解除
========================================================= */

#fs_list_item {
	width: 100% !important;

	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: visible !important;
	overflow-x: visible !important;
	overflow-y: visible !important;

	-ms-overflow-style: auto !important;
	scrollbar-width: auto !important;
}

#fs_item_slider {
	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: visible !important;
}


/* =========================================================
   06. ACCORDION BASE RESET
========================================================= */

.accordion_one-top,
.accordion_one {
	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   07. FILTER WRAPPER
========================================================= */

.hamburger-menu {
	position: relative;

	width: 100% !important;

	margin: 0 0 42px !important;
	padding: 0 !important;
}


/* =========================================================
   08. FILTER MAIN
   「フィルター」
========================================================= */

.accordion_header.tess {
	position: relative !important;

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

	width: 100% !important;
	min-height: 50px !important;

	margin: 0 !important;

	padding:
		14px
		64px !important;

	background: #faf9f7 !important;

	color: #55514d !important;

	border: 0 !important;
	border-top: 1px solid #e5e1da !important;
	border-bottom: 1px solid #e5e1da !important;

	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: .16em !important;

	text-align: center !important;

	cursor: pointer !important;

	transition:
		background-color .25s ease,
		color .25s ease !important;
}

.accordion_header.tess:hover {
	background: #f8f7f4 !important;
	color: #927b4c !important;
}


/* =========================================================
   09. FILTER MAIN ICON
========================================================= */

.accordion_header.tess > .i_box {
	position: absolute !important;

	top: 50% !important;
	right: max(24px, calc((100% - 1180px) / 2)) !important;

	width: 12px !important;
	height: 12px !important;

	margin: 0 !important;

	border: 0 !important;

	transform: translateY(-50%) !important;
}

.accordion_header.tess > .i_box .one_i {
	position: relative !important;

	display: block !important;

	width: 12px !important;
	height: 12px !important;

	transform: none !important;
}

.accordion_header.tess > .i_box .one_i::after {
	content: "" !important;

	position: absolute !important;

	top: 5px !important;
	left: 0 !important;

	display: block !important;

	width: 12px !important;
	height: 1px !important;

	background: #9b8456 !important;

	border: 0 !important;
	border-radius: 0 !important;

	transform: none !important;
}

.accordion_header.tess > .i_box .one_i::before {
	content: "" !important;

	position: absolute !important;

	top: 0 !important;
	left: 5px !important;

	display: block !important;

	width: 1px !important;
	height: 12px !important;

	background: #9b8456 !important;

	border: 0 !important;
	border-radius: 0 !important;

	transform: none !important;
}

.accordion_header.tess.open > .i_box .one_i::before {
	display: none !important;
	content: none !important;
}


/* =========================================================
   10. FILTER GRID
   PC
   4 + 3
========================================================= */

.tess2 {
	display: grid !important;

	grid-template-columns:
		repeat(12, minmax(0, 1fr)) !important;

	column-gap: 40px !important;
	row-gap: 0 !important;

	width: calc(100% - 80px) !important;
	max-width: 1180px !important;

	margin: 0 auto !important;

	padding:
		28px
		0
		20px !important;

	background: #fff !important;
}


/* 1段目 4項目 */

.tess2 > .accordion_one:nth-child(1),
.tess2 > .accordion_one:nth-child(2),
.tess2 > .accordion_one:nth-child(3),
.tess2 > .accordion_one:nth-child(4) {
	grid-column: span 3 !important;
}


/* 2段目 3項目 */

.tess2 > .accordion_one:nth-child(5),
.tess2 > .accordion_one:nth-child(6),
.tess2 > .accordion_one:nth-child(7),
.tess2 > .accordion_one:nth-child(8) {
	grid-column: span 4 !important;
}


/* =========================================================
   11. FILTER ITEM
========================================================= */

.tess2 > .accordion_one {
	position: relative !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;

	border: 0 !important;
}


/* =========================================================
   12. FILTER LABEL
========================================================= */

.tess2 > .accordion_one > .accordion_header {
	position: relative !important;

	display: flex !important;
	align-items: center !important;

	width: 100% !important;
	min-height: 46px !important;

	margin: 0 !important;

	padding:
		13px
		24px
		13px
		0 !important;

	background: transparent !important;

	color: #57534e !important;

	border: 0 !important;

	font-size: 10px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	letter-spacing: .09em !important;

	text-align: left !important;

	white-space: nowrap !important;

	cursor: pointer !important;

	transition:
		color .25s ease !important;
}

.tess2 > .accordion_one > .accordion_header:hover {
	background: transparent !important;

	color: #9b8456 !important;
}


/* =========================================================
   13. FILTER ITEM ICON
========================================================= */

.tess2 > .accordion_one > .accordion_header .i_box {
	position: absolute !important;

	top: 50% !important;
	right: 0 !important;

	display: block !important;

	width: 10px !important;
	height: 10px !important;

	margin: 0 !important;

	border: 0 !important;

	transform: translateY(-50%) !important;
}

.tess2 > .accordion_one > .accordion_header .i_box .one_i {
	position: relative !important;

	display: block !important;

	width: 10px !important;
	height: 10px !important;

	transform: none !important;
}

.tess2 > .accordion_one > .accordion_header .i_box .one_i::after {
	content: "" !important;

	position: absolute !important;

	top: 4px !important;
	left: 0 !important;

	display: block !important;

	width: 10px !important;
	height: 1px !important;

	background: #9b8456 !important;

	border: 0 !important;
	border-radius: 0 !important;

	transform: none !important;
}

.tess2 > .accordion_one > .accordion_header .i_box .one_i::before {
	content: "" !important;

	position: absolute !important;

	top: 0 !important;
	left: 4px !important;

	display: block !important;

	width: 1px !important;
	height: 10px !important;

	background: #9b8456 !important;

	border: 0 !important;
	border-radius: 0 !important;

	transform: none !important;
}

.tess2 > .accordion_one > .accordion_header.open .i_box .one_i::before {
	display: none !important;
	content: none !important;
}


/* =========================================================
   14. FILTER INNER
   accordion.css 特殊指定を解除
========================================================= */

.tess2 .accordion_inner {
	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	box-sizing: border-box !important;
}

.tess2 .accordion_inner .accordion_header,
.tess2 .accordion_inner .accordion_inner .accordion_header {
	position: relative !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;

	background: transparent !important;

	overflow: visible !important;
}


/* =========================================================
   15. FILTER VALUES
========================================================= */

#fs_width_label,
#fs_height_label {
	margin: 4px 0 8px !important;

	color: #77716a !important;

	font-size: 10px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;

	text-align: left !important;
}

#fs_width_slider,
#fs_height_slider {
	width: 100% !important;

	margin: 4px 0 16px !important;
}

#fs_search_series,
#fs_search_pattern,
#fs_search_border,
#fs_search_field,
#fs_search_maker,
#fs_search_type {
	width: 100% !important;

	height: auto !important;

	margin: 0 !important;
	padding: 4px 0 16px !important;

	color: #625e59 !important;

	font-size: 10px !important;
	font-weight: 400 !important;
	line-height: 1.85 !important;

	text-align: left !important;
}


/* =========================================================
   16. SYSTEM HIDDEN ITEMS
========================================================= */

.accordion_one:nth-of-type(7) .accordion_inner .accordion_header,
.accordion_one:nth-of-type(7) .accordion_inner .accordion_inner .accordion_header {
	display: none !important;
}

.accordion_one:nth-of-type(7) {
	display: none !important;
}


/* =========================================================
   17. PRODUCT GRID
   PC 3 columns
========================================================= */

.FormMain_WRG1 {
	position: relative !important;

	display: grid !important;

	grid-template-columns:
		repeat(3, minmax(0, 1fr)) !important;

	column-gap: clamp(28px, 3vw, 48px) !important;
	row-gap: clamp(64px, 6vw, 88px) !important;

	width: 100% !important;

	margin: 0 0 80px !important;
	padding: 0 !important;

	align-items: start !important;

	background: transparent !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	color: #333 !important;

	font-family:
		"Helvetica Neue",
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		YuGothic,
		"Yu Gothic",
		Meiryo,
		sans-serif;

	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	letter-spacing: .03em !important;

	overflow: visible !important;
}


/* =========================================================
   18. PRODUCT CARD
========================================================= */

.FormMain_WRG1 > div,
.FormMain_WRG1 .sobhani-product-card {
	display: block !important;

	width: 100% !important;
	min-width: 0 !important;

	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	grid-template-rows: none !important;

	font-weight: 400 !important;
}


/* =========================================================
   19. PRODUCT TITLE
========================================================= */

.FormMain_WRG1 h5 {
	position: relative !important;

	margin: 0 0 14px !important;

	padding:
		0
		72px
		0
		0 !important;

	color: #333 !important;

	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.55 !important;
	letter-spacing: .035em !important;
}


/* =========================================================
   20. PRODUCT NUMBER
========================================================= */

.FormMain_WRG1 h5 span,
.FormMain_WRG1 .sobhani-product-number {
	position: absolute !important;

	top: 2px !important;
	right: 0 !important;

	float: none !important;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;

	color: #92908c !important;

	border: 0 !important;
	border-radius: 0 !important;

	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: .04em !important;
}

.FormMain_WRG1 h5 span::before {
	content: "No. ";
}


/* =========================================================
   21. PRODUCT IMAGE
========================================================= */

.FormMain_WRG1 img.gazou-d,
.FormMain_WRG1 .gazou-d,
.FormMain_WRG1 .sobhani-product-card .gazou-d {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	height: auto !important;
	max-height: none !important;

	margin: 0 !important;
	padding: 0 !important;

	background: #f7f6f3 !important;

	border: 0 !important;
	border-radius: 0 !important;

	object-fit: contain !important;
	object-position: center center !important;

	transition:
		opacity .35s ease !important;
}

.FormMain_WRG1 > div:hover .gazou-d {
	opacity: .94;
}

.FormMain_WRG1 > div:hover {
	transform: none !important;
}


/* =========================================================
   22. PRODUCT INFO
========================================================= */

.FormMain_WRG1 .list-group {
	margin: 14px 0 0 !important;
	padding: 0 !important;

	list-style: none !important;

	color: #444 !important;

	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
	letter-spacing: .02em !important;
}

.FormMain_WRG1 .list-group-item {
	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;

	color: #444 !important;

	border: 0 !important;

	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
}

.FormMain_WRG1 .list-group li:nth-child(2) {
	margin: 2px 0 0 !important;
	padding: 0 !important;

	color: #99958f !important;

	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
	letter-spacing: .03em !important;
}


/* =========================================================
   23. PRODUCT CONTACT
========================================================= */

.FormMain_WRG1 > div > a,
.FormMain_WRG1 .sobhani-product-contact {
	display: block !important;

	width: 100% !important;

	margin: 15px 0 0 !important;

	color: inherit !important;

	text-decoration: none !important;
}

.FormMain_WRG1 .inqBtn {
	position: relative !important;

	display: block !important;

	width: 100% !important;

	margin: 0 !important;

	padding:
		10px
		28px
		10px
		0 !important;

	background: transparent !important;

	color: #555 !important;

	border: 0 !important;
	border-bottom: 1px solid #d8d4ce !important;

	border-radius: 0 !important;

	box-shadow: none !important;

	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: .07em !important;

	text-align: left !important;

	cursor: pointer !important;

	transition:
		color .3s ease,
		border-color .3s ease !important;
}

.FormMain_WRG1 .inqBtn::after {
	content: "→";

	position: absolute;

	top: 50%;
	right: 0;

	color: #999;

	font-size: 13px;

	transform: translateY(-50%);

	transition:
		color .3s ease,
		transform .3s ease;
}

.FormMain_WRG1 .inqBtn:hover {
	background: transparent !important;

	color: #9b8456 !important;

	border-bottom-color: #9b8456 !important;
}

.FormMain_WRG1 .inqBtn:hover::after {
	color: #9b8456;

	transform:
		translate(4px, -50%);
}


/* =========================================================
   24. MODAL
========================================================= */

.modal {
	position: relative;

	width: 100%;

	margin: 0;
	padding: 0;

	z-index: 1;
}

.modalBg {
	position: fixed;

	inset: 0;

	display: none;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 30px;

	background: rgba(28, 27, 26, .66);

	z-index: 1000;
}

.modalArea {
	position: absolute;

	top: 50%;
	left: 50%;

	width: min(1220px, calc(100vw - 60px));
	max-height: calc(100vh - 60px);

	margin: 0;
	padding: 50px 52px;

	background: #fff;

	border: 0;
	border-radius: 0;

	box-shadow:
		0 20px 60px rgba(0, 0, 0, .14);

	transform:
		translate(-50%, -50%);

	overflow-y: auto;
}


/* =========================================================
   25. MODAL CLOSE
========================================================= */

.modalClose {
	position: absolute;

	top: 17px;
	right: 19px;

	width: 36px;
	height: 36px;

	margin: 0;

	background: transparent;

	border: 0;
	border-radius: 0;

	cursor: pointer;

	z-index: 20;

	transition:
		opacity .25s ease;
}

.modalClose:hover {
	opacity: .5;
}

.modalClose::before,
.modalClose::after {
	content: "";

	position: absolute;

	top: 50%;
	left: 50%;

	width: 22px;
	height: 1px;

	background: #333;
}

.modalClose::before {
	transform:
		translate(-50%, -50%)
		rotate(45deg);
}

.modalClose::after {
	transform:
		translate(-50%, -50%)
		rotate(-45deg);
}


/* =========================================================
   26. DETAIL LAYOUT
========================================================= */

.bbb {
	display: grid;

	grid-template-columns:
		72px
		minmax(0, 1fr)
		310px;

	gap: 34px;

	align-items: start;

	width: 100%;

	margin: 0;
	padding: 0;
}


/* =========================================================
   27. DETAIL THUMBNAILS
========================================================= */

.bbb-in {
	display: flex;
	flex-direction: column;

	gap: 9px;

	width: 72px;

	margin: 0;
	padding: 0;
}

#fs_thumb_1,
#fs_thumb_2,
#fs_thumb_3,
#fs_thumb_4,
#fs_thumb_5,
#fs_thumb_6 {
	display: block;

	width: 72px;
	height: 72px;
	max-height: none;

	margin: 0;
	padding: 5px;

	background: #f6f5f2;

	border: 1px solid transparent;

	object-fit: contain;

	cursor: pointer;

	transition:
		border-color .25s ease,
		opacity .25s ease;
}

#fs_thumb_1:hover,
#fs_thumb_2:hover,
#fs_thumb_3:hover,
#fs_thumb_4:hover,
#fs_thumb_5:hover,
#fs_thumb_6:hover {
	border-color: #9d927f;

	opacity: .8;
}


/* =========================================================
   28. DETAIL MAIN IMAGE
========================================================= */

.bbb-main {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-width: 0;
	min-height: 570px;

	margin: 0;
	padding: 28px;

	background: #f7f6f3;
}

#fs_mainimage {
	display: block;

	width: 100%;
	height: 514px;
	max-height: none;

	margin: 0 auto;

	background: transparent;

	object-fit: contain;
}


/* =========================================================
   29. DETAIL INFO
========================================================= */

.bbb-in2 {
	width: 100%;
	min-width: 0;

	margin: 0;
	padding: 8px 0 0;
}

#fs_lblCarpet {
	margin: 0 0 23px;
	padding: 0 0 19px;

	color: #282828;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: 28px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: .06em;

	border-bottom: 1px solid #ddd9d3;
}


/* =========================================================
   30. DETAIL SPEC
========================================================= */

.bbb-waku {
	display: grid;

	grid-template-columns:
		74px
		minmax(0, 1fr);

	column-gap: 12px;

	align-items: start;

	width: 100%;

	margin: 0;
	padding: 10px 0;

	color: #777;

	font-size: 11px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: .02em;

	border-bottom: 1px solid #e8e5e0;

	word-break: normal;
	overflow-wrap: break-word;
	white-space: normal;
}

.bbb-waku > div {
	min-width: 0;

	color: #333;

	font-size: 12px;
	font-weight: 400;
	line-height: 1.7;

	word-break: normal;
	overflow-wrap: break-word;
	white-space: normal;
}


/* =========================================================
   31. DETAIL DESCRIPTION
========================================================= */

.bbb-waku:has(#fs_lblColor_Border) {
	display: block;

	width: 100%;

	padding: 15px 0 18px;
}

#fs_lblColor_Border {
	display: block;

	width: 100%;
	min-width: 0;

	margin: 0;

	color: #555;

	font-size: 12px;
	font-weight: 400;
	line-height: 2;
	letter-spacing: .035em;

	word-break: normal;
	overflow-wrap: break-word;
	white-space: normal;
}


/* =========================================================
   32. DETAIL CONTACT
========================================================= */

.bbb-in2 > a {
	display: block;

	width: 100%;

	margin: 28px 0 0;

	text-decoration: none;
}

#fs_inqButton {
	display: block;

	width: 100% !important;

	margin: 0;
	padding: 14px 20px !important;

	background: #9b8456 !important;

	color: #fff !important;

	border: 1px solid #9b8456 !important;
	border-radius: 0 !important;

	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .1em;

	cursor: pointer;

	transition:
		background-color .3s ease,
		border-color .3s ease;
}

#fs_inqButton:hover {
	background: #857148 !important;

	border-color: #857148 !important;
}


/* =========================================================
   33. TABLET
========================================================= */

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

	/* FILTER */

	.hamburger-menu {
		margin-bottom: 36px !important;
	}

	.tess2 {
		grid-template-columns:
			repeat(2, minmax(0, 1fr)) !important;

		column-gap: 36px !important;

		width: calc(100% - 48px) !important;
		max-width: 760px !important;

		padding:
			22px
			0
			20px !important;
	}

	.tess2 > .accordion_one:nth-child(n) {
		grid-column: auto !important;
	}

	.accordion_header.tess > .i_box {
		right: 24px !important;
	}


	/* PRODUCT */

	.FormMain_WRG1 {
		grid-template-columns:
			repeat(2, minmax(0, 1fr)) !important;

		column-gap: 28px !important;
		row-gap: 60px !important;

		margin-bottom: 70px !important;
	}


	/* MODAL */

	.modalBg {
		padding: 22px;
	}

	.modalArea {
		width: calc(100vw - 44px);
		max-height: calc(100vh - 44px);

		padding: 45px 32px 38px;
	}

	.bbb {
		grid-template-columns:
			62px
			minmax(0, 1fr)
			260px;

		gap: 22px;
	}

	.bbb-in {
		width: 62px;
	}

	#fs_thumb_1,
	#fs_thumb_2,
	#fs_thumb_3,
	#fs_thumb_4,
	#fs_thumb_5,
	#fs_thumb_6 {
		width: 62px;
		height: 62px;
	}

	.bbb-main {
		min-height: 460px;

		padding: 20px;
	}

	#fs_mainimage {
		height: 420px;
	}

	#fs_lblCarpet {
		font-size: 24px;
	}

}


/* =========================================================
   34. MOBILE
========================================================= */

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

	.container-03-s {
		width: 100%;

		margin: 0;

		overflow: hidden;
	}


	/* INTRO */

	.store-intro {
		width: calc(100% - 40px);

		padding: 60px 0 75px;
	}

	.store-intro__label {
		margin-bottom: 22px;

		font-size: 10px;
	}

	.store-intro__title {
		font-size: clamp(25px, 7vw, 32px);
		line-height: 1.65;
		letter-spacing: .05em;
	}

	.store-intro__en {
		margin-top: 22px;

		font-size: 10px;
	}

	.store-intro__text {
		margin-top: 35px;

		font-size: 12px;
		line-height: 2;
		letter-spacing: .05em;
	}


	/* FILTER */

	.hamburger-menu {
		margin-bottom: 24px !important;
	}

	.accordion_header.tess {
		min-height: 48px !important;

		padding:
			14px
			48px
			14px
			18px !important;

		font-size: 11px !important;
	}

	.accordion_header.tess > .i_box {
		right: 18px !important;
	}

	.tess2 {
		display: block !important;

		width: calc(100% - 40px) !important;
		max-width: none !important;

		margin: 0 auto !important;

		padding:
			8px
			0
			14px !important;
	}

	.tess2 > .accordion_one {
		width: 100% !important;

		border-bottom:
			1px solid #e6e2dc !important;
	}

	.tess2 > .accordion_one > .accordion_header {
		width: 100% !important;
		min-height: 48px !important;

		padding:
			14px
			26px
			14px
			0 !important;

		font-size: 11px !important;
	}


	/* PRODUCT */

	.FormMain_WRG1 {
		grid-template-columns:
			1fr !important;

		column-gap: 0 !important;
		row-gap: 55px !important;

		margin-bottom: 55px !important;
	}

	.FormMain_WRG1 h5 {
		font-size: 14px !important;
	}

	.FormMain_WRG1 h5 span,
	.FormMain_WRG1 .sobhani-product-number {
		font-size: 12px !important;
	}


	/* MODAL */

	.modalBg {
		padding: 0;

		background: rgba(28, 27, 26, .7);
	}

	.modalArea {
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;
		max-height: 100%;

		padding:
			58px
			18px
			40px;

		transform: none;

		overflow-y: auto;
	}

	.modalClose {
		position: fixed;

		top: 11px;
		right: 11px;

		width: 38px;
		height: 38px;

		background: rgba(255, 255, 255, .94);
	}

	.bbb {
		display: flex;
		flex-direction: column;

		gap: 18px;
	}

	.bbb-main {
		order: 1;

		width: 100%;
		min-height: 0;

		padding: 18px;
	}

	#fs_mainimage {
		width: 100%;

		height: 52vh;
		max-height: 430px;

		object-fit: contain;
	}

	.bbb-in {
		order: 2;

		display: grid;

		grid-template-columns:
			repeat(5, minmax(0, 1fr));

		gap: 6px;

		width: 100%;
	}

	#fs_thumb_1,
	#fs_thumb_2,
	#fs_thumb_3,
	#fs_thumb_4,
	#fs_thumb_5,
	#fs_thumb_6 {
		width: 100%;
		height: 58px;

		margin: 0;
		padding: 3px;
	}

	.bbb-in2 {
		order: 3;

		width: 100%;

		padding: 5px 0 0;
	}

	#fs_lblCarpet {
		margin-bottom: 17px;
		padding-bottom: 16px;

		font-size: 23px;
	}

	.bbb-waku {
		grid-template-columns:
			68px
			minmax(0, 1fr);

		column-gap: 10px;

		padding: 9px 0;

		font-size: 10px;
	}

	.bbb-waku > div {
		font-size: 11px;
	}

	#fs_lblColor_Border {
		font-size: 11px;
		line-height: 1.9;
	}

	.bbb-in2 > a {
		margin-top: 23px;
	}

	#fs_inqButton {
		padding: 15px !important;
	}

}


/* =========================================================
   35. SMALL MOBILE
========================================================= */

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

	.modalArea {
		padding-left: 14px;
		padding-right: 14px;
	}

	#fs_mainimage {
		height: 48vh;
	}

	.bbb-in {
		grid-template-columns:
			repeat(4, minmax(0, 1fr));
	}

}