/* ========================================================
   COILHOOK PRODUCTS PAGE V1
   Industrial / Minimal / Transparent Render
   ======================================================== */

.prd-page {
    --prd-blue: #0c53a5;
    --prd-blue-dark: #073f78;
    --prd-navy: #022041;
    --prd-text: #26394d;
    --prd-muted: #627080;
    --prd-line: #c9d2dc;
    --prd-soft: #eef2f5;
    --prd-white: #ffffff;

    width: 100%;
    overflow: hidden;
    color: var(--prd-text);
    background: #ffffff;
}

.prd-page *,
.prd-page *::before,
.prd-page *::after {
    box-sizing: border-box;
}

.prd-page a {
    text-decoration: none;
}

.prd-shell {
    width: 100%;
    max-width: 1480px;
    margin-inline: auto;
    padding-inline:
        clamp(20px, 4.8vw, 88px);
}

.prd-section {
    padding-block:
        clamp(90px, 8vw, 140px);
}

.prd-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--prd-blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.07em;
    direction: ltr;
}

.prd-kicker::before {
    content: "";
    width: 33px;
    height: 2px;
    background: currentColor;
}

.prd-kicker--light {
    color: #8fc7f5;
}

.prd-section-head {
    margin-bottom:
        clamp(42px, 5vw, 72px);
    padding-bottom: 28px;
    border-bottom: 1px solid var(--prd-line);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 35px;
}

.prd-section-head h2,
.prd-specifications h2,
.prd-catalog h2,
.prd-rfq h2,
.prd-final h2 {
    margin: 15px 0 0;
    color: var(--prd-navy);
    font-size:
        clamp(34px, 3.8vw, 58px);
    font-weight: 950;
    line-height: 1.4;
    letter-spacing: -0.035em;
}

.prd-section-head p,
.prd-specifications p,
.prd-catalog p,
.prd-rfq p,
.prd-final p {
    max-width: 760px;
    margin: 16px 0 0;
    color: var(--prd-muted);
    font-size: 16px;
    line-height: 2.05;
}

.prd-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
}

.prd-button {
    min-height: 52px;
    padding-inline: 24px;
    border: 1px solid transparent;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 900;
    transition:
        color 0.23s ease,
        background-color 0.23s ease,
        border-color 0.23s ease,
        transform 0.23s ease,
        box-shadow 0.23s ease;
}

.prd-button:hover,
.prd-button:focus-visible {
    transform: translateY(-3px);
}

.prd-button--primary {
    color: #ffffff;
    border-color: var(--prd-blue);
    background: var(--prd-blue);
    box-shadow:
        0 14px 31px
        rgba(12, 83, 165, 0.2);
}

.prd-button--primary:hover,
.prd-button--primary:focus-visible {
    border-color: var(--prd-navy);
    background: var(--prd-navy);
}

.prd-button--ghost,
.prd-button--outline {
    color: var(--prd-navy);
    border-color:
        rgba(2, 32, 65, 0.25);
    background:
        rgba(255, 255, 255, 0.86);
}

.prd-button--ghost:hover,
.prd-button--outline:hover {
    color: var(--prd-blue);
    border-color: var(--prd-blue);
    background: #ffffff;
}

.prd-button--light {
    color: var(--prd-navy);
    border-color: #ffffff;
    background: #ffffff;
}

.prd-button--outline-light {
    color: #ffffff;
    border-color:
        rgba(255, 255, 255, 0.55);
    background: transparent;
}

/* ========================================================
   HERO
   ======================================================== */

.prd-hero {
    position: relative;
    min-height: 770px;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            115deg,
            #edf1f5 0%,
            #ffffff 46%,
            #f7f9fb 100%
        );
}

.prd-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background: var(--prd-blue);
}

.prd-hero__technical-grid {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: 0.8;
    background-image:
        radial-gradient(
            circle,
            rgba(2, 32, 65, 0.13)
            1px,
            transparent 1.3px
        ),
        linear-gradient(
            rgba(2, 32, 65, 0.04)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(2, 32, 65, 0.04)
            1px,
            transparent 1px
        );
    background-size:
        24px 24px,
        96px 96px,
        96px 96px;
    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.8),
            rgba(0, 0, 0, 0.25) 55%,
            transparent 92%
        );
    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.8),
            rgba(0, 0, 0, 0.25) 55%,
            transparent 92%
        );
}

