/* =========================================================
    NAMU fonts
    Files are stored in /fonts, while this CSS is in /css.
    ========================================================= */

    @font-face {
        font-family: 'NAMU 1400';
        src: url('../fonts/NAMU-1400.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'NAMU 1600';
        src: url('../fonts/NAMU-1600.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'NAMU 1750';
        src: url('../fonts/NAMU-1750.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'NAMU 1850';
        src: url('../fonts/NAMU-1850.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'NAMU 1910';
        src: url('../fonts/NAMU-1910.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'NAMU 1930';
        src: url('../fonts/NAMU-1930.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'NAMU 1960';
        src: url('../fonts/NAMU-1960.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'NAMU 1990';
        src: url('../fonts/NAMU-1990.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'NAMU Pro';
        src: url('../fonts/NAMU-Pro.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    :root {
        --bg-color: #EEEEEE;
        --text-color: #111111;
        --text-muted: #6B7280;
        --white: #FFFFFF;
        --red: #E70F06;
        --gradient-orange: linear-gradient(90deg, #E70F06 0%, #FEC367 100%);
        --gradient-blue: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
        --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
        --border-radius: 16px;
        --border-radius-lg: 24px;
        --pill-radius: 100px;
    }

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

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Manrope', sans-serif;
        background-color: var(--bg-color);
        color: var(--text-color);
        line-height: 1.5;
        overflow-x: hidden;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Unbounded', sans-serif;
        font-weight: 700;
        line-height: 1.2;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    img {
        max-width: 100%;
        display: block;
    }

    ul {
        list-style: none;
    }

    .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .text-red {
        color: var(--red);
    }

    .text-uppercase {
        text-transform: uppercase;
    }

    .mb-tags {
        margin-bottom: 20px;
    }

    .mt-3 {
        margin-top: 1.5rem;
    }

    .mt-4 {
        margin-top: 2rem;
    }

    .full-width {
        width: 100%;
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 24px;
        border-radius: var(--pill-radius);
        font-weight: 600;
        font-size: 28px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        font-family: 'Onest', sans-serif;
        width: 260px;
        height: 80px;
    }

    .btn-primary {
        background-color: var(--red);
        color: var(--white);
    }

    .btn-primary:hover {
        background-color: #CC1500;
        transform: translateY(-2px);
    }

    .btn-gradient {
        background: var(--gradient-orange);
        color: var(--white);
        padding: 14px 32px;
        width: 180px;
        height: 75px;
    }

    .btn-gradient:hover {
        box-shadow: 0 10px 20px rgba(255, 42, 0, 0.2);
        transform: translateY(-2px);
    }

    .btn-container-right {
        display: flex;
        justify-content: flex-end;
        padding: 20px 0;
    }

    .btn-container-center {
        display: flex;
        justify-content: center;
        padding: 20px 0;
    }

    /* Header */
    .header {
        height: 80px;
        background-color: var(--bg-color);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        display: flex;
        align-items: center;
    }

    .header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
    }

    .logo {
        display: flex;
        align-items: center;
    }

    .logo img {
        width: 69px;
        height: 69px;
        object-fit: contain;
    }

    .desktop-nav {
        display: flex;
        align-items: center;
        gap: 30px;
        background: transparent;
        backdrop-filter: none;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .desktop-nav ul {
        display: flex;
        gap: 30px;
    }

    .desktop-nav a {
        font-family: 'Onest', sans-serif;
        font-weight: 400;
        font-size: 24px;
        color: var(--text-color);
        transition: color 0.3s ease;
    }

    .desktop-nav a:hover {
        color: var(--red);
    }

    .desktop-nav .btn-primary {
        width: 251px;
        height: 56px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: 'Onest', sans-serif;
        font-weight: 400;
        font-size: 24px;
        color: var(--white);
        background-color: var(--red);
        border-radius: var(--pill-radius);
        border: none;
    }

    .mobile-nav-toggle {
        display: none;
    }

    /* Hero Section */
    .hero {
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 110px 0 50px;
        position: relative;
        overflow-x: clip;
    }

    .hero-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .hero-content {
        position: absolute;
        left: calc(50% - 600px);
        /* X = 120px on a 1440px frame */
        top: calc(50% - 323px);
        /* Centered vertically (Y = 184px on a 1080px height design) */
        width: 588px;
        z-index: 2;
    }

    .hero-title {
        font-size: 82px;
        width: 588px;
        height: 336px;
        line-height: 1.36;
        /* 136% line-height */
        margin-bottom: 56px;
        font-family: 'NAMU 1960', sans-serif;
        color: #252525;
    }

    .text-gradient {
        font-family: 'NAMU 1930', sans-serif;
        font-size: 82px;
        background: var(--gradient-orange);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

    .hero-card {
        background: #FFFFFF;
        padding-top: 43px;
        padding-bottom: 43px;
        padding-left: 50px;
        padding-right: 50px;
        border-radius: 20px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        width: 510px;
        height: 254px;
        font-family: 'Onest', sans-serif;
        font-size: 28px;
        line-height: 1.6;
        border: none;
    }



    .hero-image {
        position: absolute;
        top: calc(50% - 572px);
        /* Centered vertically (Y = -32px on a 1080px height design) */
        left: calc(50% - 280px);
        /* 50% - 720px + 440px to place exactly at X=440px on a 1440px frame */
        width: 1175px;
        height: 1100px;
        object-fit: contain;
        pointer-events: none;
        z-index: -1;
    }

    .hero-side-text {
        position: absolute;
        left: calc(50% - 9px);
        /* X = 711px on a 1440px frame */
        top: calc(50% + 120px);
        /* Centered vertically (Y = 627px on a 1080px height design) */
        width: 609px;
        height: 185px;
        text-align: right;
        font-family: 'NAMU 1960', sans-serif;
        font-size: 52px;
        color: #252525;
        line-height: 1.36;
        /* 136% line-height */
        padding-right: 25px;
        z-index: 2;
    }

    .hero-side-text::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        /* Red line goes for the entire height of the block */
        width: 4px;
        background-color: var(--red);
    }

    .hero-side-text span {
        font-family: 'NAMU 1960', sans-serif;
    }

    /* Products Section */
    .products {
        padding: 80px 0;
    }

    .products-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 40px;
    }

    .products-title-area h2 {
        font-family: 'NAMU 1990', sans-serif;
        font-size: 62px;
        color: #252525;
        margin-bottom: 32px;
        font-weight: normal;
    }

    .products-title-area p {
        font-family: 'Onest', sans-serif;
        font-weight: 400;
        font-size: 28px;
        color: #252525;
        width: 588px;
        max-width: 100%;
        height: auto;
        line-height: 1.5;
    }

    .products-badge {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 16px;
    }

    .badge-text {
        font-family: 'Onest', sans-serif;
        font-weight: 500;
        font-size: 28px;
        color: #252525;
        text-align: right;
        line-height: 1.2;
    }

    .badge-number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180px;
        height: 93px;
        background: var(--gradient-orange);
        color: var(--white);
        font-family: 'Onest', sans-serif;
        font-weight: 600;
        font-size: 48px;
        border-radius: 100px;
        padding: 0;
    }

    .products-slider-wrapper {
        width: 100%;
        overflow: hidden;
        padding: 40px 0;
        margin: 0;
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    }

    .products-slider-track {
        display: flex;
        width: max-content;
        animation: scrollLeft 20s linear infinite;
        position: relative;
        overflow: visible;
    }

    .products-slider-track:hover {
        animation-play-state: paused;
    }

    @keyframes scrollLeft {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-1210px);
        }
    }

    .product-card {
        width: 282px;
        height: 452px;
        min-width: 282px;
        border-radius: var(--border-radius-lg);
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        flex-shrink: 0;
        position: relative;
        /* Обов'язково */
        color: #ffffff;
        background: var(--bg-color);
        cursor: pointer;
    }

    .product-card .card-img-wrap {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .product-card .card-img-main {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-card .card-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 2;
        padding: 20px 20px 22px;
        color: #ffffff;
        height: fit-content;
        /* Обіймає контент за висотою */
    }

    .product-card+.product-card {
        margin-left: -40px;
    }

    .product-card:nth-child(odd) {
        transform: rotate(5deg);
    }

    .product-card:nth-child(even) {
        transform: rotate(-5deg);
    }

    /* .product-card:nth-child(odd):hover,
    .product-card:nth-child(even):hover {
        position: absolute;
        top: 0;
        left: 0;
        transform: none !important;
        width: calc(100% - 80px);
        height: calc(100% - 80px);
        margin: 40px;
        z-index: 1000;
        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
        display: flex;
        flex-direction: column;
        border-radius: var(--border-radius-lg);
    } */

    .product-card:hover .card-content,
    .engraving-card:hover .card-content {
        overflow-y: auto;
    }

    /* .product-card:hover::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 999;
        border-radius: var(--border-radius-lg);
    } */

    /* ─── LAYER 0: Blurred background — continuation of image ─── */
    .card-blur-bg {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 0;
        border-radius: inherit;
    }

    .card-blur-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.25);
        filter: blur(30px) saturate(1.7);
        transition: transform 0.7s ease;
        display: block;
    }

    .product-card:hover .card-blur-bg img,
    .engraving-card:hover .card-blur-bg img {
        transform: scale(1.5);
    }

    /* Dark tint overlay on blur bg for readability */
    .card-blur-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(9, 9, 11, 0.06);
        pointer-events: none;
    }

    /* ─── LAYER 1: Sharp image with gradient fade mask ─── */
    .card-img-wrap {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;
    }

    .card-img-main {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Прибираємо mask-image взагалі */
        -webkit-mask-image: none;
        mask-image: none;
    }

    .product-card:hover .card-img-main,
    .engraving-card:hover .card-img-main {
        transform: scale(1.05);
    }

    /* ─── LAYER 2: Text content floating over blur ─── */
    .card-content {
        position: relative;
        z-index: 2;
        margin-top: auto;
        display: flex;
        flex-direction: column;
        padding: 20px 20px 22px;
        color: #ffffff;
        height: fit-content;
        /* Обіймає контент за висотою */
    }

    /* Псевдоелемент підкладки з блюром */
    .card-content::before {
        content: '';
        position: absolute;
        inset: 0;
        /* Витягуємо шар на 40px вище за контент для розмиття межі */
        top: -40px;
        z-index: -1;
        pointer-events: none;

        /* Світле розмиття зображення під текстом */
        backdrop-filter: blur(25px) saturate(1.6);
        -webkit-backdrop-filter: blur(25px) saturate(1.6);

        /* Дуже легке затемнення, щоб текст читався, але не був темним */
        background: rgba(0, 0, 0, 0.12);

        /* Плавний градієнт проявляння блюру зверху до низу */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40px, black 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 40px, black 100%);

        /* Закруглюємо нижні кути, щоб не вилазило за рамки картки */
        border-bottom-left-radius: var(--border-radius-lg);
        border-bottom-right-radius: var(--border-radius-lg);
    }

    .card-content h3 {
        font-size: 20px;
        margin-bottom: 6px;
        font-family: 'NAMU 1990', sans-serif;
        font-weight: 700;
        color: #ffffff;
        line-height: 1.3;
    }

    .card-content p {
        font-size: 16px;
        font-family: 'NAMU 1990';
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.5;
    }

    /* Hidden helpers */
    .card-img-placeholder {
        display: none;
    }

    .bg-gradient-1 {
        background: linear-gradient(135deg, #1E3A8A, #3B82F6);
    }

    .bg-gradient-2 {
        background: linear-gradient(135deg, #064E3B, #10B981);
    }

    .bg-gradient-3 {
        background: linear-gradient(135deg, #374151, #9CA3AF);
    }

    .bg-gradient-4 {
        background: linear-gradient(135deg, #701A75, #D946EF);
    }

    .card-icon {
        width: 32px;
        height: 32px;
        background: var(--white);
        border-radius: 50%;
        padding: 6px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* Category Slider Transitions */
    .engraving-bg-image {
        /* Default: fade-out speed */
        transition: opacity 0.3s ease;
    }

    .engraving-bg-image.category-fade-out {
        opacity: 0;
    }

    /* Fade-in is slower and uses ease-out for a smooth appearance */
    .engraving-bg-image.category-fade-in {
        transition: opacity 0.5s ease-out;
    }

    .gadgets-title {
        transition: opacity 0.35s ease;
    }

    .gadgets-title.category-fade-out {
        opacity: 0;
    }

    .engraving-cards-grid.category-fade-out .engraving-card-wrapper {
        opacity: 0;
        transform: translateY(12px);
    }

    .engraving-card-wrapper {
        transition: opacity 0.35s ease, transform 0.35s ease;
    }

    /* Engraving Section */
    .engraving {
        min-height: 100vh;
        min-height: 100svh;
        padding: 60px 0;
        position: relative;
        overflow: hidden;
    }

    .engraving-bg-image {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: min(835px, 50vw);
        aspect-ratio: 835 / 782;
        background-image: url('../images/Section3IllustrationGadgets.png');
        background-size: contain;
        background-position: left center;
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: -1;
        opacity: 1;
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    }

    .engraving-blur-overlay {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 50vw;
        pointer-events: none;
        z-index: -1;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 90%);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 90%);
    }

    .engraving-container {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(595px, 1fr);
        gap: 72px;
        align-items: stretch;
    }

    .engraving-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 36px;
    }

    .engraving .products-title-area h2 {
        font-family: 'NAMU 1990', sans-serif;
        font-size: 62px;
        margin-bottom: 32px;
        font-weight: normal;
        width: 400px;
        line-height: 1.1;
    }

    .engraving .products-title-area p {
        font-family: 'Onest', sans-serif;
        font-weight: 400;
        font-size: 28px;
        color: #252525;
        width: 527px;
        max-width: 100%;
        line-height: 1.5;
    }

    .gadgets-title-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .gadgets-title {
        font-family: 'NAMU 1930', sans-serif;
        font-size: 62px;
        font-weight: 700;
        line-height: 1.05;
        text-transform: uppercase;
        color: #252525;
    }

    .engraving-slider-controls {
        width: 180px;
        height: 75px;
        padding: 0 20px;
        border-radius: 999px;
        background: var(--white);
        box-shadow: var(--card-shadow);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }

    .slider-btn.slider-btn-lg {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 999px;
        background: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s ease;
    }

    .slider-btn.slider-btn-lg:hover {
        opacity: 0.7;
    }

    .slider-btn.slider-btn-lg img {
        width: 40px;
        height: 40px;
    }

    .engraving-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        gap: 32px;
        min-height: 0;
        max-height: calc(100vh - 120px);
        width: max-content;
        justify-self: end;
        overflow: visible;
    }

    .engraving-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: 18px 24px;
        justify-content: end;
        width: max-content;
        position: relative;
        overflow: visible;
        --card-height: min(362px, calc((100vh - 213px) / 2));
    }

    .engraving-card-wrapper {
        width: 283px;
        height: var(--card-height);
        aspect-ratio: 283 / 362;
        display: block;
    }

    .engraving-card {
        width: 100%;
        height: 100%;
        border-radius: var(--border-radius-lg);
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        transition:
            top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            left 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.45s ease,
            border-radius 0.45s ease;
        flex-shrink: 0;
        position: relative;
        color: #ffffff;
        background: var(--bg-color);
        display: flex;
        flex-direction: column;
        cursor: pointer;
    }

    .engraving-card .card-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 2;
    }

    @media (max-width: 1280px) {
        .engraving-container {
            grid-template-columns: 1fr;
        }

        .engraving-cards-grid {
            grid-template-columns: 1fr;
            justify-items: center;
            width: 100%;
        }

        .engraving-card-wrapper {
            width: 100%;
            max-width: 283px;
            height: min(362px, calc((100vh - 245px) / 2));
            aspect-ratio: 283 / 362;
        }
    }

    /* Hover expand effect for engraving cards (Desktop only) */
    @media (min-width: 1281px) {

        /* Grid needs overflow visible so the expanding card escapes its wrapper */
        .engraving-cards-grid {
            overflow: visible;
        }

        .engraving-card-wrapper {
            overflow: visible;
        }

        .engraving-card {
            position: absolute;
            width: 283px;
            height: var(--card-height);
            /* Cards never intercept mouse events — only the wrappers do */
            pointer-events: none;
        }

        .engraving-card-wrapper:nth-child(1) .engraving-card {
            top: 0;
            left: 0;
        }

        .engraving-card-wrapper:nth-child(2) .engraving-card {
            top: 0;
            left: calc(100% - 283px);
        }

        .engraving-card-wrapper:nth-child(3) .engraving-card {
            top: calc(100% - var(--card-height));
            left: 0;
        }

        .engraving-card-wrapper:nth-child(4) .engraving-card {
            top: calc(100% - var(--card-height));
            left: calc(100% - 283px);
        }

        /* JS adds/removes .expanded instead of :hover */
        .engraving-card.expanded {
            top: 0 !important;
            left: 0 !important;
            /* 590px = 283px card × 2 + 24px gap; height = 2 cards + 18px row-gap */
            width: 590px !important;
            height: calc(2 * var(--card-height) + 18px) !important;
            z-index: 1000;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
        }

        .engraving-card.expanded .card-content {
            overflow-y: auto;
            max-height: calc(100% - 180px);
            /* Allow scroll interaction inside the expanded card */
            pointer-events: auto;
        }
    }

    .engraving-more-btn {
        width: 180px;
        height: 75px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }


    /* 3D Print Section */
    .print3d {
        padding: 80px 0;
        overflow: hidden;
    }

    .print3d-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 40px;
    }

    .print3d-tags.desktop-only {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }

    .tags-row {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }

    .tag-pill {
        height: 82px;
        display: flex;
        align-items: center;
        padding: 0 32px;
        background: var(--white);
        border-radius: 100px;
        font-family: 'Onest', sans-serif;
        font-size: 28px;
        font-weight: 400;
        color: #252525;
        white-space: nowrap;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    }

    .print3d-cards-area {
        display: flex;
        justify-content: center;
        width: 100%;
        height: auto;
        max-height: 700px;
    }

    .print3d-cards-grid {
        position: relative;
        width: 1201px;
        max-width: 100%;
        height: 746px;
        margin: 40px 0;
    }

    .print-card-new {
        position: absolute;
        width: 682px;
        height: 327px;
        border-radius: 20px;
        padding: 30px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        background: var(--bg-color);
        display: flex;
        transition:
            transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.45s ease,
            opacity 0.35s ease;
        cursor: pointer;
    }

    .print-card-new.card-1 {
        top: 0;
        left: 0;
        transform: rotate(5deg);
        z-index: 1;
    }

    .print-card-new.card-2 {
        top: 72px;
        right: 0;
        transform: rotate(-5deg);
        z-index: 2;
    }

    .print-card-new.card-3 {
        top: 288px;
        left: 0;
        transform: rotate(-5deg);
        z-index: 3;
    }

    .print-card-new.card-4 {
        top: 366px;
        right: 0;
        transform: rotate(5deg);
        z-index: 4;
    }

    /* Hover expand effect (Desktop ≥ 1281px, toggled by JS) */
    @media (min-width: 1281px) {
        .print3d-cards-grid.has-expanded .print-card-new:not(.expanded) {
            opacity: 0.45;
        }

        .print-card-new.expanded {
            transform: rotate(0deg) scale(1.04) !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
            z-index: 10 !important;
            opacity: 1 !important;
        }

        .print-card-new .card-blur-bg img {
            transition: transform 0.7s ease;
        }

        .print-card-new.expanded .card-blur-bg img {
            transform: scale(1.45);
        }

        .print-card-new .print-card-img-wrap img {
            transition: transform 0.5s ease;
        }

        .print-card-new.expanded .print-card-img-wrap img {
            transform: scale(1.05);
        }
    }

    .print-card-new .card-blur-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        pointer-events: none;
        overflow: hidden;
    }

    .print-card-new .card-blur-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.25);
        filter: blur(30px) saturate(1.7);
    }

    .print-card-new .card-blur-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(9, 9, 11, 0.06);
        pointer-events: none;
    }

    .print-card-img-wrap {
        position: absolute;
        top: 0;
        height: 100%;
        width: 55%;
        z-index: 1;
        pointer-events: none;
    }

    .print-card-img-wrap.img-right {
        right: 0;
    }

    .print-card-img-wrap.img-left {
        left: 0;
    }

    .print-card-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .print-card-img-wrap.img-right img {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 25%, black 100%);
    }

    .print-card-img-wrap.img-left img {
        -webkit-mask-image: linear-gradient(to left, transparent 0%, black 25%, black 100%);
        mask-image: linear-gradient(to left, transparent 0%, black 25%, black 100%);
    }

    .print-card-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 216px;
        height: 100%;
    }

    .print-card-content.content-left {
        margin-right: auto;
    }

    .print-card-content.content-right {
        margin-left: auto;
    }

    .print-card-content h3 {
        font-family: 'NAMU 1930', sans-serif;
        font-size: 28px;
        color: var(--white);
        margin-bottom: 18px;
        font-weight: normal;
    }

    .print-card-desc h4 {
        font-family: 'NAMU 1930', sans-serif;
        font-size: 19px;
        margin-bottom: 4px;
        font-weight: normal;
    }

    .print-card-desc h4.text-red {
        color: var(--red);
    }

    .print-card-desc h4.text-white {
        color: var(--white);
        margin-top: 12px;
    }

    .print-card-desc p {
        font-family: 'Onest', sans-serif;
        font-size: 15px;
        color: var(--white);
        font-weight: 400;
        line-height: 1.4;
    }

    /* Contact Section */
    .contact {
        padding: 80px 0 40px;
    }

    .contact-grid {
        display: flex;
        gap: 88px;
        align-items: flex-start;
    }

    .contact-form-card {
        background: var(--white);
        padding: 48px;
        border-radius: 20px;
        box-shadow: var(--card-shadow);
        width: 486px;
        height: 684px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-shrink: 0;
    }

    .contact-form-card h3 {
        font-family: 'NAMU 1990', sans-serif;
        font-size: 48px;
        font-weight: normal;
        color: #252525;
        line-height: 1.2;
        margin-bottom: 24px;
    }

    .contact-form-card p {
        font-family: 'Onest', sans-serif;
        font-size: 28px;
        color: #252525;
        line-height: 1.5;
        margin-bottom: auto;
    }

    .contact-form-card .btn {
        width: 100%;
        height: 80px;
        font-size: 28px;
        padding: 0;
        margin-top: 24px;
    }

    .contact-links {
        display: flex;
        flex-direction: column;
    }

    .contact-links h3 {
        font-family: 'NAMU 1990', sans-serif;
        font-size: 48px;
        font-weight: normal;
        color: #252525;
        line-height: 1.2;
        margin-bottom: 32px;
    }

    .links-grid {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .contact-links .link-btn {
        height: 82px;
        display: inline-flex;
        align-items: center;
        gap: 16px;
        padding: 0 32px;
        background: var(--white);
        border-radius: 100px;
        font-family: 'Onest', sans-serif;
        font-size: 28px;
        font-weight: 400;
        color: #252525;
        white-space: nowrap;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        width: fit-content;
    }

    .contact-links .link-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }

    .contact-links .link-btn img {
        width: 32px;
        height: 32px;
    }

    /* Footer */
    .footer {
        padding: 30px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .footer-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        color: var(--text-muted);
    }

    .footer-left,
    .footer-right {
        display: flex;
        gap: 20px;
    }

    .footer-logo {
        font-weight: 700;
        color: var(--text-color);
    }

    /* Utilities */
    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }

    /* Fluid Proportional Scaling for Desktop (based on design height 1024px) */
    @media (min-width: 993px) {
        .hero-container {
            position: relative;
        }

        .hero-content {
            position: absolute;
            left: 20px;
            /* Always aligned to the left padded edge of the container */
            top: calc(50% - 32.03vh);
            /* Centered vertically relative to 1024px design height */
            width: 57.42vh;
            /* 588px on 1024px design height */
        }

        .hero-title {
            font-size: 8.01vh;
            /* 82px on 1024px design height */
            width: 57.42vh;
            /* 588px on 1024px design height */
            height: 32.81vh;
            /* 336px on 1024px design height */
            margin-bottom: 5.47vh;
            /* 56px on 1024px design height */
        }

        .text-gradient {
            font-size: 8.01vh;
            /* 82px on 1024px design height */
        }

        .hero-card {
            padding-top: 4.2vh;
            /* 43px on 1024px design height */
            padding-bottom: 4.2vh;
            /* 43px on 1024px design height */
            padding-left: 4.88vh;
            /* 50px on 1024px design height */
            padding-right: 4.88vh;
            /* 50px on 1024px design height */
            border-radius: 1.95vh;
            /* 20px on 1024px design height */
            width: 49.8vh;
            /* 510px on 1024px design height */
            height: 24.8vh;
            /* 254px on 1024px design height */
            font-size: 2.73vh;
            /* 28px on 1024px design height */
        }

        .hero-side-text {
            position: absolute;
            right: 20px;
            /* Always aligned to the right padded edge of the container */
            left: auto;
            /* Override main left position */
            top: calc(50% + 11.23vh);
            /* Centered vertically relative to 1024px design height */
            width: 59.47vh;
            /* 609px on 1024px design height */
            height: 18.07vh;
            /* 185px on 1024px design height */
            font-size: 5.08vh;
            /* 52px on 1024px design height */
            padding-right: 2.44vh;
            /* 25px on 1024px design height */
        }

        .hero-image {
            top: calc(50% - 53.13vh);
            /* Centered vertically relative to 1024px design height */
        }

        /* Products Section proportional scaling (mirror hero logic) */
        .products {
            min-height: 100vh;
            min-height: 100svh;
            display: flex;
            align-items: center;
            padding: 10.74vh 0 4.88vh;
            /* 110px top / 50px bottom on 1024px design */
        }

        .products-title-area h2 {
            font-size: 6.06vh;
            /* 62px on 1024px design height */
            margin-bottom: 3.125vh;
            /* 32px */
        }

        .products-title-area p {
            font-size: 2.73vh;
            /* 28px */
            width: 57.42vh;
            /* 588px */
        }

        .products-badge .badge-text {
            font-size: 2.73vh;
            /* 28px */
        }

        .products-badge .badge-number {
            width: 17.58vh;
            /* 180px */
            height: 9.08vh;
            /* 93px */
            font-size: 4.69vh;
            /* 48px */
            border-radius: 100px;
        }

        .products-slider-wrapper {
            padding: 3.91vh 0;
            /* 40px */
        }

        .product-card {
            width: 27.54vh;
            /* 282px */
            height: 44.14vh;
            /* 452px */
            min-width: 27.54vh;
        }

        .product-card+.product-card {
            margin-left: -3.91vh;
            /* -40px */
        }

        /* Contact Section proportional scaling */
        .contact {
            padding: 7.81vh 0 3.91vh;
        }

        .contact-grid {
            gap: 8.59vh;
        }

        .contact-form-card {
            width: 47.46vh;
            height: 66.8vh;
            border-radius: 1.95vh;
            padding: 4.69vh;
        }

        .contact-form-card h3 {
            font-size: 4.69vh;
            margin-bottom: 2.34vh;
        }

        .contact-form-card p {
            font-size: 2.73vh;
        }

        .contact-form-card .btn {
            height: 7.81vh;
            font-size: 2.73vh;
            margin-top: 2.34vh;
        }

        .contact-links h3 {
            font-size: 4.69vh;
            margin-bottom: 3.125vh;
        }

        .links-grid {
            gap: 1.95vh;
        }

        .contact-links .link-btn {
            height: 8.01vh;
            font-size: 2.73vh;
            padding: 0 3.125vh;
            gap: 1.56vh;
        }

        .contact-links .link-btn img {
            width: 3.125vh;
            height: 3.125vh;
        }
    }

    /* Responsive Design */
    @media (max-width: 992px) {
        .hero-title {
            font-size: 42px;
            line-height: 136%;
            width: auto;
            height: auto;
        }

        .text-gradient {
            font-size: 42px;
            line-height: 136%;
        }

        .hero-container {
            flex-direction: column;
            text-align: center;
        }

        .hero-content {
            position: static;
            width: 100%;
            max-width: 100%;
            margin-bottom: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hero-card {
            width: 100%;
            max-width: 440px;
            height: auto;
            padding: 24px;
            border-radius: 16px;
        }

        .hero-side-text {
            display: none;
        }

        .hero-image {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: min(552px, 100%);
            max-width: 552px;
            height: auto;
            aspect-ratio: 552 / 517;
            max-height: 60vh;
            opacity: 0.7;
        }

        .engraving-bg-image,
        .engraving-blur-overlay {
            display: none;
        }

        .engraving-container {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .engraving-content {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .engraving-right {
            width: 100%;
        }

        .engraving-cards-grid {
            grid-template-columns: 1fr;
            justify-items: center;
        }

        .engraving-card-wrapper {
            width: 100%;
            max-width: 540px;
            margin: 0 auto;
        }

        .engraving-more-btn {
            align-self: center;
        }

        .gadgets-title-block {
            align-items: center;
            margin-bottom: 30px;
        }

        .print3d-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .contact-grid {
            flex-direction: column;
            align-items: center;
            gap: 40px;
        }

        .contact-form-card {
            width: 100%;
            max-width: 486px;
            height: auto;
            padding: 32px;
            border-radius: 20px;
        }

        .contact-form-card h3 {
            font-size: 32px;
            margin-bottom: 16px;
        }

        .contact-form-card p {
            font-size: 20px;
            margin-bottom: 24px;
        }

        .contact-form-card .btn {
            height: 70px;
            font-size: 22px;
            margin-top: 16px;
        }

        .contact-links {
            align-items: center;
            width: 100%;
        }

        .contact-links h3 {
            font-size: 32px;
            margin-bottom: 24px;
            text-align: center;
        }

        .links-grid {
            align-items: center;
            width: 100%;
            gap: 16px;
        }

        .contact-links .link-btn {
            height: 64px;
            font-size: 20px;
            padding: 0 24px;
            gap: 12px;
            width: 100%;
            max-width: 400px;
            justify-content: center;
        }

        .contact-links .link-btn img {
            width: 24px;
            height: 24px;
        }

        .products-title-area h2 {
            font-size: 42px;
            margin-bottom: 20px;
        }

        .products-title-area p {
            font-size: 20px;
            width: auto;
        }

        .badge-text {
            font-size: 20px;
        }

        .badge-number {
            width: 140px;
            height: 70px;
            font-size: 32px;
        }
    }

    @media (max-width: 768px) {
        .desktop-only {
            display: none;
        }

        .mobile-only {
            display: flex;
        }

        .desktop-nav {
            display: none;
        }

        .mobile-nav-toggle {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .header {
            height: 75px;
        }

        .logo img {
            width: 55px;
            height: 55px;
        }

        .mobile-phone-btn {
            background: var(--red);
            width: 50px;
            height: 50px;
            border-radius: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mobile-phone-btn svg {
            width: 22px;
            height: 22px;
        }

        .hamburger {
            width: 50px;
            height: 50px;
            border-radius: 100px;
            background: var(--white);
            border: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            box-shadow: var(--card-shadow);
            cursor: pointer;
        }


        .hero {
            padding: 100px 0 60px;
        }

        .hero-title {
            font-size: 36px;
        }

        .hero-container {
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }

        .hero-content {
            position: static;
            width: 100%;
            max-width: 100%;
            margin-top: 30px;
            display: contents;
            flex-direction: column;
            align-items: flex-start;
        }

        .hero-title {
            font-size: 43px;
            text-align: left;
            line-height: 1.05;
            width: 100%;
            max-width: 100%;
            order: 1;
        }

        .hero-side-text {
            display: flex;
            flex-direction: column;
            order: 2;
            position: relative;
            width: 100%;
            max-width: 100%;
            height: 99px;
            align-self: flex-end;
            margin: 0 0 20px;
            text-align: right;
            font-size: 27px;
            padding: 0 20px 0 0;
            justify-content: center;
            align-items: flex-end;
            box-sizing: border-box;
            left: 0;
            margin-top: 30px;
        }


        .hero-card {
            width: 100%;
            max-width: 100%;
            height: auto;
            padding: 24px 35px;
            border-radius: 14px;
            font-size: 20px;
            order: 3;
        }

        .hero-title {
            font-size: 43px;
        }

        .products-header {
            align-items: flex-start;
            gap: 20px;
        }

        .products-title-area h2 {
            font-size: 34px;
            margin-bottom: 16px;
            max-width: 232px;
        }

        .products-title-area p {
            font-size: 15px;
            max-width: 232px;
        }

        .product-card {
            max-width: 254px;
            height: auto;
            max-height: 408px;
        }

        .products-badge {
            align-items: flex-end;
            gap: 10px;
            width: 103px;
        }

        .badge-text {
            text-align: left;
            font-size: 16px;
        }

        .badge-number {
            width: 85px;
            height: 44px;
            font-size: 23px;
        }

        .print3d-grid {
            grid-template-columns: 1fr;
        }

        .footer-container {
            flex-direction: column;
            gap: 15px;
            text-align: center;
        }

        /* Mobile overrides for Contact Section */
        .contact-form-card {
            padding: 24px;
        }

        .contact-form-card h3,
        .contact-links h3 {
            font-size: 28px;
        }

        .contact-form-card p {
            font-size: 16px;
        }

        .contact-form-card .btn {
            height: 60px;
            font-size: 18px;
        }

        .contact-links .link-btn {
            height: 56px;
            font-size: 16px;
            padding: 0 20px;
            gap: 8px;
        }

        .contact-links .link-btn img {
            width: 20px;
            height: 20px;
        }

        /* Лазерне гравіювання mobile tweaks */
        .engraving .products-title-area h2 {
            font-size: 34px;
            margin-bottom: 16px;
            max-width: 232px;
        }

        .engraving .products-title-area p {
            font-size: 15px;
            max-width: 232px;
        }

        .engraving-content {
            align-items: flex-start;
            text-align: left;
        }

        .gadgets-title-block {
            align-items: flex-start;
            width: 100%;
        }

        .gadgets-title {
            font-size: 36px;
            text-align: left;
        }

        .engraving-slider-controls {
            margin: 0;
            justify-content: flex-start;
            height: 44px;
            width: 105px;

        }


        .card-content h3 {
            font-size: 16px;
        }

        .card-content p {
            font-size: 13px;
        }

        .card-desc h4 {
            font-size: 12px;
        }

        .slider-btn.slider-btn-lg img {
            width: 23px;
            height: 23px;
        }

        .engraving-bg-image,
        .engraving-blur-overlay {
            display: block;
        }

        .engraving-bg-image {
            width: 100vw;
            top: 20%;
            transform: none;
            opacity: 0.2;
            z-index: 0;
        }

        .engraving-cards-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            width: 100%;
            justify-items: center;
        }

        .engraving-card-wrapper {
            width: 171px;
            height: 220px;
            max-width: 171px;
            aspect-ratio: auto;
        }

        .engraving-card-wrapper:nth-child(n+3) {
            display: none;
        }

        .engraving-more-btn {
            width: 109px;
            height: 46px;
            font-size: 17px;
        }

        /* 3D Друк mobile tweaks */
        .mb-tags {
            width: 100%;
            max-width: 118px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
            justify-content: flex-end;
        }

        .mb-tags .tag {
            height: 37px;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 12px;
            background: var(--white);
            border-radius: 100px;
            color: #252525;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .print3d-cards-grid {
            position: static;
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            margin: 20px 0;
        }

        .print3d-tags.desktop-only {
            display: none;
        }

        .print-card-new {
            position: relative;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            width: 358px;
            max-width: 100%;
            height: 186px;
            padding: 20px;
        }

        .print-card-new.card-1 {
            transform: rotate(5deg) !important;
            z-index: 1;
            margin-bottom: -30px;
        }

        .print-card-new.card-2 {
            transform: rotate(-5deg) !important;
            z-index: 2;
            margin-bottom: -30px;
        }

        .print-card-new.card-3 {
            transform: rotate(5deg) !important;
            z-index: 3;
        }

        .print-card-new:nth-child(n+4) {
            display: none !important;
        }

        .print-card-content h3 {
            font-size: 20px;
            margin-bottom: 8px;
        }

        .print-card-desc h4 {
            font-size: 14px;
            margin-top: 6px;
        }

        .print-card-desc p {
            font-size: 12px;
        }

        .print-card-content {
            width: 100%;
        }

        .btn-gradient {
            width: 109px;
            height: 46px;
            font-size: 17px;
        }
    }

    /* ─── Mobile Menu Overlay (shared across all pages) ──────────── */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--bg-color);
        z-index: 200;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-menu-overlay.is-open {
        opacity: 1;
        pointer-events: all;
    }

    .mobile-menu-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 48px;
        width: 100%;
        padding: 0 24px;
    }

    .mobile-menu-nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .mobile-nav-link {
        font-family: 'Unbounded', sans-serif;
        font-size: 28px;
        font-weight: 700;
        color: var(--text-color);
        line-height: 1.2;
        padding: 16px 32px;
        border-radius: var(--pill-radius);
        transition: color 0.3s ease, background 0.3s ease;
        display: block;
        text-align: center;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.active {
        color: var(--red);
        background: rgba(231, 15, 6, 0.06);
    }

    .mobile-menu-cta {
        width: 280px !important;
        height: 70px !important;
        font-size: 22px !important;
    }

    /* Hamburger open state */
    .hamburger.menu-open {
        background: var(--red);
    }

    .hamburger.menu-open img {
        filter: brightness(0) invert(1);
    }

    /* ─── Card fade-in animation (gallery) ───────────────────────── */
    @keyframes cardFadeIn {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* =========================================
   Engraving Detail
   ========================================= */

    .engraving-detail {
        padding: 150px 0 100px;
    }


    /* Back */

    .detail-back {
        display: inline-flex;
        align-items: center;
        gap: 10px;

        margin-bottom: 50px;

        color: inherit;
        text-decoration: none;

        font-family: 'Manrope', sans-serif;
        font-size: 15px;
        font-weight: 600;

        transition: opacity 0.2s ease;
    }

    .detail-back:hover {
        opacity: 0.65;
    }

    .detail-back span:first-child {
        font-size: 22px;
    }


    /* Main grid */

    .detail-grid {
        display: grid;

        grid-template-columns:
            minmax(0, 1.15fr) minmax(320px, 0.85fr);

        gap: 50px;

        align-items: start;
    }


    /* Image */

    .detail-media {
        width: 100%;
        max-width: 500px;
    }

    .detail-image-wrap {
        position: relative;

        width: 100%;
        min-height: 400px;

        display: flex;
        align-items: center;
        justify-content: center;

        overflow: hidden;

        border-radius: 24px;
    }

    .detail-image {
        display: block;

        width: 100%;
        height: auto;
        max-width: 500px;

        max-height: 750px;

        object-fit: contain;

        border-radius: 24px;
    }


    /* Information */

    .detail-info {
        padding-top: 20px;
    }

    .detail-title {
        margin: 18px 0 20px;

        font-family: 'NAMU 1960';
        font-size: clamp(32px, 4vw, 58px);
        line-height: 1.1;
        font-weight: 700;
    }

    .detail-subtitle {
        margin: 0 0 30px;

        font-family: 'Onest', sans-serif;
        font-size: 20px;
        line-height: 1.5;

        opacity: 0.7;
    }

    .detail-description {
        font-family: 'Manrope', sans-serif;

        font-size: 17px;
        line-height: 1.7;
    }


    /* Empty image */

    .detail-image-empty {
        width: 100%;
        min-height: 400px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 24px;

        opacity: 0.5;
    }


    /* YouTube */

    .detail-video {
        margin-top: 40px;
    }

    .detail-video-wrapper {
        position: relative;

        width: 100%;
        aspect-ratio: 16 / 9;

        overflow: hidden;

        border-radius: 24px;
    }

    .detail-video-wrapper iframe {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        border: 0;
    }


    /* Loading */

    .detail-loading {
        padding: 100px 0;

        text-align: center;

        font-family: 'Manrope', sans-serif;
        opacity: 0.6;
    }


    /* Error */

    .detail-error {
        padding: 100px 0;

        text-align: center;
    }

    .detail-error h2 {
        margin-bottom: 15px;
    }

    .detail-error p {
        margin-bottom: 30px;
    }


    /* Mobile */

    @media (max-width: 900px) {

        .engraving-detail {
            padding: 120px 0 70px;
        }

        .detail-grid {
            grid-template-columns: 1fr;
            gap: 45px;
        }

        .detail-info {
            padding-top: 0;
        }

        .detail-title {
            font-size: clamp(30px, 8vw, 46px);
        }

        .detail-subtitle {
            font-size: 18px;
        }

        .detail-image-wrap {
            min-height: 250px;
        }

    }


    @media (max-width: 500px) {

        .engraving-detail {
            padding-top: 100px;
        }

        .detail-back {
            margin-bottom: 30px;
        }

        .detail-image-wrap,
        .detail-image,
        .detail-video-wrapper {
            border-radius: 16px;
        }

    }

    /* =========================================================
    Compatibility utilities — required by js/animations.js and js/main.js
    These replicate minimal Tailwind utilities used in the optimised JS layer.
    ========================================================= */

    /* Hero image fade-in (used in animations.js) */
    .opacity-0 { opacity: 0; }
    .opacity-100 { opacity: 1; }
    .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
    .duration-1000 { transition-duration: 1s; }

    /* Mobile menu overlay — toggled by main.js via add/remove class */
    .mobile-menu-overlay {
        position: fixed;
        inset: 0;
        background-color: var(--bg-color);
        z-index: 105;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .mobile-menu-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Scroll-reveal animations (animations.js) */
    .animate-fade-up {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .animate-fade-up.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Slider grab cursor (main.js) */
    .products-slider-wrapper { cursor: grab; }
    .products-slider-wrapper:active { cursor: grabbing; }

    /* Engraving section: transition helpers used by inline JS */
    #engraving-bg-image {
        transition: opacity 0.3s ease, background-image 0s;
    }
    #engraving-cards-grid {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    #category-title {
        transition: opacity 0.3s ease;
    }