/* =====================
RESET
===================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

    background:#faf8f3;

    color:#222;

}



img{

    width:100%;

    display:block;

}



a{

    text-decoration:none;

    color:inherit;

}



/* =====================
TOP BAR
===================== */


.top-bar{

    height:40px;

    background:#111;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

    letter-spacing:1px;

}



/* =====================
HEADER
===================== */


.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:110px;

    z-index:9999;

    background:white;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 5%;

    box-sizing:border-box;
	
	background:rgba(255,255,255,0.95);

	backdrop-filter:blur(10px);
	box-shadow:
	0 2px 15px rgba(0,0,0,.08);
	position:sticky;

top:0;

z-index:999;


}


/* LOGO 左侧 */

.brand-logo{
    position:absolute;
    left:80px;
    top:50%;
    transform:translateY(-50%);
    text-align:center;
}


/* 导航居中 */

.header nav{
    width:100%;
    display:flex;
    justify-content:center;
    gap:45px;
}



.brand-name{

    font-size:52px;

    font-weight:300;

    letter-spacing:18px;

    line-height:45px;

    color:#707070;

}



.brand-sub{

    font-size:14px;

    letter-spacing:9px;

    color:#999;

    margin-left:35px;

}





/* NAVIGATION */


.header nav{

    display:flex;

    gap:38px;

}



.header nav a{

    font-size:13px;

    letter-spacing:2px;

    transition:.3s;

}



.header nav a:hover{

    opacity:.5;

}





/* HEADER ICON */

.header-icons{

    display:flex;

    align-items:center;

    gap:25px;

}



.header-icons a{

    font-size:16px;

    cursor:pointer;

}



.header-icons a:hover{

    opacity:.5;

}






/* =====================
LUXURY HERO BANNER
===================== */


.hero-slider{

   width:100%;

    height:calc(100vh - 100px);

    position:absolute;

    top:0;

    left:0;

    overflow:hidden;

}




.hero-slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:1s;

}



.hero-slide.active{

    opacity:1;

    visibility:visible;

    z-index:1;

}
/* =====================
HERO 高清优化
===================== */


.hero-slider{

    position:relative;

    width:100%;

    height:calc(100vh - 130px);

    min-height:700px;

    overflow:hidden;

}



.hero-slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:.8s ease;

}



.hero-slide.active{

    opacity:1;

    visibility:visible;

    z-index:2;

}



.hero-slide img{

   width:100%;

    height:100%;

    object-fit:contain;

    object-position:center center;

}



/* 高清遮罩 */

.hero-overlay{

   position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,0.25);

z-index:1;


}



/* 文字优化 */

.hero-content{

    position:absolute;

left:8%;

top:50%;

transform:translateY(-50%);

z-index:2;

color:white;

}



.hero-content h1{


    font-size:clamp(40px,5vw,80px);

	font-weight:400;

	line-height:1.1;

}



.hero-content p{


	font-size:20px;

	letter-spacing:2px;

	margin:30px 0;

}



.hero-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 40%;

    transform:scale(1.02);

    animation:zoomBanner 8s ease forwards;

}




@keyframes zoomBanner{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}




/* 图片暗色高级遮罩 */

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    90deg,

    rgba(0,0,0,.45),

    rgba(0,0,0,.15),

    transparent

    );



}






/* Banner文字 */


.hero-content{


    position:absolute;

    left:8%;

    top:50%;

    transform:translateY(-50%);


    color:white;

    z-index:5;

    max-width:650px;


}



.hero-content h1{


    font-size:76px;

    line-height:1.05;

    font-weight:300;

    letter-spacing:2px;

    margin-bottom:25px;


}





.hero-content p{


    font-size:21px;

    letter-spacing:2px;

    font-weight:300;

    margin-bottom:45px;


}




/* 按钮 */

.hero-content .btn{


    display:inline-block;

	background:white;

	color:#333;

	padding:12px 60px;

	text-decoration:none;

	letter-spacing:4px;

	font-size:13px;


}




.hero-content .btn:hover{


    background:#111;

    color:white;


}






/* 左右箭头 */


.slider-arrow{


    position:absolute;

    top:50%;


    width:65px;

    height:65px;


    transform:translateY(-50%);


    background:rgba(255,255,255,.1);

    border:1px solid rgba(255,255,255,.5);


    z-index:20;


    transition:.3s;


}





.slider-arrow:hover{


    background:white;

}



.slider-arrow:hover::before{


    border-color:#111;

}





.slider-prev{

left:40px;

}



.slider-next{

right:40px;

}




.slider-arrow::before{


    content:"";


    width:18px;

    height:18px;


    display:block;


    border-top:1px solid white;

    border-right:1px solid white;


}




.slider-prev::before{


transform:rotate(-135deg);

margin-left:8px;

}




.slider-next::before{


transform:rotate(45deg);

margin-left:3px;


}





/* 页码 */


.slider-counter{


position:absolute;

right:60px;

bottom:50px;


color:white;


font-size:14px;

letter-spacing:5px;


z-index:20;


}
/* =====================
SECTION TITLE
===================== */


h2{

    text-align:center;

    font-size:42px;

    font-weight:400;

    letter-spacing:2px;

    margin-bottom:70px;

}



/* =====================
ROOM COLLECTION
===================== */


.rooms{

    padding:120px 7%;

}



.room-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

}



.room{

    position:relative;
    display:block;
    color:inherit;
    text-decoration:none;

    overflow:hidden;

}



.room img{

    height:520px;

    object-fit:cover;

    transition:.6s;

}



.room:hover img{

    transform:scale(1.06);

}



.room h3{

    position:absolute;

    left:35px;

    bottom:35px;

    color:white;

    font-size:30px;

    font-weight:300;

}



/* =====================
PRODUCT LIST
===================== */


.products{

    background:#f2efe8;

    padding:120px 7%;

}



.product-list{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:35px;

}



.product{

    background:white;

    overflow:hidden;

}



.product img{

    height:500px;

    object-fit:cover;

    transition:.5s;

}



.product:hover img{

    transform:scale(1.05);

}



.product h3{

    padding:30px;

    text-align:center;

    font-size:22px;

    font-weight:400;

}





/* =====================
PRODUCT PAGE
===================== */


.products-page{

    padding:120px 7%;

}



.product-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:35px;

}



.product-card{

    background:white;

    overflow:hidden;

}



.product-card img{

    height:520px;

    object-fit:cover;

}



.product-info{

    padding:30px;

    text-align:center;

}



.product-info h2{

    font-size:22px;

    margin-bottom:15px;

}



.price{

    color:#8b6b4a;

    font-size:20px;

}




/* =====================
PRODUCT DETAIL
===================== */


.product-detail{

    padding:120px 8%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

}



.product-detail img{

    height:650px;

    object-fit:cover;

}



.product-detail-info h1{

    font-size:45px;

    font-weight:300;

    letter-spacing:3px;

}



.product-detail-info p{

    margin-top:30px;

    color:#666;

    line-height:2;

}









/* =====================
STORY
===================== */


.story{

    padding:120px 8%;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:80px;

    align-items:center;

    background:white;

}



.story img{

    height:650px;

    object-fit:cover;

}



.story-text h2{

    text-align:left;

    margin-bottom:30px;

}



.story-text p{

    color:#666;

    font-size:18px;

    line-height:2;

}





/* =====================
CUSTOM
===================== */


.custom{

    padding:130px 10%;

    background:#191919;

    color:white;

    text-align:center;

}



.custom p{

    font-size:20px;

    margin-bottom:40px;

}



.custom button,
.custom .custom-design-link{

    background:white;

    color:#222;

    border:0;

    padding:18px 55px;

    letter-spacing:3px;

    display:inline-block;

    text-decoration:none;

    transition:background-color .25s ease, color .25s ease, transform .25s ease;

}