.prd-hero__accent {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            var(--prd-blue) 0 30%,
            rgba(2, 32, 65, 0.16) 30%
        );
}

.prd-hero__layout {
    position: relative;
    z-index: 2;
    min-height: 770px;
    padding-block:
        clamp(80px, 7vw, 118px);
    display: grid;
    grid-template-columns:
        minmax(480px, 0.95fr)
        minmax(560px, 1.05fr);
    grid-template-areas:
        "visual content";
    align-items: center;
    gap: clamp(55px, 7vw, 125px);
    direction: ltr;
}

.prd-hero__content {
    grid-area: content;
    max-width: 780px;
    direction: rtl;
}

.prd-eyebrow {
    min-height: 37px;
    padding-inline: 15px;
    border: 1px solid
        rgba(12, 83, 165, 0.22);
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--prd-blue-dark);
    background:
        rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.055em;
    direction: ltr;
}

.prd-eyebrow i {
    width: 7px;
    height: 7px;
    background: var(--prd-blue);
}

.prd-hero h1 {
    max-width: 810px;
    margin: 24px 0 0;
    color: var(--prd-navy);
    font-size:
        clamp(50px, 5.4vw, 82px);
    font-weight: 950;
    line-height: 1.22;
    letter-spacing: -0.055em;
}

.prd-hero h1 strong {
    display: block;
    color: var(--prd-blue);
}

.prd-hero h1 strong::after {
    content: "";
    display: block;
    width: 112px;
    height: 5px;
    margin-top: 21px;
    background: var(--prd-blue);
}

.prd-hero__lead {
    max-width: 720px;
    margin: 25px 0 0;
    color: #273d53;
    font-size:
        clamp(20px, 1.8vw, 27px);
    font-weight: 850;
    line-height: 1.9;
}

.prd-hero__description {
    max-width: 700px;
    margin: 15px 0 0;
    color: var(--prd-muted);
    font-size: 16px;
    line-height: 2.08;
}

.prd-hero .prd-actions {
    margin-top: 32px;
}

.prd-hero__specs {
    max-width: 740px;
    margin-top: 43px;
    border-top: 1px solid var(--prd-line);
    border-bottom: 1px solid var(--prd-line);
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.prd-hero__specs div {
    min-height: 80px;
    padding: 15px 17px;
    border-left: 1px solid var(--prd-line);
    display: grid;
    align-content: center;
    gap: 5px;
}

.prd-hero__specs div:last-child {
    border-left: 0;
}

.prd-hero__specs small {
    color: var(--prd-blue);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.prd-hero__specs strong {
    color: #35495e;
    font-size: 13px;
    font-weight: 850;
}

.prd-hero__visual {
    grid-area: visual;
    position: relative;
    min-height: 630px;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
    background: transparent;
}

.prd-hero__visual figure {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 600px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prd-hero__visual figure::before,
.prd-hero__visual figure::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.prd-hero__visual figure::before {
    top: 8%;
    bottom: 8%;
    left: 50%;
    width: 1px;
    background:
        linear-gradient(
            transparent,
            rgba(12, 83, 165, 0.19),
            transparent
        );
}

.prd-hero__visual figure::after {
    top: 50%;
    right: 8%;
    left: 8%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(12, 83, 165, 0.19),
            transparent
        );
}

.prd-hero__visual img {
    position: relative;
    z-index: 3;
    display: block;
    width: min(100%, 690px);
    height: auto;
    max-height: 620px;
    object-fit: contain;
    background: transparent;
    transform:
        perspective(1300px)
        rotateY(-3deg)
        rotateX(1deg)
        translateY(-6px);
    filter:
        drop-shadow(
            0 8px 8px
            rgba(2, 32, 65, 0.17)
        )
        drop-shadow(
            0 22px 21px
            rgba(2, 32, 65, 0.23)
        )
        drop-shadow(
            0 38px 34px
            rgba(2, 32, 65, 0.16)
        );
    transition:
        transform 0.34s ease,
        filter 0.34s ease;
}

.prd-hero__visual:hover img {
    transform:
        perspective(1300px)
        rotateY(-1deg)
        rotateX(0)
        translateY(-15px)
        scale(1.025);
    filter:
        drop-shadow(
            0 9px 9px
            rgba(2, 32, 65, 0.19)
        )
        drop-shadow(
            0 26px 24px
            rgba(2, 32, 65, 0.26)
        )
        drop-shadow(
            0 43px 38px
            rgba(2, 32, 65, 0.18)
        );
}

.prd-render-code {
    position: absolute;
    z-index: 4;
    left: 0;
    bottom: 14px;
    color: rgba(2, 32, 65, 0.45);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.14em;
    direction: ltr;
}

/* ========================================================
   PRODUCTS
   ======================================================== */

.prd-products {
    background:
        linear-gradient(
            180deg,
            #f1f4f7,
            #ffffff
        );
}

.prd-text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--prd-blue);
    font-size: 14px;
    font-weight: 900;
}

