/* Hida product landing – لندینگ محصول نفیس */
.hp-page {
    padding-bottom: 180px;
}

.hp-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #e8e4dc;
}

.hp-hero__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 440px;
    object-fit: cover;
    object-position: center;
}

.hp-body {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
    gap: 32px;
    align-items: start;
    margin-top: 28px;
}

/* ستون تصاویر + متون زیرشان */
.hp-side {
    min-width: 0;
}

/* گالری تصاویر – اسکرول عمودی وقتی تصویر زیاد است */
.hp-gallery {
    max-height: 1100px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 6px;
    margin-bottom: 28px;
    scrollbar-width: thin;
    scrollbar-color: #c9b087 #f0f0f0;
}

.hp-gallery::-webkit-scrollbar {
    width: 6px;
}

.hp-gallery::-webkit-scrollbar-thumb {
    background: #c9b087;
    border-radius: 3px;
}

.hp-gallery__item {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    background: #fff;
}

.hp-gallery__item:last-child {
    margin-bottom: 0;
}

.hp-gallery__img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* محتوا و فرم */
.hp-content__title {
    margin: 0 0 16px;
    color: #c1272d;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.6;
}

.hp-content__text {
    margin: 0 0 1.1em;
    color: #333;
    font-size: 14px;
    line-height: 2.1;
    text-align: justify;
    text-align-last: right;
}

.hp-content__subtitle {
    margin: 22px 0 10px;
    color: #c1272d;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
}

.hp-features {
    margin: 0 0 1em;
    padding: 0 1.2em 0 0;
    list-style: none;
}

.hp-features li {
    position: relative;
    margin-bottom: 0.4em;
    font-size: 14px;
    line-height: 1.9;
    color: #333;
}

.hp-features li::before {
    content: "•";
    position: absolute;
    right: -1em;
    color: #c1272d;
}

/* فرم شخصی‌سازی – مینیمال */
.hp-form {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid #ebebeb;
    font-family: dana5, Tahoma, sans-serif;
    font-feature-settings: "ss02";
}

.hp-form,
.hp-form *,
.hp-form select,
.hp-form option,
.hp-form textarea,
.hp-form input,
.hp-form button,
.hp-form label {
    font-family: dana5, Tahoma, sans-serif !important;
    font-feature-settings: "ss02";
}

.hp-form__title {
    margin: 0 0 28px;
    color: #c1272d;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
}

.hp-field {
    margin-bottom: 26px;
}

.hp-field__label {
    display: block;
    margin-bottom: 12px;
    color: #222;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.6;
}

.hp-field__hint {
    display: block;
    margin-top: 8px;
    color: #999;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
}

/* رنگ‌ها */
.hp-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hp-swatch {
    position: relative;
    cursor: pointer;
}