.room:focus-visible{

    outline:2px solid #111;

    outline-offset:5px;

}

.custom .custom-design-link:hover{

    background:#d8d4cb;

    color:#111;

    transform:translateY(-2px);

}




/* =====================
INSTAGRAM
===================== */


.instagram{

    padding:120px 7%;

}



.insta-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:15px;

}



.insta-grid img{

    height:350px;

    object-fit:cover;

}




/* =====================
CART / WISHLIST
===================== */


/* =====================
 CART PAGE
===================== */


.cart-page,
.wishlist-page{

    min-height:calc(100vh - 170px);

    padding:80px 8% 100px;

    text-align:center;

}




.cart-page h1,
.wishlist-page h1{


    font-size:42px;

    font-weight:300;

    letter-spacing:8px;

    margin-bottom:70px;

}




/* 内容区域 */


.cart-container{


    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:

    2fr 1fr;


    gap:70px;


    align-items:center;


}



/* 空购物车 */


.empty-cart{


    text-align:center;


}



.empty-cart h2{


    font-size:26px;

    font-weight:400;

    letter-spacing:2px;

    margin-bottom:15px;


}



.empty-cart p{


    color:#777;

    margin-bottom:35px;


}




.empty-cart a{


    display:inline-flex;

    justify-content:center;

    align-items:center;


    height:45px;

    padding:0 45px;


    background:#111;

    color:white;


    letter-spacing:3px;

    font-size:12px;


}





/* 右侧 */


.cart-summary{


    border:1px solid #ddd;


    padding:45px;


}



.cart-summary h2{


    font-size:30px;

    letter-spacing:3px;

    margin-bottom:50px;

}



.summary-line{


    display:flex;

    justify-content:space-between;


    font-size:14px;

    margin-bottom:40px;


}



.cart-summary button{


    width:100%;

    height:45px;


    background:#111;

    color:white;


    border:0;


    letter-spacing:3px;


}






/* FOOTER 固定 */


.footer{


    margin-top:0;


}



/* 手机 */


@media(max-width:900px){


.cart-container{

    grid-template-columns:1fr;

}



.cart-page{

    padding:50px 25px;

}


}



.cart-page h1,

.wishlist-page h1{

    font-size:42px;

    font-weight:300;

    letter-spacing:8px;

    margin-bottom:80px;

}



.empty-cart,
.wishlist-empty{

    margin-top:50px;

}



.empty-cart h2,
.wishlist-empty h2{

    font-size:26px;

    font-weight:300;

}



.empty-cart p,
.wishlist-empty p{

    color:#777;

    margin-top:15px;

}



.empty-cart a,
.wishlist-empty a{

    display:inline-block;

    margin-top:35px;

    padding:16px 45px;

    background:#111;

    color:white;

    letter-spacing:3px;

}




/* CART BOX */


.cart-container{

    display:grid;

    grid-template-columns:
    2fr 1fr;

    gap:50px;

    margin-top:60px;

}



.cart-summary{

    border:1px solid #ddd;

    padding:40px;

}



.summary-line{

    display:flex;

    justify-content:space-between;

    margin:30px 0;

}



.cart-summary button{

    width:100%;

    height:50px;

    background:#111;

    color:white;

    border:0;

    letter-spacing:3px;

}
/* =====================
FOOTER
===================== */


/* =====================
   LUXURY FOOTER
===================== */


.footer{

    background:#111;

    color:white;

    padding:80px 8% 25px;

    margin-top:auto;

}



.footer-container{


    max-width:1400px;

    margin:auto;


    display:grid;

    grid-template-columns:

    2fr 1fr 1fr 1fr;


    gap:80px;


}



/* 左侧品牌 */


.footer-logo{


    font-size:34px;


    letter-spacing:10px;


    font-weight:300;


    margin-bottom:25px;


}




.footer-brand p{


    color:#999;


    font-size:14px;


    line-height:2;


}







/* 标题 */


.footer h3{


    font-size:13px;


    letter-spacing:4px;


    font-weight:400;



    margin-bottom:30px;


}




/* 链接 */


.footer-column a{


    display:block;


    color:#999;


    text-decoration:none;


    font-size:14px;


    margin-bottom:18px;


}



.footer-column a:hover{


    color:white;


}





/* 联系方式 */


.footer-column p{


    color:#999;


    line-height:2;


    font-size:14px;


}







/* 底部版权 */


.footer-bottom{


    max-width:1400px;


    margin:60px auto 0;


    padding-top:25px;


    border-top:1px solid #333;


    text-align:center;


    color:#777;


    font-size:12px;


}





/* 手机 */


@media(max-width:900px){


.footer-container{


grid-template-columns:1fr;


gap:40px;


}



.footer{


padding:60px 25px 20px;


}



}




.footer-logo{

    font-size:32px;

    letter-spacing:8px;

    font-weight:300;

    margin-bottom:20px;

}




.footer p{

    color:#aaa;

    font-size:14px;

    line-height:1.8;

}




.footer h3{

    font-size:14px;

    letter-spacing:3px;

    font-weight:400;

    margin-bottom:25px;

}




.footer-column a{

    display:block;

    color:#aaa;

    font-size:14px;

    margin-bottom:15px;

}



.footer-column a:hover{

    color:white;

}




.footer-social{

    border-top:1px solid #333;

    margin-top:50px;

    padding-top:30px;

}




.social-icons{

    display:flex;

    gap:20px;

}



.social-icons span{

    border:1px solid #555;

    padding:12px 25px;

    color:#aaa;

    font-size:13px;

}





.footer-bottom{

    border-top:1px solid #333;

    margin-top:40px;

    padding-top:20px;

    text-align:center;

    color:#777;

    font-size:12px;

}





/* =====================
TOP BUTTON
===================== */


button{

    cursor:pointer;

    font-family:inherit;

}





/* =====================
MOBILE
===================== */


@media(max-width:900px){


/* HEADER */

.header{

    padding:0 25px;

}


.header nav{

    display:none;

}


.brand-name{

    font-size:35px;

    letter-spacing:12px;

}



.brand-sub{

    font-size:11px;

}




/* HERO */


.hero-slider{

    height:75vh;

    min-height:550px;

}



.hero-content{

    left:30px;

    right:30px;

}



.hero-content h1{

    font-size:42px;

}



.hero-content p{

    font-size:16px;

}





.slider-prev{

    left:15px;

}


.slider-next{

    right:15px;

}





/* ROOM */


.room-grid{

    grid-template-columns:1fr;

}



.room img{

    height:400px;

}





/* PRODUCTS */


.product-list{

    grid-template-columns:1fr;

}



.product img{

    height:350px;

}





/* STORY */


.story{

    grid-template-columns:1fr;

}



.story img{

    height:450px;

}




/* INSTAGRAM */


.insta-grid{

    grid-template-columns:

    repeat(2,1fr);

}





/* CART */


.cart-container{

    grid-template-columns:1fr;

}





/* DETAIL */


.product-detail{

    grid-template-columns:1fr;

}




/* FOOTER */


.footer-container{

    grid-template-columns:1fr;

}


.footer{

    padding:50px 25px 20px;

}


}
.product-card{

text-decoration:none;
color:#111;
background:white;
display:block;

}



.product-card img{

width:100%;
height:480px;
object-fit:cover;

}



.product-info{

padding:25px;
text-align:center;

}



.product-info h2{

font-size:22px;
font-weight:400;
letter-spacing:2px;

}



.product-info p{

color:#777;

}



.product-info span{

font-size:16px;

}
.top-bar{
height:40px;
background:#111;
color:white;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
letter-spacing:2px;
}



.product-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}