.prd-products__list {
    display: grid;
    gap: 36px;
}

.prd-product {
    min-height: 590px;
    overflow: hidden;
    border: 1px solid #c2ccd6;
    border-radius: 4px;
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(420px, 0.92fr);
    grid-template-areas:
        "media content";
    background: #ffffff;
    box-shadow:
        0 20px 58px
        rgba(2, 32, 65, 0.09);
    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

.prd-product.is-reverse {
    grid-template-areas:
        "content media";
}

.prd-product:hover {
    border-color:
        rgba(12, 83, 165, 0.52);
    transform: translateY(-7px);
    box-shadow:
        0 35px 85px
        rgba(2, 32, 65, 0.16);
}

.prd-product__media {
    grid-area: media;
    position: relative;
    min-height: 590px;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            145deg,
            #e6ebf0,
            #f6f8fa
        );
}

.prd-product__grid {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
        radial-gradient(
            circle,
            rgba(2, 32, 65, 0.13)
            1px,
            transparent 1.3px
        ),
        linear-gradient(
            rgba(2, 32, 65, 0.045)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(2, 32, 65, 0.045)
            1px,
            transparent 1px
        );
    background-size:
        24px 24px,
        72px 72px,
        72px 72px;
}

.prd-product__number,
.prd-product__type {
    position: absolute;
    z-index: 4;
    top: 27px;
}

.prd-product__number {
    right: 28px;
    color: var(--prd-blue);
    font-size: 13px;
    font-weight: 950;
}

.prd-product__type {
    left: 28px;
    color: #536578;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    direction: ltr;
}

.prd-product__media img {
    position: relative;
    z-index: 3;
    display: block;
    width: min(90%, 570px);
    height: 470px;
    max-height: 470px;
    object-fit: contain;
    background: transparent;
    transform:
        perspective(1250px)
        rotateY(-2deg)
        translateY(-5px);
    filter:
        drop-shadow(
            0 7px 7px
            rgba(2, 32, 65, 0.17)
        )
        drop-shadow(
            0 20px 19px
            rgba(2, 32, 65, 0.23)
        )
        drop-shadow(
            0 35px 32px
            rgba(2, 32, 65, 0.15)
        );
    transition:
        transform 0.34s ease,
        filter 0.34s ease;
}

.prd-product:hover
.prd-product__media img {
    transform:
        perspective(1250px)
        rotateY(0)
        translateY(-15px)
        scale(1.035);
    filter:
        drop-shadow(
            0 8px 8px
            rgba(2, 32, 65, 0.19)
        )
        drop-shadow(
            0 24px 22px
            rgba(2, 32, 65, 0.26)
        )
        drop-shadow(
            0 41px 37px
            rgba(2, 32, 65, 0.18)
        );
}

