/* ========================================
   Teruiya Blocksy Custom Stylesheet
   Brand: PMI-Techria Industrial Components
   ======================================== */

:root {
    --brand-orange: #FF7800;
    --brand-orange-dark: #e66c00;
    --brand-orange-hover: #ff8c1a;
    --brand-orange-active: #cc5d00;
    --brand-dark: #1a1a1a;
    --brand-gray: #666;
    --brand-light-gray: #f5f5f5;
    --brand-border: #e0e0e0;
}

/* ===== Homepage Header / Navigation Fix ===== */
header.p-x-max.sticky.top-0 {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Remove white strip effect from nav */
header nav {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Force remove background and border from navigation */
header nav.bg-background {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

header nav.border-subtle {
    border: none !important;
    box-shadow: none !important;
}

/* Clean navigation links */
header nav a {
    background-color: transparent !important;
}

/* Ensure logo area has no extra background */
header .pointer-events-auto {
    background-color: transparent !important;
}

/* ===== Logo Image Fix - Remove Black Borders ===== */
header img[alt="PMI-techria"],
header img.size-5\.5 {
    width: auto !important;
    height: 100% !important;
    max-width: 180px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    display: block !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Logo container fix - remove ALL background and border */
header a.bg-green-7,
header a.bg-green-7.border-green-5,
header a.bg-green-7[class*="bg-green"],
header a.bg-green-7[class*="border-green"] {
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 4px 12px !important;
    height: 42px !important;
}

/* Logo container - force transparent background */
header .pointer-events-auto > a:first-child,
header a[data-slot="button"].bg-green-7 {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Logo image inside container */
header a.bg-green-7 img,
header a.bg-green-7 img.size-5\.5 {
    width: auto !important;
    max-width: 160px !important;
    height: 100% !important;
    max-height: 36px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Responsive logo sizing */
@media (max-width: 1024px) {
    header a.bg-green-7 img {
        max-width: 140px !important;
        max-height: 32px !important;
    }
}

@media (max-width: 768px) {
    header a.bg-green-7 img {
        max-width: 120px !important;
        max-height: 28px !important;
    }
}

@media (max-width: 480px) {
    header a.bg-green-7 img {
        max-width: 100px !important;
        max-height: 24px !important;
    }
}

/* ===== Header / Navigation ===== */
.site-header {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.header-navigation a {
    color: var(--brand-dark);
    font-weight: 500;
    transition: color 0.2s ease;
}

.header-navigation a:hover,
.header-navigation .current-menu-item a {
    color: var(--brand-orange);
}

/* ===== Buttons ===== */
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
woocommerce .cart button.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background-color: var(--brand-orange);
    color: #fff !important;
    border: 1px solid var(--brand-orange);
    border-radius: 4px;
    padding: 10px 24px;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
button:hover {
    background-color: var(--brand-orange-hover);
    border-color: var(--brand-orange-hover);
    color: #fff !important;
    transform: translateY(-1px);
}

.button.secondary,
.wp-block-button__link.secondary {
    background-color: transparent;
    color: var(--brand-orange) !important;
    border: 2px solid var(--brand-orange);
}

.button.secondary:hover,
.wp-block-button__link.secondary:hover {
    background-color: var(--brand-orange);
    color: #fff !important;
}

/* ===== Links ===== */
a {
    color: var(--brand-orange);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--brand-orange-dark);
}

/* ===== WooCommerce Product Cards ===== */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
}

.woocommerce ul.products li.product {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    padding: 0;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--brand-dark);
    font-size: 16px;
    font-weight: 600;
    padding: 16px;
    margin: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
    color: var(--brand-orange);
}

.woocommerce ul.products li.product .price {
    color: var(--brand-orange);
    font-size: 18px;
    font-weight: 700;
    padding: 0 16px 16px;
}

.woocommerce ul.products li.product .woocommerce-product-gallery__image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* ===== Product Page ===== */
.single-product .woocommerce-product-gallery__image img {
    border-radius: 8px;
}

.single-product .product_title {
    color: var(--brand-dark);
}

.single-product .woocommerce-Price-amount {
    color: var(--brand-orange);
}

.single-product .quantity input {
    border: 1px solid var(--brand-border);
    border-radius: 4px;
    padding: 8px;
}

/* ===== Cart Page ===== */
.woocommerce-cart .cart-table {
    border-radius: 8px;
    overflow: hidden;
}

.woocommerce-cart table.cart img {
    border-radius: 4px;
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.woocommerce-cart .cart-collaterals .cart_totals {
    background: var(--brand-light-gray);
    padding: 24px;
    border-radius: 8px;
}

/* ===== Checkout Page ===== */
.woocommerce-checkout .checkout {
    max-width: 900px;
    margin: 0 auto;
}

.woocommerce-checkout h3 {
    color: var(--brand-dark);
    border-bottom: 2px solid var(--brand-orange);
    padding-bottom: 8px;
}

/* ===== Sale / Featured Badges ===== */
.woocommerce span.onsale {
    background-color: var(--brand-orange);
    color: #fff;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
}

.featured-badge,
.hot-badge,
.new-badge {
    display: inline-block;
    background-color: var(--brand-orange);
    color: #fff;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--brand-orange);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-orange-dark);
}

/* ===== Forms ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border: 1px solid var(--brand-border);
    border-radius: 4px;
    padding: 10px 12px;
    width: 100%;
    transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 2px rgba(255, 120, 0, 0.2);
}

/* ===== Footer ===== */
.site-footer {
    background-color: var(--brand-dark);
    color: #fff;
    padding: 40px 0;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.8);
}

.site-footer a:hover {
    color: var(--brand-orange);
}

/* ===== Marquee Image Constraints ===== */
.py-section-half.relative.p-x-2xl .marquee-image {
    max-width: 100%;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.py-section-half.relative.p-x-2xl .marquee-svg svg {
    max-width: 100%;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ===== Responsive Marquee ===== */
@media (max-width: 1024px) {
    .py-section-half.relative.p-x-2xl .marquee-image,
    .py-section-half.relative.p-x-2xl .marquee-svg svg {
        max-height: 120px;
    }
}

@media (max-width: 767px) {
    .py-section-half.relative.p-x-2xl .marquee-image,
    .py-section-half.relative.p-x-2xl .marquee-svg svg {
        max-height: 80px;
    }
    
    .woocommerce ul.products {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (max-width: 480px) {
    .py-section-half.relative.p-x-2xl .marquee-image,
    .py-section-half.relative.p-x-2xl .marquee-svg svg {
        max-height: 60px;
    }
}

/* ===== Typography ===== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--brand-dark);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--brand-dark);
    font-weight: 700;
    line-height: 1.2;
}

/* ===== Utility Classes ===== */
.bg-brand-orange {
    background-color: var(--brand-orange);
}

.text-brand-orange {
    color: var(--brand-orange);
}

.border-brand-orange {
    border-color: var(--brand-orange);
}

/* ===== Navigation Menu Cleanup ===== */
.header-navigation .menu-item-has-children > a::after {
    content: " ▾";
    font-size: 10px;
}

/* ===== Page Title Banner ===== */
.page-header {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    padding: 60px 0;
    text-align: center;
    margin-bottom: 40px;
}

.page-header h1 {
    color: var(--brand-dark);
    font-size: 36px;
    margin: 0;
}

/* ===== Homepage Sticky Case Studies Section ===== */
/* Restore homepage.html's Tailwind sticky behavior via custom CSS */
.sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
}

/* Case study sticky cards */
.sticky.mt-\[calc\(var\(--s-vp-height\)\*0\.3\)\] {
    margin-top: 30vh !important;
    /* top is set via inline style: calc(136px + var(--h-header) + 20px) */
}

.bg-green-7.pointer-events-none.absolute.inset-0 {
    background-color: #1a1a1a;
    transition: opacity 300ms ease-out;
}

.img-object-cover {
    object-fit: cover !important;
    width: 100%;
    height: 100%;
}

/* ===== Set CSS Variables from JavaScript if needed ===== */
:root {
    --s-vp-height: 100vh;
    --h-header: 80px;
}

/* ===== Logo Container in Blocksy Theme Header (after removing original header) ===== */
header[class*="z-header"]:not(.p-x-max) {
    background-color: transparent !important;
}

header[class*="z-header"]:not(.p-x-max) .site-branding img {
    max-width: 180px !important;
    height: auto !important;
}

/* ===== Homepage p-x-sm Section - Restore Dark Background ===== */
/* The p-x-sm container sits inside a section that should have a dark green background
   with white text. Restore the original homepage.html look. */
section:has(.p-x-sm.relative.mx-auto.flex.flex-col.items-center) {
    background-color: #0E1C18 !important;
    color: #ffffff !important;
}

.p-x-sm.relative.mx-auto.flex.flex-col.items-center.gap-9 {
    background-color: #0E1C18 !important;
    color: #ffffff !important;
}

/* Title and headings inside p-x-sm */
.p-x-sm h1,
.p-x-sm h2,
.p-x-sm h3,
.p-x-sm h4,
.p-x-sm h5,
.p-x-sm h6 {
    color: #ffffff !important;
}

/* Cards inside p-x-sm */
.p-x-sm .border-green-2\/30 {
    background-color: transparent !important;
    border-color: rgba(89, 169, 134, 0.3) !important;
}

.p-x-sm h3.text-background,
.p-x-sm h3[class*="text-background"] {
    color: #ffffff !important;
}

.p-x-sm .text-green-2 {
    color: #59A986 !important;
}

.p-x-sm .text-foreground-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Card icon blocks */
.p-x-sm [style*="background-color: rgb(56, 208, 89)"] {
    background-color: #38D059 !important;
}

/* Noise/overlay layer */
.p-x-sm ~ .bg-green-5.pointer-events-none,
.bg-green-5.pointer-events-none.absolute.inset-0 {
    background-color: #0E1C18 !important;
}

/* =====================================================
   Card Hover Interaction — Homepage Cards
   Target: [--l-card-btn-gap:12px] [--l-card-btn-h:16px]
           [--l-card-pad:8px] [--l-card-radius:16px]
           group relative flex flex-col
   Style 参考: cofactr.com
     - 极简工业科技风、大量留白
     - 细描边分隔,无夸张阴影
     - hover 时整张卡片 "亮起" — 浅色面 + 描边变橙 + 内层轻微上色
     - 底部 "Learn More" 箭头由透明滑入
     - 整组动效克制、连贯、不抢占视觉
   ===================================================== */

/* ----- 默认状态:细微、克制的过渡骨架 ----- */
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"] {
    cursor: pointer;
    position: relative;
    isolation: isolate;
    /* 限制动画幅度,避免任何破坏布局的位移 */
    transition:
        background-color 360ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 360ms cubic-bezier(0.22, 1, 0.36, 1),
        color 360ms ease;
}

/* ----- Hover: 整张卡片微微亮起(描边变橙 + 背景微亮) ----- */
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover {
    border-color: rgba(255, 120, 0, 0.55) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ----- Active / 按压: 整张卡片轻微下沉 ----- */
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:active {
    background-color: rgba(255, 120, 0, 0.08) !important;
    transition-duration: 120ms;
}

/* ----- 卡片内图片: 缓慢 Ken Burns 微缩放 (不破坏布局,仅视觉锚点) ----- */
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"] img {
    transform: scale(1);
    transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover img {
    transform: scale(1.04);
}

/* ----- 序号/小标签元素:hover 时变品牌橙 ----- */
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover span,
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover .t-l-1,
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover [class*="text-green"] {
    color: var(--brand-orange, #FF7800) !important;
    transition: color 360ms ease;
}

/* ----- 卡片标题:hover 时由深变橙(克制的颜色过渡,不缩放/不移动) ----- */
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover h1,
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover h2,
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover h3,
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover h4 {
    color: var(--brand-orange, #FF7800) !important;
    transition: color 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Learn More 链接(SVG 包裹 + 锚文本):箭头滑入 + 文字变橙 ----- */
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"] a,
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"] [data-slot="button"] {
    transition:
        color 360ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 360ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 360ms ease,
        gap 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover a,
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover [data-slot="button"] {
    color: var(--brand-orange, #FF7800) !important;
}

/* 卡片内 a 标签的 SVG 图标(箭头):hover 时透明度提升 + 微位移 */
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"] a svg,
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"] [data-slot="button"] svg {
    opacity: 0.65;
    transform: translateX(-4px);
    transition:
        opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover a svg,
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover [data-slot="button"] svg {
    opacity: 1;
    transform: translateX(0);
}

/* ----- 卡片描述文本:hover 时轻微提亮 ----- */
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover p {
    opacity: 1;
    transition: opacity 360ms ease;
}

/* ----- 内部 SOLUTIONS 标签 (chip) hover 时描边变橙 ----- */
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover [class*="rounded-full"],
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:hover [class*="border"] {
    border-color: rgba(255, 120, 0, 0.4) !important;
    transition: border-color 360ms ease;
}

/* ----- 焦点态:键盘可访问性 — 整张卡片焦点环 ----- */
[class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"]:focus-visible {
    outline: 2px solid var(--brand-orange, #FF7800);
    outline-offset: 6px;
    border-color: rgba(255, 120, 0, 0.55) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ----- prefers-reduced-motion 支持 ----- */
@media (prefers-reduced-motion: reduce) {
    [class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"],
    [class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"] img,
    [class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"] a,
    [class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"] [data-slot="button"],
    [class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"] a svg,
    [class*="--l-card-btn-gap"][class*="--l-card-radius"][class*="group"] [data-slot="button"] svg {
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================
   Auto-Rotating Carousel — 4 Variants · 8s each
   Target: <section class="bg-white-2 flex-row-reverse md:flex">
              现有的 4 张 carousel 数据卡片
              [0] 40%  [1] 80%  [2] 10x  [3] 85%
   实现: 纯 CSS animation + keyframes,8秒步进切换
   不修改 homepage.html 任何字符
   ===================================================== */

/* 目标 carousel-content 容器(原有的 .is-loop.is-draggable)
   用 animation 让 4 张 slide 每 8s 平移一格 */
.is-loop.is-draggable[data-slot="carousel-content"] {
    /* 32s = 4 张 × 8s,完整循环一轮 */
    animation: teruiya-carousel-autoplay 32s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    will-change: transform;
}

/* 把现有的 4 张 carousel-item 平移轨道搬到我们的轨道上。
   原结构: <div class="flex -ml-(--item-gap)" style="transform: translate3d(-1036.64px, 0px, 0px);">
              <div ...carousel-item>...</div> ×4
   我们通过 animation 同时控制外层容器平滑位移 */
@keyframes teruiya-carousel-autoplay {
    /* 4 步分段:每段 25%,前 5% 稳定(给用户看),后续 20% 平移到下一张 */
    0%   { transform: translate3d(0%, 0, 0); }
    20%  { transform: translate3d(0%, 0, 0); }
    25%  { transform: translate3d(-100%, 0, 0); }
    45%  { transform: translate3d(-100%, 0, 0); }
    50%  { transform: translate3d(-200%, 0, 0); }
    70%  { transform: translate3d(-200%, 0, 0); }
    75%  { transform: translate3d(-300%, 0, 0); }
    95%  { transform: translate3d(-300%, 0, 0); }
    100% { transform: translate3d(-400%, 0, 0); }
}

/* 用户 hover 时暂停自动播放(给用户阅读时间) */
.is-loop.is-draggable[data-slot="carousel-content"]:hover {
    animation-play-state: paused;
}

/* 让 4 张 carousel-item 占满轨道宽度,均匀分布 */
.is-loop.is-draggable[data-slot="carousel-content"] [data-slot="carousel-item"] {
    /* 不覆盖原本的 basis,只保证不会因动画错位换行 */
    flex-shrink: 0;
}

/* ===== 4 个动画变体的视觉差异化强调 =====
   方案:对每张 carousel-item 应用不同的"激活变体"装饰层
   变体由其 nth-child 编号决定,不影响原卡片内容 */

/* 变体 1 - 第1张 slide (40%):轻微橙色 glow + 顶部色条 */
.is-loop.is-draggable[data-slot="carousel-content"] [data-slot="carousel-item"]:nth-child(1) > div {
    position: relative;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.is-loop.is-draggable[data-slot="carousel-content"] [data-slot="carousel-item"]:nth-child(1) > div::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF7800, #ff8c1a);
    border-radius: 8px 8px 0 0;
    opacity: 0.85;
}

/* 变体 2 - 第2张 slide (80%):淡淡绿底环 */
.is-loop.is-draggable[data-slot="carousel-content"] [data-slot="carousel-item"]:nth-child(2) > div {
    position: relative;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.is-loop.is-draggable[data-slot="carousel-content"] [data-slot="carousel-item"]:nth-child(2) > div::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px dashed rgba(89, 169, 134, 0.3);
    border-radius: 8px;
    pointer-events: none;
}

/* 变体 3 - 第3张 slide (10x):左上角小标签 */
.is-loop.is-draggable[data-slot="carousel-content"] [data-slot="carousel-item"]:nth-child(3) > div {
    position: relative;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.is-loop.is-draggable[data-slot="carousel-content"] [data-slot="carousel-item"]:nth-child(3) > div::after {
    content: "SCALE";
    position: absolute;
    top: 12px; right: 12px;
    background: var(--brand-orange, #FF7800);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 4px;
    pointer-events: none;
}

/* 变体 4 - 第4张 slide (85%):柔和阴影加深 */
.is-loop.is-draggable[data-slot="carousel-content"] [data-slot="carousel-item"]:nth-child(4) > div {
    position: relative;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.18);
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 当前/即将激活卡片细微 lift(随动画流过) */
.is-loop.is-draggable[data-slot="carousel-content"]:hover [data-slot="carousel-item"] > div {
    transform: translateY(-2px);
}

/* ===== 4 个圆点 indicator 跟随自动高亮 =====
   现有 4 个 <button class="increase-target-size ..."> 在 carousel 上方
   我们用 animation 同步推进 bg-green-5/highlight 进度条 */
.is-loop.is-draggable[data-slot="carousel-content"] ~ * button[aria-label*="slide"],
.carousel ~ * button[aria-label*="slide"],
div[role="region"] button[aria-label*="Navigate to slide"] {
    /* 不直接覆盖背景色,用 transform-origin + scale 做脉冲 */
    transition: background-color 240ms ease;
}

/* ===== prefers-reduced-motion 禁用自动轮播 ===== */
@media (prefers-reduced-motion: reduce) {
    .is-loop.is-draggable[data-slot="carousel-content"] {
        animation: none !important;
    }
    .is-loop.is-draggable[data-slot="carousel-content"] [data-slot="carousel-item"] > div {
        transition: none !important;
    }
}

/* ===== 响应式(md 以下):保持单卡片全宽,不需要动画 ===== */
@media (max-width: 767px) {
    .is-loop.is-draggable[data-slot="carousel-content"] {
        animation: none !important;
    }
}

/* ===== 2026-08-07 Fix: Blocksy's unlayered .hidden{display:none} beats
   Tailwind v4 layered responsive display utilities (lg:block etc.) on the
   distilled homepage. Re-declare the responsive variants unlayered so they
   win by source order (this file loads after Blocksy's main.min.css). ===== */
@media (min-width: 40rem) {
  .sm\:block { display: block !important; }
  .sm\:inline-block { display: inline-block !important; }
  .sm\:flex { display: flex !important; }
  .sm\:inline-flex { display: inline-flex !important; }
  .sm\:grid { display: grid !important; }
}
@media (min-width: 48rem) {
  .md\:block { display: block !important; }
  .md\:inline-block { display: inline-block !important; }
  .md\:flex { display: flex !important; }
  .md\:inline-flex { display: inline-flex !important; }
  .md\:grid { display: grid !important; }
}
@media (min-width: 64rem) {
  .lg\:block { display: block !important; }
  .lg\:inline-block { display: inline-block !important; }
  .lg\:flex { display: flex !important; }
  .lg\:inline-flex { display: inline-flex !important; }
  .lg\:grid { display: grid !important; }
}
@media (min-width: 80rem) {
  .xl\:block { display: block !important; }
  .xl\:inline-block { display: inline-block !important; }
  .xl\:flex { display: flex !important; }
  .xl\:inline-flex { display: inline-flex !important; }
  .xl\:grid { display: grid !important; }
}