.product-card{
text-decoration:none;
color:#111;
text-align:center;
}



.product-card img{
width:100%;
height:420px;
object-fit:cover;
}



.product-info{
padding:25px 10px;
}



.product-info h2{
font-size:20px;
letter-spacing:3px;
font-weight:400;
}



.product-info p{
color:#777;
}



.product-info span{
font-size:18px;
}



.footer{
margin-top:100px;
}
.hero{
position:relative;

height:calc(100vh - 100px);

overflow:hidden;

}
/* =====================================
   MATERIALS PAGE
   XWS STONE MATERIAL LIBRARY
===================================== */


.materials-page{

    padding:70px 4% 120px;

    background:#fff;

}




.materials-page h1{


    text-align:center;


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


    font-size:42px;


    font-weight:400;


    margin-bottom:110px;


    color:#222;


}




.materials-grid{


    display:grid;


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


    gap:25px;


}





.materials-card{


    background:#fff;


    border-radius:8px;


    overflow:hidden;


    box-shadow:
    0 5px 20px rgba(0,0,0,.08);


    transition:.4s;
	


}



.materials-card:hover{


    transform:
    translateY(-8px);


    box-shadow:
    0 15px 35px rgba(0,0,0,.15);


}




.materials-card img{


    width:100%;


    height:360px;


    object-fit:cover;


    transition:.5s;


}



.materials-card:hover img{


    transform:
    scale(1.08);


}





.materials-card div{


    height:75px;


    display:flex;


    align-items:center;


    padding-left:25px;


    font-family:
    Georgia,
    serif;


    font-size:18px;


    font-weight:600;


    color:#075a9c;


}







/* 手机适配 */


@media(max-width:1200px){


.materials-grid{


grid-template-columns:
repeat(3,1fr);


}


}




@media(max-width:768px){


.materials-grid{


grid-template-columns:
repeat(2,1fr);


}


}





@media(max-width:480px){


.materials-grid{


grid-template-columns:
1fr;


}


}	
/* =================================
   Breadcrumb Navigation
   XWS STONE
================================= */


.breadcrumb{

    height:55px;

    display:flex;

    align-items:center;

    padding:0 5%;

    background:#f7f7f7;

    border-top:1px solid #eee;

    border-bottom:1px solid #eee;

    font-family:
    Georgia,
    serif;

    font-size:16px;

    color:#777;

}



.breadcrumb a{


    color:#333;

    text-decoration:none;


}



.breadcrumb a:hover{


    color:#999;


}



.breadcrumb span{


    margin:0 15px;

    color:#aaa;


}



.breadcrumb .current{


    color:#777;


}
/* Materials 页面 */

#materialsList{

    width:90%;
    margin:60px auto;

    display:grid;

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

    gap:30px;

}



.material-card{

    background:white;

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 5px 20px rgba(0,0,0,0.12);

    transition:.3s;

}



.material-card:hover{

    transform:translateY(-8px);

}



.material-card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

}



.material-name{

    padding:18px;

    font-size:18px;

    font-family:Georgia,serif;

    color:#07549a;

    font-weight:bold;

}



@media(max-width:1200px){

#materialsList{

grid-template-columns:repeat(4,1fr);

}

}



@media(max-width:900px){

#materialsList{

grid-template-columns:repeat(3,1fr);

}

}



@media(max-width:600px){

#materialsList{

grid-template-columns:repeat(2,1fr);

}

}
.materials-section h1 {
    text-align: center;
}
/* =====================
PRODUCT DROPDOWN MENU
===================== */


.has-dropdown{

    position:relative;

}



/* 下拉框 */

.dropdown{

    position:absolute;

    top:35px;

    left:0;


    width:230px;


    background:#fff;


    padding:15px 0;


    list-style:none;


    box-shadow:
    0 10px 30px rgba(0,0,0,.12);



    opacity:0;

    visibility:hidden;


    transform:translateY(15px);


    transition:.35s ease;


    z-index:99999;

}



/* 菜单文字 */

.dropdown li{

    width:100%;

}


.dropdown li a{


    display:block;


    padding:13px 25px;


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


    font-size:16px;


    letter-spacing:0;


    color:#555;


}



/* 鼠标效果 */

.dropdown li a:hover{


    background:#f7f5f0;


    color:#111;


}



/* 展开 */

.has-dropdown:hover .dropdown{


    opacity:1;


    visibility:visible;


    transform:translateY(0);


}
/* 导航小箭头 */

.arrow{

    display:inline-block;

    width:9px;
    height:9px;


    border-right:1.5px solid #555;

    border-bottom:1.5px solid #555;


    transform:rotate(45deg);


    margin-left:12px;

    margin-bottom:5px;

}


/* 导航文字和箭头整体对齐 */

.has-dropdown > a{

    display:flex;

    align-items:center;

    gap:8px;

}

/* 展开状态 */

.has-dropdown:hover .arrow{

    transform:rotate(225deg);

    top:2px;

}


/* 鼠标经过旋转 */

.has-dropdown:hover .arrow{


    transform:
    rotate(225deg);


    vertical-align:-1px;

}
.header {
  width: 100%;
  height: 70px;
  padding: 0 60px;
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  background: #ffffff;
}

/* Logo */
.brand-logo {
  width: 180px;
  color:  #222222;
  line-height: 1;
  flex-shrink: 0;
}

.brand-name {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 29px;
  font-weight: 500;
  letter-spacing: 5px;
}

.brand-sub {
  margin-top: 3px;
  margin-left: 68px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
}

/* 中间导航 */
.stone-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  height: 70px;
  display: flex;
  align-items: center;
  gap: 66px;
}

.stone-link {
  position: relative;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 8px;

  color:  #222222;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.stone-link:hover {
  opacity: .7;
}

.stone-active {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.stone-arrow {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-right: 1px solid  #222222;
  border-bottom: 1px solid  #222222;
  transform: rotate(45deg);
  margin-top: -4px;
}

/* Products 下拉菜单 */
.stone-products {
  position: relative;
  height: 70px;
  display: flex;
  align-items: center;
}

.stone-dropdown {
  display: none;
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);

  width: 245px;
  padding: 12px 0;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

.stone-products:hover .stone-dropdown {
  display: block;
}

/* About 子导航：保持与产品下拉相同的交互，但使用截图中的米灰色悬停条 */
.stone-about > .stone-link {
  padding: 0 18px;
  margin: 0 -18px;
}

.stone-about:hover > .stone-link,
.stone-about:focus-within > .stone-link,
.stone-about.is-open > .stone-link {
  background: #b6b39b;
  color: #ffffff;
}

.stone-about:hover > .stone-link .stone-arrow,
.stone-about:focus-within > .stone-link .stone-arrow,
.stone-about.is-open > .stone-link .stone-arrow {
  border-color: #ffffff;
}

.stone-about .stone-dropdown {
  left: 0;
  transform: none;
  width: 270px;
  padding: 8px 0;
  border-top: 1px solid #efeee8;
}

.stone-about .stone-dropdown a {
  padding: 13px 20px;
  font-size: 16px;
  line-height: 1.25;
}

.stone-about .stone-dropdown a:hover,
.stone-about .stone-dropdown a:focus-visible {
  background: #f2f1ec;
}

.stone-dropdown a {
  display: block;
  padding: 11px 15px;

  color:  #222222;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  text-decoration: none;
  white-space: nowrap;
}

.stone-dropdown a:hover {
  background: #f1f0eb;
}

/* 手机端 */
@media screen and (max-width: 900px) {
  .header {
    height: 64px;
    padding: 0 20px;
  }

  .brand-logo {
    width: 120px;
  }

  .brand-name {
    font-size: 22px;
    letter-spacing: 3px;
  }

  .brand-sub {
    margin-left: 42px;
    font-size: 8px;
  }

  .stone-nav {
    position: static;
    transform: none;
    margin-left: auto;
    gap: 20px;
    overflow-x: auto;
  }

  .stone-link {
    height: 64px;
    font-size: 12px;
  }

  .stone-products {
    height: 64px;
  }
}

@media screen and (max-width: 600px) {
  .stone-nav {
    gap: 14px;
  }

  .stone-link {
    font-size: 11px;
  }

  .stone-nav a:nth-child(1),
  .stone-nav a:nth-child(4),
  .stone-nav a:nth-child(5) {
    display: none;
  }
}
/* 右侧功能区 */
.header-actions {
  position: absolute;
  right: 55px;
  top: 0;

  height: 70px;
  display: flex;
  align-items: center;
  gap: 25px;
}

.header-icon-link,
.language-link {
  display: flex;
  align-items: center;
  gap: 9px;

  color:  #222222;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.header-icon-link:hover,
.language-link:hover {
  opacity: .7;
}

/* 搜索图标 */
.search-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid  #222222;
  border-radius: 50%;
}

.search-icon::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 6px;
  height: 1.5px;
  background:  #222222;
  transform: rotate(45deg);
  transform-origin: left center;
}

