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

/* ==========================================================================
   1. 基础重置与全局样式 (Reset & Base Styles)
   ========================================================================== */

/* ==========================================================================
   GLOBAL CONFIGURATION & RESET
   ========================================================================== */
html {
    scroll-behavior: smooth; /* Smooth scroll enabled globally */
}

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

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background-color: #f8f9fa; 
    color: #333; 
    padding-top: 75px;      /* 留出空间防止内容被顶部固定菜单遮挡 */
    padding-bottom: 300px; /* 让页面变长，方便测试滚动和固定页脚 */
}


@media (max-width: 768px) {
    body {
        padding-top: 60px; /* 移动端导航栏较矮时的适配高度 */
    }
}

/* 定义第一种：大标题专属字体 */
@font-face {
    font-family: 'CompanyTitle'; 
    src: url('../fonts/DML.ttf') format('truetype');
    font-weight: bold;
    font-display: swap;
}

/* 定义第二种：副标题或特殊标签字体 */
@font-face {
    font-family: 'SubHeadingFont'; 
    src: url('../fonts/DMM.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}





/* ==========================================================================
   ?? 2. 电脑端默认样式（屏幕大于 768px 时生效）
   ========================================================================== */
.navbar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #1a1a1a;
    background-image: url(../img/bg.png);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 3000;
}

.navbar {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}

/* Logo 样式 */
.logo {
    color: #d4af37;
    font-family: 'CompanyTitle', serif;
    font-weight: bold;
    font-size: 1.3rem;
    text-decoration: none;
    letter-spacing: 1px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.logo-text { display: inline-block; }
.logo-icon-img { display: none; }

/* 右侧组合包装：菜单在左，社交图标在最右 */
.navbar-right-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 25px;
    height: 100%;
}

.menu-toggle { 
    display: none; 
} /* 电脑端隐藏汉堡按钮 */

.nav-menu-wrapper {
    display: flex;
    height: 100%;
}

.menu-slider {
    display: flex;
    height: 100%;
}

/* ================= 一级菜单样式 ================= */
.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

.nav-list > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-list a {
    display: flex;
    align-items: center;
    color: #d4af37;
    text-decoration: none;
    padding: 0 15px;
    height: 100%;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s, background-color 0.2s;
}

.nav-list a:hover {
    color: #FCCC05;
    background-color: #3a3a3a;
}

.nav-list a.active {
    color: #ffffff;
    background-color: #1a1a1a;
}

/* ================= 二级菜单（下拉框）样式 ================= */
.has-dropdown {
    position: relative;
}

.sub-menu {
    display: none;
    position: absolute;
    top: 100%; /* 贴合导航栏底部，避免产生无法选中的缝隙 */
    left: 0;
    width: 180px;
    background-color: #2b2b2b;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
}

/* 电脑端隐藏“返回”按钮 */
.sub-menu .back-item { 
    display: none; 
} 

.sub-menu li a {
    display: block;
    padding: 12px 20px;
    color: #d4af37;
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid #3a3a3a;
    height: auto;
}

.sub-menu li:last-child a { 
    border-bottom: none; 
}

.sub-menu li a:hover {
    background-color: #3a3a3a;
    color: #FCCC05;
}

/* 鼠标移入 All Collections 所在的 li 时展开二级菜单 */
.has-dropdown:hover > .sub-menu { 
    display: block; 
}



/* 社交图标样式 */
.social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-icons a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-icons a svg {
    width: 18px;
    height: 18px;
    fill: #d4af37;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background-color: rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
}

.social-icons a:hover svg {
    fill: #f3e5ab;
    filter: drop-shadow(0 0 5px #d4af37);
}

/* ==========================================================================
   3. 全局组件 (弹窗、页脚)
   ========================================================================== */

/* 弹窗样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
}

.modal-overlay:target {
    opacity: 1;
    pointer-events: auto;
}

.modal-close-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: default;
    z-index: 1;
}

/* 页脚 Footer */
.footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-image: url(../img/bg.png);
    background-color: #1a1a1a;
    color: white; 
    padding: 15px 30px; 
    box-shadow: 0 -4px 10px rgba(0,0,0,0.15); 
    z-index: 2000; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-sizing: border-box;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 0.85rem;
    color: #aaa;
    text-align: left;
    flex: 1;
}
.footer-left a { color: #aaa; text-decoration: none; transition: color 0.2s; }
.footer-left a:hover { color: #ffc107; }
.footer-left a:first-child:after {
    content: "|";
    margin-left: 20px;  
    color: #555;        
    display: inline-block;
    pointer-events: none; 
}

.footer-center {
    text-align: center;
    color: #ffc107;
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    justify-content: flex-end;
}

.footer-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
	font-size: 0.8rem;
    gap: 25px; 
	    flex: 1;
}

.btn-checkout { 
    background-color: #ffc107; 
    color: #212529; 
    text-decoration: none; 
    padding: 10px 18px; 
    border-radius: 6px; 
    font-weight: bold; 
    font-size: 0.85rem; 
    display: inline-block; 
    transition: background-color 0.2s; 
}
.btn-checkout:hover { background-color: #e0a800; }

/* ==========================================================================
   ?? 4. 手机端自适应样式（屏幕小于或等于 768px 时自动触发）
   ========================================================================== */

@media screen and (max-width: 768px) {
    
	/* 强行把一级的横向排列改成纵向块级 */
    .nav-list {
        display: block !important;
        width: 50% !important;
        height: 100%;
        overflow-y: auto;
    }

	
	/* 保证每一个 <li> 独占一行，不挤在一块 */
    .nav-list > li {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .nav-list > li > a {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        padding: 16px 20px !important;
    }
	/* 强行取消电脑端的悬停触发 */
    .nav-list li:hover .sub-menu {
        display: none !important;
    }

    .navbar { padding: 0 15px; }

    /* 移动端 Logo 图标切换 */
    .logo-text { display: none; }
    .logo-icon-img {
        display: block;
        height: 35px;
        width: auto;
        object-fit: contain;
    }

    .navbar-right-box { gap: 12px; }

    /* 显示手机端汉堡按钮 */
    .menu-toggle {
        display: block !important;
        font-size: 24px;
        background: none;
        border: none;
        color: #d4af37;
        cursor: pointer;
        z-index: 10002;
		pointer-events: auto !important;
    }
	


    /* 移动端社交图标尺寸缩小 */
    .social-icons { gap: 8px; }
    .social-icons a { width: 28px; height: 28px; }
    .social-icons a svg { width: 15px; height: 15px; }

    /* 核心外壳：固定在最上层的全屏视窗 */
    .nav-menu-wrapper {
        display: none; 
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        background-color: #1a1a1a;
        background-image: url(../img/bg.png);
        z-index: 9999;
        overflow: hidden; /* 防止两个面板同时露出来 */
    }

    /* 当展开汉堡菜单时激活外壳 */
    .nav-menu-wrapper.show {
        display: block;
    }

    /* 横向容纳两个面板的超级大容器 */
    .menu-slider {
        display: flex;
        width: 200%; /* 宽度是 200%，两个面板横向并排 */
        height: 100%;
        transition: transform 0.3s ease-in-out; /* 丝滑滑出动画 */
    }

    /* 当加上 .slide-to-sub 类名时，整个容器向左平移 50% */
    .menu-slider.slide-to-sub {
        transform: translateX(-50%);
    }

    /* 一级菜单面板和二级菜单面板各占 50% */
    .nav-list, .sub-menu {
        width: 50% !important;
        height: 100%;
        overflow-y: auto; /* 允许各自面板独立上下滚动 */
        box-sizing: border-box;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none;
    }

    /* 强行覆盖电脑版的 display: flex，改成纵向块级布局 */
    .nav-list {
        display: block !important; 
        background-color: #1a1a1a;
    }

    /* 手机上强制将二级菜单显示（因为外壳会帮我们平移隐藏） */
    .sub-menu {
         display: none !important;
   /* position: absolute !important;
    top: 0;
    left: 100%;
    
    width: 100% !important;
    height: 100% !important;

    overflow-y: auto;

    box-sizing: border-box;

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

    background-color: #111111 !important;

    box-shadow: none !important;

    z-index: 2;*/
    }

    /* 手机端列表公共项：确保全宽、垂直堆叠 */
    .nav-list li, .sub-menu li {
        width: 100% !important;
        float: none !important;
        display: block !important;
        border-bottom: 1px solid #2b2b2b;
    }

    .nav-list li a, .sub-menu li a {
        display: block !important;
        padding: 16px 20px;
        color: #d4af37 !important;
        font-size: 16px;
        text-decoration: none;
        line-height: normal !important;
        box-sizing: border-box;
    }

    /* 手机端独有的“返回上一级”样式 */
    .back-item {
        display: block !important;
        background-color: #222222;
        font-weight: bold;
    }
    .back-item a {
        color: #ffffff !important; 
    }

    /* 让带一级的选项整行可点，且箭头靠最右边 */
    .submenu-toggle {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
    .arrow {
        color: #d4af37;
        font-size: 18px;
    }

	
	
	   /* 一级菜单 */
    .nav-list {
        position: relative;
        z-index: 1;
        transition: transform 0.3s ease-in-out;
    }

    /* 二级菜单覆盖整个手机菜单区域 */
    .nav-list > .has-dropdown > .sub-menu {
        position: fixed !important;

        top: 60px;
        left: 0;

        width: 100vw !important;
        height: calc(100vh - 60px) !important;

         /* 不再使用 display:none */
        display: block !important;

        overflow-y: auto;

        background-color: #111111 !important;

        z-index: 10001;

        box-sizing: border-box;
		
        /* 默认在屏幕右边 */
        transform: translateX(100%);

        /* 滑动动画 */
        transition: transform 0.3s ease-in-out;
    }

    /* 点击 All Collections 后显示二级菜单 */
    .nav-list.mobile-sub-open > .has-dropdown > .sub-menu {
        display: block !important;
		transform: translateX(0);
    }

    /* 二级菜单里面的返回按钮 */
    .nav-list.mobile-sub-open > .has-dropdown > .sub-menu .back-item {
        display: block !important;
    }
	
	
	
    /* 手机端 Footer 改为垂直排列 */
    .footer {
		position: fixed !important; /* ?? 核心修改：改为 fixed 强行固定在屏幕底部 */
        bottom: 0 !important;       /* ?? 贴紧屏幕底端 */
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;   /* ?? 确保浮在所有元素上方 */
        
        flex-direction: column;
        gap: 8px;                  /* 稍微调小间距，防止手机端 Footer 占据过高屏幕高度 */
        padding: 10px 15px;
        box-sizing: border-box;    /* 防止 padding 撑大页宽导致左右晃动 */
		
    }

    .footer-left, 
    .footer-center, 
    .footer-right {
        text-align: center;
        justify-content: center;
        width: 100%;
    }
    .footer-left { flex-direction: row; }
	/* ?? 关键配合：防止页面最后一个元素被固定悬浮的 Footer 挡住 */
    body {
        padding-bottom: 100px !important; /* 根据 Footer 实际渲染出来的高度适当调整这个值 */
    }
}
/* ===================================================
   高奢黑灰金几何背景组件 (静止、提亮、多形状叠加版)
   =================================================== */

/* 1. 确保背景板容器固定在最底层 */
.geo-background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -999; /* 确保在所有网页内容的下面 */
    pointer-events: none; /* 防止遮挡网页元素的点击事件 */
    overflow: hidden;
    background-color: #1a1c1e; /* 提亮后的高级深钛灰色底色 */
}

/* 2. 所有几何图形的共有样式 */
.geo-background-container .geo-shape {
    position: absolute;
    opacity: 0.28; /* 调高不透明度，使图形更亮 */
    filter: blur(12px); /* 边缘柔和雾化 */
}

/* 3. 各个几何图形的独立色彩、形状与位置 */

/* 图形1: 矩形（高光金） */
.geo-background-container .g-rect {
    width: 50vw;
    height: 50vw;
    background: linear-gradient(135deg, #ffd700, #b8860b);
    top: -15%;
    left: -10%;
    transform: rotate(15deg);
}

/* 图形2: 大三角形（深枪灰） */
.geo-background-container .g-triangle {
    width: 60vw;
    height: 60vw;
    background: linear-gradient(135deg, #4a5056, #23272a);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    bottom: -15%;
    right: -10%;
    transform: rotate(-10deg);
}

/* 图形3: 梯形（香槟金） */
.geo-background-container .g-trapezoid {
    width: 70vw;
    height: 25vw;
    background: linear-gradient(90deg, #e6ca9d, #6e5533);
    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
    top: 25%;
    right: -15%;
    transform: rotate(-20deg);
}

/* 图形4: 平行四边形（中灰） */
.geo-background-container .g-parallelogram {
    width: 40vw;
    height: 40vw;
    background: linear-gradient(135deg, #5c636a, #2b3035);
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    bottom: -10%;
    left: -5%;
    transform: rotate(20deg);
}

/* 图形5: 五边形（亮金点缀） */
.geo-background-container .g-pentagon {
    width: 35vw;
    height: 35vw;
    background: linear-gradient(135deg, #f3d19e, #8c6f40);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    top: 40%;
    left: -10%;
    transform: rotate(35deg);
}

/* 图形6: 六边形（银灰过渡） */
.geo-background-container .g-hexagon {
    width: 30vw;
    height: 30vw;
    background: linear-gradient(135deg, #7a848d, #343a40);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    top: -5%;
    right: 15%;
    transform: rotate(12deg);
}



/*============
title
============*/


/* 1. 外部大容器：只负责限制宽度和页面居中，绝对不插手内部对齐 */
.category-header-container {
    width: 100% !important;
    max-width: 1400px !important; /* ?? 如果下方白色容器不是1200px，请改成和它一样的数值 */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    padding-left: 20px !important;  /* ?? 这里的数字必须和下方白色容器的 padding-left 保持一致 */
    padding-right: 20px !important;
    display: block !important;
    background: transparent !important;
}



/* 2. 强制 H1 坚决左对齐，粉碎任何全局居中样式 */
.category-header-container h1 {
    display: block !important;
    text-align: left !important;    /* ?? 核心：强制左对齐 */
    float: none !important;
    clear: both !important;
    margin: 0 0 8px 0 !important;   /* 压缩 H1 和 H2 之间的空隙 */
    
    /* 你原有的设计样式 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: #9A8446;
    text-shadow: 2px 2px 2px rgba(255, 255, 255, 1);
    letter-spacing: -0.5px;
}



/* 3. 强制 H2 坚决左对齐，与 H1 步调一致 */
.category-header-container h2 {
    display: block; 
    text-align: left;    /* ?? 核心：强制左对齐 */
    float: none;
    margin: 0;
    line-height: 1.4 ;
    
    /* 你原有的设计样式 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1.45rem;
    font-weight: 600;
    color: #F9D513;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

 .category-header-container  h3 {
        font-size: 1.25rem;
        font-weight: 200;
        color: #FCE491;
        margin-bottom: 0px;
        line-height: 1.3;
    }


/* ===================================================
   5. 【手机/移动端适配】当屏幕宽度小于 768px 时自动生效
   =================================================== */
@media (max-width: 768px) {
 /* 1. 直接把整页的 body 设为 Flex 垂直列布局 */
    body {
        display: flex !important;
        flex-direction: column !important;
    }
	/* 缩短顶部距离，因为手机端导航栏通常变矮了 */
    .category-header-container {
        order: -99 !important;          /* 极小值，确保越过页面上所有其他元素，直接置顶 */
		position: relative !important; 
		height: auto; /* 手机端容器高度变短 */
		top: auto !important; 
		margin-bottom: 30px !important; /* 根据需要调整像素值，比如 30px - 60px */
		width: 100% !important;
        box-sizing: border-box !important;
        padding-top: 20px !important;    /* 顶部预留留白 */
        padding-bottom: 20px !important;
        text-align: center !important;   /* 移动端居中 */
    }
		
    
    /* 3. 手机端微调字号，防止占用手机太多空间 */
    .category-header-container h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
        padding: 0 20px !important;
		text-align: center !important;
    }

    .category-header-container h2 {
        font-size: 14px !important;
        line-height: 1.5 !important;
        font-weight: 400 !important;
        padding: 0 20px !important;
        margin: 0 !important;
		text-align: center !important;
    }
	.category-header-container h3 {
        font-size: 14px !important;
        line-height: 1.5 !important;
        padding: 0 20px !important;
        margin: 0 !important;
		text-align: center !important;
    }
}




/* ==========================================
page: custom-event-fabrication.html
========================================== */
        .hero-banner {
            width: 100%;
            max-width: 800px; /* 控制总体最大宽度 */
            margin: 10px auto 0; 
			/* 圆角与卡片样式设置 */
             
        }

        .gallery-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 15px;
			  border-radius: 16px;           /* 控制容器圆角大小 */
    overflow: hidden;              /* 防止内部子元素溢出圆角 */
        }

/* ==========================================
           1. 外层总容器（新增：控制整体展示宽度）
========================================== */
        .showcase-container {
            width: 100%;
            max-width: 600px; /* ?? 调整这个数值可以整体放大或缩小（建议 650px - 800px） */
            margin: 0 auto;   /* 居中显示 */
            box-sizing: border-box;
        }

        /* ==========================================
           2. 主展示区 (Main Display)
           ========================================== */
        .main-display {
            width: 100%;
            aspect-ratio: 4 / 3; /* 严格维持 4:3 比例 */
            background-color: #000;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
        }

        .display-box {
            width: 100%;
            height: 100%;
            position: relative;
        }

        /* 主视频自适应 */
        .main-full-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            border-radius: 10px;
        }

        /* 顶部角标 */
        .animated-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            padding: 4px 10px;
            border-radius: 16px;
            font-size: 12px;
            backdrop-filter: blur(4px);
            z-index: 5;
            pointer-events: none;
        }

       /* ==========================================
           3. 底部 4 缩略图网格 (精简缩小版)
           ========================================== */
        .thumbs-wrapper {
            width: 70%;           /* ?? 将缩略图整体容器宽度收紧至 70% (可根据喜好调整为 60%-80%) */
            margin: 12px auto 0px;  /* 居中显示 */
        }

        .carousel-track {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;            /* 缩小间距 */
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* 缩略图卡片容器 */
        .thumb-item {
            position: relative;   /* 为文字定位做准备 */
            cursor: pointer;
            box-sizing: border-box;
            width: 100%;
            border-radius: 6px;
            overflow: hidden;     /* 避免文字溢出圆角 */
        }

        /* 缩略图图片 */
        .thumb-img {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            display: block;
            border-radius: 6px;
            box-sizing: border-box;
            border: 2px solid transparent;
            transition: transform 0.3s ease, border-color 0.25s ease;
        }

        /* 悬停时图片稍微放大一点点 */
        .thumb-item:hover .thumb-img {
            transform: scale(1.04);
        }

        /* 选中态高亮边框 */
        .thumb-item.active .thumb-img {
            border-color: #F9E909;
        }

        /* ==========================================
           悬停显示说明文字 (Hover Effect)
           ========================================== */
        .thumb-desc {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.7); /* 半透明黑色背景，确保文字清晰 */
            color: #ffffff;
            font-size: 11px;
            padding: 4px 6px;
            box-sizing: border-box;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            
            /* 默认隐藏透明度与位移 */
            opacity: 0;
            transform: translateY(100%);
            transition: opacity 0.25s ease, transform 0.25s ease;
            pointer-events: none; /* 防止遮挡鼠标点击事件 */
        }

        /* 鼠标悬停在卡片上时显示文字 */
        .thumb-item:hover .thumb-desc {
            opacity: 1;
            transform: translateY(0);
        }

        /* ==========================================
           4. 响应式适配 (Responsive)
           ========================================== */
        @media (max-width: 768px) {
           /* ?? 核心修改：收紧移动端缩略图整体容器宽度 */
    .thumbs-wrapper {
        width: 80% !important;  /* 原来是 70%，改成 50% 甚至 40%，整体缩略图就会缩小一圈 */
        margin: 8px auto 0;     /* 保持居中，适度缩小上方间距 */
    }

    .carousel-track {
        grid-template-columns: repeat(4, 1fr) !important; /* ?? 推荐：手机端保持 4 个一排，不要变 2 排，图片自然会变小 */
        gap: 6px !important;    /* 稍微缩小间距，更精致 */
    }

    .thumb-desc {
        font-size: 10px !important; /* 字体适度缩小一点 */
        padding: 2px 4px !important;
    }
        }


/*b2b-services-section */

.b2b-services-section {
        padding: 60px 20px;
        background-color: #f9f9fb;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	margin-top: 15px; 
	margin-bottom: 15px;
	background-color: rgba(255, 255, 255, 0.2); /* 20% 半透明白色 */
    }

    .services-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .section-title {
        text-align: center;
        font-size: 32px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 8px;
    }

    .section-subtitle {
        text-align: center;
        font-size: 16px;
        color: #ffffff;
        margin-bottom: 40px;
    }

    /* 网格布局：自适应排列 */
    .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }

    .service-card {
        background: #a0895e;
        border-radius: 12px;
        padding: 24px 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border: 2px solid #F3B123;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        display: flex;
        flex-direction: column;
    }

    .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }


    .service-icon {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .service-card h3 {
        font-size: 20px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .service-card p {
        font-size: 16px;
        color: #ffffff;
        line-height: 1.5;
        margin: 0;
    }

    /* 手机端响应式 */
    @media (max-width: 768px) {
        .services-grid {
            grid-template-columns: 1fr;
        }
        
        .section-title {
            font-size: 26px;
        }
    }


/* 6. B2B PROCESS --*/
.process-section {
        padding: 60px 20px;
        background-color: #ffffff;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
		margin-top: 15px; 
	margin-bottom: 15px;
	background-color: rgba(255, 255, 255, 0.2); /* 20% 半透明白色 */
    }

    .process-section .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .process-timeline {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 24px;
        margin-top: 40px;
    }

    .b2b-step-card {
        background: #a0895e;
        padding: 28px 24px;
        border-radius: 12px;
        border-left: 4px solid #F3B123; /* 强调线 */
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        position: relative;
    }

    .step-num {
        font-size: 32px;
        font-weight: 800;
        color: #d1d5db;
        line-height: 1;
        margin-bottom: 12px;
    }

    .b2b-step-card h3 {
        font-size: 20px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 8px;
    }

    .b2b-step-card p {
        font-size: 16px;
        color: #ffffff;
        line-height: 1.5;
        margin: 0;
    }

    @media (max-width: 768px) {
        .process-timeline {
            grid-template-columns: 1fr;
        }
    }

/* 2b contact-section */
.2bcontact-section {
        padding: 60px 20px;
        background-color: #f4f4f7;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
		margin-top: 15px; 
	margin-bottom: 15px;
    }

    .form-container {
        max-width: 800px;
        margin: 0 auto;
        background: #ffffff;
        padding: 40px;
        border-radius: 16px;
		 border: 3px solid #e5c158 !important;
    box-shadow: 0 10px 25px rgba(229, 193, 88, 0.08);
      
    }



    .form-container h2 {
        font-size: 28px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 8px;
        text-align: center;
    }

    .form-container p {
        font-size: 15px;
        color: #6b7280;
        text-align: center;
        margin-bottom: 30px;
        line-height: 1.5;
    }

    .b2b-form .form-group {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
    }

    .b2b-form input, 
    .b2b-form select, 
    .b2b-form textarea {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 14px;
        color: #1f2937;
        background-color: #f9fafb;
        outline: none;
        transition: border-color 0.2s;
    }

    .b2b-form input:focus, 
    .b2b-form select:focus, 
    .b2b-form textarea:focus {
        border-color: #111827;
        background-color: #ffffff;
    }

    /* 上传文件域样式 */
    .file-upload-group {
        flex-direction: column;
        gap: 6px !important;
    }

    .file-label {
        display: block;
        padding: 12px 16px;
        border: 1px dashed #9ca3af;
        border-radius: 8px;
        background-color: #f3f4f6;
        color: #374151;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .file-label:hover {
        background-color: #e5e7eb;
    }

    .file-name-display {
        font-size: 12px;
        color: #059669;
        font-weight: 500;
        padding-left: 4px;
    }

    .btn-primary {
        width: 100%;
        padding: 14px;
        background-color: #a0895e ;
        color: #ffffff;
        font-size: 16px;
        font-weight: 600;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin-top: 10px;
        transition: background-color 0.2s;
    }



    .btn-primary:hover {
        background-color: #8b754d;
    }

    @media (max-width: 640px) {
        .b2b-form .form-group {
            flex-direction: column;
            gap: 16px;
        }
        .form-container {
            padding: 24px;
        }
    }





/* =======================================
    page: event-gallery-real-setups.html 
  ======================================= */


.portfolio-container {
    max-width: 1500px;
    margin: 20px auto;
    padding: 20px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.portfolio-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    transition: transform 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-5px);
}

.thumb-box {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.hover-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
}

.portfolio-item:hover .hover-mask {
    opacity: 1;
}

.hover-text h2 {
    color: #FC6FC6;
    font-size: 38px;
    margin-bottom: 5px;
}

.hover-text p {
    color: #ddd;
    font-size: 26px;
}


/* ==========================================================================
   4.1 Portfolio 手机端响应式适配 (屏幕小于等于 768px 时生效)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. 消除大外边距，改为适合手机屏幕的边距 */
    .portfolio-container {
       width: 85%;
        margin-top: 20px !important;  /* 给予顶部导航栏足够的下沉呼吸空间 */
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        padding: 20px 12px 100px; /* 底部留出空间，防止被手机页脚遮挡 */
    }

    /* 2. 5列网格改为 2列网格（或者写 1fr 改为单列） */
    .portfolio-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px; /* 缩小图片之间的缝隙 */
    }

	/* 3. 保留图片框定位上下文 */
    .thumb-box {
        position: relative !important;
        width: 100% !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    /* 4. 强制遮罩贴在图片底部常亮显示 */
    .thumb-box .hover-mask,
    .portfolio-item .hover-mask,
    .portfolio-item:hover .hover-mask {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        
        opacity: 1 !important;              /* 强制显示 */
        visibility: visible !important;     /* 强制可见 */
        
        /* 底部半透明黑色渐变，确保白色文字清清晰晰 */
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, transparent 100%) !important;
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding: 25px 10px 10px 10px !important; /* 上方加长渐变，下方留边框 */
        text-align: left !important;
        pointer-events: none !important;    /* 避免遮挡图片点击事件 */
    }

    /* 5. 白色文字样式微调 */
    .portfolio-item .hover-text h2,
    .portfolio-item:hover .hover-text h2 {
        color: #ffffff !important;         /* 渐变底用白字 */
        font-size: 18px !important;
        font-weight: bold !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
    }

    .portfolio-item .hover-text p,
    .portfolio-item:hover .hover-text p {
        color: #e0e0e0 !important;         /* 描述用浅灰字 */
        font-size: 15px !important;
        line-height: 1.2 !important;
    }
}



/* ==========================================================================
   page: event-hire-faq-melbourne.html
   ========================================================================== */

/* 1. FAQ 页面基础环境重置 */
html:has(body.faq-page), 
body.faq-page {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: relative !important;
    
    /* 核心关键：因为页脚变成了 permanent 固定悬浮，
       必须在 body 底部垫出等高的安全垫，防止最后一项 FAQ 展开时被固定页脚死死挡住 */
    padding-bottom: 120px !important; 
    display: block !important;
}

/* 2. 强行将页脚在 FAQ 页面中设置为：相对于屏幕视口（Viewport）永久固定 */
/*body.faq-page .footer {
    position: fixed !important;  
    bottom: 0 !important;      
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 9999 !important;     
    background-color: #212529 !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2) !important; 
}*/

/* 3. 修复大标题组件：恢复正常占位 */
/*body.faq-page .category-header-container {
   
position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 20px auto 20px auto !important;
    height: auto !important;
    z-index: 10;

}
*/

/* 4. 主内容容器约束 */
body.faq-page .container {
    width: 90%;
    max-width: 1250px;
    margin: 20px auto 40px auto !important;
    padding: 20px;
}

/* 5. 搜索框高级视觉 */
body.faq-page #search {
    width: 100%;
    padding: 14px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #9A8446;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 16px;
    color: #222;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
body.faq-page #search:focus {
    outline: none;
    border-color: #FFD700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* 6. Tabs 标签页 */
body.faq-page .tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
body.faq-page .tab {
    padding: 8px 18px;
    border: 1px solid rgba(154, 132, 70, 0.3);
    border-radius: 20px;
    background: rgba(43, 43, 43, 0.8);
    color: #ddd;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}
body.faq-page .tab:hover {
    background: #3a3a3a;
    color: #FFD700;
}
body.faq-page .tab.active {
    background: #9A8446;
    color: white;
    border-color: #FFD700;
    box-shadow: 0 2px 8px rgba(154, 132, 70, 0.4);
}

/* 7. FAQ 手风琴卡片 */
body.faq-page .faq-item {
    background: rgba(255, 255, 255, 0.98);
    margin-bottom: 12px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}
body.faq-page .faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}
body.faq-page .faq-question {
    width: 100%;
    padding: 20px;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    color: #222;
    text-align: left;
}
body.faq-page .icon {
    width: 18px;
    height: 18px;
    fill: #9A8446;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-left: 15px;
}
body.faq-page .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
    padding: 0 20px;
    color: #444;
    font-size: 0.95rem;
    line-height: 1.6;
}
body.faq-page .faq-item.open {
    border-left: 4px solid #9A8446;
}
body.faq-page .faq-item.open .faq-answer {
    padding: 0 20px 20px 20px;
}
body.faq-page .faq-item.open .icon {
    transform: rotate(180deg);
    fill: #FFD700;
}

/* 8. 移动端强力响应式适配 */
@media(max-width: 768px) {
    /* 手机端由于页脚在特定宽度下会折行（变高变厚），需要垫高底部内衬 */
    body.faq-page {
        padding-bottom: 140px !important; 
    }
   /* body.faq-page .category-header-container {
        margin-top: 20px !important;
    }*/
    body.faq-page .container {
        width: 95%;
        padding: 10px;
        margin-bottom: 20px !important;
    }
    body.faq-page .faq-question {
        padding: 16px;
        font-size: 0.95rem;
    }
    body.faq-page .faq-answer {
        padding: 0 16px;
        font-size: 0.9rem;
    }
    body.faq-page .faq-item.open .faq-answer {
        padding: 0 16px 16px 16px;
    }
    body.faq-page .tabs {
        gap: 8px;
        margin-bottom: 20px;
    }
    body.faq-page .tab {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}


/* ==========================================================================
    page: contact-us-delivery-zones.html
   ========================================================================== */

/* 1. 强制整行排版：彻底击穿旧的常规 container 限制 */
html body.faq-page .map-page-container {
    display: flex !important;
    flex-direction: row !important; /* 确保电脑端一定是左右并排 */
    gap: 30px !important;
    width: 90% !important;
    max-width: 1200px !important;
    margin: 40px auto 120px auto !important; /* 底部留足 120px，绝对不被固定页脚挡住 */
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* 2. 左侧地址检查器：强行固定宽度，防止被地图挤扁 */
html body.faq-page .map-page-container .sidebar {
    flex: 0 0 320px !important; /* 锁死 320px 宽度 */
    width: 320px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    padding: 25px !important;
    border-radius: 12px !important;
    border-left: 4px solid #9A8446 !important; /* 注入高级暗金边线 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    box-sizing: border-box !important;
}

/* 3. 右侧地图外壳：强行吃满右侧所有剩余空间 */
html body.faq-page .map-page-container .map-container {
    flex: 1 !important; /* 自动伸展 */
    display: block !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(154, 132, 70, 0.3) !important;
    box-sizing: border-box !important;
}

/* 4. Leaflet 地图实体：强制灌入绝对物理高度，解决因高度为0导致的隐形/崩坏问题 */
html body.faq-page .map-page-container #map {
    width: 100% !important;
    height: 480px !important; /* 强行给地图 480px 的高度 */
    min-height: 480px !important;
    background: #2b2b2b !important; /* 未加载时显示高级暗灰底色 */
    position: relative !important;
    z-index: 1 !important; /* 防止挡住导航栏下拉菜单 */
}

/* 5. 侧边栏内部元素微调 */
html body.faq-page .map-page-container .sidebar h2 {
    font-size: 1.2rem !important;
    color: #222 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}
html body.faq-page .map-page-container .sidebar input {
    width: 100% !important;
    padding: 12px !important;
    margin-bottom: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}
html body.faq-page .map-page-container .sidebar button {
    width: 100% !important;
    padding: 12px !important;
    background: #212529 !important;
    color: #FFD700 !important;
    border: 1px solid #9A8446 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* 6. 移动端极致响应式：在手机上自动转为上下堆叠 */
@media(max-width: 768px) {
    html body.faq-page .map-page-container {
        flex-direction: column !important; /* 手机端强制改成上下排列 */
        width: 95% !important;
        padding: 10px !important;
        gap: 20px !important;
        margin-bottom: 160px !important; /* 手机端留出更厚的底部，防止撞到悬浮页脚 */
    }
    
    html body.faq-page .map-page-container .sidebar {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    html body.faq-page .map-page-container #map {
        height: 320px !important; /* 手机端高度降为 320px，更适合单手操作 */
        min-height: 320px !important;
    }
}


/* ==========================================================================
   11. 地图与地址检查器 - 完美并排去外壳版
   ========================================================================== */

/* 大容器：左右并排 */
body.faq-page .map-page-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px !important;
    width: 90% !important;
    max-width: 1200px !important;
    margin: 40px auto 120px auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* 左侧侧边栏：宽度锁死 */
body.faq-page .map-page-container .sidebar {
    flex: 0 0 320px !important;
    width: 320px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    padding: 25px !important;
    border-radius: 12px !important;
    border-left: 4px solid #9A8446 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    box-sizing: border-box !important;
}

/* 右侧地图：直接作为 Flex 子元素，自动吃满右边剩余宽度，并锁死 480px 高度 */
body.faq-page .map-page-container #map {
    flex: 1 !important;  /* 核心：自动撑开右侧所有空间 */
    height: 480px !important; /* 锁死高度 */
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(154, 132, 70, 0.3) !important;
    background: #2b2b2b !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 手机端自适应 */
@media(max-width: 768px) {
    body.faq-page .map-page-container {
        flex-direction: column !important; /* 变成上下堆叠 */
        width: 95% !important;
        padding: 10px !important;
        gap: 20px !important;
    }
    body.faq-page .map-page-container .sidebar {
        width: 100% !important;
    }
    body.faq-page .map-page-container #map {
        height: 320px !important; /* 手机端矮一点 */
    }
}






/* ==========================================================================
   3. 全局组件 (轮播图盒子)
   ========================================================================== */
.slide-img-box.is-horizontal {
    width: 100%;
    aspect-ratio: 3 / 2;
    position: relative;
    overflow: hidden;
    background-color: #f7f7f7;
}

.slide-img-box.is-horizontal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}




/* ==========================================================================
   2. 精致大图轮播图区域 (Modern Swiper Slider)
   ========================================================================== */

/* 轮播图外层大容器 */
.my-slider-container {
    max-width: 1300px;
    width: 90%;
    margin: 30px auto 0 auto;
    position: relative;
}

.my-slider-container.swiper {
    width: 100%;
    padding-bottom: 0px;
}

.my-slider-container .swiper-wrapper {
    align-items: flex-start !important;
}

/* 每一张卡片的基础样式 */
.my-slider-container .swiper-slide {
    background: #F5F4F4;
    border-radius: 16px; 
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column; 
    
    height: 600px; 
    
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

/* 卡片 Hover 上浮动画 */
.my-slider-container .swiper-slide:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

/* 轮播图片盒子 */
.slide-img-box {
    width: 88%;
    height: 500px; /* 固定图片高度 */
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.slide-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    display: block;
    transition: transform 0.5s ease, opacity 0.5s ease; 
}

.slide-img-box:hover img {
    transform: scale(1.06);
    opacity: 1;
    cursor: pointer;
}

/* 下方文字与按钮区域 */
.slide-content {
    flex: 1; /* 自动填充卡片扣除图片后的剩余空间 */
    padding: 20px 24px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    box-sizing: border-box;
    background: #ffffff;
}

.slide-title {
    font-size: 16px; 
    color: #1d1d1f;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slide-desc {
    font-size: 13px; 
    color: #86868b; 
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 胶囊按钮 */
.slide-btn {
    align-self: flex-start;
    display: inline-block;
    padding: 6px 16px;      
    background-color: #1d1d1f;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 12px;        
    font-weight: 500;
    border-radius: 20px;    
    transition: all 0.2s ease;
}

.slide-btn:hover {
    background-color: #515154;
    transform: scale(1.03);
}

/* 轮播图箭头与分页器 */
.swiper-button-next, .swiper-button-prev {
    color: #333 !important;
    background: rgba(255, 255, 255, 0.9);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    top: 45% !important;
}

.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 16px !important;
}

.swiper-pagination {
    bottom: 5px !important;
}

.swiper-pagination-bullet-active {
    background: #1d1d1f !important;
}

/* ==========================================================================
   3. Stage 横图分类页样式 (is-horizontal)
   ========================================================================== */

.my-slider-container.is-horizontal {
    margin-top: 30px;
}

.my-slider-container.is-horizontal .swiper-slide {
    height: 600px; /* 横图卡片高度由图片比例决定 */
}

.my-slider-container.is-horizontal .slide-img-box {
    width: 100%;
    height: auto;
	margin-top: 30px;
    aspect-ratio: 3 / 2; /* 强制 3:2 电影横图比例 */
}




/* ===================================================
   最终完美版（含移动端适配）：钉死文字与轮播图位置
   =================================================== */
	
	@media (max-width: 768px) {
   /* 1. 禁用全局图片的点击手势与指针反馈 */
.slide-img-box,
.slide-img-box img {
    cursor: default !important;
    pointer-events: none !important; /* 彻底禁用图片的点击事件 */
		}
    /* 2. 轮播图外层容器向上微调 */
    .my-slider-container,
    .my-slider-container.is-horizontal {
        margin-top: -10px !important;
        width: 95% !important; /* 稍微拉宽一点，增加横向空间 */
    }

    /* 3. 卡片取消 600px 固高，改为自动撑开 */
    .my-slider-container .swiper-slide,
    .my-slider-container.is-horizontal .swiper-slide {
        height: 550px !important; /* 解决按钮被遮挡的核心：取消固定高度 */
        min-height: unset !important;
    }

    /* 4. 手机端缩小图片高度/宽高比 */
    .slide-img-box{
        width: 88% !important;
		height: auto !important;
        /*aspect-ratio: 3 / 4 !important; /* 从 3:2 调整为 16:9，让图片更矮一点，给按钮腾空间 */
        margin-top: 0 !important;
    }
		

    .my-slider-container.is-horizontal .slide-img-box {
        width: 88% !important;
		height: auto !important;
        /*aspect-ratio: 3 / 4 !important; /* 从 3:2 调整为 16:9，让图片更矮一点，给按钮腾空间 */
        margin-top: 30px !important;
    }

    /* 5. 压缩底部文字和按钮区域内边距 */
    .slide-content {
        padding: 12px 16px !important;
        gap: 8px; /* 增加元素间间距 */
    }

    .slide-title {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }

    .slide-desc {
        font-size: 12px !important;
        -webkit-line-clamp: 2; /* 限制描述最多 2 行 */
    }

    .slide-btn {
        padding: 5px 12px !important;
        font-size: 11px !important;
        margin-top: 4px !important;
    }
}





/* =================================================== */
/* custom decal  */
/* =================================================== */


/* --- 1. 定制工作台独立整合样式 --- */
.studio-wrapper-section {
    width: 100%;
    /* 【修改这里】：改为弹性分配，自动填满导航栏和页脚之间的剩余空间 */
    flex: 1;          
    min-height: 0;    /* 触发底层子元素动态溢出计算机制 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 0 10px 0;  /* 稍微收紧上下呼吸空间，防止顶满屏幕 */
    box-sizing: border-box;
}

/* 整体界面缩小到屏幕宽度的 80%，高度自适应并在当前区域居中 */
.studio-container {
    width: 65vw;
    /* 【修改这里】：不要用死的 80vh 了，改用百分比撑开，上限死锁 520px 防止挤压页脚 */
    height: 100%;      
    max-height: 700px; 
    background: #f8f9fa;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    padding: 25px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 5; /* 保证在几何背景之上 */
}



/* 控制卡片区外壳 */
    .steps-wrapper {
        display: flex;
        gap: 15px;
        width: 100%;
        margin-bottom: 20px;
    }

    /* 基础卡片样式 */
    .step-card {
        background: #ffffff;
        border-radius: 12px;
        padding: 15px;
        box-sizing: border-box;
        border: 1px solid #e5e5ea;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
        display: flex;
        flex-direction: column;
    }

    /* Step 1 窄卡片 */
    .step-card.color-card {
        width: 180px; 
        flex-shrink: 0;
    }

    /* Step 2 和 3 平分剩余宽度 */
    .step-card.text-card {
        flex: 1;
    }

    .step-title {
        font-size: 13px;
        font-weight: 700;
        color: #007aff;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .char-count { font-size: 11px; color: #aeaea3; font-weight: 400; }

    .step-card label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #666;
        margin-top: 8px;
        margin-bottom: 4px;
        text-transform: none;
    }

    .step-card input[type="text"] {
        width: 100%;
        padding: 8px 10px;
        box-sizing: border-box;
        border: 1px solid #d1d1d6;
        border-radius: 6px;
        font-size: 13px;
        outline: none;
        transition: all 0.2s;
        background-color: #fafafa;
    }
    .step-card input[type="text"]:focus {
        border-color: #007aff;
        background-color: #fff;
        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
    }

    .color-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-top: 10px;
    }

    /* 2行 × 4列 网格布局 */
    .btn-grid-4x2 {
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        gap: 6px;
    }

    .font-btn, .size-btn {
        width: 100%;
        padding: 6px 2px;
        border: 1px solid #d1d1d6;
        background: #fff;
        border-radius: 6px;
        cursor: pointer;
        font-size: 11px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        transition: all 0.15s;
    }
    .font-btn:hover, .size-btn:hover { border-color: #8e8e93; }
    .font-btn.active, .size-btn.active {
        border-color: #007aff;
        background-color: #f2f7ff;
        color: #007aff;
        font-weight: bold;
        box-shadow: inset 0 0 0 1px #007aff;
    }

    .color-swatch {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px #d1d1d6;
        cursor: pointer;
        transition: all 0.15s;
        margin: auto;
        padding: 0;
    }
    .color-swatch:hover { transform: scale(1.1); }
    .color-swatch.active {
        box-shadow: 0 0 0 2px #007aff;
        transform: scale(1.1);
    }

    /* 下半部分：底端大容器组合 */
    .bottom-wrapper {
        flex: 1;
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: center;
        min-height: 0; 
    }

    /* 大预览区外边框：与上方卡片等色、同圆角 */
    .preview-container-box {
        height: 100%;
        aspect-ratio: 2 / 1;    /* 锁死大盘 2:1 比例 */
        box-sizing: border-box;  
        border: 1px solid #e5e5ea; 
        border-radius: 12px;      
        background: #ffffff;
        display: flex;
        justify-content: center; 
        align-items: center;     
        overflow: visible;         
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    }

    /* 内层嵌套：严格 80% 宽高的双线红框 */
    .inner-red-frame {
        width: 80%;
        height: 80%;
        box-sizing: border-box;
        border: 6px double #E63946; 
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;
        overflow: visible;         
    }

    #line1-display {
        transition: all 0.15s;
        white-space: nowrap;
        width: 100%;
        line-height: 1.3; 
        margin: 0;
        padding-bottom: 2px; 
        text-align: center;
    }

    #line2-display {
        transition: all 0.15s;
        white-space: nowrap;
        width: 100%;
        line-height: 1.3; 
        margin: 0;
        padding-top: 2px; 
        text-align: center;
    }

    /* 右侧操作按钮 */
    .action-controls {
        width: 160px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex-shrink: 0;
    }

    .action-btn {
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.15s;
    }

    .save-btn {
        background-color: #34c759;
        color: white;
        box-shadow: 0 4px 12px rgba(52, 199, 89, 0.2);
    }
    .save-btn:hover { background-color: #28a745; }

    .reset-btn {
        background-color: #f2f2f7;
        color: #ff3b30;
        border: 1px solid #e5e5ea;
    }
    .reset-btn:hover {
        background-color: #ff3b30;
        color: white;
        border-color: #ff3b30;
    }




/* ======================
package page only
========================*/


/* =================================================== */
/* 纯净隔离版：仅保留大图与弹窗样式，彻底移除任何页脚干预  */
/* =================================================== */

/* 当且仅当 body 内部包含套餐容器时，改变页面高度表现 */
body:has(.pkg-slider-container) {
    position: relative !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
    /* 核心安全垫：用内边距给底部的 .footer 腾出绝对物理位置，防止遮挡内容 */
    padding-bottom: 20px !important; 
}

/* 仅在套餐页面中，精准抓取小写 .footer 类名并压向最底部 */
body:has(.pkg-slider-container) .footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 100 !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------- */
/* 2. 主轮播图外层容器与尺寸精确锁死（防止变形或移位）    */
/* --------------------------------------------------- */
.pkg-slider-container {
    max-width: 1200px; 
    margin: 20px auto 60px auto !important; /* 上方 120px 彻底隔开 H1/H2 标题 */
    position: relative;
    padding: 0 50px; 
    box-sizing: border-box;
    clear: both !important;
}

/* 轮播主体：死锁 550px 高度，添加圆角与轻微阴影 */
.pkg-slider-container .swiper {
    width: 100%;
    height: 600px !important; 
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    background: #ffffff;
}
 
/* 强力重置布局：强制左字右图，左右两列等高 */
.pkg-slider-container .swiper-slide {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important; 
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important; 
    background: #ffffff !important;
}
 
/* 左侧独立文字区：占 35% 比例 */
.pkg-slider-container .pkg-slide-content {
    flex: 0 0 35% !important; 
    width: 35% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: left !important; 
    padding: 40px !important; 
    box-sizing: border-box !important;
}

.pkg-slider-container .pkg-slide-title {
    font-size: 22px !important;
    margin: 0 0 15px 0 !important;
    color: #222222 !important;
    font-weight: 600 !important;
}

.pkg-slider-container .pkg-slide-desc {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #666666 !important;
}

/* 独立按钮样式 */
.pkg-slider-container .slide-btn {
    display: inline-block !important;
    width: fit-content !important;
    padding: 12px 28px !important;
    background-color: #333333 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-weight: bold !important;
}
 
/* 右侧专属大图容器：占 65% 比例 */
.pkg-slider-container .pkg-big-img-box {
    flex: 0 0 65% !important;
    width: 65% !important; 
    display: block !important;
    height: 100% !important; 
    overflow: hidden !important;
    position: relative !important;
    cursor: pointer;
}
 
/* 大图自适应居中铺满 */
.pkg-slider-container .pkg-big-img-box img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center !important;
}

/* 修正导航箭头和分页点的颜色 */
.pkg-slider-container .swiper-button-prev { left: 10px !important; color: #333333 !important; }
.pkg-slider-container .swiper-button-next { right: 10px !important; color: #333333 !important; }
.pkg-slider-container .swiper-pagination-bullet-active { background: #333333 !important; }

/* --------------------------------------------------- */
/* 3. Lightbox 大图弹窗尺寸放大与彻底去白框              */
/* --------------------------------------------------- */
#product-lightbox .lightbox-box {
    width: 85% !important;      
    max-width: 1200px !important;
    height: 80vh !important;     
    background: transparent !important;       
    background-color: transparent !important; 
    padding: 0 !important;                    
    border: none !important;                  
    box-shadow: none !important;        
}

#product-lightbox .lightbox-swiper,
#product-lightbox .lightbox-swiper .swiper-slide {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#product-lightbox .lightbox-swiper .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
}

#product-lightbox .lightbox-prev { left: -20px !important; color: #ffffff !important; }
#product-lightbox .lightbox-next { right: -20px !important; color: #ffffff !important; }

/* --------------------------------------------------- */
/* 4. 移动端/手机端完美响应式布局                       */
/* --------------------------------------------------- */
/*@media (max-width: 768px) {
    body:has(.pkg-slider-container) {
        padding-bottom: 180px !important; /* 手机端页脚可能换行堆叠，预留更多底部间距 */
 /*   }
    .pkg-slider-container { padding: 0 !important; margin-top: 80px !important; }
    .pkg-slider-container .swiper { height: auto !important; }
    .pkg-slider-container .swiper-slide { flex-direction: column-reverse !important; }
    .pkg-slider-container .pkg-slide-content { flex: 0 0 100% !important; width: 100% !important; padding: 25px !important; }
    .pkg-slider-container .pkg-big-img-box { flex: 0 0 100% !important; width: 100% !important; height: 350px !important; }
    .pkg-slider-container .swiper-button-prev, .pkg-slider-container .swiper-button-next { display: none !important; }
    #product-lightbox .lightbox-box { width: 95% !important; height: 60vh !important; }
    #product-lightbox .lightbox-prev, #product-lightbox .lightbox-next { display: none !important; }
}*/

@media (max-width: 768px) {
   
   /* 解除全屏/body的高度锁定，确保能够正常滚屏 */
    html, body {
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

	

    /* 外层容器 */
    .pkg-slider-container {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 0px !important;
        padding: 0 15px 40px 15px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
		
		position: relative !important;
        z-index: 1 !important;
     }

    /* 3个套餐的垂直列表 */
    .mobile-plain-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important; /* 每个白色套餐卡片之间的距离 */
        width: 100% !important;
        height: auto !important;
    }

    /* 单个套餐卡片：白色底色，80% 不透明度 */
    .mobile-card-item {
        display: flex !important;
        flex-direction: column !important; /* 固定为上图下文 */
        width: 100% !important;
        height: auto !important;
        
        /* --- 白色 80% 透明度容器核心样式 --- */
        background-color: rgba(255, 255, 255, 0.65) !important; /* 80% 透明度白色背景 */
        border-radius: 12px !important;                          /* 12px 圆角 */
        padding: 16px !important;                               /* 卡片内部边距 */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;   /* 增加柔和阴影提高层级感 */
        box-sizing: border-box !important;
        backdrop-filter: blur(5px);                             /* 可选：若页面背景有图，增加毛玻璃质感 */
    }

    /* 套餐图片容器 */
    .mobile-card-item .pkg-big-img-box {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;   /* 图片也加上圆角 */
        overflow: hidden !important;
    }

    /* 图片自适应填满 */
    .mobile-card-item .pkg-big-img-box img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* 套餐文字内容区 */
    .mobile-card-item .pkg-slide-content {
        width: 100% !important;
        padding: 5px 0 0 0 !important;
        box-sizing: border-box !important;
    }





}
	






	
/* ==========================================
   SECTION 6 专属样式 (联系表单分栏布局)
   ========================================== */

/* 最外层父级：开启水平 Flex 排列 */
.contact-section {
    display: flex !important;
    flex-direction: row !important;      /* 强制水平并排 */
    justify-content: center !important;  /* 整体居中 */
    align-items: stretch !important;     /* 两栏高度拉伸保持一致 */
    flex-wrap: wrap !important;          /* 手机/窄屏下自动换行 */
    gap: 30px !important;                 /* 两栏之间的间隙 */
    
    max-width: 1200px !important;        /* 整体最大宽度 */
    margin: 40px auto !important;        /* 整个大区块在页面居中 */
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;
}

/* 左栏：费用信息块 */
.contact-info-block {
    flex: 1 1 320px !important;         /* 自动扩展，最小 320px */
    max-width: 560px !important;        /* 限制单栏最大宽度 */
    text-align: left;
    background: #f9f9f9 !important;
    padding: 35px;
    border-radius: 12px;
    border: 1px solid #eeeeee !important;
    box-sizing: border-box;
    margin: 0 !important;               /* 必须设为 0，不能设 margin: auto */
}

.contact-info-block h3 {
    font-size: 22px !important;
    color: #0F0E0E !important;
    margin-bottom: 25px !important;
    font-weight: 700 !important;
}

.info-group {
    margin-bottom: 20px;
    font-size: 15px;
    color: #333333 !important;
    line-height: 1.55;
}

.info-group strong {
    color: #a0895e !important;
    display: block;
    margin-bottom: 6px;
}

/* 右栏：表单块 */
.contact-form-block {
    flex: 1 1 320px !important;         /* 自动扩展，最小 320px */
    max-width: 560px !important;        /* 限制单栏最大宽度 */
    text-align: left;
    background: #ffffff !important;
    padding: 35px;
    border-radius: 12px;
    border: 3px solid #e5c158 !important;
    box-shadow: 0 10px 25px rgba(229, 193, 88, 0.08);
    box-sizing: border-box;
    margin: 0 !important;               /* 必须设为 0，不能设 margin: auto */
}

.contact-form-block h3 {
    font-size: 22px !important;
    color: #0F0E0E !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
}

/* 右栏表单内部提示文字 */
.form-tip,
.form-tip * {
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    margin-bottom: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    mix-blend-mode: normal !important;
    isolation: isolate !important;
}

/* 表单内部布局组件 */
.form-fields-stack {
    display: flex !important;
    flex-direction: column;
    gap: 15px;
}

.form-group.row-2 {
    display: flex;
    gap: 10px;
}

/* 统一输入框、下拉框与文本框样式 */
.form-fields-stack input,
.form-fields-stack select,
.form-fields-stack textarea {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #cccccc !important;
    border-radius: 6px;
    box-sizing: border-box !important;
    font-size: 14px;
    background: #ffffff !important;
    color: #2b2d30 !important;
    font-family: inherit;
}

.form-fields-stack select {
    color: #555;
    cursor: pointer;
}

.form-fields-stack textarea {
    resize: vertical;
}

/* 提交按钮 */
.form-fields-stack button {
    background: #a0895e !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px !important;
    font-weight: bold !important;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 16px;
}

.form-fields-stack button:hover {
    background: #8b754d !important;
}

/* 提交成功提示框样式 */
.success-message {
    text-align: center;
    padding: 30px 10px;
}

.success-icon {
    width: 50px;
    height: 50px;
    background: #e5c158;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 50px;
    border-radius: 50%;
    margin: 0 auto 15px;
}

.success-message h4 {
    font-size: 20px;
    color: #0F0E0E;
    margin-bottom: 8px;
}

.success-message p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}


/* ==========================================================================
   5. 商品网格布局与普通卡片 (Product Grid & Cards)
   ========================================================================== */
.grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
    gap: 15px; 
    padding: 15px; 
    max-width: 900px; 
    margin: 0 auto; 
}

.card { 
    background: white; 
    border: 1px solid #e9ecef; 
    border-radius: 12px; 
    padding: 12px; 
    text-align: center; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.02); 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

.card img { 
    width: 100%; 
    aspect-ratio: 1/1; 
    object-fit: cover; 
    border-radius: 8px; 
    margin-bottom: 10px; 
}

.price { 
    color: #dc3545; 
    font-size: 1.1rem; 
    font-weight: bold; 
    margin-bottom: 8px; 
}


/* ==========================================================================
   6. 商品页交互按钮 (YES / NO 状态切换)
   ========================================================================== */
.btn { 
    width: 100%; 
    border: none; 
    padding: 10px; 
    border-radius: 6px; 
    font-weight: bold; 
    font-size: 0.9rem; 
    cursor: pointer; 
    transition: background-color 0.2s; 
}

/* 默认状态：YES (鲜艳绿色) */
.btn-select { 
    background-color: #28a745; 
    color: white; 
}
.btn-select:hover { 
    background-color: #218838; 
}

/* 选中状态：NO (低调墨绿色) */
.btn-select.selected { 
    background-color: #1e4620; 
    color: white; 
}
.btn-select.selected:hover { 
    background-color: #143016; 
}


/* ==========================================================================
   7. 最后一页总结页布局 (Summary Page)
   ========================================================================== */
/* ==========================================================
   MY RENTAL SETUP - SUMMARY PAGE
   ========================================================== */

.summary-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 25px 30px 140px 30px;
    box-sizing: border-box;
}


/* ==========================================================
   NOTICE BOX
   ========================================================== */

.rental-notice-box {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 25px auto;

    padding: 15px 20px;

    background: rgba(255, 255, 255, 0.75);
    border-radius: 10px;

    box-sizing: border-box;
}

.rental-notice-box p {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;
    color: #333;
}


/* ==========================================================
   SUMMARY TABLE
   ========================================================== */

.summary-table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    background: rgba(255, 255, 255, 0.88);

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    table-layout: fixed;
}


/* ==========================================================
   COLUMN WIDTH
   ========================================================== */

.summary-table .col-no {
    width: 7%;
}

.summary-table .col-img {
    width: 14%;
}

.summary-table .col-name {
    width: 20%;
}

.summary-table .col-desc {
    width: 30%;
}

.summary-table .col-price {
    width: 12%;
}

.summary-table .col-act {
    width: 17%;
}


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

.summary-table thead {
    background: #222;
}

.summary-table th {
    padding: 13px 10px;

    color: #d4af37;

    font-size: 13px;
    font-weight: 600;

    text-align: center;

    white-space: nowrap;
}


/* ==========================================================
   BODY
   ========================================================== */

.summary-table td {
    padding: 15px 10px;

    text-align: center;
    vertical-align: middle;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

    font-size: 14px;

    box-sizing: border-box;
}


/* 最后一行不要底边 */

.summary-table tbody tr:last-child td {
    border-bottom: none;
}


/* ==========================================================
   ITEM IMAGE
   ========================================================== */

.table-prod-img {
    display: block;

    width: 90px;
    height: 70px;

    margin: 0 auto;

    object-fit: cover;

    border-radius: 6px;

    cursor: pointer;
}


/* ==========================================================
   ITEM NAME
   ========================================================== */

.summary-table td strong {
    color: #111 !important;

    font-size: 0.95rem;

    line-height: 1.3;
}


/* ==========================================================
   DESCRIPTION
   ========================================================== */

.table-prod-desc {
    display: block;

    color: #666;

    font-size: 13px;

    line-height: 1.45;

    text-align: left;
}


/* ==========================================================
   PRICE
   ========================================================== */

.summary-table td:nth-child(5) span {
    color: #dc3545 !important;

    font-weight: 600 !important;

    white-space: nowrap;
}


/* ==========================================================
   CANCEL BUTTON
   ========================================================== */

.btn-remove-item {
    background-color: #1e4620 !important;

    color: #fff !important;

    border: none !important;

    border-radius: 4px !important;

    padding: 7px 14px !important;

    font-size: 13px !important;

    font-weight: bold !important;

    cursor: pointer;

    white-space: nowrap;

    width: auto !important;

    display: inline-block !important;
}

.btn-remove-item:hover {
    background-color: #143016 !important;
}


/* ==========================================================
   EMPTY MESSAGE
   ========================================================== */

.empty-msg {
    text-align: center;

    color: #777;

    margin: 50px 0;

    font-size: 1.1rem;
}




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

/* ==========================================================
   MOBILE MY SETUP / SUMMARY PAGE
   ========================================================== */

/* 默认隐藏手机版卡片 */
.mobile-summary-list {
    display: none;
}


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

    /* =====================================================
       1. Summary 主容器
       ===================================================== */

    .summary-container {
        width: 100%;
        max-width: none;
        padding: 15px 12px 150px 12px;
        box-sizing: border-box;
    }


    /* =====================================================
       2. 顶部提示框
       ===================================================== */

    .rental-notice-box {
        width: 100%;
        padding: 12px 14px;
		
        margin-bottom: 18px;
        box-sizing: border-box;
    }

    .rental-notice-box p {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
    }


    /* =====================================================
       3. 隐藏电脑版 Table
       ===================================================== */

    .summary-table {
        display: none !important;
    }


    /* =====================================================
       4. 显示手机版 Card
       ===================================================== */

    .mobile-summary-list {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 16px;
    }


    /* =====================================================
       5. 单个商品卡片
       ===================================================== */

    .mobile-summary-card {
        width: 100%;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 12px;
        overflow: hidden;
        box-sizing: border-box;

        box-shadow:
            0 4px 15px rgba(0, 0, 0, 0.07);
    }


    /* =====================================================
       6. 商品图片区域
       ===================================================== */

    .mobile-card-image-box {
        width: 100%;
        background: rgba(0, 0, 0, 0.03);
        padding: 12px;
        box-sizing: border-box;
        text-align: center;
    }


    .mobile-card-img {
        display: block;

        width: 100%;
        max-width: 320px;

        height: auto;

        margin: 0 auto;

        object-fit: cover;

        border-radius: 8px;

        cursor: pointer;
    }


    /* =====================================================
       7. 商品文字区域
       ===================================================== */

    .mobile-card-info {
        padding: 14px 15px 15px 15px;
        box-sizing: border-box;
    }


    /* 商品名称 */

    .mobile-card-name {
        color: #111;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.3;

        margin-bottom: 7px;
    }


    /* 商品描述 */

    .mobile-card-desc {
        color: #666;
        font-size: 13px;
        line-height: 1.5;

        margin-bottom: 15px;
    }


    /* =====================================================
       8. 价格 + Cancel
       ===================================================== */

    .mobile-card-bottom {
        display: flex;

        justify-content: space-between;
        align-items: center;

        gap: 10px;
    }


    /* 价格 */

    .mobile-card-price {
        color: #dc3545;

        font-size: 17px;
        font-weight: 600;

        white-space: nowrap;
    }


    /* Cancel 按钮 */

    .mobile-remove-btn {
        flex-shrink: 0;

        padding: 7px 14px !important;

        font-size: 13px !important;

        border-radius: 4px !important;

        border: none !important;

        cursor: pointer;
    }

}


