/* ======================================================
           四大保證 Section
        ====================================================== */

        .guarantee-section {
            width: 100%;
            padding: 34px 30px 38px;
            position: relative;
            overflow: hidden;

            /*
             * 接近參考圖的淡粉橘背景
             */
            background:
                radial-gradient(
                    circle at 12% 10%,
                    rgba(255, 255, 255, 0.55),
                    transparent 24%
                ),
                radial-gradient(
                    circle at 86% 78%,
                    rgba(255, 224, 209, 0.7),
                    transparent 26%
                ),
                linear-gradient(
                    135deg,
                    #fff0e9 0%,
                    #fbe0d4 48%,
                    #ffe9df 100%
                );              
        }


        /*
         * 紙張淡淡紋理
         * 不需要額外圖片
         */
        .guarantee-section::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0.16;
            background-image:
                repeating-linear-gradient(
                    0deg,
                    rgba(135, 84, 66, 0.05) 0,
                    rgba(135, 84, 66, 0.05) 1px,
                    transparent 1px,
                    transparent 4px
                );
            mix-blend-mode: multiply;
        }


        /*
         * 左上淡淡花瓣裝飾
         */
        .guarantee-section::after {
            content: "";
            position: absolute;
            width: 70px;
            height: 70px;
            top: -25px;
            left: 6%;
            opacity: 0.24;
            background:
                radial-gradient(
                    ellipse at 30% 50%,
                    #eb7181 0 18%,
                    transparent 20%
                ),
                radial-gradient(
                    ellipse at 55% 22%,
                    #eb7181 0 16%,
                    transparent 18%
                ),
                radial-gradient(
                    ellipse at 67% 60%,
                    #eb7181 0 17%,
                    transparent 19%
                );
            transform: rotate(-18deg);
        }
        .guarantee-container {
            width: min(1440px, 100%);
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }


        /* ======================================================
           標題區
        ====================================================== */

        .guarantee-header {
            width: 100%;
            margin-bottom: 22px;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 20px;
        }
        .guarantee-title {
            grid-column: 2;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            color: #dd3c38;
            font-size: clamp(22px, 2vw, 31px);
            font-weight: 900;
            letter-spacing: 3px;
            white-space: nowrap;
        }
        .guarantee-title::before,
        .guarantee-title::after {
            display: inline-block;
            color: #df3f39;
            font-size: 35px;
            font-weight: 400;
        }
        .guarantee-title::before {
            content: "\\";
            transform: rotate(-7deg);
        }
        .guarantee-title::after {
            content: "/";
            transform: rotate(7deg);
        }


        /* 右側小標 */
        .guarantee-note {
            grid-column: 3;
            justify-self: end;
            margin: 0;
            color: #796f68;
            font-family:
                "DFKai-SB",
                "標楷體",
                "KaiTi",
                cursive;
            font-size: clamp(15px, 1.25vw, 20px);
            font-weight: 700;
            letter-spacing: 3px;
            transform: rotate(-4deg);
            white-space: nowrap;
            opacity: 0.9;
        }



        /* ======================================================
           Cards
        ====================================================== */

        .guarantee-list {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }
        .guarantee-card {
            min-height: 102px;
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 18px;
            position: relative;
            background:
                linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.98),
                    rgba(255, 255, 255, 0.93)
                );
            border:
                1px solid rgba(255, 255, 255, 0.8);
            border-radius: 20px;
            box-shadow:
                0 7px 15px rgba(165, 107, 78, 0.11),
                inset 0 1px 2px rgba(255, 255, 255, 0.9);
            transition:
                transform 0.28s ease,
                box-shadow 0.28s ease;
            opacity: 0;
            transform: translateY(20px);
        }
        .guarantee-card.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .guarantee-card:hover {
            transform: translateY(-5px);
            box-shadow:
                0 13px 25px rgba(161, 93, 63, 0.16),
                inset 0 1px 2px rgba(255, 255, 255, 0.95);
        }



        /* ======================================================
           ICON
        ====================================================== */

        .guarantee-icon {
            width: 66px;
            height: 66px;
            flex: 0 0 66px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            position: relative;
            background:
                linear-gradient(
                    145deg,
                    #ff7d79 0%,
                    #ef5155 100%
                );
            box-shadow:
                inset 0 2px 3px rgba(255, 255, 255, 0.32),
                0 5px 11px rgba(230, 75, 80, 0.2);
        }


        /*
         * 圓形外層淡淡光暈
         */
        .guarantee-icon::before {
            content: "";
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 1px solid rgba(237, 87, 86, 0.15);
        }


        .guarantee-icon svg {
            width: 37px;
            height: 37px;
            fill: none;
            stroke: #fff;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }



        /* ======================================================
           文字
        ====================================================== */

        .guarantee-text {
            flex: 1;
            min-width: 0;
        }


        .guarantee-card h3 {
            margin: 0;
            color: #323541;
            font-size: clamp(17px, 1.35vw, 22px);
            font-weight: 900;
            letter-spacing: 1px;
            line-height: 1.45;
        }


        .price-highlight {
            color: #e43e39;
            font-size: 1.18em;
            font-weight: 900;
            margin-left: 2px;
        }



        /* ======================================================
           Animation Delay
        ====================================================== */

        .guarantee-card:nth-child(1) {
            transition-delay: 0.05s;
        }
        .guarantee-card:nth-child(2) {
            transition-delay: 0.12s;
        }
        .guarantee-card:nth-child(3) {
            transition-delay: 0.19s;
        }
        .guarantee-card:nth-child(4) {
            transition-delay: 0.26s;
        }



        /* ======================================================
           Tablet
           1100px 以下：2 欄
        ====================================================== */

        @media (max-width: 1100px) {
            .guarantee-section {
                padding:
                    32px
                    25px
                    35px;
            }
            .guarantee-header {
                grid-template-columns:
                    1fr
                    auto
                    1fr;
            }
            .guarantee-list {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
                gap: 15px;
            }
            .guarantee-card {
                min-height: 96px;
            }
            .guarantee-note {
                font-size: 15px;
            }
        }


        /* ======================================================
           768px
        ====================================================== */

        @media (max-width: 768px) {
            .guarantee-section {
                padding:
                    28px
                    20px
                    30px;
            }
            .guarantee-header {
                display: flex;
                flex-direction: column;
                gap: 8px;
                margin-bottom: 20px;
            }
            .guarantee-title {
                font-size: 23px;
                letter-spacing: 2px;
            }
            .guarantee-title::before,
            .guarantee-title::after {
                font-size: 27px;
            }
            .guarantee-note {
                align-self: flex-end;
                font-size: 14px;
                transform: rotate(-3deg);
                margin-right: 10px;
            }
            .guarantee-list {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
                gap: 12px;
            }
            .guarantee-card {
                min-height: 90px;
                padding: 13px 15px;
                gap: 13px;         
                border-radius: 17px;
            } 
            .guarantee-icon {
                width: 56px;
                height: 56px;
                flex-basis: 56px;
            }
            .guarantee-icon svg {
                width: 31px;
                height: 31px;
            }
            .guarantee-card h3 {
                font-size: 16px;
            }
        }



        /* ======================================================
           Mobile
           520px 以下：1 欄
        ====================================================== */

        @media (max-width: 520px) {
            .guarantee-section {
                padding:
                    25px
                    15px
                    28px;
            }
            .guarantee-header {
                margin-bottom: 18px;
            }
            .guarantee-title {
                width: 100%;
                gap: 8px;
                font-size: 21px;
                letter-spacing: 1px;
                white-space: normal;
                text-align: center;
            }
            .guarantee-title::before,
            .guarantee-title::after {
                font-size: 24px;
            }
            .guarantee-note {
                align-self: center;
                margin: 0;
                font-size: 13px;
                letter-spacing: 2px;
            }
            .guarantee-list {
                grid-template-columns: 1fr;
                gap: 11px;
            }
            .guarantee-card {
                min-height: 82px;
                padding:
                    11px
                    17px;
            }
            .guarantee-icon {
                width: 55px;
                height: 55px;
                flex-basis: 55px;
            }
            .guarantee-card h3 {
                font-size: 17px;
            }
        }



        /* ======================================================
           超小手機
        ====================================================== */

        @media (max-width: 360px) {
            .guarantee-card {
                padding:
                    10px
                    13px;
                gap: 11px;
            }
            .guarantee-icon {
                width: 50px;
                height: 50px;
                flex-basis: 50px;
            }
            .guarantee-icon svg {
                width: 27px;
                height: 27px;
            }
            .guarantee-card h3 {
                font-size: 15px;
            }
        }



        /* ======================================================
           無動畫偏好
        ====================================================== */

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            .guarantee-card {
                opacity: 1;
                transform: none;
            }
        }