/* 地球图标 */
.globe-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  border: 1px solid  #222222;
  border-radius: 50%;

  font-family: Arial, sans-serif;
  font-size: 12px;
}

/* 搜索点击效果 */
#searchBtn {
  cursor: pointer;
}
.marble-card{

width:420px;

aspect-ratio:3/4;

position:relative;

overflow:hidden;

cursor:pointer;

}



.marble-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}



/* 图片放大 */

.marble-card:hover img{

    transform:scale(1.08);

}




.hover-info{

    position:absolute;

	left:20px;

	right:20px;

	bottom:20px;


	transform:translateY(130%);


	padding:25px;


	background:
	rgba(255,255,255,.35);


	backdrop-filter:blur(15px);


	color:white;


	transition:.5s;


}




/* 鼠标经过显示 */

.marble-card:hover .hover-info{

    transform:translateY(0);

}




.hover-info span{

    display:inline-block;

    background:white;

    color:#666;


    padding:8px 22px;


    border-radius:30px;


    font-size:14px;

}



.hover-info h2{

    font-family:
    "Times New Roman";


    font-size:25px;


    line-height:1.2;


    font-weight:400;

	max-height:220px;

}
.marble-card:hover img{

transform:scale(1.08);

}

/* Shared moving frosted-glass header */
body .header.site-header-frosted{
  position:sticky;
  top:0;
  z-index:10000;
  height:70px;
  margin:0;
  background:rgba(255,255,255,.76);
  border-bottom:1px solid rgba(90,90,90,.12);
  box-shadow:0 8px 30px rgba(25,25,25,.05);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  backdrop-filter:saturate(140%) blur(18px);
  transition:background-color .3s ease, box-shadow .3s ease;
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body .header.site-header-frosted{ background:rgba(255,255,255,.96); }
}

html{ overflow-x:clip; }
body{ max-width:100%; overflow-x:clip; }

@media (max-width:1180px){
  body .header.site-header-frosted .header-actions{ display:none; }
  body .header.site-header-frosted .stone-nav{
    right:30px;
    left:auto;
    transform:none;
    gap:32px;
  }
}

@media (max-width:900px){
  body .header.site-header-frosted{
    height:64px;
    padding:0 20px;
  }
  body .header.site-header-frosted .stone-nav{
    position:static;
    right:auto;
    margin-left:auto;
    gap:20px;
    overflow-x:auto;
  }
}

/* =====================
   COMPLETE MOBILE LAYOUT
===================== */

@media (max-width: 900px) {
  html,
  body { width: 100%; min-width: 0 !important; overflow-x: hidden !important; }
  img { max-width: 100%; }
  input,
  textarea,
  select { min-width: 0; max-width: 100%; }

  .top-bar {
    height: 34px;
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-align: center;
  }

  body .header.site-header-frosted {
    height: 64px;
    padding: 0 16px;
  }
  body .header.site-header-frosted .brand-logo {
    position: absolute;
    top: 50%;
    left: 18px;
    width: auto;
    transform: translateY(-50%);
  }
  body .header.site-header-frosted .brand-name {
    font-size: 23px;
    letter-spacing: 5px;
    line-height: 1;
  }
  body .header.site-header-frosted .brand-sub {
    margin-top: 5px;
    margin-left: 44px;
    font-size: 8px;
    letter-spacing: 2px;
  }
  body .header.site-header-frosted .stone-nav,
  body .header.site-header-frosted .header-actions { display: none !important; }

  h2 { font-size: 34px; line-height: 1.15; letter-spacing: 1px; margin-bottom: 45px; }

  .hero-slider {
    height: calc(100svh - 98px);
    min-height: 520px;
    max-height: 780px;
  }
  .hero-slide img { object-position: center center; }
  .hero-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.52));
  }
  .hero-content {
    top: auto;
    right: 24px;
    bottom: 74px;
    left: 24px;
    max-width: none;
    transform: none;
  }
  .hero-content h1 {
    margin-bottom: 18px;
    font-size: clamp(38px, 12vw, 52px);
    line-height: 1.05;
    letter-spacing: .5px;
  }
  .hero-content p {
    max-width: 310px;
    margin: 0 0 26px;
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: 1px;
  }
  .hero-content .btn {
    min-height: 46px;
    padding: 15px 24px;
    font-size: 10px;
    letter-spacing: 2px;
  }
  .slider-arrow {
    top: 46%;
    width: 42px;
    height: 42px;
  }
  .slider-prev { left: 12px; }
  .slider-next { right: 12px; }
  .slider-counter { right: 22px; bottom: 25px; font-size: 11px; }

  .rooms,
  .products,
  .instagram { padding: 76px 18px; }
  .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .room img { height: auto; aspect-ratio: 4 / 5; }
  .room h3 { right: 18px; bottom: 18px; left: 18px; font-size: 22px; }

  .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .product img { height: auto; aspect-ratio: 4 / 5; }
  .product h3 { min-height: 76px; padding: 20px 12px; font-size: 18px; }

  .story { padding: 76px 18px; grid-template-columns: 1fr; gap: 42px; }
  .story img { height: auto; aspect-ratio: 4 / 5; }
  .story-text h2 { margin-bottom: 22px; font-size: 36px; }
  .story-text p { font-size: 16px; line-height: 1.8; }
  .story-text .btn { display: inline-flex; margin-top: 26px; }

  .custom { padding: 78px 22px; }
  .custom h2 { margin-bottom: 28px; font-size: 38px; }
  .custom p { margin-bottom: 32px; font-size: 16px; line-height: 1.6; }
  .custom button,
  .custom .custom-design-link { padding: 16px 30px; font-size: 11px; letter-spacing: 2.5px; }

  .insta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .marble-card { width: 100% !important; max-width: 100%; aspect-ratio: 3 / 4; }
  .hover-info {
    right: 10px;
    bottom: 10px;
    left: 10px;
    padding: 16px;
    background: rgba(20,20,20,.46);
    transform: translateY(0);
  }
  .hover-info span { padding: 6px 12px; font-size: 10px; }
  .hover-info h2 { max-height: none; margin: 12px 0 0; font-size: 17px; line-height: 1.25; text-align: left; }

  .footer { padding: 58px 20px 22px; }
  .footer-container { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-logo { font-size: 27px; letter-spacing: 6px; }
  .footer-column { min-width: 0; }
  .footer-column:last-child { grid-column: 1 / -1; }
  .footer p,
  .footer a { overflow-wrap: anywhere; }
  .footer-social { margin-top: 42px; }
  .social-icons { display: flex; flex-wrap: wrap; gap: 10px; }
  .social-icons span { padding: 10px 14px; font-size: 11px; }
  .footer-bottom { margin-top: 34px; line-height: 1.6; }

  .breadcrumb { height: auto; min-height: 50px; padding: 10px 16px; overflow: hidden; font-size: 13px; }
  .breadcrumb span { margin: 0 9px; }
  .cart-page,
  .wishlist-page,
  .products-page,
  .product-detail { padding-right: 18px; padding-left: 18px; }

  .about-container,
  .contact-container,
  .faq-container,
  .detail-container { max-width: calc(100% - 32px); }
  .about-subnav { max-width: 100%; }
  .about-subnav .about-container {
    width: 100% !important;
    max-width: 100%;
    padding: 0 16px;
    overflow-x: auto;
    justify-content: flex-start !important;
  }
  .detail-upload-field input[type="file"],
  .fabrication-upload-field input[type="file"],
  .contact-upload-field input[type="file"] { width: 100%; min-width: 0; }
}

