@charset "utf-8";
/* CSS Document */


/* ==========================================================================
Our Focus ±MÄݺô­¶¼Ë¦¡ÂX¥R (¥¿²Î¶ê®Ø»P¤U¸m¤ß¤ß«ö¶s±Æª©)
========================================================================== */

/* 1. ¬Û¹ï©w¦ì±Æª©¡A½T«O 150% ©ñ¤j®É§¹¬ü«´¦X©³¹Ï */
.product-dynamic-area.focus-dynamic-layout {
/* 維持在 .container 內以保留導覽的百分比定位基準。 */
position: absolute !important;
/* 65.5% 等同原本「背景圖高度 - 53% 容器寬度」的視覺起點。 */
top: 53% !important;
left: 2% !important;
width: 96% !important;
margin: 0 !important;
height: auto !important;
overflow: visible !important;
background: linear-gradient(to bottom, #141414 0%, #2c2c2c 100%);
padding-bottom:70px;
}

/* 1. ½Õ¾ã¦UªO¶ô°ò¦°ª«× - ²Ä¤@ªO¶ôºë·ÇÂX®i¦Ü 420px ¥H¨¾¤å¦r»P¼ÐÃDÀ½À£ */
.block-section-1 {
/* 為紫色群組的雙行標題與產品列預留額外空間。 */
height: 470px !important;
}
.block-section-2 {
/* 預留產品列下方的捲動推桿空間。 */
height: 250px !important;
}
.block-section-3 {
/* 增加第三板塊高度，讓標題列、產品列與推杆都有獨立空間。 */
height: 244px !important;
}
.block-section-4 {
height: 220px !important;
background: linear-gradient(to right, rgba(10, 10, 10, 0.95) 0%, rgba(30, 30, 30, 0.7) 50%, rgba(10, 10, 10, 0.95) 100%) !important;
}

/* 2. Âù±Æ¾î¦Vºu°Ê®e¾¹§G§½ */
.focus-double-rows {
overflow-x: auto !important;
align-items: flex-start !important;
padding: 12px 0 !important;
}

.slider-rows-container {
display: flex;
flex-direction: column;
gap: 16px;
width: max-content;
}

.slider-row {
display: flex;
flex-direction: row;
gap: 16px;
align-items: flex-start;
	padding-right: 20px;
}

/* 3. ¾î¦V¿W¥ß¶ê¨¤Ãä®Ø¸s²Õ¼Ë¦¡ */
.slider-row-group {
display: flex;
flex-direction: column;
gap: 22px;
padding: 12px 14px 10px 14px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-sizing: border-box;
	margin-right: 15px;
}

/* ¤ñ·Ó³]­p½Zªº¥|²ÕÃä®Ø¯S¦âÃC¦â */
.border-ot { border: 1.5px solid rgba(46, 125, 50, 0.8) !important; } /* ºñ¦â®Ø */
.border-og { border: 1.5px solid rgba(21, 101, 192, 0.8) !important; } /* ÂŦâ®Ø */
.border-cg {
	border: 1.5px solid rgba(106, 27, 154, 0.8);
	min-height: 180px;
	padding-bottom: 18px;
}
.border-std {
	border: 1.5px solid rgba(194, 24, 91, 0.8); 
	min-height: 180px;
	padding-bottom: 18px;
}


.sub-group-title {
font-size: 11px !important;
color: #ff9900 !important;
font-weight: bold;
text-align: left;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 4px;
margin-bottom: 4px;
}
.sub-title-right {
font-size: 9px !important;
color: #aaaaaa !important;
font-weight: normal;
margin-left: 15px;
}

.lens-items-row {
display: flex;
flex-direction: row;
gap: 22px;
align-items: flex-start;
	padding-right: 16px;
}


/* 4. °Ó«~³æ¤¸©w¦ì»P¹Ï®Ø¤Ø¤o²Î¤@ */
.product-item-circle {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
width: 68px !important;
box-sizing: border-box !important;
float: none !important;
}

/* §¹¬ü¥¿¶ê¥Õ©³¹Ï®Ø */
.circle-frame {
width: 60px !important;
height: 60px !important;
border-radius: 50% !important;
background: #ffffff !important;
border: 2px solid rgba(255, 255, 255, 0.8) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
box-shadow: 0 3px 6px rgba(0,0,0,0.4) !important;
}
.circle-frame .product-img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}