.prd-product__content {
    grid-area: content;
    padding:
        clamp(45px, 5vw, 78px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.prd-product__content h2 {
    margin: 17px 0 0;
    color: var(--prd-navy);
    font-size:
        clamp(30px, 3vw, 46px);
    font-weight: 950;
    line-height: 1.45;
}

.prd-product__content > p {
    margin: 17px 0 0;
    color: var(--prd-muted);
    font-size: 16px;
    line-height: 2.08;
}

.prd-product__content ul {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
}

.prd-product__content li {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #35485b;
    font-size: 13px;
    font-weight: 800;
}

.prd-product__content li i {
    color: var(--prd-blue);
}

.prd-product__content .prd-actions {
    margin-top: 31px;
}

/* ========================================================
   ADVANTAGES
   ======================================================== */

.prd-advantages {
    background: #ffffff;
}

.prd-advantages__grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.prd-advantage {
    position: relative;
    min-height: 245px;
    padding: 33px;
    overflow: hidden;
    border: 1px solid #c9d2dc;
    border-radius: 3px;
    background:
        linear-gradient(
            145deg,
            #f7f9fb,
            #edf1f4
        );
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.prd-advantage:hover {
    border-color:
        rgba(12, 83, 165, 0.48);
    transform: translateY(-6px);
    box-shadow:
        0 23px 55px
        rgba(2, 32, 65, 0.11);
}

.prd-advantage > span {
    position: absolute;
    top: 22px;
    left: 24px;
    color: rgba(2, 32, 65, 0.35);
    font-size: 11px;
    font-weight: 900;
}

.prd-advantage > i {
    width: 57px;
    height: 57px;
    border: 1px solid
        rgba(12, 83, 165, 0.22);
    border-radius: 3px;
    display: grid;
    place-items: center;
    color: var(--prd-blue);
    background: #ffffff;
    font-size: 20px;
    transition:
        color 0.24s ease,
        background-color 0.24s ease;
}

.prd-advantage:hover > i {
    color: #ffffff;
    background: var(--prd-blue);
}

.prd-advantage h3 {
    margin: 34px 0 0;
    color: var(--prd-navy);
    font-size: 19px;
    font-weight: 900;
    line-height: 1.8;
}

/* ========================================================
   SPECIFICATIONS
   ======================================================== */

.prd-specifications {
    padding-block:
        clamp(75px, 7vw, 115px);
    color: #ffffff;
    background:
        linear-gradient(
            120deg,
            #01182f,
            #022041 55%,
            #073f78
        );
}

.prd-specifications__layout {
    display: grid;
    grid-template-columns:
        minmax(350px, 0.8fr)
        minmax(0, 1.2fr);
    align-items: center;
    gap: 70px;
}

.prd-specifications h2,
.prd-specifications p {
    color: #ffffff;
}

.prd-specifications__list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    border-top: 1px solid
        rgba(255, 255, 255, 0.16);
    border-right: 1px solid
        rgba(255, 255, 255, 0.16);
}

.prd-specifications__list span {
    min-height: 61px;
    padding: 14px 17px;
    border-left: 1px solid
        rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid
        rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    font-weight: 800;
}

/* ========================================================
   STANDARDS / CATALOG
   ======================================================== */

.prd-standards {
    background: #f3f6f8;
}

.prd-standards__list {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--prd-line);
    border-right: 1px solid var(--prd-line);
}

.prd-standards__list span {
    min-height: 105px;
    padding: 20px;
    border-left: 1px solid var(--prd-line);
    border-bottom: 1px solid var(--prd-line);
    display: grid;
    place-items: center;
    color: var(--prd-navy);
    background: #ffffff;
    font-size: 16px;
    font-weight: 950;
    direction: ltr;
}

.prd-catalog {
    padding-block:
        clamp(65px, 6vw, 96px);
    background: #ffffff;
}

.prd-catalog__layout {
    padding:
        clamp(38px, 5vw, 70px);
    border: 1px solid #bec9d3;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    background:
        linear-gradient(
            120deg,
            #edf2f6,
            #ffffff
        );
}

/* ========================================================
   FAQ
   ======================================================== */

.prd-faq {
    background: #f4f6f8;
}

.prd-faq__layout {
    display: grid;
    grid-template-columns:
        minmax(310px, 0.72fr)
        minmax(0, 1.28fr);
    gap: clamp(55px, 7vw, 115px);
    align-items: start;
}

.prd-faq .prd-section-head {
    position: sticky;
    top: 120px;
    margin: 0;
    border: 0;
    display: block;
}

.prd-faq__items {
    border-top: 1px solid var(--prd-line);
}

.prd-faq-item {
    border-bottom: 1px solid var(--prd-line);
    background: transparent;
}

.prd-faq-item summary {
    min-height: 91px;
    padding: 20px 4px;
    cursor: pointer;
    list-style: none;
    display: grid;
    grid-template-columns:
        37px
        minmax(0, 1fr)
        38px;
    align-items: center;
    gap: 14px;
    transition:
        color 0.22s ease,
        background-color 0.22s ease;
}

.prd-faq-item summary::-webkit-details-marker {
    display: none;
}

.prd-faq-item summary > span {
    color: var(--prd-blue);
    font-size: 11px;
    font-weight: 900;
}

.prd-faq-item summary b {
    color: var(--prd-navy);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}

.prd-faq-item summary i {
    width: 38px;
    height: 38px;
    border: 1px solid var(--prd-line);
    border-radius: 2px;
    display: grid;
    place-items: center;
    color: var(--prd-blue);
    transition:
        transform 0.22s ease,
        color 0.22s ease,
        background-color 0.22s ease;
}

.prd-faq-item[open] summary i {
    color: #ffffff;
    background: var(--prd-blue);
    transform: rotate(45deg);
}

.prd-faq-item > div {
    padding:
        0 55px 26px 56px;
}

.prd-faq-item p {
    margin: 0;
    color: var(--prd-muted);
    font-size: 15px;
    line-height: 2.05;
}

/* ========================================================
   RFQ
   ======================================================== */

.prd-rfq {
    background: #ffffff;
}

.prd-rfq__panel {
    overflow: hidden;
    border: 1px solid #bdc8d2;
    border-radius: 4px;
    display: grid;
    grid-template-columns:
        minmax(350px, 0.85fr)
        minmax(0, 1.15fr);
    background: #f1f4f7;
}

.prd-rfq__content {
    padding:
        clamp(40px, 5vw, 76px);
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #01192f,
            #022041 57%,
            #07457f
        );
}