@media (max-width: 600px) {
  .rooms,
  .products,
  .instagram { padding: 68px 16px; }
  .room-grid,
  .product-list,
  .insta-grid { grid-template-columns: 1fr; }
  .room img { aspect-ratio: 5 / 6; }
  .product img { aspect-ratio: 1 / 1.08; }
  .product h3 { min-height: 0; font-size: 20px; }
  .marble-card { aspect-ratio: 4 / 5; }
  .hover-info { right: 14px; bottom: 14px; left: 14px; padding: 20px; }
  .hover-info h2 { font-size: 21px; }

  .footer-container { grid-template-columns: 1fr; }
  .footer-brand,
  .footer-column:last-child { grid-column: auto; }

  .catalog-section { padding-right: 16px; padding-left: 16px; }
  .catalog-intro { padding-right: 16px; padding-left: 16px; }
  .catalog-toolbar { gap: 18px; }
  .filter-row { flex-wrap: nowrap; max-height: none; padding-bottom: 6px; overflow-x: auto; overflow-y: hidden; }
  .filter-chip { flex: 0 0 auto; }
  .offline-product-image::after { display: none; }
  .offline-product-info { padding: 21px 15px 24px; }

  .product-main-image-wrap { aspect-ratio: 1 / 1.05; }
  .detail-specifications dl { grid-template-columns: 105px minmax(0, 1fr); }
  .material-list { gap: 16px 8px; }
  .material-item { width: 76px; }
  .detail-inquiry form { padding: 24px 16px; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .about-hero,
  .faq-hero,
  .contact-hero { height: 58svh; min-height: 360px; }
  .about-hero-copy h1,
  .faq-hero-copy h1,
  .contact-hero-copy h1 { font-size: 43px; }
  .about-intro,
  .about-story-block,
  .about-values,
  .about-craft-block,
  .about-subpage-intro,
  .about-feature-strip,
  .about-process,
  .about-dark-strip,
  .about-care-section,
  .fabrication-inquiry,
  .faq-main,
  .faq-contact,
  .contact-details-section,
  .contact-message-section,
  .contact-promise { padding-top: 68px; padding-bottom: 68px; }
}

@media (max-width: 380px) {
  .hero-content h1 { font-size: 36px; }
  .hero-content p { font-size: 13px; }
  .mobile-menu-panel { width: 94vw; padding-right: 20px; padding-left: 20px; }
  .mobile-menu-links details > div { grid-template-columns: 1fr; }
}


/*
 * XWS Stone responsive system
 *
 * These rules are intentionally scoped to tablet/phone breakpoints. Desktop
 * (1025px and wider) keeps the established XWS layout and typography.
 */

@media (max-width: 1024px) {
  html,
  body {
    width: 100%;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

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

  img,
  video,
  svg,
  canvas { max-width: 100%; }

  input,
  textarea,
  select,
  button { max-width: 100%; }

  .top-bar {
    min-height: 32px;
    height: auto;
    padding: 8px 16px;
    line-height: 1.3;
    text-align: center;
  }

  body .header.site-header-frosted,
  .catalog-body .header,
  .detail-body .header,
  .about-body .header,
  .faq-body .header,
  .contact-body .header {
    height: 64px;
    padding: 0 20px;
  }

  body .header.site-header-frosted .brand-logo,
  .catalog-body .brand-logo,
  .detail-body .brand-logo,
  .about-body .brand-logo,
  .faq-body .brand-logo,
  .contact-body .brand-logo {
    top: 50%;
    left: 20px;
    width: 118px;
    transform: translateY(-50%);
  }

  body .header.site-header-frosted .stone-nav,
  .catalog-body .stone-nav,
  .detail-body .stone-nav,
  .about-body .stone-nav,
  .faq-body .stone-nav,
  .contact-body .stone-nav,
  body .header.site-header-frosted .header-actions,
  .catalog-body .header-actions,
  .detail-body .header-actions,
  .about-body .header-actions,
  .faq-body .header-actions,
  .contact-body .header-actions {
    display: none !important;
  }

  .mobile-menu-toggle { display: flex !important; }

  .footer {
    margin-top: 0;
    padding: 72px 28px 24px;
  }

  .footer-container {
    width: 100%;
    max-width: 1180px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 28px;
  }

  .footer-brand { grid-column: 1 / -1; }
  .footer-column { min-width: 0; }
  .footer-column:last-child { grid-column: 1 / -1; }
  .footer a,
  .footer p { overflow-wrap: anywhere; }

  /* Home page */
  .hero-slider {
    height: min(760px, calc(100svh - 96px));
    min-height: 520px;
  }

  .hero-content {
    right: 8%;
    left: 8%;
    max-width: 620px;
  }

  .rooms,
  .products,
  .instagram { padding: 84px 28px; }

  .room-grid,
  .product-list,
  .insta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .room img,
  .product img { height: auto; aspect-ratio: 4 / 5; }

  .story {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 88px 28px;
  }

  .story > div,
  .story img { width: 100%; }
  .story img { height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

  .custom { padding: 88px 28px; }
  .marble-card { width: 100% !important; max-width: none; }

  /* Shared content containers and breadcrumb rows */
  .about-container,
  .contact-container,
  .faq-container,
  .detail-container {
    width: min(100% - 56px, 1640px) !important;
    max-width: none !important;
  }

  .breadcrumb,
  .about-breadcrumb,
  .faq-breadcrumb,
  .detail-breadcrumb,
  .contact-breadcrumb {
    min-height: 52px;
    height: auto;
    padding: 10px 28px;
  }

  .breadcrumb .detail-container,
  .about-breadcrumb .about-container,
  .faq-breadcrumb .faq-container,
  .detail-breadcrumb .detail-container,
  .contact-breadcrumb .contact-container {
    width: 100% !important;
  }

  /* Products and Materials */
  .catalog-hero { height: min(520px, 56svh); min-height: 380px; }
  .catalog-hero-copy { right: 8%; left: 8%; }
  .catalog-intro { padding: 82px 28px 68px; }
  .catalog-section { padding-right: 28px; padding-left: 28px; }
  .catalog-toolbar { align-items: stretch; flex-direction: column; gap: 18px; }
  .catalog-search { width: 100%; flex-basis: auto; }
  .offline-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  #materialsList { width: calc(100% - 56px); margin: 48px auto 80px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .materials-page { padding: 58px 28px 88px; }
  .materials-page h1 { margin-bottom: 62px; }
  .materials-card img { height: auto; aspect-ratio: 1 / 1; }

  /* About, FAQ and Contact */
  .about-hero,
  .faq-hero,
  .contact-hero { height: min(520px, 56svh); min-height: 380px; }
  .about-hero-copy,
  .faq-hero-copy,
  .contact-hero-copy { right: 8%; left: 8%; }
  .about-intro-grid,
  .story-feature,
  .craft-grid,
  .about-feature-grid,
  .about-care-grid,
  .contact-details-grid,
  .contact-message-grid,
  .faq-layout { grid-template-columns: 1fr; gap: 48px; }
  .value-grid,
  .about-process-grid,
  .contact-detail-cards,
  .contact-promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-aside { position: static; }
  .faq-main,
  .contact-details-section,
  .contact-message-section { padding-top: 88px; padding-bottom: 88px; }
  .about-intro,
  .about-story-block,
  .about-values,
  .about-craft-block,
  .about-subpage-intro,
  .about-feature-strip,
  .about-process,
  .about-dark-strip,
  .about-care-section,
  .fabrication-inquiry,
  .faq-contact,
  .contact-promise { padding-top: 88px; padding-bottom: 88px; }

  /* Product detail */
  .product-main-grid { grid-template-columns: 1fr; gap: 48px; }
  .product-gallery { position: static; }
  .product-main-image-wrap { max-height: none; }
  .product-summary { padding-top: 0; }
  .detail-inquiry,
  .related-products { padding-top: 88px; padding-bottom: 88px; }
  .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 767px) {
  .top-bar { font-size: 9px; letter-spacing: 1.2px; }

  body .header.site-header-frosted,
  .catalog-body .header,
  .detail-body .header,
  .about-body .header,
  .faq-body .header,
  .contact-body .header { padding: 0 16px; }

  body .header.site-header-frosted .brand-logo,
  .catalog-body .brand-logo,
  .detail-body .brand-logo,
  .about-body .brand-logo,
  .faq-body .brand-logo,
  .contact-body .brand-logo { left: 16px; }

  .hero-slider { height: min(680px, calc(100svh - 96px)); min-height: 500px; }
  .hero-content { right: 22px; bottom: 72px; left: 22px; }
  .hero-content h1 { font-size: clamp(36px, 11vw, 50px); }
  .hero-content p { max-width: 300px; font-size: 14px; line-height: 1.55; }
  .slider-arrow { width: 40px; height: 40px; }

  .rooms,
  .products,
  .instagram { padding: 68px 16px; }
  .rooms h2,
  .products h2,
  .instagram h2 { margin-bottom: 32px; font-size: 34px; }
  .room-grid,
  .product-list,
  .insta-grid,
  .offline-product-grid,
  .related-grid { grid-template-columns: 1fr; gap: 20px; }
  .room h3 { right: 18px; bottom: 18px; left: 18px; font-size: 22px; }
  .product h3 { min-height: 0; padding: 18px 14px; font-size: 18px; }
  .story { gap: 34px; padding: 68px 16px; }
  .story img { aspect-ratio: 1 / 1; }
  .story-text h2 { font-size: 36px; }
  .custom { padding: 72px 20px; }
  .custom h2 { font-size: 36px; }

  .footer { padding: 58px 18px 20px; }
  .footer-container { grid-template-columns: 1fr; gap: 30px; }
  .footer-brand,
  .footer-column:last-child { grid-column: auto; }
  .footer-social { margin-top: 34px; }

  .about-container,
  .contact-container,
  .faq-container,
  .detail-container { width: calc(100% - 32px) !important; }
  .breadcrumb,
  .about-breadcrumb,
  .faq-breadcrumb,
  .detail-breadcrumb,
  .contact-breadcrumb { padding-right: 16px; padding-left: 16px; font-size: 12px; }
  .breadcrumb span { margin: 0 8px; }

  .catalog-hero,
  .about-hero,
  .faq-hero,
  .contact-hero { height: 58svh; min-height: 350px; }
  .catalog-hero-copy h1,
  .about-hero-copy h1,
  .faq-hero-copy h1,
  .contact-hero-copy h1 { font-size: 42px; line-height: 1.06; }
  .catalog-intro { padding: 68px 16px 58px; }
  .catalog-intro h2 { font-size: 36px; }
  .catalog-lead { font-size: 16px; line-height: 1.7; }
  .catalog-section { padding-right: 16px; padding-left: 16px; }
  .catalog-toolbar { gap: 14px; }
  .filter-row { flex-wrap: nowrap; padding-bottom: 7px; overflow-x: auto; }
  .catalog-meta { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px 0; }
  #materialsList { width: calc(100% - 32px); margin: 36px auto 64px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .materials-page { padding: 42px 16px 68px; }
  .materials-page h1 { margin-bottom: 42px; font-size: 34px; }
  .material-name { padding: 13px 12px; font-size: 15px; }

  .about-subnav { overflow-x: auto; }
  .about-subnav .about-container { width: max-content !important; max-width: none !important; margin: 0 auto; flex-wrap: nowrap; }
  .about-subnav a { padding: 16px 13px; font-size: 12px; white-space: nowrap; }
  .about-intro,
  .about-story-block,
  .about-values,
  .about-craft-block,
  .about-subpage-intro,
  .about-feature-strip,
  .about-process,
  .about-dark-strip,
  .about-care-section,
  .fabrication-inquiry,
  .faq-main,
  .faq-contact,
  .contact-details-section,
  .contact-message-section,
  .contact-promise { padding-top: 68px; padding-bottom: 68px; }
  .value-grid,
  .about-process-grid,
  .contact-detail-cards,
  .contact-promise-grid { grid-template-columns: 1fr; }
  .about-intro h2,
  .story-feature h2,
  .craft-copy h2,
  .about-feature-copy h2,
  .about-care-grid h2,
  .faq-heading h2,
  .contact-details-heading h2,
  .contact-message-copy h2,
  .contact-promise h2 { font-size: 38px; }
  .about-intro-copy,
  .story-feature-copy p:not(.about-kicker),
  .craft-copy p:not(.about-kicker),
  .about-feature-copy p:not(.about-kicker),
  .about-care-grid > div > p:not(.about-kicker),
  .faq-heading > p:last-child,
  .contact-message-copy > p:last-child { font-size: 16px; line-height: 1.75; }
  .faq-category-links { grid-template-columns: 1fr; }
  .faq-item button { min-height: 70px; gap: 15px; padding: 17px 0; font-size: 18px; }
  .faq-answer { padding: 0 0 25px; }
  .contact-field-row,
  .fabrication-field-row,
  .inquiry-fields { grid-template-columns: 1fr !important; }
  .contact-field input,
  .contact-field textarea,
  .fabrication-field input,
  .fabrication-field textarea,
  .detail-inquiry input,
  .detail-inquiry textarea { font-size: 16px; }
  .contact-submit,
  .fabrication-submit,
  .detail-inquiry button,
  .about-button,
  .faq-contact a { min-height: 48px; width: 100%; }

  .mars-product-main { padding-top: 32px; padding-bottom: 64px; }
  .product-main-grid { gap: 34px; }
  .product-summary h1 { font-size: 36px; }
  .product-thumbnails { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .material-list { gap: 12px 8px; }
  .material-item { width: 72px; }
  .detail-tags .detail-container { flex-direction: column; align-items: flex-start; gap: 12px; }
  .detail-inquiry,
  .related-products { padding-top: 68px; padding-bottom: 68px; }
  .detail-inquiry form { padding: 24px 16px; }
  .related-card span { min-height: 0; padding: 14px 10px; font-size: 14px; }
  .product-dialog { padding: 0; }
  .dialog-shell { width: 100%; max-height: 100svh; min-height: 100svh; }
  .dialog-gallery { padding: 12px; }
  .dialog-gallery > img { height: 52svh; }
  .dialog-copy { padding: 32px 20px 44px; }
  .detail-top,
  .catalog-top,
  .about-top,
  .faq-top,
  .contact-top { right: 14px; bottom: 14px; }
}

@media (max-width: 380px) {
  .mobile-menu-panel { width: 94vw; padding-right: 20px; padding-left: 20px; }
  .mobile-menu-links details > div { grid-template-columns: 1fr; }
  .product-thumbnails { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #materialsList { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide img,
  .about-hero > img,
  .catalog-hero > img,
  .contact-hero > img,
  .faq-hero > img { animation: none !important; }
}

/* =====================
   MOBILE HOME COMPOSITION
   Inspired by the supplied mobile reference; desktop remains unchanged.
===================== */
.mobile-home-dock { display: none; }
@media (max-width: 1024px) {
  .home-body .header.site-header-frosted .brand-logo { left: 50%; width: auto; transform: translate(-50%, -50%); }
  .home-body .mobile-menu-toggle { right: auto; left: 16px; }
  .home-body .header.site-header-frosted .header-actions { position: absolute; top: 0; right: 15px; display: flex !important; height: 64px; align-items: center; }
  .home-body .header.site-header-frosted .header-actions .language-link,
  .home-body .header.site-header-frosted .header-actions .action-text { display: none; }
  .home-body .header.site-header-frosted .header-actions #searchBtn { padding: 12px; }
  .home-body .header.site-header-frosted .header-actions .search-icon { width: 22px; height: 22px; border-width: 1.7px; }
  .home-body .header.site-header-frosted .header-actions .search-icon::after { right: -7px; bottom: -4px; width: 9px; }
  .home-body .hero-content { text-align: center; }
  .home-body .hero-content p { margin-right: auto; margin-left: auto; }
}
@media (max-width: 767px) {
  .home-body { padding-bottom: 78px; }
  .home-body .top-bar { display: none; }
  .home-body .header.site-header-frosted { height: 64px; background: rgba(255,255,255,.96); }
  .home-body .header.site-header-frosted .brand-name { font-size: 25px; letter-spacing: 6px; }
  .home-body .header.site-header-frosted .brand-sub { margin-left: 4px; font-size: 8px; letter-spacing: 3px; }
  .home-body .hero-slider { height: min(620px, calc(100svh - 64px)); min-height: 470px; max-height: 680px; }
  .home-body .hero-slide img { object-position: center center; }
  .home-body .hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.56)); }
  .home-body .hero-content { top: 50%; right: 22px; bottom: auto; left: 22px; width: auto; transform: translateY(-50%); }
  .home-body .hero-content h1 { margin-bottom: 13px; font-size: clamp(35px, 10.5vw, 48px); line-height: 1.08; letter-spacing: 0; }
  .home-body .hero-content p { max-width: 290px; margin-bottom: 0; font-size: 13px; line-height: 1.5; letter-spacing: 1.5px; }
  .home-body .hero-content .btn { display: none; }
  .home-body .slider-arrow { top: 50%; width: 40px; height: 40px; }
  .home-body .slider-prev { left: 11px; }
  .home-body .slider-next { right: 11px; }
  .home-body .slider-counter { right: 50%; bottom: 17px; transform: translateX(50%); }
  .home-body .rooms { padding: 70px 16px 78px; }
  .home-body .rooms > h2 { margin-bottom: 36px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 8vw, 40px); font-weight: 400; letter-spacing: .5px; line-height: 1.1; text-align: center; text-transform: uppercase; }
  .home-body .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-body .room { aspect-ratio: 1 / 1; }
  .home-body .room:first-child { grid-column: 1 / -1; aspect-ratio: 1.18 / 1; }
  .home-body .room img { width: 100%; height: 100%; object-fit: cover; }
  .home-body .room h3 { right: 18px; bottom: 17px; left: 18px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; letter-spacing: .5px; text-transform: uppercase; }
  .home-body .products { padding: 70px 16px; }
  .home-body .products > h2, .home-body .instagram > h2 { font-size: 32px; text-align: center; }
  .home-body .product-list { grid-template-columns: 1fr; gap: 18px; }
  .home-body .product img { aspect-ratio: 1 / 1.05; }
  .home-body .footer { padding-bottom: 100px; }
  .mobile-home-dock { position: fixed; right: 0; bottom: 0; left: 0; z-index: 15000; display: grid; grid-template-columns: repeat(5, 1fr); min-height: 76px; padding: 7px 7px 5px; border-top: 1px solid #ddd9d2; background: rgba(255,255,255,.97); box-shadow: 0 -8px 28px rgba(30,28,24,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .mobile-home-dock a { display: flex; min-width: 0; align-items: center; justify-content: flex-end; color: #292826; flex-direction: column; gap: 5px; font-family: Georgia, "Times New Roman", serif; font-size: 11px; line-height: 1; text-decoration: none; }
  .mobile-home-dock .dock-chat { position: relative; z-index: 1; width: 62px; height: 62px; margin: -27px auto 0; border-radius: 50%; background: #171717; color: #fff; box-shadow: 0 7px 18px rgba(0,0,0,.22); }
  .dock-icon { position: relative; display: block; width: 27px; height: 27px; }
  .dock-home::before { content: ""; position: absolute; top: 6px; left: 4px; width: 17px; height: 16px; border: 2px solid currentColor; border-top: 0; }
  .dock-home::after { content: ""; position: absolute; top: 1px; left: 4px; width: 17px; height: 17px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg) scale(.72); }
  .dock-products { border: 2px solid currentColor; transform: rotate(30deg) scale(.72); }
  .dock-products::after { content: "✦"; position: absolute; right: -11px; bottom: -10px; font-size: 15px; transform: rotate(-30deg); }
  .dock-chat-icon::before { content: "•••"; position: absolute; top: 3px; left: 2px; width: 25px; height: 17px; border: 2px solid currentColor; border-radius: 50%; font-family: Arial, sans-serif; font-size: 13px; letter-spacing: 1px; line-height: 11px; text-align: center; }
  .dock-chat-icon::after { content: ""; position: absolute; right: 1px; bottom: 2px; width: 10px; height: 7px; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; transform: skew(-30deg); }
  .dock-contact { border: 2px solid currentColor; border-radius: 50%; }
  .dock-contact::before { content: ""; position: absolute; top: 5px; left: 8px; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; }
  .dock-contact::after { content: ""; position: absolute; right: 4px; bottom: 3px; left: 4px; height: 8px; border: 2px solid currentColor; border-radius: 10px 10px 5px 5px; }
  .dock-phone { border: 2px solid currentColor; border-radius: 50%; }
  .dock-phone::before { content: ""; position: absolute; top: 5px; left: 6px; width: 12px; height: 15px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 45%; transform: rotate(-40deg); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .home-body .rooms { padding-top: 82px; padding-bottom: 90px; }
  .home-body .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .home-body .room:first-child { grid-column: 1 / -1; }
  .home-body .room { aspect-ratio: 1.25 / 1; }
  .home-body .room img { width: 100%; height: 100%; object-fit: cover; }
  .home-body .rooms > h2 { text-transform: uppercase; text-align: center; }
}

/* MARS-INSPIRED MOBILE HOME MOSAIC — mobile only; desktop/tablet stay unchanged. */
.mobile-category-showcase { display: none; }
.mobile-inquiry-drawer { display: none; }
@media (max-width: 767px) {
  .home-body .header.site-header-frosted { height: 54px; background: rgba(255,255,255,.97); }
  .home-body .header.site-header-frosted .brand-name { font-size: 23px; letter-spacing: 5px; }
  .home-body .header.site-header-frosted .brand-sub { margin-left: 3px; font-size: 7px; letter-spacing: 2.5px; }
  .home-body .header.site-header-frosted .header-actions { height: 54px; }
  .home-body .hero-slider { height: clamp(174px, 45vw, 230px); min-height: 0; max-height: none; }
  .home-body .hero-content h1 { margin-bottom: 0; font-size: clamp(22px, 6.2vw, 28px); line-height: 1.08; letter-spacing: .5px; text-transform: uppercase; }
  .home-body .hero-content p, .home-body .slider-counter { display: none; }
  .home-body .rooms { display: none; }
  .mobile-category-showcase { display: block; padding: 28px 15px 34px; background: #fff; }
  .mobile-category-showcase > h2 { margin: 0 0 12px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 6.5vw, 28px); font-weight: 400; letter-spacing: .2px; line-height: 1.15; text-align: center; text-transform: uppercase; }
  .mobile-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mobile-category-card { position: relative; display: block; min-width: 0; aspect-ratio: .85 / 1; overflow: hidden; background: #e7e2da; color: #fff; }
  .mobile-category-card:nth-child(1), .mobile-category-card:nth-child(6) { grid-column: 1 / -1; aspect-ratio: 1.43 / 1; }
  .mobile-category-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.52)); pointer-events: none; }
  .mobile-category-card img { width: 100%; height: 100%; object-fit: cover; }
  .mobile-category-card h3 { position: absolute; right: 10px; bottom: 10px; left: 10px; z-index: 1; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(16px, 4.7vw, 21px); font-weight: 400; letter-spacing: .35px; line-height: 1.05; text-transform: uppercase; }
  .home-body.mobile-inquiry-open { overflow: hidden; }
  .mobile-home-dock .dock-chat { display: block; padding: 0; border: 0; font: inherit; }
  .mobile-home-dock .dock-chat .dock-chat-svg { position: absolute; top: 50%; left: 50%; display: block; width: 30px; height: 30px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: translate(-50%, -50%); }
  .mobile-home-dock .dock-chat .dock-chat-svg circle { fill: currentColor; stroke: none; }
  .mobile-home-dock .dock-chat .dock-chat-close { display: none; }
  .mobile-inquiry-drawer { position: fixed; inset: 0; z-index: 14990; display: block; pointer-events: none; visibility: hidden; }
  .mobile-inquiry-drawer.is-open { pointer-events: auto; visibility: visible; }
  .mobile-inquiry-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.48); opacity: 0; transition: opacity .28s ease; }
  .mobile-inquiry-drawer.is-open .mobile-inquiry-backdrop { opacity: 1; }
  .mobile-inquiry-panel { position: absolute; right: 0; bottom: 76px; left: 0; max-height: min(78svh, 680px); overflow: auto; overscroll-behavior: contain; background: #fff; box-shadow: 0 -15px 40px rgba(0,0,0,.18); transform: translateY(calc(100% + 80px)); transition: transform .32s cubic-bezier(.22,.7,.24,1); }
  .mobile-inquiry-drawer.is-open .mobile-inquiry-panel { transform: translateY(0); }
  .mobile-inquiry-heading { display: flex; min-height: 76px; align-items: center; gap: 12px; padding: 18px; background: #111; color: #fff; }
  .mobile-inquiry-heading h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(23px, 6.7vw, 29px); font-weight: 400; letter-spacing: .2px; white-space: nowrap; text-transform: uppercase; }
  .mobile-inquiry-heading-icon { position: relative; width: 36px; height: 30px; border: 2px solid currentColor; flex: 0 0 auto; }
  .mobile-inquiry-heading-icon::before { content: "•••"; position: absolute; right: 7px; bottom: -11px; display: grid; width: 31px; height: 22px; place-items: center; border: 2px solid currentColor; background: #111; font: 13px/1 Arial, sans-serif; letter-spacing: 2px; }
  .mobile-inquiry-heading-icon::after { content: ""; position: absolute; right: 2px; bottom: -14px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: skew(-28deg); }
  .mobile-inquiry-content { padding: 24px 18px 30px; }
  .mobile-inquiry-content > p { margin: 0 0 20px; color: #77736f; font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.55; }
  .mobile-inquiry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mobile-inquiry-field { position: relative; display: block; margin-bottom: 10px; }
  .mobile-inquiry-field > .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
  .mobile-inquiry-field input, .mobile-inquiry-field textarea { width: 100%; border: 1px solid #d9d6d1; outline: 0; background: #fff; color: #222; font-family: Georgia, "Times New Roman", serif; font-size: 16px; }
  .mobile-inquiry-field input { height: 54px; padding: 0 43px 0 14px; }
  .mobile-inquiry-field textarea { min-height: 135px; padding: 14px 43px 14px 14px; line-height: 1.45; resize: vertical; }
  .mobile-inquiry-field input:focus, .mobile-inquiry-field textarea:focus { border-color: #777; }
  .mobile-inquiry-field-icon { position: absolute; top: 50%; right: 14px; color: #b9b6b0; font-size: 23px; transform: translateY(-50%); }
  .mobile-inquiry-message .mobile-inquiry-field-icon { top: 16px; transform: none; }
  .mobile-inquiry-upload { display: block; margin: 5px 0 18px; padding: 13px 14px; border: 1px solid #d9d6d1; color: #555; font-family: Georgia, "Times New Roman", serif; font-size: 13px; }
  .mobile-inquiry-upload span, .mobile-inquiry-upload small { display: block; }
  .mobile-inquiry-upload input { width: 100%; margin: 9px 0 5px; font-family: Arial, sans-serif; font-size: 12px; }
  .mobile-inquiry-upload small { color: #8b8780; font-size: 10px; }
  .mobile-inquiry-submit { display: inline-flex; min-width: 112px; height: 50px; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border: 0; border-radius: 2px; background: #111; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
  .mobile-inquiry-submit .send-plane { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-inquiry-submit:disabled { opacity: .62; }
  .mobile-inquiry-status { display: none; margin: 14px 0 0; color: #555; font-family: Georgia, "Times New Roman", serif; font-size: 13px; line-height: 1.45; }
  .mobile-inquiry-status.is-visible { display: block; }
  .mobile-home-dock .dock-chat.is-open { width: 70px; height: 70px; margin-top: -35px; }
  .mobile-home-dock .dock-chat.is-open .dock-chat-bubble { display: none; }
  .mobile-home-dock .dock-chat.is-open .dock-chat-close { display: block; }
}

/* Mobile editorial treatment for the four home-value cards. Desktop remains unchanged. */
.mobile-value-title { display: none; }

@media (max-width: 600px) {
  .home-body .instagram {
    padding: 64px 16px 72px;
    background: #f7f5f1;
  }
  .home-body .instagram > h2 {
    max-width: 330px;
    margin: 0 auto 30px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.35px;
    text-transform: none;
  }
  .home-body .insta-grid { grid-template-columns: 1fr; gap: 20px; }
  .home-body .marble-card {
    width: 100% !important;
    min-height: 430px;
    aspect-ratio: 4 / 5;
    border-radius: 2px;
    background: #c5beb4;
    isolation: isolate;
  }
  .home-body .marble-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(12,11,10,0) 34%, rgba(12,11,10,.06) 48%, rgba(12,11,10,.86) 100%);
  }
  .home-body .marble-card img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    transform: none;
  }
  .home-body .marble-card:hover img { transform: scale(1.025); }
  .home-body .hover-info {
    right: 20px;
    bottom: 22px;
    left: 20px;
    z-index: 2;
    padding: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
  }
  .home-body .hover-info span {
    min-height: 29px;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 20px;
    background: rgba(255,255,255,.14);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 1px;
  }
  .home-body .hover-info h2 { display: none; }
  .home-body .mobile-value-title {
    display: block;
    max-width: 310px;
    margin: 13px 0 0;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.17;
    letter-spacing: -.25px;
    text-align: left;
  }
}