/* ==============================================
   home.css  –  ksport Homepage Sections
   ============================================== */

/* ------ Utility ------ */
.text-red   { color: var(--navy) !important; }
.bg-red     { background: var(--navy) !important; }
.bg-red-light { background: #fff0f2 !important; }

/* Header is sticky (in normal flow) — no top offset needed; sits right under the red header border */
.section-mainslider-box { margin-top: 0; }

/* ── Section Header (title + "see all" link) ───────────── */
.home-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.home-sec-title {
    font-size: 2rem;
    color: #1a1a1a;
    position: relative;
    padding-right: 1.4rem;
}

.home-sec-title::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 2.2rem;
    background: var(--navy);
    border-radius: 4px;
}

.home-sec-more {
    font-size: 1.3rem;
    color: var(--navy) !important;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: gap .2s;
}

.home-sec-more:hover { gap: .8rem; }

/* ══════════════════════════════════════════════
   FEATURES BAR
══════════════════════════════════════════════ */
.home-features-bar {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border-radius: 15px;
    margin: 2rem 0;
}

.hf-list {
    display: flex !important;
    align-items: stretch;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.hf-item {
    display: flex !important;
    align-items: center;
    gap: 1.2rem;
    padding: 1.8rem 2rem;
    flex: 1;
    min-width: 16rem;
    border-left: 1px solid #f0f0f0;
    transition: background .2s;
}

.hf-item:last-child { border-left: none; }
.hf-item:hover { background: #fff8f9; }

.hf-icon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--navy);
    flex-shrink: 0;
}

.hf-title {
    font-size: 1.3rem;
    color: #222;
    display: block;
    line-height: 1.6;
    font-weight: bold !important;
}

.hf-sub {
    font-size: 1.1rem;
    color: #aaa;
    display: block;
    line-height: 1.4;
}

@media (max-width: 767px) {
    .hf-item {
        width: 50%;
        flex: none;
        border-bottom: 1px solid #f0f0f0;
        border-left: none;
    }
    .hf-item:nth-child(odd) { border-left: 1px solid #f0f0f0; }
    .hf-item:last-child:nth-child(odd) { border-left: none; }
}

/* ══════════════════════════════════════════════
   CATEGORY SECTION
══════════════════════════════════════════════ */
.home-categories { padding-top: 1rem; }

.hcat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.hcat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    text-decoration: none;
    width: calc(12.5% - 1.5rem);
    min-width: 8rem;
    transition: transform .25s;
}

.hcat-item:hover { transform: translateY(-5px); }

.hcat-img {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1rem;
    transition: box-shadow .25s;
}

.hcat-item:hover .hcat-img {
    box-shadow: 0 8px 24px rgba(12, 31, 63, .2);
}

.hcat-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hcat-name {
    font-size: 1.25rem;
    color: #444;
    text-align: center;
    transition: color .2s;
}

.hcat-item:hover .hcat-name { color: var(--navy); }

@media (max-width: 991px) {
    .hcat-item { width: calc(25% - 1.5rem); }
}

@media (max-width: 575px) {
    .hcat-item { width: calc(33.33% - 1rem); }
    .hcat-img  { width: 6.5rem; height: 6.5rem; }
}

/* ══════════════════════════════════════════════
   PRODUCT CARD (shared by offers + grid)
══════════════════════════════════════════════ */
.hprod-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    text-decoration: none !important;
    transition: box-shadow .25s, transform .25s;
    position: relative;
    height: 100%;
}

.hprod-card:hover {
    box-shadow: 0 8px 28px rgba(12, 31, 63, .13);
    transform: translateY(-4px);
}

.hprod-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--navy);
    color: #fff;
    border-radius: 50%;
    width: 3.8rem;
    height: 3.8rem;
    font-size: 1.2rem;
    font-family: "iransans-fa";
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-weight: bold !important;
}

.hprod-img {
    width: 100%;
    height: 20rem;
    overflow: hidden;
    background: #f9f9f9;
}

.hprod-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
    display: block;
}

.hprod-card:hover .hprod-img img { transform: scale(1.06); }