.prd-rfq__content h2,
.prd-rfq__content p {
    color: #ffffff;
}

.prd-rfq__content ul {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 13px;
}

.prd-rfq__content li {
    position: relative;
    padding-right: 22px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    font-weight: 800;
}

.prd-rfq__content li::before {
    content: "";
    position: absolute;
    top: 9px;
    right: 0;
    width: 8px;
    height: 8px;
    background: #56a9ef;
}

.prd-form {
    padding:
        clamp(35px, 4vw, 58px);
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.prd-form label {
    display: grid;
    gap: 8px;
}

.prd-form label > span {
    color: #37495b;
    font-size: 12px;
    font-weight: 850;
}

.prd-form input,
.prd-form select,
.prd-form textarea {
    width: 100%;
    min-height: 52px;
    padding-inline: 14px;
    border: 1px solid #c2ccd6;
    border-radius: 2px;
    outline: 0;
    color: var(--prd-navy);
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.prd-form textarea {
    min-height: 122px;
    padding-block: 13px;
    resize: vertical;
}

.prd-form input:focus,
.prd-form select:focus,
.prd-form textarea:focus {
    border-color: var(--prd-blue);
    box-shadow:
        0 0 0 3px
        rgba(12, 83, 165, 0.1);
}

.prd-form__full,
.prd-form__submit {
    grid-column: 1 / -1;
}

.prd-form__submit {
    min-height: 55px;
    border: 1px solid var(--prd-blue);
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    background: var(--prd-blue);
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
    transition:
        background-color 0.22s ease,
        transform 0.22s ease;
}

.prd-form__submit:hover {
    background: var(--prd-navy);
    transform: translateY(-2px);
}

/* ========================================================
   FINAL CTA
   ======================================================== */

.prd-final {
    position: relative;
    padding-block:
        clamp(72px, 7vw, 112px);
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(
            120deg,
            #01172c,
            #022041 55%,
            #0c53a5
        );
}

.prd-final__technical-grid {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.05)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05)
            1px,
            transparent 1px
        );
    background-size: 56px 56px;
}

