main { display:flex; justify-content:center; padding:100px 0; }
main > .content { width:100%; max-width:1200px; }
main > .content:has(#list) { max-width:1040px; padding:0 20px; }

main h1 { margin-top:60px; display:flex; justify-content:center; align-items:center; }
main h1 span { position:relative; font-size:40px; font-weight:500; }
main h1 span::after { content:""; position:absolute; right:10px; top:0; transform:translateX(100%) rotate( 20deg ); width:25px; height:25px; border:2px solid #FE8130; border-radius:5px; z-index:-1; }

#list { margin-top:60px; display: grid; grid-template-columns:repeat(4, 1fr); gap:20px; }

.item { cursor:pointer; }
.item > .image { position:relative; height:200px; background:#eee; overflow:hidden; }
.item > .image > img { position:absolute; width:100%; height:100%; object-fit: cover; }
.item > .product { margin-top:10px; }
.item > .price { margin-top:5px; font-weight:500; }



#view .container { position:relative; margin-top:160px; }
#view .container .product-image { position:relative; width:500px; height:500px; border: 1px solid #ccc;  overflow:hidden; }
#view .container .product-image img { position:absolute; width:100%; height:100%; object-fit: cover; }
#view .container .product-orderform { flex:1; display:flex; justify-content:center; align-items:center; }
#view .container .product-orderform > form { width:500px; }

/* ########## */
#view .product-title { font-size:30px; font-weight:bold; display:flex; justify-content:flex-start; }
#view .product-orderform2 .product-title { font-size:20px; }
#view .product-field { display:flex; align-items:center; min-height:35px; }
#view .product-field > .field-label { width:100px; }
#view .product-field > .field-value { color:#000; }
#view .action-buttons { display:flex; align-items:center; gap:20px; }
#view button.add-to-cart { flex:1; height:40px; border-radius:0; background:#fff; color:#000; border: 1px solid #000; }
#view button.order-now { flex:1; height:40px;  border-radius:0; background:#000; color:#fff; }

/* ########## */
#view .container .content { position:relative; margin-top:20px; }
#view .container .content .product-orderform2 { position:relative; }
#view .container .content .detail { display:flex; gap:20px; }
#view .container .navigation-links { position:sticky; top:60px; width:100%; height:120px; background:#fff; display:flex; align-items:flex-end; padding-bottom:30px; z-index:1; }
#view .container .navigation-links-container { width:100%; display:flex; border-bottom: 1px solid #000; }
#view .container .navigation-links-container button { background:#eee; width:150px; line-height:35px; text-align:center; }
#view .container .navigation-links-container button.on { background:#000; color:#fff; }
#view .container .product-total { padding:10px; justify-content:space-between; }
#view .container .product-total .field-label { font-weight:bold; }
#view .container .product-total .field-value { font-weight:bold; font-size:18px; text-align:right; }
#view .container .field-value { flex:1; }
#view .container .jw-select { width:100%; }

#view .container .product-orderform2 { position:relative; width:350px; padding-top:50px; }
#view .container .product-orderform2 form { position:sticky; top:180px; width:100%; }
#view .container .product-orderform2 form > div { position:relative; width:100%; height:100%; }

#view .container .qty-controls { display:flex; align-items:center; width:115px; height:35px; border: 1px solid #000; }
#view .container .qty-controls button { width:60px; }
#view .container .qty-controls input { width:100%; height:100%; text-align:center; border-left: 1px solid #000; border-right: 1px solid #000; }

#view .container .product-detail { position:relative; flex:1; padding-bottom:100px; }
#view .container .product-detail > div { margin-top:40px; }

#view .product-detail h3 { font-size:20px; font-weight:bold; }
#view .product-detail h4 { font-weight:bold; }
#view .product-detail li { line-height:30px; }
#view .product-detail .related-products { display:flex; gap:10px; }
#view .product-detail .related-products > .item { width:170px; height:200px; cursor:pointer; }
#view .product-detail .related-products .item > .product-image { position:relative; width:170px; height:200px; border: 1px solid #ccc; overflow:hidden; }
#view .product-detail .related-products .item > .product-image img { position:absolute; width:100%; height:100%; object-fit: cover; }
#view .product-detail .related-products .item > .item-title { margin-top:10px; }
#view .review { border-bottom: 1px solid #ccc; }
#view .review .thumneil { position:relative; width:100px; height:100px; border: 1px solid #ccc; }
#view .review .thumneil > img { position:absolute; width:100%; height:100%; object-fit: cover; }
#view .review tr > td:nth-child(1){ width:80px; }
#view .review tr > td:nth-child(2){ width:120px; height:120px; }
#view .review tr > td:nth-child(4){ width:140px; }
#view .review tr > td:nth-child(5){ width:30px; text-align:center; cursor:pointer; }

#view .review .review-content-wrap { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; gap:5px; }
#view .review .review-content-wrap > .review-title { font-weight:bold; }
#view .review .review-content-wrap > .review-product { font-size:12px; }
#view .review .review-content-wrap > .review-content { font-size:12px; }
#view .review .review-content-wrap > .review-info { font-size:12px; }

#view .jw-range{ --w:100px; --bg-star:#ff6600; place-self:center; }
#view .jw-range > div > div > i { font-size:20px; }


#view .fixed-container { width:100%; height:0; border: 1px solid #FF0000; }
#view .fixed-container > div { position:relative; width:100%; height:0; max-width:1280px; place-self:center; }
#view .fixed-container .progress-icon { position:absolute; bottom:0; right:-110px;  }
.progress-icon .progress-ring__rect--bg {  fill: none;  stroke:#ddd; }
.progress-icon .progress-ring__rect {  fill: none;  stroke-width: 2; stroke:#000; transform-origin: 30px 30px; transform: rotate(-90deg); }




#order { position:relative; width:100%; min-height:100vh; padding-top:120px; padding-bottom:100px; }
#order h2 { font-size:24px; font-weight:bold; text-align:center; }
#order .container { position:relative; width:100%; max-width:1280px; place-self:center; display:grid; grid-template-columns:1fr 400px; gap:20px; }
#order .container h3 { font-size:18px; font-weight:bold; }
#order .container > div { position:relative; }
#order .container > div .order-field { display:flex; align-items:center; }
#order .container > div > .sub05-payment { position:sticky; top:80px; background:#fff; border-radius:10px; padding:20px; }
#order .container .payment { width:100%; height:40px; border-radius:5px; background:#000; }
#order .container .order-field { display:flex; }
#order .container .order-field .field-label { width:150px; line-height:35px; }
#order .container .order-field .field-value { width:100%; max-width:300px; }
#order .container .order-field .field-value input { height:35px; border-radius:5px; border: 1px solid #ccc; }
#order .order-section { background:#fff; border-radius:10px; padding:20px; }
#order .order-section .paymentlist { border-radius:5px; display:flex; gap:10px; }
#order .order-section .paymentlist > .jw-radio-type-A { min-width:100px; min-height:50px; border: 1px solid #ccc; border-radius:5px; display:flex; justify-content:center; align-items:center; gap:10px; }

#order-complete { position:relative; width:100%; min-height:100vh; padding-top:120px; padding-bottom:100px; }
#order-complete h2 { font-size:24px; font-weight:bold; text-align:center; }
#order-complete .confirm { width:150px; place-self:center; }

#cart { position:relative; width:100%; min-height:100vh; padding-top:120px; padding-bottom:100px; }
#cart .container { position:relative; width:100%; max-width:1280px; place-self:center; }
#cart h2 { font-size:24px; font-weight:bold; text-align:center; }
#cart .cart-total-container { display:flex; justify-content:flex-end; gap:20px; font-weight:bold; font-size:20px; }
#cart  .cart-action-buttons > button { width:150px; height:40px; font-size:16px; font-weight:bold; }


@media screen  and  ( max-width : 950px) {
	#list { grid-template-columns:repeat(3, 1fr); }
}

@media screen  and  ( max-width : 550px) {
	#list { grid-template-columns:repeat(2, 1fr); }
}

@media screen  and  ( max-width : 400px) {
	#list { grid-template-columns:1fr; }
}