/*
 Theme Name:   LuminaCanvas Theme
 Theme URI:    https://creativethemes.com/blocksy/
 Description:  Blocksy 子主题
 Author:       Lin
 Template:     blocksy
 Version:      1.0.0
*/

/* 你可以在这里添加你的自定义 CSS */

/* Mini-cart 抽屉面板宽度 */
.ct-header-cart .ct-cart-content {
    width: 368px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

/* 隐藏原生的 WooCommerce 详情区核心元素 */

/* 1. 隐藏原生商品标题 */
.product_title.entry-title { display: none !important; }

/* 2. 隐藏原生价格 */
.summary .price { display: none !important; }

/* 3. 隐藏原生变体表单 (关键: 只能 opacity:0，不能 display:none) */
/* 因为 WooCommerce JS 需要计算它的尺寸和位置，display:none 有时会导致 JS 报错 */
form.variations_form {
    opacity: 0 !important;
    position: absolute !important;
    z-index: -999 !important;
    height: 0 !important;
    overflow: hidden !important;
    left: -9999px !important; /* 踢到屏幕外面去 */
}

/* 4. 隐藏原生相册 */
.woocommerce-product-gallery { display: none !important; }

/* 5. 隐藏 Meta 信息 (SKU, Category 等，看你想不想留) */
.product_meta { display: none !important; }

/* 6. 测试内容，隐藏 Blocksy 的空摘要容器 */
.entry-summary { display: none !important; }

/* 让我们的容器撑开宽度 */
#product-configurator-root {
    width: 100%;
}

/* 覆盖 Blocksy 对 select 的固定高度 */
#product-configurator-root select {
    height: auto;
}

/* ========================================
   骨架屏样式 - Skeleton Screen
   ======================================== */

/* 脉冲动画 */
@keyframes wpc-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* 骨架屏容器：与 Preact 组件同布局 */
.wpc-skeleton {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

/* 左侧图片区 */
.wpc-skeleton-left {
    flex: 0 0 600px;
    max-width: 600px;
}

/* 1:1 正方形容器，与 PreviewStage 一致 */
.wpc-skeleton-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f4f4f4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpc-skeleton-image {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

/* 缩略图行占位 */
.wpc-skeleton-thumbs {
    display: flex;
    gap: 3px;
    margin-top: 8px;
}

.wpc-skeleton-thumb {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
}

/* 右侧信息区 */
.wpc-skeleton-right {
    flex: 1;
    padding: 12px;
    align-self: flex-start;
}

.wpc-skeleton-title {
    font-size: 28px;
    margin: 0 0 10px 0;
    color: #182535;
}

/* 脉冲占位块 */
.wpc-skeleton-pulse {
    background: #e0e0e0;
    border-radius: 4px;
    animation: wpc-pulse 1.5s ease-in-out infinite;
}

/* 底部注意事项占位（骨架屏） */
.wpc-skeleton-notes {
    width: 100%;
    margin-top: 12px;
    padding: 20px;
    background: #f9f9f9;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-sizing: border-box;
}

/* 商品注意事项区域（Preact 组件用） */
.wpc-product-notes {
    width: 100%;
    flex-basis: 100%;
    margin-top: 12px;
    padding: 20px;
    background: #f9f9f9;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-sizing: border-box;
}

/* 响应式：移动端纵向排列 */
@media (max-width: 959px) {
    .wpc-skeleton {
        flex-wrap: wrap;
    }

    .wpc-skeleton-left {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .wpc-skeleton-title {
        font-size: 20px;
    }
}