.prd-final__layout {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
}

.prd-final__layout > div:first-child > span {
    color: #8fc8f7;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    direction: ltr;
}

.prd-final h2,
.prd-final p {
    color: #ffffff;
}

/* ========================================================
   RESPONSIVE
   ======================================================== */

@media (max-width: 1100px) {
    .prd-hero,
    .prd-hero__layout {
        min-height: auto;
    }

    .prd-hero__layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "visual";
        gap: 36px;
        padding-block: 75px 55px;
    }

    .prd-hero__visual {
        min-height: 520px;
    }

    .prd-hero__visual figure {
        min-height: 500px;
    }

    .prd-hero__visual img {
        max-height: 520px;
    }

    .prd-product,
    .prd-product.is-reverse {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "content";
    }

    .prd-product__media {
        min-height: 510px;
    }

    .prd-specifications__layout,
    .prd-rfq__panel {
        grid-template-columns: 1fr;
    }

    .prd-standards__list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .prd-shell {
        padding-inline: 18px;
    }

    .prd-section {
        padding-block: 75px;
    }

    .prd-section-head,
    .prd-catalog__layout,
    .prd-final__layout {
        align-items: stretch;
        flex-direction: column;
    }

    .prd-hero h1 {
        font-size:
            clamp(42px, 11vw, 56px);
    }

    .prd-hero__lead {
        font-size: 19px;
    }

    .prd-hero__specs {
        grid-template-columns: 1fr;
    }

    .prd-hero__specs div {
        min-height: 62px;
        border-left: 0;
        border-bottom: 1px solid var(--prd-line);
    }

    .prd-hero__specs div:last-child {
        border-bottom: 0;
    }

    .prd-hero__visual {
        min-height: 390px;
    }

    .prd-hero__visual figure {
        min-height: 370px;
    }

    .prd-hero__visual img {
        max-height: 390px;
    }

    .prd-render-code {
        display: none;
    }

    .prd-product__media {
        min-height: 395px;
    }

    .prd-product__media img {
        height: 330px;
        max-height: 330px;
    }

    .prd-product__content {
        padding: 32px 24px;
    }

    .prd-product__content ul {
        grid-template-columns: 1fr;
    }

    .prd-advantages__grid {
        grid-template-columns: 1fr;
    }

    .prd-specifications__list,
    .prd-standards__list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .prd-faq__layout {
        grid-template-columns: 1fr;
    }

    .prd-faq .prd-section-head {
        position: static;
    }

    .prd-form {
        grid-template-columns: 1fr;
        padding: 27px 20px;
    }

    .prd-form__full,
    .prd-form__submit {
        grid-column: auto;
    }

    .prd-actions {
        display: grid;
        width: 100%;
    }

    .prd-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .prd-hero h1 {
        font-size: 39px;
    }

    .prd-product__media {
        min-height: 340px;
    }

    .prd-product__media img {
        height: 285px;
        max-height: 285px;
    }

    .prd-standards__list {
        grid-template-columns: 1fr;
    }
}

/* ========================================================
   PRODUCTS SINGLE LINE TITLES V2
   Smaller Hero and Product Titles
   ======================================================== */

/*
 * تیتر اصلی:
 * انواع سی هوک صنعتی و مهندسی‌شده
 * در دسکتاپ روی یک خط نمایش داده شود.
 */

.prd-hero h1 {
    width: max-content;
    max-width: none;
    margin-top: 23px;
    white-space: nowrap;
    font-size:
        clamp(
            40px,
            4.15vw,
            62px
        );
    line-height: 1.3;
    letter-spacing: -0.04em;
}

.prd-hero h1 strong {
    display: inline;
    margin-right: 0.18em;
}

.prd-hero h1 strong::after {
    width: 96px;
    height: 4px;
    margin-top: 17px;
}