.hprod-body {
    padding: 1.2rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hprod-name {
    font-size: 1.35rem;
    color: #222;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .6rem;
}

.hprod-stars {
    font-size: 1.2rem;
    color: #f5a623;
    margin-bottom: .6rem;
}

.hprod-stars span { color: #aaa; font-size: 1.1rem; }

.hprod-price-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: auto;
    margin-bottom: 1rem;
    gap: .2rem;
}

.hprod-old-price {
    font-size: 1.2rem;
    color: #bbb;
    text-decoration: line-through;
    font-family: "iransans-fa";
}

.hprod-price {
    font-size: 1.5rem;
    color: var(--navy);
    font-weight: bold !important;
    font-family: "iransans-fa";
}

.hprod-btn {
    width: 100%;
    background: transparent;
    border: 1.5px solid var(--navy);
    color: var(--navy);
    border-radius: 8px;
    padding: .8rem;
    font-size: 1.25rem;
    font-family: "IRANYekanMedium";
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.hprod-btn:hover {
    background: var(--navy);
    color: #fff;
}

/* ══════════════════════════════════════════════
   SPECIAL OFFERS SECTION
══════════════════════════════════════════════ */
.home-offers { background: #fff3f4; padding: 3rem 0; }

.home-offers-wrap {
    display: flex;
    gap: 2rem;
    align-items: stretch;
}

.home-offers-sidebar {
    width: 18rem;
    flex-shrink: 0;
    background: var(--navy);
    border-radius: 15px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #fff;
}

.home-offers-head {
    color: #fff;
    margin-bottom: 2rem;
}

.home-offers-head a {
    color: rgba(255,255,255,.8) !important;
    font-size: 1.25rem;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 20px;
    padding: .3rem 1.2rem;
    display: inline-block;
    margin-top: .8rem;
    transition: all .2s;
}

.home-offers-head a:hover {
    background: rgba(255,255,255,.15);
    color: #fff !important;
}

.home-offers-timer { width: 100%; }

.hot-label {
    display: block;
    font-size: 1.2rem;
    color: rgba(255,255,255,.7);
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.2);
    padding-bottom: 1rem;
}

.timer-boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.timer-box {
    background: rgba(0,0,0,.2);
    border-radius: 8px;
    padding: .8rem;
    min-width: 4.5rem;
    text-align: center;
}

.timer-num {
    font-size: 2rem;
    font-weight: bold !important;
    display: block;
    line-height: 1;
}

.timer-lbl {
    font-size: 1rem;
    color: rgba(255,255,255,.7);
    display: block;
    margin-top: .3rem;
}

.timer-sep {
    font-size: 2rem;
    font-weight: bold !important;
    color: rgba(255,255,255,.6);
    margin-bottom: .8rem;
}

.home-offers-products {
    flex: 1;
    min-width: 0;
}

/* Offers owl override */
.home-offers-products .hprod-card { background: #fff; }
.home-offers-products .hprod-img  { height: 17rem; }

@media (max-width: 991px) {
    .home-offers-wrap   { flex-direction: column; }
    .home-offers-sidebar { width: 100%; padding: 1.5rem; flex-direction: row; justify-content: space-between; }
    .home-offers-head   { margin-bottom: 0; text-align: right; }
    .home-offers-timer  { width: auto; }
}

/* ══════════════════════════════════════════════
   BANNERS
══════════════════════════════════════════════ */
.hbanner-row {
    display: flex;
    gap: 1.5rem;
}

.hbanner-item {
    flex: 1;
    display: block;
    position: relative;
    max-height: 25rem;
    min-height: 18rem;
}

.hbanner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.hbanner-item:hover img { transform: scale(1.03); }

.hbanner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    gap: .8rem;
}

.hbanner-tag {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    font-size: 1.2rem;
    padding: .3rem 1rem;
    border-radius: 20px;
    align-self: flex-start;
}

.hbanner-cta {
    font-size: 1.4rem;
    color: #fff;
    font-weight: bold !important;
}

@media (max-width: 767px) {
    .hbanner-row { flex-direction: column; }
}

/* 4-column banners */
.hbanner-row-4 {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hbanner4-item {
    flex: 1;
    min-width: calc(25% - 1rem);
    display: block;
    max-height: 18rem;
}

.hbanner4-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}

.hbanner4-item:hover img { transform: scale(1.04); }

@media (max-width: 767px) {
    .hbanner4-item { min-width: calc(50% - .5rem); }
}

/* ══════════════════════════════════════════════
   LATEST PRODUCTS GRID
══════════════════════════════════════════════ */
.hlp-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.hlp-grid .hprod-card {
    width: calc(20% - 1.5rem);
    min-width: 18rem;
}

.hlp-grid .hprod-img { height: 22rem; }

@media (max-width: 1199px) {
    .hlp-grid .hprod-card { width: calc(25% - 1.5rem); }
}

@media (max-width: 991px) {
    .hlp-grid .hprod-card { width: calc(33.33% - 1rem); }
}

@media (max-width: 767px) {
    .hlp-grid .hprod-card { width: calc(50% - .75rem); min-width: auto; }
    .hlp-grid .hprod-img  { height: 17rem; }
}

@media (max-width: 480px) {
    .hlp-grid .hprod-card { width: 100%; }
}

/* ══════════════════════════════════════════════
   BEST SELLERS
══════════════════════════════════════════════ */
.home-bestsellers { background: #fff; padding: 3rem 0; border-radius: 15px; }

.hbs-grid .hbs-col {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    border: 1px solid #f0f0f0;
}

.hbs-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none !important;
    transition: background .2s;
}

.hbs-item:last-child { border-bottom: none; }
.hbs-item:hover { background: #fff8f9; }

.hbs-rank {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: #f5f5f5;
    color: #888;
    font-size: 1.3rem;
    font-family: "iransans-fa";
    font-weight: bold !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hbs-item:nth-child(1) .hbs-rank { background: #ffd700; color: #fff; }
.hbs-item:nth-child(2) .hbs-rank { background: #c0c0c0; color: #fff; }
.hbs-item:nth-child(3) .hbs-rank { background: #cd7f32; color: #fff; }

.hbs-img {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
}

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

.hbs-info {
    flex: 1;
    min-width: 0;
}

.hbs-name {
    font-size: 1.3rem;
    color: #333;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .4rem;
}

.hbs-item:hover .hbs-name { color: var(--navy); }

.hbs-price {
    font-size: 1.2rem;
    color: var(--navy);
    font-family: "iransans-fa";
}

/* ══════════════════════════════════════════════
   BRANDS SECTION
══════════════════════════════════════════════ */
.home-brands { background: #fff; padding: 1.5rem 0; }

.hbrand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    transition: all .2s;
    height: 8rem;
    margin: 0 .5rem;
}

.hbrand-item:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.1);
    border-color: #e0e0e0;
}

.hbrand-item img {
    width: 100%;
    max-height: 5rem;
    object-fit: contain;
    filter: grayscale(60%);
    transition: filter .2s;
}

.hbrand-item:hover img { filter: grayscale(0%); }

/* ══════════════════════════════════════════════
   LAST BLOGS (homepage version)
══════════════════════════════════════════════ */
.section-lastblogs { background: #f8f8f8; }

.artcle-list-box .title-box .title {
    color: #1a1a1a;
    position: relative;
    padding-right: 1.5rem;
}

.artcle-list-box .title-box .title::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 2.4rem;
    background: var(--navy);
    border-radius: 4px;
}

.artcle-list-box .see-more {
    background-color: var(--navy);
    color: #fff !important;
    text-decoration: none;
    transition: background .2s;
    font-size: 1.3rem;
}

.artcle-list-box .see-more:hover { background-color: var(--accent-800); }

.section-lastblogs .article-item {
    height: 100%;
    border: 1px solid #f0f0f0;
    transition: box-shadow .25s, transform .25s;
}

.section-lastblogs .article-item:hover {
    box-shadow: 0 8px 28px rgba(12, 31, 63, .14);
    transform: translateY(-4px);
}

.section-lastblogs .article-item .image-box {
    height: 18rem;
    overflow: hidden;
}

.section-lastblogs .article-item .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
    display: block;
}

.section-lastblogs .article-item:hover .image-box img { transform: scale(1.06); }

.section-lastblogs .lb-no-img { height: 18rem; background: #f5f5f5; }

.section-lastblogs .title-blog::before { display: none !important; }

.section-lastblogs .title-blog {
    color: #1e1e1e;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section-lastblogs .lb-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.7;
    color: #888;
    flex: 1;
}

.section-lastblogs .lb-meta {
    border-top: 1px solid #f0f0f0;
    font-family: "iransans-fa";
}

.section-lastblogs .lb-read-btn {
    background: var(--navy);
    color: #fff;
    border-radius: 20px;
    padding: .3rem 1.2rem;
    font-size: 1.15rem;
    transition: background .2s;
}

.section-lastblogs .article-item:hover .lb-read-btn { background: var(--accent-800); }

.section-lastblogs .contentarticle-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 14rem;
}

.section-lastblogs .owl-stage { display: flex !important; }
.section-lastblogs .owl-item  { display: flex; flex-direction: column; }
.section-lastblogs .owl-item .article-item { height: 100% !important; display: flex; flex-direction: column; }
.section-lastblogs .owl-item .article-item-link { flex: 1; }

/* ══════════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════════ */
.home-newsletter { padding: 4rem 0; }

.hnl-wrap {
    background: linear-gradient(135deg, var(--navy) 0%, var(--accent-800) 100%);
    border-radius: 20px;
    padding: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
    color: #fff;
}

.hnl-info { flex: 1; min-width: 20rem; }
.hnl-info h3 { color: #fff; }
.hnl-info p  { color: rgba(255,255,255,.8); }

.hnl-form {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-width: 28rem;
    max-width: 48rem;
}

.hnl-input {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 1.2rem 1.8rem;
    font-size: 1.35rem;
    font-family: "IRANYekanMedium";
    outline: none;
}

.hnl-btn {
    background: #fff;
    color: var(--navy);
    border: none;
    border-radius: 10px;
    padding: 1.2rem 3rem;
    font-size: 1.35rem;
    font-family: "IRANYekanMedium";
    font-weight: bold !important;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}

.hnl-btn:hover { background: #f5f5f5; }

@media (max-width: 767px) {
    .hnl-wrap  { padding: 2.5rem; }
    .hnl-form  { flex-direction: column; min-width: 0; }
    .hnl-input { min-width: 0; }
}

.home-offers-products.owl-few .owl-stage { display: flex; }
.home-offers-products.owl-few .owl-item { max-width: 26rem; }
.home-offers-products.owl-few .owl-nav,
.home-offers-products.owl-few .owl-dots { display: none; }

.card-offer-timer {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .6rem 0 .2rem;
    padding: .45rem .7rem;
    border-radius: .8rem;
    background: #fdecef;
    border: 1px solid var(--accent-200);
    font-size: 1.2rem;
    color: var(--navy);
    font-weight: 700;
}
/* برچسب همهٔ فضای خالی را می‌گیرد، پس ساعت و روز با هم به انتهای ردیف
   (= چپ) می‌روند و بینشان فقط gap می‌ماند. حاشیهٔ خودکار روی خودِ ساعت این
   کار را نمی‌کرد: روز که با order بعدش می‌نشیند از آن جدا می‌افتاد. */
.card-offer-timer .cot-label { font-weight: 500; color: var(--muted); font-size: 1.1rem; margin-inline-end: auto; }
.card-offer-timer .cot-clock { direction: ltr; letter-spacing: .5px; }
/* «[۲ روز]» فارسی است، پس rtl. با order آخرِ ردیف می‌نشیند، یعنی **چپِ ساعت**؛
   حاشیهٔ خودکار روی ساعت است (که حالا اولِ این دو تاست) و همان جفت را با هم به
   انتهای ردیف هل می‌دهد، پس بینِ روز و ساعت فقط gap می‌ماند. */
.card-offer-timer .cot-days { direction: rtl; white-space: nowrap; order: 1; }
/* برچسب و ساعت هر کدام یک واحدند: بدونِ این، «پایان پیشنهاد تا» و «۶ روز و
   ۲۳:۱۷» وسطِ خودشان می‌شکستند و کارت دو خطِ نامرتب نشان می‌داد. */
.card-offer-timer { flex-wrap: nowrap; }
.card-offer-timer .cot-label,
.card-offer-timer .cot-clock { white-space: nowrap; }
.card-offer-timer.is-over { background: #f2f2f2; border-color: #e0e0e0; color: #888; }
.card-offer-timer.is-over .cot-label { color: #999; }

.home-offers-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 22rem;
    padding: 3rem 2rem;
    background: #fff;
    border: 1px dashed #e3d3d6;
    border-radius: 12px;
    color: #777;
}
.home-offers-empty i { font-size: 3.2rem; color: var(--navy); margin-bottom: 1rem; }
.home-offers-empty p { margin: 0 0 .6rem; font-size: 1.6rem; font-weight: 700; color: #444; }
.home-offers-empty span { font-size: 1.3rem; color: #999; }
.home-offers-empty-btn {
    margin-top: 1.4rem;
    padding: .7rem 1.8rem;
    border-radius: 24px;
    background: var(--navy);
    color: #fff;
    font-size: 1.3rem;
    text-decoration: none;
}
.home-offers-empty-btn:hover { background: var(--accent-700); color: #fff; }

.banner-zone-grid {
    display: grid;
    grid-template-columns: repeat(var(--bz-cols, 1), 1fr);
    gap: var(--bz-gap, 16px);
}
.banner-zone-item {
    display: block;
    border-radius: 15px;
    overflow: hidden;
    line-height: 0;
}
.banner-zone-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.banner-zone-item:hover img { transform: scale(1.04); }
.banner-zone-item picture { display: block; line-height: 0; }

.banner-zone-item .bz-mobile { display: none; }
.banner-zone-item .bz-desktop { display: block; }
@media (max-width: 575px) {
    .banner-zone-item .bz-mobile { display: block; }
    .banner-zone-item .bz-desktop { display: none; }
}

@media (max-width: 767px) {
    .banner-zone-grid { grid-template-columns: repeat(var(--bz-cols-mobile, 1), 1fr); }
}

/* موبایل: زونی که بیش از یک بنر دارد به‌جای گریدِ فشرده یک ردیفِ swipe می‌شود.
   بنرِ بعدی کمی پیداست تا معلوم شود کشیدنی است — همان قاعدهٔ نوارِ ویژگی‌ها.
   کلاسِ banner-zone-slider را خودِ partial وقتی Banners.Count > 1 است می‌گذارد؛
   با یک بنر هیچ‌چیز عوض نمی‌شود. */
@media (max-width: 767px) {
    .banner-zone-slider .banner-zone-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: .4rem;
    }
    .banner-zone-slider .banner-zone-grid::-webkit-scrollbar { display: none; }
    .banner-zone-slider .banner-zone-item {
        flex: 0 0 86%;
        scroll-snap-align: center;
    }
}

.product-block-carousel.owl-few .owl-stage { display: flex; }
.product-block-carousel.owl-few .owl-item { max-width: 26rem; }
.product-block-carousel.owl-few .owl-nav,
.product-block-carousel.owl-few .owl-dots { display: none; }

.error-box {
    max-width: 62rem;
    margin: 0 auto 4rem;
    padding: 4rem 2rem;
    background: #fff;
    border-radius: 16px;
}
.error-code { font-size: 8rem; font-weight: 900; color: var(--navy); line-height: 1; }
.error-title { font-size: 2.2rem; font-weight: 700; margin: 1rem 0 .8rem; color: #333; }
.error-desc { font-size: 1.4rem; color: #777; margin-bottom: 1rem; }
.error-path {
    display: inline-block; font-size: 1.2rem; color: #aaa;
    background: #f6f6f6; padding: .4rem 1rem; border-radius: 8px; margin-bottom: 2rem;
}

.error-trace {
    display: inline-block;
    margin: 0 auto 2rem;
    padding: 1.2rem 1.6rem;
    font-size: 1.3rem;
    color: #555;
    background: #fafafa;
    border: 1px dashed #ddd;
    border-radius: 12px;
}
.error-trace code {
    display: inline-block;
    padding: .2rem .8rem;
    font-family: Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: 1px;
    color: #fff;
    background: #333;
    border-radius: 8px;
    user-select: all;
}
.error-trace small { display: block; margin-top: .8rem; font-size: 1.2rem; color: #999; }

.error-search { display: flex; gap: .8rem; max-width: 46rem; margin: 0 auto 2rem; }
.error-search-input {
    flex: 1; padding: 1.1rem 1.4rem; font-size: 1.4rem;
    border: 1px solid #e2e2e2; border-radius: 12px; outline: none;
}
.error-search-input:focus { border-color: var(--navy); }
.error-search-btn {
    padding: 1.1rem 2.2rem; font-size: 1.4rem; border: 0; border-radius: 12px;
    background: var(--navy); color: #fff; cursor: pointer;
}
.error-search-btn:hover { background: var(--accent-700); }
.error-actions { display: flex; gap: 1rem; justify-content: center; }
.error-btn {
    padding: .9rem 2rem; border-radius: 24px; font-size: 1.3rem;
    border: 1px solid #e2e2e2; color: #555; text-decoration: none;
}
.error-btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.error-btn:hover { border-color: var(--navy); color: var(--navy); }
.error-btn-primary:hover { background: var(--accent-700); color: #fff; }

.error-sec-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 1.6rem; color: #333; }
.error-cats { margin-bottom: 4rem; }
.error-cat-list { display: flex; flex-wrap: wrap; gap: .8rem; }
.error-cat {
    padding: .8rem 1.6rem; border-radius: 24px; background: #fff;
    border: 1px solid #eee; font-size: 1.3rem; color: #555; text-decoration: none;
}
.error-cat:hover { border-color: var(--navy); color: var(--navy); }

.hnl-msg { margin-top: 10px; font-size: 1.3rem; color: #1f9254; }

.artcle-list-box .see-more { flex: 0 0 auto; white-space: nowrap; }
.section-lastblogs .lb-read-btn { white-space: nowrap; }

.section-lastblogs .lb-excerpt { min-height: 0; max-height: 3.4em; }

@media (max-width: 575.98px) {
    .artcle-list-box .title-box { flex-wrap: wrap; gap: 1rem; }
    .artcle-list-box .title-box .title { font-size: 1.7rem; }
    .artcle-list-box .see-more { padding: .8rem 1.6rem !important; }
    .artcle-list-box .see-more .font-14 { font-size: 1.2rem !important; }
    .artcle-list-box .see-more .me-3 { margin-inline-end: .6rem !important; }

    .section-lastblogs .article-item .image-box,
    .section-lastblogs .lb-no-img { height: 15rem; }
    .section-lastblogs .contentarticle-box { min-height: 0; }
    .section-lastblogs .lb-meta { gap: .8rem; }
}

.finder { padding: 24px 0; }

.finder-form {
    padding: 20px;
    border: 1px solid var(--border, #e6e6e6);
    border-radius: var(--r-lg, 18px);
    background: var(--surface, #fff);
}

.finder-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1.7rem;
    color: var(--ink, #222);
}

.finder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
}

.finder-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.finder-field-wide { grid-column: span 2; }

.finder-label { font-size: 1.3rem; color: var(--muted, #666); }

.finder-input {
    width: 100%;
    min-height: var(--hit-min, 44px);
    padding: 0 12px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: var(--r-md, 12px);
    background: var(--surface, #fff);
    font-family: inherit;
    font-size: 1.4rem;
    color: var(--ink, #222);
}
.finder-input:focus { border-color: var(--accent-600, #888); outline: none; }

.finder-submit { min-height: var(--hit-min, 44px); }

.finder-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 1.3rem;
    color: var(--muted, #666);
    cursor: pointer;
}

@media (max-width: 575.98px) {
    .finder-field-wide { grid-column: span 1; }
}

.finder .finder-submit:hover,
.finder .finder-submit:active,
.finder .finder-submit:focus {
    transform: none;
    box-shadow: var(--sh-accent, none);
}