.hp-swatch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.hp-swatch__circle {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.hp-swatch input:checked + .hp-swatch__circle {
    border-color: transparent;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #c1272d;
}

.hp-swatch__circle--gold { background: linear-gradient(135deg, #d4af37, #f5e6a3); }
.hp-swatch__circle--silver { background: linear-gradient(135deg, #aaa, #eee); }
.hp-swatch__circle--wood1 { background: #c4a574; }
.hp-swatch__circle--wood2 { background: #a67c52; }
.hp-swatch__circle--wood3 { background: #8b6914; }
.hp-swatch__circle--wood4 { background: #5c4033; }

.hp-swatch__name {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 400;
    color: #888;
    text-align: center;
}

/* فیلدهای متنی و سلکت – فونت یکسان با صفحه */
.hp-select,
.hp-textarea,
.hp-form input[type="text"],
.hp-form input[type="url"] {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.7;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    transition: border-color 0.2s;
}

.hp-select {
    max-width: 340px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M1.4.6L6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-left: 36px;
    cursor: pointer;
}

.hp-select:focus,
.hp-textarea:focus,
.hp-form input[type="text"]:focus,
.hp-form input[type="url"]:focus {
    border-color: #bbb;
    outline: none;
}

.hp-select option {
    font-weight: 400;
}

/* placeholder کم‌رنگ */
.hp-form ::placeholder,
.hp-textarea::placeholder,
.hp-form input::placeholder {
    color: #b0b0b0 !important;
    opacity: 1 !important;
    font-weight: 300 !important;
}

.hp-form ::-webkit-input-placeholder {
    color: #b0b0b0 !important;
    font-weight: 300 !important;
}

.hp-form ::-moz-placeholder {
    color: #b0b0b0 !important;
    opacity: 1 !important;
    font-weight: 300 !important;
}

.hp-form :-ms-input-placeholder {
    color: #b0b0b0 !important;
    font-weight: 300 !important;
}

/* حکاکی روی ابزار */
.hp-engrave-block {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
    padding: 16px 0 20px;
    border-bottom: 1px solid #f0f0f0;
}

.hp-engrave-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.hp-engrave-block__name {
    flex: 0 0 100%;
    margin: 0 0 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: #666;
}

.hp-engrave-block__diagram {
    flex: 0 0 180px;
    max-width: 100%;
}

.hp-engrave-block__diagram img {
    display: block;
    width: 100%;
    height: auto;
}

.hp-engrave-block__options {
    flex: 1;
    min-width: 140px;
    padding-top: 4px;
}

.hp-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    color: #444;
}

.hp-radio input {
    flex-shrink: 0;
    accent-color: #c1272d;
}

/* پلاک */
.hp-plaques {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hp-plaque {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.hp-plaque:hover {
    background: #fafafa;
}

.hp-plaque:has(input:checked) {
    border-color: #e0e0e0;
    background: #fafafa;
}

.hp-plaque input {
    flex-shrink: 0;
    accent-color: #c1272d;
}

.hp-plaque__img {
    display: block;
    width: 110px;
    height: auto;
    border: none;
}

.hp-plaque input:checked ~ .hp-plaque__img {
    border: none;
    box-shadow: none;
}

/* محل نصب پلاک */
.hp-placement {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.hp-placement__option {
    flex: 0 0 auto;
    padding: 12px 14px;
    border: 1px solid #eee;
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.hp-placement__option:hover {
    background: #fafafa;
}

.hp-placement__option:has(input:checked) {
    border-color: #c1272d;
    background: #fff;
}

.hp-placement__option input {
    display: block;
    margin: 0 auto 10px;
    accent-color: #c1272d;
}

.hp-placement__img {
    display: block;
    width: 88px;
    height: auto;
    margin: 0 auto;
    border: none;
}

.hp-placement__option input:checked ~ .hp-placement__img {
    border: none;
}

.hp-placement__label {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 400;
    color: #555;
}

/* آپلود */
.hp-upload-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.hp-upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 88px;
    padding: 10px;
    border: 1px dashed #ccc;
    background: #fcfcfc;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}

.hp-upload-box:hover {
    border-color: #c1272d;
    background: #fff;
}

.hp-upload-box input {
    display: none;
}

.hp-upload-box__icon {
    font-size: 20px;
    color: #bbb;
    margin-bottom: 6px;
    font-weight: 300;
}

.hp-upload-box__text {
    font-size: 11px;
    font-weight: 400;
    color: #999;
    line-height: 1.4;
}

.hp-textarea {
    min-height: 72px;
    resize: vertical;
}

.hp-textarea--lg {
    min-height: 96px;
}

/* مخفی کردن بخش‌های فرم بر اساس نوع محصول */
[data-hida-form-section] {
    display: none;
}

.hp-page[data-form-variant="wrench"] [data-hida-form-section*="wrench"],
.hp-page[data-form-variant="wrench"] [data-hida-form-section*="common"],
.hp-page[data-form-variant="locking-pliers"] [data-hida-form-section*="locking-pliers"],
.hp-page[data-form-variant="locking-pliers"] [data-hida-form-section*="common"],
.hp-page[data-form-variant="engineer-hammer"] [data-hida-form-section*="engineer-hammer"],
.hp-page[data-form-variant="engineer-hammer"] [data-hida-form-section*="handle-color"],
.hp-page[data-form-variant="engineer-hammer"] [data-hida-form-section*="common"],
.hp-page[data-form-variant="claw-hammer"] [data-hida-form-section*="claw-hammer"],
.hp-page[data-form-variant="claw-hammer"] [data-hida-form-section*="common"],
.hp-page[data-form-variant="tool-set"] [data-hida-form-section*="tool-set"],
.hp-page[data-form-variant="tool-set"] [data-hida-form-section*="common"],
.hp-page[data-form-variant="wood-set"] [data-hida-form-section*="wood-set"],
.hp-page[data-form-variant="wood-set"] [data-hida-form-section*="common"],
.hp-page[data-form-variant="axe"] [data-hida-form-section*="axe"],
.hp-page[data-form-variant="axe"] [data-hida-form-section*="handle-color"],
.hp-page[data-form-variant="axe"] [data-hida-form-section*="common"],
.hp-page[data-form-variant="pliers"] [data-hida-form-section="engrave-pliers"],
.hp-page[data-form-variant="pliers"] [data-hida-form-section*="common"],
.hp-page[data-form-variant="all"] [data-hida-form-section] {
    display: block;
}

.hp-engrave-block[data-hida-form-section] {
    display: none;
}

.hp-page[data-form-variant="wrench"] [data-hida-form-section="engrave-wrench"],
.hp-page[data-form-variant="locking-pliers"] [data-hida-form-section="engrave-locking-pliers"],
.hp-page[data-form-variant="engineer-hammer"] [data-hida-form-section="engrave-engineer-hammer"],
.hp-page[data-form-variant="claw-hammer"] [data-hida-form-section="engrave-claw-hammer"],
.hp-page[data-form-variant="tool-set"] [data-hida-form-section^="engrave-set-"],
.hp-page[data-form-variant="wood-set"] [data-hida-form-section^="engrave-wood-"],
.hp-page[data-form-variant="axe"] [data-hida-form-section="engrave-axe"],
.hp-page[data-form-variant="pliers"] [data-hida-form-section="engrave-pliers"],
.hp-page[data-form-variant="all"] .hp-engrave-block[data-hida-form-section] {
    display: flex;
}

/* راهنما – زیر تصاویر ستون گالری */
.hp-guide {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid #e5e5e5;
}

.hp-guide__title {
    margin: 0 0 12px;
    color: #c1272d;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
}

.hp-guide__title + .hp-guide__title,
.hp-guide__text + .hp-guide__title,
.hp-guide__list + .hp-guide__title {
    margin-top: 22px;
}

.hp-guide__text {
    margin: 0 0 1em;
    color: #333;
    font-size: 13.5px;
    line-height: 2;
    text-align: justify;
    text-align-last: right;
}

.hp-guide__list {
    margin: 0 0 1em;
    padding: 0 1.2em 0 0;
    list-style: none;
}

.hp-guide__list li {
    position: relative;
    margin-bottom: 0.35em;
    font-size: 13.5px;
    line-height: 1.9;
    color: #333;
}

.hp-guide__list li::before {
    content: "•";
    position: absolute;
    right: -1em;
    color: #c1272d;
}

.hp-form__submit {
    margin-top: 28px;
    text-align: center;
}

.hp-form__btn {
    display: inline-block;
    padding: 13px 40px;
    background: #1a1a1a;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #1a1a1a;
    border-radius: 2px;
    cursor: pointer;
    letter-spacing: 0;
    transition: background 0.2s, color 0.2s;
}

.hp-form__btn:hover {
    background: #fff;
    color: #1a1a1a;
}

@media (max-width: 991px) {
    .hp-body {
        grid-template-columns: 1fr;
    }

    .hp-side {
        order: -1;
    }

    .hp-gallery {
        max-height: 720px;
    }
}

@media (max-width: 767px) {
    .hp-hero__img {
        max-height: 220px;
    }

    .hp-content__title {
        font-size: 18px;
    }

    .hp-engrave-block {
        flex-direction: column;
    }

    .hp-engrave-block__diagram {
        flex: none;
        width: 100%;
        max-width: 220px;
    }
}