/*
 * تیتر محصول‌ها:
 * سی هوک استاندارد
 * سی هوک کویل باریک
 * سی هوک گردان موتوردار
 * سی هوک سفارشی
 *
 * همگی در دسکتاپ یک‌خطی باشند.
 */

.prd-product__content h2 {
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    font-size:
        clamp(
            25px,
            2.15vw,
            34px
        );
    line-height: 1.45;
    letter-spacing: -0.025em;
}

/*
 * در نمایشگرهایی که عرض محتوا کمتر است،
 * کمی کوچک‌تر شوند تا همچنان یک‌خطی بمانند.
 */

@media (
    min-width: 1101px
)
and (
    max-width: 1320px
) {
    .prd-hero h1 {
        font-size:
            clamp(
                37px,
                3.7vw,
                52px
            );
    }

    .prd-product__content h2 {
        font-size:
            clamp(
                23px,
                2vw,
                30px
            );
    }
}

/*
 * در تبلت Hero یک‌ستونه است،
 * بنابراین هنوز تیتر یک‌خطی باقی می‌ماند.
 */

@media (
    min-width: 781px
)
and (
    max-width: 1100px
) {
    .prd-hero h1 {
        font-size:
            clamp(
                38px,
                5.3vw,
                54px
            );
    }

    .prd-product__content h2 {
        font-size: 31px;
    }
}

/*
 * در موبایل به‌دلیل عرض کم،
 * شکستن طبیعی خط مجاز باشد تا از صفحه بیرون نزند.
 */

@media (max-width: 780px) {
    .prd-hero h1 {
        width: auto;
        max-width: 100%;
        white-space: normal;
        font-size:
            clamp(
                36px,
                9.8vw,
                48px
            );
        line-height: 1.35;
    }

    .prd-hero h1 strong {
        display: block;
        margin-right: 0;
    }

    .prd-product__content h2 {
        width: auto;
        max-width: 100%;
        white-space: normal;
        font-size:
            clamp(
                25px,
                7vw,
                31px
            );
    }
}

@media (max-width: 480px) {
    .prd-hero h1 {
        font-size: 35px;
    }

    .prd-product__content h2 {
        font-size: 26px;
    }
}

/* ========================================================
   PRODUCTS HERO TWO LINE TITLE V3
   Prevent Title Overlap With Product Render
   ======================================================== */

/*
 * Hero Title:
 *
 * خط اول: انواع سی هوک
 * خط دوم: صنعتی و مهندسی‌شده
 *
 * عرض تیتر محدود می‌شود تا وارد فضای رندر نشود.
 */

.prd-hero h1 {
    width: 100%;
    max-width: 720px;
    white-space: normal;
    font-size:
        clamp(
            42px,
            4.25vw,
            64px
        );
    line-height: 1.28;
    letter-spacing: -0.04em;
}

.prd-hero h1 strong {
    display: block;
    margin-right: 0;
    margin-top: 3px;
    white-space: nowrap;
}

.prd-hero h1 strong::after {
    width: 96px;
    height: 4px;
    margin-top: 17px;
}

/*
 * در عرض‌های متوسط، خط دوم کمی کوچک‌تر می‌شود
 * تا همچنان وارد محدوده تصویر نشود.
 */

@media (
    min-width: 1101px
)
and (
    max-width: 1350px
) {
    .prd-hero h1 {
        max-width: 620px;
        font-size:
            clamp(
                38px,
                3.8vw,
                52px
            );
    }
}

/*
 * در تبلت که Hero تک‌ستونه است،
 * تیتر همچنان دو خطی می‌ماند.
 */

@media (
    min-width: 781px
)
and (
    max-width: 1100px
) {
    .prd-hero h1 {
        max-width: 760px;
        font-size:
            clamp(
                42px,
                6vw,
                58px
            );
    }
}

/*
 * موبایل:
 * خط دوم در صورت نیاز مجاز به شکستن باشد.
 */

@media (max-width: 780px) {
    .prd-hero h1 {
        max-width: 100%;
        font-size:
            clamp(
                35px,
                9.4vw,
                47px
            );
        line-height: 1.38;
    }

    .prd-hero h1 strong {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .prd-hero h1 {
        font-size: 34px;
    }
}