.product-item-rect{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 170px;
	box-sizing: border-box;
	float: none;
}
.rect-frame{
	width: 170px;
	height: 70px;
		border-radius: 2px;
	background: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	overflow: hidden;
	box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}
.rect-frame .product-img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.product-code {
display: block !important;
font-size: 10px !important;
color: #ffffff !important;
margin-top: 3px !important;
font-weight: bold !important;
}

/* 5. ¹Ï®Ø¤U¤è³W®æ¤å¦r¼Ë¦¡ªÅ¶¡ */
.product-spec {
display: flex;
width: 100%;
font-size: 8px;
line-height: 1.3;
color: #cccccc;
margin-top: 6px;
justify-content: space-between;
align-items: flex-start;
}
.product-spec span:first-child {
color: #888888;
text-align: left;
white-space: nowrap;
}
.product-spec span:last-child {
text-align: right;
}

/* 6. ²Ä¤GªO¶ô³B¤è«×¼Æ¼Ë¦¡ */
.section-content-pure-text {
flex: 0 0 57%;
min-width: 0;
padding: 10px 18px 16px 12px;
box-sizing: border-box;
}

/* 第二板塊改為可水平滑動的產品軌道，樣式與第一排一致。 */
.prescription-slider {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(255, 153, 0, 0.45) rgba(255, 255, 255, 0.05);
scrollbar-gutter: stable;
}

.prescription-slider::-webkit-scrollbar,
.diamond-slider::-webkit-scrollbar {
display: block;
height: 4px;
}

.prescription-slider::-webkit-scrollbar-track,
.diamond-slider::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
margin: 0 10px;
}

.prescription-slider::-webkit-scrollbar-thumb,
.diamond-slider::-webkit-scrollbar-thumb {
background: rgba(255, 153, 0, 0.45);
border-radius: 10px;
}

.prescription-slider::-webkit-scrollbar-thumb:hover,
.diamond-slider::-webkit-scrollbar-thumb:hover {
background: rgba(255, 153, 0, 0.8);
}

.presc-grid {
display: flex;
flex-direction: row;
gap: 22px;
width: max-content;
min-width: clamp(560px, 68vw, 780px);
padding-inline-end: 36px;
box-sizing: border-box;
}
/* 小板塊容器：改為水平左右排列 */
.presc-item {
    flex: 0 0 80px; /* 加寬單個板塊以容納右側圖片框 */
    min-height: 110px;
    display: flex !important;
    flex-direction: row !important; /* 左右分欄 */
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    gap: 10px;
}
/* 左側文字與按鈕區塊 */
.presc-item-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
    gap: 8px;
}
/* 右側小圖片框區塊 */
.presc-item-right {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 右側小圖片長方形框樣式 (Rectangular frame) */
.presc-item-right .rect-frame {
    width: 60px !important;
    height: 100px !important; 
    border-radius: 4px !important; /* 微圓角直角框 */
    background: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4) !important;
}

.presc-item-right .rect-frame .product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* 7. ²Ä¤TªO¶ôÆp¥Û·Æ°Ê°Ï */
.diamond-slider {
min-width: 0;
overflow-x: auto !important;
overflow-y: hidden;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 22px;
padding: 10px 18px 16px 12px;
scrollbar-gutter: stable;
}