/* ==========================================================
   RESET BUTTON TEXT
   ========================================================== */

/* 默认：电脑版 */
.reset-mobile {
    display: none;
}

.reset-desktop {
    display: inline;
}


/* 手机版 */
@media screen and (max-width: 768px) {

    .reset-desktop {
        display: none;
    }

    .reset-mobile {
        display: inline;
    }

}



	



/* ==========================================================================
   5. 灯箱与 Modal 模态框 (Lightbox & Modals)
   ========================================================================== */

.lightbox-box {
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    position: relative;
    width: 90%;
    max-width: 750px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    box-sizing: border-box;
}

.lightbox-swiper {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.lightbox-swiper .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
    display: block;
}

.lightbox-prev, .lightbox-next {
    color: #333 !important;
    transform: scale(0.7);
}
.lightbox-prev { left: 15px !important; }
.lightbox-next { right: 15px !important; }

/* 隐蔽特定灯箱内的翻页箭头 */
#product-lightbox .swiper-button-next,
#product-lightbox .swiper-button-prev,
#product-lightbox .lightbox-next,
#product-lightbox .lightbox-prev {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* HTML 锚点灯箱 */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 9999;
}

.lightbox-overlay:target {
    opacity: 1;
    visibility: visible;
}

.lightbox-overlay img {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 40px;
    color: #fff;
    text-decoration: none;
}

