/* ------------------- */
        /* Helper Classes      */
        /* ------------------- */
        /* Clearfix: Contains floated elements */
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        /* ------------------- */
        /* Layout Container    */
        /* ------------------- */
        #container-product {
            max-width: 896px; /* equivalent to max-w-4xl */
            margin-left: auto;
            margin-right: auto;
            padding: 1rem; /* p-4 */
        }

        /* ------------------- */
        /* Section Styling     */
        /* ------------------- */
        .section {
            margin-bottom: 4rem; /* mb-16 */
        }

        .section-title {
            font-size: 1.5rem; /* text-2xl */
            font-weight: 700;
            color: #111827; /* text-gray-900 */
            margin-bottom: 1.5rem; /* mb-6 */
            padding-bottom: 0.5rem; /* pb-2 */
            border-bottom: 2px solid #16a34a; /* border-b-2 border-green-600 */
            display: inline-block;
        }
        
        /* ------------------- */
        /* 1. Product Hero     */
        /* ------------------- */
        .product-hero {
            display: flex;
            flex-direction: column; /* Default for mobile */
            gap: 2rem; /* gap-8 */
            align-items: flex-start;
        }

        .product-hero-image {
            width: 100%;
            flex-shrink: 0;
            text-align: center;
        }
        
        .product-hero-image img {
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
            width: 100%;
        }

        .product-hero-image .dimensions {
            font-size: 0.875rem; /* text-sm */
            color: #6b7280; /* text-gray-500 */
            margin-top: 0.5rem; /* mt-2 */
        }

        .product-hero-details {
            width: 100%;
        }

        .product-hero-details .tag {
            display: inline-block;
            background-color: #16a34a; /* bg-green-600 */
            color: white;
            font-size: 0.875rem; /* text-sm */
            font-weight: 600; /* font-semibold */
            padding: 0.25rem 1rem; /* px-4 py-1 */
            border-radius: 9999px; /* rounded-full */
            margin-bottom: 1rem; /* mb-4 */
        }

        .product-hero-details .title {
            font-size: 1.875rem; /* text-3xl */
            font-weight: 500;
            color: #111827; /* text-gray-900 */
            line-height: 1.25; /* leading-tight */
            margin-bottom: 1rem; /* mb-4 */
        }
        
        .product-hero-details .description {
            color: #4b5563; /* text-gray-600 */
            margin-bottom: 1.5rem; /* mb-6 */
            line-height: 1.625; /* leading-relaxed */
            font-size:1.3em;
        }

        .product-hero-details .note {
            background-color: #f0fdf4; /* bg-green-50 */
            border-left: 4px solid #22c55e; /* border-l-4 border-green-500 */
            color: #15803d; /* text-green-800 */
            padding: 1rem; /* p-4 */
            border-top-right-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
        }

        .product-hero-details .note p {
            font-weight: 600; /* font-semibold */
        }

        /* ------------------- */
        /* 2. Gallery          */
        /* ------------------- */
        .gallery-grid {
            display: grid;
            grid-template-columns: 1fr; /* Default 1 column for mobile */
            gap: 1.5rem; /* gap-6 */
        }

        .gallery-item {
            overflow: hidden;
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
            transition: box-shadow 0.3s ease;
        }
        
        .gallery-item:hover {
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* hover:shadow-xl */
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ------------------- */
        /* 3. Product Catalog  */
        /* ------------------- */
        .product-list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem; /* space-y-6 */
        }

        .product-item {
            background-color: white;
            padding: 1rem; /* p-4 */
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
            display: flex;
            flex-direction: column; /* Default for mobile */
            align-items: center;
            gap: 1.5rem; /* gap-6 */
        }

        .product-item img {
            width: 8rem; /* w-32 */
            height: 8rem; /* h-32 */
            object-fit: contain;
            border-radius: 0.375rem; /* rounded-md */
            flex-shrink: 0;
        }
        
        .product-item-details {
            width: 100%;
            text-align: left;
        }
        
        .product-item-details p {
            margin-bottom: 0.25rem;
        }

        .product-item-details strong {
            font-weight: 500; /* font-medium */
            color: #6b7280; /* text-gray-500 */
            display: inline-block;
            width: 5rem; /* w-24 approx */
        }


        /* ------------------- */
        /* Responsive Media Queries */
        /* ------------------- */

        /* sm: breakpoint (640px) */
        @media (min-width: 640px) {
            #container-product {
                padding: 2rem; /* sm:p-8 */
            }
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
            }
            .product-item {
                flex-direction: row; /* sm:flex-row */
            }
        }

        /* md: breakpoint (768px) */
        @media (min-width: 768px) {
            .product-hero {
                flex-direction: row; /* md:flex-row */
            }
            .product-hero-image {
                width: 50%; /* md:w-1/2 */
            }
            .product-hero-details {
                width: 50%; /* md:w-1/2 */
            }
            .product-hero-details .title {
                font-size: 2.25rem; /* md:text-4xl */
                text-align:justify;
            }
        }