/* 第三板塊的獨立標題列：直接位於產品軌道上方，不依賴群組外框。 */
.diamond-slider-heading {
display: flex;
flex: 0 0 auto;
align-items: baseline;
justify-content: space-between;
min-width: clamp(520px, 62vw, 720px);
padding: 6px 18px 5px;
background: rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-sizing: border-box;
}

.diamond-slider-heading-main {
font-size: 11px;
font-weight: bold;
color: #ff9900;
white-space: nowrap;
}

.diamond-slider-heading-note {
font-size: 9px;
font-weight: normal;
color: #aaaaaa;
white-space: nowrap;
}

/* 以獨立軌道保留最後一項右側空白，避免卡片貼齊容器邊界。 */
.diamond-slider-track {
display: flex;
flex: 0 0 auto;
gap: 30px;
min-width: clamp(520px, 62vw, 720px);
padding-inline-end: 36px;
box-sizing: border-box;
}

.diamond-slider .large-circle {
flex: 0 0 68px;
}

/* 8. ²Ä¥|ªO¶ô¤å³¹°Ï */
.moissanite-article-box-full {
flex: 1;
padding: 10px;
color: #b5b5b5;
font-size: 11px;
line-height: 1.6;
padding-bottom: 30px;
}
.moissanite-article-box-full p { margin: 0 0 6px 0; }
.moissanite-article-box-full .lang-text-zh { color: #eed4a2; }



/* ==========================================================================
   底部鑽石測試相片容器
   ========================================================================== */
.diamondtester-container {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 14px;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(to right, rgba(10, 10, 10, 0.95), rgba(48, 38, 28, 0.78), rgba(10, 10, 10, 0.95));
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.diamondtester-image {
    display: block;
    width: min(100%, 460px);
    max-width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}





/* ========================================================================== 
   Optical refractive options：以垂直卡片完整呈現三種折射率選項
   ========================================================================== */
.block-section-2 {
    height: 450px !important;
    min-height: 450px !important;
}

.block-section-2 .prescription-slider {
    overflow: hidden !important;
    gap: 10px;
    padding: 10px 18px 14px 12px;
}

.block-section-2 .prescription-slider::-webkit-scrollbar {
    display: none;
}

.block-section-2 .diamond-slider-heading {
    width: 100%;
    min-width: 0;
    padding: 6px 10px 5px;
    align-items: flex-start;
    gap: 2px;
}

.block-section-2 .diamond-slider-heading-main {
    font-size: 11px;
    line-height: 1.18;
    white-space: normal;
}

.block-section-2 .diamond-slider-heading-note {
    font-size: 8px;
    line-height: 1.25;
    white-space: normal;
}

.block-section-2 .presc-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 10px;
    padding-inline-end: 0;
}

.block-section-2 .presc-item {
    flex: 0 0 112px;
    width: 100%;
    min-height: 112px;
    padding: 8px 12px;
    gap: 12px;
}

.block-section-2 .presc-item-left {
    min-width: 0;
    gap: 4px;
}

.block-section-2 .presc-text-left {
    font-size: 10px;
    line-height: 1.3;
    color: #ffffff !important;
    overflow-wrap: anywhere;
}

.block-section-2 .presc-text-left strong {
    font-size: 11px;
    line-height: 1.2;
    color: #ffffff !important;
}

.block-section-2 .presc-item-right {
    flex: 0 0 96px;
}

.block-section-2 .presc-item-right .rect-frame {
    width: 96px !important;
    height: 96px !important;
}

@media (max-width: 720px) {
    .block-section-2 {
        height: 468px !important;
        min-height: 468px !important;
    }

    .block-section-2 .presc-item {
        flex-basis: 116px;
        min-height: 116px;
        padding-inline: 9px;
        gap: 8px;
    }

    .block-section-2 .presc-text-left {
        font-size: 9px;
    }

    .block-section-2 .presc-item-right {
        flex-basis: 78px;
    }

    .block-section-2 .presc-item-right .rect-frame {
        width: 78px !important;
        height: 88px !important;
    }
}