.close-overlay-link {
    position: absolute;
    inset: 0;
}

/* JS Modal 激活显示 */
.modal-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 标题区绝对定位修正 */
/*body.gallery-page .category-header-container {
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
*/



/* ==========================================================================
   1. 基础页面布局与页面隔离 (Page Layout & Scoping)
   ========================================================================== */

/* 默认允许页面正常滚动 */
body:not(.product-page) {
    overflow-y: auto;
    height: auto;
}

/* 仅在 product-page 开启单屏无滚动模式 */
body.product-page {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


/* 仅针对 product-page 页面下的标题容器进行位置下移 */
body.product-page .category-header-container {
    /* 1. 用 margin-top 配合 relative 定位双重向下推进 */
    margin-top: 80px !important; /* 数值越大越靠下，被挡严重可调至 100px 或 120px */
    position: relative !important;
    top: 0px !important;
    
    /* 2. 避免 Flex 子元素高度被拉伸导致错位 */
    flex-shrink: 0 !important; 
    
    /* 3. 增加顶部内边距做安全缓冲 */
    padding-top: 20px !important;
}

/* 画廊/作品集页面基础修正 */
body.gallery-page,
body.page-portfolio {
    margin: 0;
	overflow-x: hidden;
    padding-bottom: 120px; /* 防止内容被底栏遮挡 */
}

body.page-portfolio html,
body.page-portfolio body {
    overflow: visible !important;
    height: auto !important;
}

/* 固定底栏 */
/*body.gallery-page .footer,
body.page-portfolio .footer {
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
}*/