@charset "utf-8";
/* Local supplements for the replicated homepage */

/* --- Slider fallback (used only if the flexslider plugin did not initialise) --- */
.fslider.fb .slider-wrap {
	display: grid;
	position: relative;
}
.fslider.fb .slider-wrap .slide {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity .6s ease-in-out;
	pointer-events: none;
}
.fslider.fb .slider-wrap .slide.active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}
.fslider.fb .slider-wrap .slide img {
	width: 100%;
	display: block;
}

/* --- News carousel fallback (static responsive grid) --- */
#oc-news.fb {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px 30px;
}
@media (min-width: 576px) {
	#oc-news.fb { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
	#oc-news.fb { grid-template-columns: repeat(3, 1fr); }
}

/* --- Detail gallery thumbnails (fallback) --- */
.detail-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.detail-thumbs img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	cursor: pointer;
	border: 1px solid #e5e5e5;
	opacity: .65;
	transition: opacity .2s, border-color .2s;
}
.detail-thumbs img:hover { opacity: 1; }
.detail-thumbs img.current {
	opacity: 1;
	border-color: var(--themecolor, #b08d57);
}

/* --- Cart / checkout --- */
.btn-remove {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
}
.cart .quantity input.qty { width: 48px; text-align: center; }
.gia-no { font-family: Consolas, Monaco, monospace; }

/* --- GIA diamond shape picker --- */
.form-check label { cursor: pointer; }
.form-label-img-hover { position: relative; }
.form-label-img-hover img { width: 48px; display: block; margin: 0 auto; }
.form-label-img-hover img.hover { display: none; }
.form-check:hover .form-label-img-hover img.hover,
.form-check input:checked + label .form-label-img-hover img.hover { display: block; }
.form-check:hover .form-label-img-hover img:not(.hover),
.form-check input:checked + label .form-label-img-hover img:not(.hover) { display: none; }
.diamond-shape .form-check {
	width: 76px;
	text-align: center;
	margin: 0 2px 10px;
}
.diamond-shape .form-check .center { font-size: .8rem; }

/* --- Misc alignment --- */
#oc-news .monthday { white-space: nowrap; }
.shop .product-image img { max-width: 100%; height: auto; display: block; }
.top-cart-content { display: none; }
#top-cart:hover .top-cart-content { display: block; }
.single-product .slider-wrap .slide img { width: 100%; display: block; }

/* --- Product detail: breadcrumb + spec block + diamond-shaped pager --- */
.breadcrumb-detail a { color: #888; }
.breadcrumb-detail a:hover { color: #c69; }
.single-product #tabs-content { padding: 0 4px; }
.single-product #tabs-content .dt-section { margin: 12px 0; }
.single-product #tabs-content .dt-section h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 8px 0 6px;
    color: #333;
    border-left: 3px solid #c69;
    padding-left: 8px;
}
.single-product #tabs-content ul.dt-spec {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.single-product #tabs-content ul.dt-spec li {
    padding: 3px 0 3px 14px;
    position: relative;
    line-height: 1.7;
    font-size: 14px;
}
.single-product #tabs-content ul.dt-spec li::before {
    content: "\25C6";
    position: absolute;
    left: 0;
    color: #555;
}
.single-product #tabs-content p.dt-note {
    color: #666;
    font-size: 13px;
    line-height: 1.7;
}
.single-product #tabs-content p.dt-note .hl { color: #c69; font-weight: 600; }
.promotion-list .badge { background: #f7e7ef; color: #a0416a; padding: 4px 10px; font-weight: 500; }

/* --- Product listing card (matching 原站 clean style) --- */
/* Keep .image-content absolutely positioned so the 1:1 square defined by
   .product-image:before{padding-top:100%} overlays cleanly. Setting
   position:relative here used to push .image-content below the pseudo,
   creating an extra ~square-height blank gap above each card. */
.shop .product .image-content.card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	transition: box-shadow .25s;
	overflow: hidden;
	position: absolute;
}
.shop .product .image-content.card:hover {
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.shop .product .img-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.shop .product .img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.shop .product .card-wm {
	position: absolute;
	right: 8px;
	bottom: 8px;
	font-family: 'Raleway', sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.05;
	color: rgba(180, 150, 110, 0.55);
	letter-spacing: 0.5px;
	text-align: right;
	pointer-events: none;
}
.shop .product .card-cat-tag {
	position: absolute;
	left: 8px;
	top: 8px;
	background: rgba(255,255,255,0.92);
	color: #a0416a;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 999px;
	z-index: 2;
	font-weight: 500;
}
.shop .product .product-desc {
	padding: 10px 4px 6px;
}
.shop .product .product-title h3 {
	font-size: 14px;
	line-height: 1.5;
	font-weight: 400;
	margin: 0 0 4px;
	min-height: 42px;
}
.shop .product .product-title h3 a { color: #333; }
.shop .product .product-title h3 a:hover { color: #a0416a; }
.shop .product .product-price .list-price {
	font-size: 13px;
	color: #555;
}
.shop .product .product-price .list-price span {
	color: #a0416a;
	font-weight: 600;
	font-size: 15px;
	margin-left: 4px;
}

/* --- Override image sizing for product cards --- */
.shop .product .img-wrap {
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    background: #fff;
    position: relative;
    width: 100%;
}
.shop .product .img-wrap img {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    display: block;
}
/* theme applies position:absolute + transform for hover scale; keep visible */
.shop .product-image img { position: relative !important; top: auto !important; left: auto !important; transform: none !important; }

/* --- Product detail price + action row --- */
.dt-price-row { display: flex; align-items: baseline; gap: 8px; }
.dt-price-label { color: #333; font-size: 15px; }
.dt-price-num { color: #d0021b; font-size: 28px; font-weight: 700; }
.dt-action-row { display: flex; gap: 10px; }
.dt-action-row .btn { padding: 10px 20px; font-size: 14px; border-radius: 2px; cursor: pointer; border: 1px solid transparent; }
.dt-action-row .btn-stockout { background: #d0021b; color: #fff; border-color: #d0021b; flex: 1; }
.dt-action-row .btn-stockout:hover { background: #b00117; }
.dt-action-row .btn-fav { background: #fff; color: #333; border-color: #ddd; flex: 1; }
.dt-action-row .btn-fav:hover { background: #f5f5f5; color: #d0021b; }

/* --- 原站详情页价格色 + product-brief 规格区 --- */
span#price_list { color: #333333; }
span#price_sell { color: #10a9dc !important; font-size: 1.5rem; font-weight: 600; }
.product-brief p { margin: 0; line-height: 1.9; font-size: 14px; color: #444; }
.product-brief p br + text { color: #333; }
/* 移除先前的水印/角标（原站水印在图片本身，无需 DOM） */
.shop .product .card-wm, .shop .product .card-cat-tag { display: none !important; }
/* 商品图：1:1 方框内居中填满，与主题原生一致（不覆盖 position/transform） */
.shop .product-image img,
.shop .product .image-content.card img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}
.shop .product-image:hover img,
.shop .product .image-content.card:hover img {
    transform: translate(-50%, -50%) scale(1.1);
}
/* 方框本身：主题用 .product-image:before{padding-top:100%} 撑出正方形 */
.shop .product .image-content.card {
    background: #fff;
    overflow: hidden;
}

/* 珠寶圖庫 / 商品列表：單張直向陳列（取代原本的 3 欄網格）
   適用於 #galGrid 與 #shop；卡片寬度收斂到 720px 居中 */
.shop .gal-one { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; padding: 0 0 28px; }
.shop .gal-one .grid-inner { display: flex; flex-direction: column; align-items: center; }
.shop .gal-one .product-image { width: 100%; }
.shop .gal-one .product-image img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; display: block; }
.shop .gal-one .product-desc { width: 100%; padding: 14px 8px 0; text-align: center; }
.shop .gal-one .product-title h3 { font-size: 1.05rem; font-weight: normal; margin: 0; color: #333; }

/* 商品詳情：自定義單圖切換器 */
.dt-slider { position: relative; background: #fff; }
.dt-slider #dtMainImg { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.dt-slider #dtMainImg a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.dt-slider #dtMainImg img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.dt-slider .dt-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(255,255,255,0.9); color: #333; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.15); cursor: pointer; z-index: 5; font-size: 22px; }
.dt-slider .dt-arrow:hover { background: #fff; color: #10a9dc; }
.dt-slider .dt-prev { left: 8px; }
.dt-slider .dt-next { right: 8px; }
.detail-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-thumbs img { width: 60px; height: 60px; object-fit: cover; border: 2px solid transparent; border-radius: 4px; cursor: pointer; transition: border-color .15s; }
.detail-thumbs img:hover { border-color: #ccc; }
.detail-thumbs img.current { border-color: #10a9dc; }

/* 商品詳情：數量選擇器 + 購買按鈕列（全部商品顯示為有庫存） */
.dt-buy { border-top: 1px solid #eee; padding-top: 18px; }
.dt-qty-row { gap: 12px; }
.dt-qty-label { color: #333; font-size: 15px; }
.dt-qty-stepper { display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: 3px; overflow: hidden; background: #fff; }
.dt-qty-stepper button { background: #fff; border: 0; width: 38px; height: 38px; cursor: pointer; color: #555; font-size: 15px; line-height: 1; }
.dt-qty-stepper button:hover { background: #f5f5f5; color: #d0021b; }
.dt-qty-stepper input { width: 58px; height: 38px; border: 0; border-left: 1px solid #ddd; border-right: 1px solid #ddd; text-align: center; font-size: 15px; background: #fff; }
.dt-qty-stepper input::-webkit-outer-spin-button,
.dt-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dt-buy .button { padding: 12px 18px; font-size: 14px; line-height: 24px; }
.dt-buy .button-dark { background-color: #333; }
.dt-buy .button-dark:hover { background-color: #000; }
.dt-buy .add-to-cart { background-color: #999; color: #fff; }
.dt-buy .add-to-cart:hover { background-color: #777; color: #fff; }
.dt-buy .add-to-fav { background: #fff; color: #d0021b; border: 1px solid #e8c8c8; text-shadow: none; font-weight: 600; }
.dt-buy .add-to-fav:hover { background: #fff5f5; color: #d0021b; }
@media (max-width: 991px) {
	.dt-buy .col-12, .dt-buy .col, .dt-buy .col-auto { margin-bottom: 8px; }
}