.breadcrumb-bar {
       background: var(--white);
       border-bottom: 1px solid var(--border);
       padding: 12px 0;
   }

   .container {
       max-width: 1350px;
       margin: 0 auto;
   }

   @media (width < 900px) {
       .container {
           padding: 0 24px;
       }
   }

   .breadcrumb {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
       color: var(--gray);
       list-style: none;
       flex-wrap: wrap;
   }

   #home-bottom {
       fill: none;
       color: none;
   }

   .breadcrumb a {
       color: var(--gray);
       text-decoration: none;
       transition: color .2s;
   }

   .breadcrumb a:hover {
       color: var(--main);
   }

   .breadcrumb .sep {
       color: var(--border);
   }

   .breadcrumb .current {
       color: var(--dark);
       font-weight: bold;
   }

   /* ===== Main Layout ===== */
   .product-page {
       padding: 40px 0px 0px;
   }

   .product-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 60px;
       row-gap: 20px;
       align-items: center;
   }

   /* ===== Gallery ===== */
   .pd-desc-figure {
       /* height: 150px; */
       width: 100%;
       max-height: 250px;
       overflow: hidden;
       margin: 20px 0;
       border-radius: var(--border-r);

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

       }
   }

   .main-img-wrap {
       position: relative;
       background: var(--white);
       border-radius: 20px;
       border: 1px solid var(--border);
       overflow: hidden;
       aspect-ratio: 1;
       cursor: zoom-in;
   }

   .main-img-wrap img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       padding: 20px;
       transition: transform .4s ease;
   }

   .main-img-wrap:hover img {
       transform: scale(1.05);
   }

   /* badge موجودی روی عکس */
   .stock-badge {
       padding: 5px 14px;
       border-radius: var(--border-r);
       font-size: 12px;
       font-weight: bold;
       background-color: var(--main);
       color: var(--white);
       position: absolute;
       display: flex;
       align-items: center;
       margin-top: 15px;
       width: fit-content;
       z-index: 55555;

       &.in {
           position: initial;
       }
   }

   .swipe-wrap {
       position: relative;
       overflow: hidden;
       border-radius: 12px;
       touch-action: pan-y;
       cursor: grab;
       user-select: none;
   }

   .swipe-wrap:active {
       cursor: grabbing;
   }

   .swipe-track {
       display: flex;
       transition: transform .35s cubic-bezier(.4, 0, .2, 1);
       will-change: transform;
   }

   .swipe-slide {
       min-width: 100%;
       position: relative;
   }

   .swipe-slide img {
       width: 100%;
       aspect-ratio: 1;
       object-fit: contain;
       display: block;
       pointer-events: none;
   }

   .swipe-dots {
       display: flex;
       justify-content: center;
       gap: 6px;
       margin: 10px 0;
   }

   .swipe-dot {
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: #ccc;
       transition: background .2s, transform .2s;
       cursor: pointer;
   }

   .swipe-dot.active {
       background: var(--main);
       transform: scale(1.3);
   }

   /* ===== Lightbox ===== */
   #lightbox {
       display: none;
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, .92);
       z-index: 10000;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 16px;
   }

   #lightbox.open {
       display: flex;
   }

   .lb-main {
       position: relative;
       max-width: 90vw;
       max-height: 75vh;
       overflow: hidden;
       border-radius: 10px;
       touch-action: pan-y;
   }

   .lb-track {
       display: flex;
       transition: transform .35s cubic-bezier(.4, 0, .2, 1);
   }

   .lb-slide {
       user-select: none;
       -webkit-user-drag: none;
       min-width: 90vw;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .lb-slide img {
       max-width: 90vw;
       max-height: 75vh;
       object-fit: contain;
       border-radius: 8px;
       pointer-events: none;
   }

   .lb-thumbs {
       display: flex;
       gap: 8px;
       overflow-x: auto;
       padding: 4px 8px;
       scrollbar-width: none;
       max-width: 90vw;

   }

   .lb-thumbs::-webkit-scrollbar {
       display: none;
   }

   .lb-thumb {
       width: 54px;
       height: 54px;
       flex-shrink: 0;
       border-radius: 7px;
       overflow: hidden;
       border: 2px solid transparent;
       cursor: pointer;
       transition: border-color .2s;

       img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           min-width: auto;
           min-height: auto;
           max-width: auto;
           max-height: auto;
       }
   }

   .lb-thumb.active {
       border-color: #3a7bd5;
   }

   .lb-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       pointer-events: none;
   }

   .lb-close {
       position: fixed;
       top: 16px;
       left: 16px;
       background: var(--main);
       border: none;
       color: #fff;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       font-size: 20px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .lb-arrow {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       background: rgba(255, 255, 255, .15);
       border: none;
       color: #fff;
       width: 38px;
       height: 38px;
       border-radius: 50%;
       font-size: 18px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 10;
   }


   /* badge تخفیف */
   .discount-badge {
       background: var(--black);
       color: var(--white);
       /* outline: 1px solid var(--mid-main); */
       padding: 5px 14px;
       border-radius: 109px;
       font-size: 13px;
       font-weight: bold;
       font-family: "IranYekan";
   }

   /* thumbnails */
   .thumbs {
       display: flex;
       gap: 10px;
       margin: 12px 0;
       flex-wrap: wrap;

       @media (width > 900px) {
           margin-bottom: var(--margin-b);
       }

   }

   .thumb {
       width: 72px;
       height: 72px;
       border-radius: 12px;
       border: 2px solid var(--border);
       overflow: hidden;
       cursor: pointer;
       transition: border-color .2s;
       flex-shrink: 0;
   }

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


   .thumb.active {
       border-color: var(--main) !important;
   }

   .thumb:hover {
       border-color: var(--mid-main);
   }

   /* ===== Info Section ===== */
   .info-section {
       height: 100%;
       background: var(--main-gray);
       margin-bottom: var(--margin-b);
       padding: 10px;
       border-radius: 35px;

   }

   .info-wrapper {
       height: 100%;
       display: flex;
       flex-direction:
           column;
       gap: 24px;
       background-color: var(--low-gray) !important;
       box-shadow: 0 0 6px rgba(0, 0, 0, 0.03);
       border-radius: 35px;
       padding: 20px;

       &>div {
           flex: 1;

       }
   }

   /* برند + مدل */
   .brand-row {
       display: flex;
       align-items: center;
       gap: 12px;
       flex-wrap: wrap;

       & svg {
           width: 15px;
           height: 15px;
       }

       & span {
           display: flex;
           align-items: center;
           gap: 3px;
       }
   }

   .brand-name {
       font-size: 13px;
       font-weight: bold;
       letter-spacing: 2px;
       text-transform: uppercase;
       color: var(--main);
       padding: 4px 12px;
       border: 1px solid var(--main);
       border-radius: 99px;
   }

   .type-tag {
       font-size: 12px;
       color: var(--black);
       padding: 4px 12px;
       border: 1px solid var(--mid-main);
       border-radius: 99px;

       svg {
           fill: var(--black) !important;
       }
   }

   .gender-tag {
       font-size: 12px;
       color: var(--gray);
       padding: 4px 12px;
       border: 1px solid var(--mid-main);
       border-radius: 99px;
   }

   .product-title {
       font-size: 26px;
       font-weight: bold;
       line-height: 1.5;
       color: var(--dark);
   }

   .product-model {
       font-size: 14px;
       color: var(--gray);
       margin-top: 4px;
       letter-spacing: 1px;
   }

   .info-top-section {
       margin-top: 15px;
       /* justify-content: center; */
   }

   /* divider */
   .divider {

       background: var(--border);
   }

   /* قیمت */
   .price-box {
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 35px;
       padding: 20px 24px;
       box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
   }

   .price-label {
       font-size: 12px;
       color: var(--gray);
       margin-bottom: 8px;
   }

   .price-final {
       font-size: 32px;
       font-weight: bold;
       color: var(--main);
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 8px;
   }

   .price-final .unit {
       font-size: 15px;
       font-weight: normal;
       color: var(--black);
   }

   .price-original {
       font-size: 16px;
       color: var(--gray);
       text-decoration: line-through;
       margin-top: 6px;
       display: flex;
       align-items: center;
       gap: 8px;
       margin-bottom: 12px;
   }

   .saving-tag {
       font-size: 12px;
       background: var(--main-pale);
       color: var(--main);
       padding: 3px 10px;
       border-radius: 99px;
       font-weight: bold;
   }

   /* دکمه خرید */
   .buy-btn {
       display: flex;
       align-items: center;
       justify-content: center;
       border: 2px solid var(--main);
       color: var(--black);
       border-radius: 35px;
       padding: 18px 32px;
       font-size: 16px;
       font-weight: bold;
       cursor: pointer;
       width: 100%;
       transition: all 250ms;
       text-decoration: none;
       position: relative;
       overflow: hidden;

       & h4 {
           z-index: 1;
       }

       &:hover {
           color: var(--white);
           border-color: transparent;
       }

       & svg {
           stroke: var(--main);
           color: var(--main);
       }

       &::before {
           content: "";
           position: absolute;
           background-color: var(--main);

           left: 50%;
           top: 5%;
           transform: translate(-50%, -100%) scale(0);

           height: 700px;
           width: 700px;

           z-index: 0;
           border-radius: 50%;
           opacity: 0;

           transform-origin: center center;
           transition: transform 250ms ease-in, opacity 250ms ease-in;
       }

       &.out-of-stock::before {
           display: none;
       }

       &:hover::before {
           top: 50%;
           transform: translate(-50%, -50%) scale(1.3);
           opacity: 1;
       }

       &.buy-btn--counter::before {
           display: none;

       }

       &.buy-btn--counter {
           box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
       }

   }

   .buy-wrapper {
       width: 100%;
       display: flex;
       justify-content: center;
   }

   .c-item__img-link {
       display: block;
       flex-shrink: 0;
   }

   .buy-btn--counter {
       display: flex !important;
       align-items: center;
       justify-content: flex-start;
       width: fit-content;
       padding: 8px !important;
       overflow: hidden;
       cursor: default !important;
   }

   .buy-btn__minus,
   .buy-btn__plus {
       background: none;
       border: none;
       color: inherit;
       font-size: 1.4rem;
       font-weight: 700;
       cursor: pointer;
       padding: 0 !important;
       height: 100%;
       display: flex;
       align-items: center;
       transition: background .15s;
       min-width: 52px;
   }

   .buy-btn__minus:hover,
   .buy-btn__plus:hover {
       background: rgba(255, 255, 255, .15);
   }

   .buy-btn__plus:disabled {
       opacity: .4;
       cursor: default;
   }

   .buy-btn__qty {
       font-size: 1.1rem;
       font-family: "IranYekan", sans-serif;
       font-weight: 700;
       min-width: 32px;
       text-align: center;
   }

   .buy-btn.out-of-stock {
       background: #e5e7eb;
       color: #9ca3af;
       cursor: not-allowed;
   }

   .buy-btn.out-of-stock:hover {
       transform: none;
       background: #e5e7eb;
   }

   /* توضیحات */
   .desc-box {
       background: var(--white);
       border-radius: 16px;
       border: 1px solid var(--border);
       padding: 20px 24px;
   }

   .desc-box h3 {
       font-size: 14px;
       color: var(--gray);
       margin-bottom: 10px;
       font-weight: normal;
       border-bottom: 1px solid var(--border);
       padding-bottom: 10px;
   }

   .desc-box p {
       font-size: 14px;
       line-height: 2;
       color: var(--mid);
   }

   .specs-section h2 {
       font-size: 18px;
       font-weight: bold;
       color: var(--dark);
       margin-bottom: 20px;
       padding-bottom: 1px;
       border-bottom: 2px solid var(--main);
       display: inline-block;
   }

   .pd-desc-title {
       color: rgba(0, 0, 0, 0.700) !important;
       margin-bottom: 5px !important;


   }

   .pd-desc-text {
       color: var(--mid-black);
       font-weight: 600;
   }

   .gallery-section {
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
       border-radius: 35px;
       height: 100%;
       display: flex;
       flex-direction: column;
       justify-content: space-evenly;
   }

   .disc-text-wrapper {
       display: block;
       background-color: white;
       padding: 10px 15px;
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
       border-radius: 8px;
       margin-bottom: 12px;
       max-height: 152px;
       transition: all 250ms;
       overflow: hidden;

       display: -webkit-box;
       -webkit-line-clamp: 5;
       -webkit-box-orient: vertical;

       /* اینا رو اضافه کن */
       word-wrap: break-word !important;
       overflow-wrap: break-word !important;
       word-break: break-word !important;
       white-space: normal !important;

       &.active {
           max-height: fit-content;
           -webkit-line-clamp: initial;
       }
   }


   #specs-sec {
       max-height: 265px;
       overflow: hidden;
   }

   #specs-sec.active {
       max-height: fit-content;
   }

   .see-all-btn.disabled {
       display: none !important;
   }

   .disc-text-wrapper {}

   .see-all-wrap {
       width: 100%;
       display: flex;

       justify-content: center;
       margin-top: 20px;

       .see-all-btn {
           color: var(--main);

       }

   }

   .specs-table {
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
       width: 100%;
       border-collapse: collapse;
       background: var(--white);
       border-radius: 16px;
       overflow: hidden;
   }

   .specs-table tr:nth-child(even) td {
       background: var(--main-pale);
   }

   .specs-table td {
       padding: 14px 20px;
       font-size: 14px;
       border-bottom: 1px solid var(--border);
   }

   .specs-table tr:last-child td {
       border-bottom: none;
   }

   .specs-table .spec-key {
       color: var(--mid-main);
       font-weight: bold;
       width: 35%;
       border-left: 1px solid var(--border);
   }

   .specs-table .spec-val {
       color: var(--dark);
       font-weight: 700;
   }

   /* ===== Lightbox ===== */

   #lightbox.open {
       display: flex;
   }

   #lightbox img {
       min-height: 36vh;
       max-width: 90vw;
       max-height: 90vh;
       object-fit: contain;
       border-radius: 12px;
   }

   #lightbox .close-lb {
       position: absolute;
       top: 20px;
       left: 20px;
       color: #fff;
       font-size: 32px;
       cursor: pointer;
       line-height: 1;
   }

   .swipe-wrap {
       position: relative;
       overflow: hidden;
       border-radius: 12px;
       touch-action: pan-y;
       cursor: grab;
       user-select: none;
   }

   .swipe-wrap:active {
       cursor: grabbing;
   }

   .swipe-track {
       display: flex;
       transition: transform .35s cubic-bezier(.4, 0, .2, 1);
       will-change: transform;
   }

   .swipe-slide {
       min-width: 100%;
       position: relative;
   }

   .swipe-slide img {
       width: 100%;
       aspect-ratio: 1;
       object-fit: contain;
       display: block;
       pointer-events: none;
   }


   .lb-main {
       position: relative;
       max-width: 90vw;
       max-height: 75vh;
       overflow: hidden;
       border-radius: 10px;
       touch-action: pan-y;
   }

   .lb-track {
       display: flex;
       transition: transform .35s cubic-bezier(.4, 0, .2, 1);
   }

   .lb-slide {
       min-width: 90vw;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .lb-slide img {
       max-width: 90vw;
       max-height: 75vh;
       object-fit: contain;
       border-radius: 8px;
       pointer-events: none;
   }

   .lb-thumbs {
       display: flex;
       gap: 8px;
       overflow-x: auto;
       padding: 4px 8px;
       scrollbar-width: none;
       max-width: 90vw;
   }

   .lb-thumbs::-webkit-scrollbar {
       display: none;
   }

   .lb-thumb {
       width: 54px;
       height: 54px;
       flex-shrink: 0;
       border-radius: 7px;
       overflow: hidden;
       border: 2px solid transparent;
       cursor: pointer;
       transition: border-color .2s;
   }

   .lb-thumb.active {
       border-color: var(--main);
       box-shadow: 0 0 6px rgba(202, 80, 80, 0.8);
   }

   .lb-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       min-width: auto !important;
       min-height: auto !important;
       max-width: auto !important;
       max-height: auto !important;
   }

   .lb-arrow {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       background: var(--mid-main);
       border: none;
       color: #fff;
       width: 11vw;
       height: 11vw;
       border-radius: 50%;
       font-size: 18px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 10;

       &:hover {
           background-color: var(--main);
       }
   }

   .lb-arrow.prev {
       right: 1%;
   }

   .lb-arrow.next {
       left: 1%;
   }


   .product-disc-section {
       background-color: var(--low-gray);
       border-radius: var(--border-r);
       padding: 20px;
       margin-bottom: var(--margin-b);
   }

   :root {
       --main: var(--main);
       --black: #040404;
       --white: #fff;
       --main-light: var(--mid-main);
       --main-pale: #f5eded;
       --gray: #888;
       --gray-light: #e8e8e8;
       --radius: 16px;
   }

   /* ── Section wrapper ── */
   .rev-section {
       width: 100%;
       margin-bottom: var(--margin-b);
       direction: rtl;
       font-family: "Dana", sans-serif;
   }

   .rev-section__title {
       font-family: "kalameh", sans-serif;
       font-size: 1.4rem;
       color: var(--black);
       margin-bottom: 24px;
       padding-right: 4px;
       border-right: 4px solid var(--main);
       padding-right: 12px;
   }

   /* ── Summary bar ── */
   .rev-summary {
       display: flex;
       align-items: center;
       gap: 28px;
       background: var(--black);
       border-radius: var(--radius);
       padding: 24px 28px;
       margin: 20px 0;
       color: var(--white);
       flex-wrap: wrap;
   }

   .rev-summary__score {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 4px;
       min-width: 70px;
   }

   .rev-summary__num {
       font-size: 3rem;
       font-family: "IranYekan", sans-serif;
       font-weight: 800;
       line-height: 1;
   }

   .rev-summary__outof {
       font-size: .85rem;
       opacity: .8;
   }

   .rev-summary__stars {
       display: flex;
       gap: 2px;
   }

   .rev-summary__stars .rev-star {
       font-size: 1.3rem;
   }

   .rev-summary__stars .rev-star--filled {
       color: var(--main);
   }

   .rev-summary__stars .rev-star--empty {
       color: rgba(255, 255, 255, .35);
   }

   .rev-summary__bars {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 7px;
       min-width: 160px;
   }

   .rev-bar-row {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: .82rem;
   }

   .rev-bar-row__label {
       min-width: 28px;
       text-align: left;
       opacity: .85;
   }

   .rev-bar-track {
       flex: 1;
       height: 6px;
       background: rgba(255, 255, 255, .25);
       border-radius: 99px;
       overflow: hidden;
   }

   .rev-bar-fill {
       height: 100%;
       background: var(--white);
       border-radius: 99px;
       transition: width .6s ease;
   }

   .rev-bar-row__count {
       min-width: 22px;
       text-align: right;
       opacity: .75;
       font-size: .78rem;
   }

   .rev-summary__total {
       font-size: .85rem;
       opacity: .8;
       white-space: nowrap;
   }

   /* ── Cards ── */
   .rev-card {
       background: var(--white);
       border: 1.5px solid var(--gray-light);
       border-radius: var(--radius);
       padding: 18px 20px 14px;
       margin-bottom: 14px;
       transition: border-color .2s;
       flex: 0 0 250px;
       height: 160px;
       display: flex;
       flex-direction: column;
       max-width: 250px;
       user-select: none;

       &> {
           /* height: 100% !important; */
           flex-grow: 1;
       }
   }

   .rev-card:hover {
       border-color: var(--main);
   }

   .rev-card--reply {
       margin-top: 12px;
       margin-right: 24px;
       border-color: var(--mid-main);
       background: var(--main-pale);
       border-radius: 12px;
   }

   .rev-card__header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
       gap: 8px;
       margin-bottom: 10px;
       width: 100%;
       overflow: hidden;
       text-overflow: ellipsis !important;
   }

   .rev-card__meta {
       display: flex;
       align-items: center;
       gap: 8px;
       margin-left: 45px;
       flex-wrap: wrap;
   }

   .rev-card__name {
       font-weight: 700;
       color: var(--black);
       font-size: .95rem;
   }

   .rev-badge {
       background: var(--main);
       color: var(--white);
       font-size: .72rem;
       padding: 2px 8px;
       border-radius: 99px;
       white-space: nowrap;
   }

   .rev-card__date {
       color: var(--gray);
       font-size: .78rem;
       direction: ltr;
   }

   .rev-card__body {
       color: var(--black);
       font-size: .93rem;
       line-height: 1.8;
       margin: 0 0 10px;
   }

   /* ── Stars (display) ── */
   .rev-stars {
       display: flex;
       gap: 2px;
   }

   .rev-star {
       font-size: 1.15rem;
       line-height: 1;
   }

   .rev-star--filled {
       color: var(--main);
   }

   .rev-star--empty {
       color: var(--gray-light);
   }

   /* ── Stars (interactive input) ── */
   .rev-stars--input .rev-star--btn {
       cursor: pointer;
       color: var(--gray-light);
       font-size: 1.6rem;
       transition: color .15s, transform .1s;
   }

   .rev-stars--input .rev-star--btn:hover,
   .rev-stars--input .rev-star--btn.active {
       color: var(--main);
       transform: scale(1.15);
   }

   /* ── Reply button ── */
   .rev-reply-btn {
       background: none;
       border: 1px solid var(--gray-light);
       border-radius: 8px;
       color: var(--main);
       font-family: inherit;
       font-size: .82rem;
       padding: 3px 12px;
       cursor: pointer;
       transition: background .15s, color .15s;
   }

   .rev-reply-btn:hover {
       background: var(--main);
       color: var(--white);
   }

   /* ── Replies wrapper ── */
   .rev-replies {
       margin-top: 12px;
   }

   /* ── Form ── */
   .rev-form-section {
       background: var(--low-gray);
       border-radius: var(--radius);
       padding: 20px;
       margin-bottom: var(--margin-b);
   }

   .rev-form-section__title {
       font-family: "kalameh", sans-serif;
       font-size: 1.05rem;
       margin-bottom: 16px;
       color: var(--black);
   }

   .rev-form {
       display: flex;
       flex-direction: column;
       gap: 25px;
   }

   .rev-form__row {
       display: flex;
       align-items: center;
       gap: 12px;
       flex-wrap: wrap;
   }
   .active-viewers {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--dark-main);
    margin-top: 14px;
    & svg{
        width: 20px;
        height: 20px;
    }
}
.rev-form__input,.rev-form__textarea{

    box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
   .rev-form__input {
       flex: 1;
       min-width: 160px;
       border: 1.5px solid var(--gray-light);
       border-radius: 10px;
       padding: 9px 14px;
       font-family: inherit;
       font-size: .9rem;
       outline: none;
       transition: border-color .2s;
       background: var(--white);
       color: var(--black);
   }

   .rev-form__input:focus {
       border-color: var(--main);
   }

   .rev-form__anon {
       display: flex;
       align-items: center;
       gap: 5px;
       font-size: .88rem;
       cursor: pointer;
       white-space: nowrap;
       color: var(--black);
   }

   .rev-form__rating-row {
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .rev-form__label {
       font-size: .9rem;
       color: var(--black);
   }

   .rev-form__textarea {
       border: 1.5px solid var(--gray-light);
       border-radius: 10px;
       padding: 10px 14px;
       font-family: inherit;
       font-size: .9rem;
       resize: vertical;
       outline: none;
       transition: border-color .2s;
       background: var(--white);
       color: var(--black);
       line-height: 1.7;
   }

   .rev-form__textarea:focus {
       border-color: var(--main);
   }

   .rev-form__submit {
       align-self: flex-end;
       background: var(--main);
       color: var(--white);
       border: none;
       width: 100%;
       border-radius: 10px;
       padding: 10px 28px;
       font-family: "kalameh", sans-serif;
       font-size: .95rem;
       cursor: pointer;
       transition: background .2s;
   }

   .rev-form__submit:hover {
       background: var(--high-main);
   }

   /* ── Inline reply form ── */
   .rev-reply-form {
       margin-top: 12px;
       background: var(--white);
       border-radius: 12px;
       padding: 14px;
       border: 1px dashed var(--main);
   }

   /* ── Alert messages ── */
   .rev-alert {
       border-radius: 10px;
       padding: 12px 18px;
       margin-bottom: 16px;
       font-size: .9rem;
   }

   .rev-alert--success {
       background: #e8f5e9;
       color: #2e7d32;
       border: 1px solid #a5d6a7;
   }

   .rev-alert--error {
       background: #fdecea;
       color: #b71c1c;
       border: 1px solid #ef9a9a;
   }

   /* ── Empty state ── */
   .rev-empty {
       text-align: center;
       color: var(--gray);
       padding: 36px 0;
       font-size: .95rem;
   }



   .rev-cards {
       display: flex;
       align-items: center;
       width: 100%;
       justify-content: right;
       overflow-y: hidden;
       overflow-x: auto;
       scroll-snap-type: x mandatory;
       gap: 20px;

       &::-webkit-scrollbar {
           display: none;
       }
   }


   /* ───────────────────────────── */
   /* فقط استایل های جدید اضافه شده */
   /* ───────────────────────────── */

   .rev-show-all {
       flex: 0 0 250px;
       max-width: 250px;
       height: 160px;
       border: none;
       border-radius: var(--radius);
       background: var(--black);
       color: var(--white);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 10px;
       cursor: pointer;
       transition: .25s;
       font-family: "Dana", sans-serif;
   }

   .rev-show-all:hover {
       background: var(--main);
   }

   .rev-show-all__count {
       font-size: 2rem;
       font-weight: 800;
   }

   .rev-show-all__text {
       font-size: .95rem;
   }

   /* ── Overlay ── */

   .rev-overlay {
       position: fixed;
       inset: 0;
       z-index: 99999;
       opacity: 0;
       visibility: hidden;
       transition: .25s;
   }

   .rev-overlay.active {
       opacity: 1;
       visibility: visible;
   }

   .rev-overlay__backdrop {
       position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, .55);
       backdrop-filter: blur(4px);
   }

   .rev-overlay__content {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%) scale(.9);
       width: min(1000px, 92%);
       max-height: 88vh;
       overflow: auto;
       background: var(--white);
       border-radius: calc(var(--radius) + 6px);
       padding: 28px;
       transition: .25s;
   }

   .rev-overlay.active .rev-overlay__content {
       transform: translate(-50%, -50%) scale(1);
   }

   .rev-overlay__close {
       position: sticky;
       top: 0;
       margin-right: auto;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 42px;
       height: 42px;
       border: none;
       border-radius: 12px;
       background: var(--main);
       color: var(--white);
       font-size: 1.5rem;
       cursor: pointer;
       z-index: 5;
   }

   .rev-overlay__reviews {
       display: flex;
       flex-direction: column;
       gap: 14px;
       margin-top: 24px;
   }

   /* ── Overlay cards ── */

   .rev-overlay__reviews .rev-card {
       max-width: 100%;
       width: 100%;
       height: auto;
       pointer-events: auto;
   }

   /* ── Mobile ── */

   @media (max-width:768px) {

       .rev-overlay__content {
           width: 100%;
           height: 100dvh;
           max-height: 100dvh;
           border-radius: 0;
           padding: 20px;
       }

       .rev-summary {
           padding: 18px;
           gap: 20px;
       }

   }


   .sim-section {
       width: 100%;
       direction: rtl;
       font-family: "Dana", sans-serif;
       margin-bottom: var(--margin-b);
   }

   .sim-section__title {
       font-family: "kalameh", sans-serif;
       font-size: 1.4rem;
       color: var(--black, #040404);
       margin-bottom: 20px;
       border-right: 4px solid var(--main, var(--main));
       padding-right: 12px;
   }

   /* ── Main holder (from user CSS) ── */
   .show-cards-holder {
       width: 100%;
       display: flex;
       justify-content: right;
       align-items: center;
       height: 380px;
       margin-bottom: var(--margin-b, 40px);
       background-color: var(--main, var(--main));
       border-radius: var(--border-r);
       padding: 55px 28px;
       padding-left: 0;
       overflow-x: auto;
       transition: all 250ms;
   }

   .show-cards-cardsection {
       width: 100%;
       height: 100%;

       display: flex;
       align-items: center;
       justify-content: right;
       gap: 3px;
       padding-left: 28px !important;
       overflow-x: auto;
   }

   .show-cards-cardsection::-webkit-scrollbar {
       display: none;
   }

   /* ── Card ── */


   /* ── Image ── */
   .show-product-image {
       width: 100%;
       height: 50%;
       overflow: hidden;
   }

   .show-product-image img {
       transition: all 250ms;
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: var(--border-r);
       user-select: none;
       -webkit-user-drag: none;
   }

   .show-card:hover .show-product-image img {
       transform: scale(1.04);
   }

   /* ── Left (bottom) section ── */
   .show-card-left-section {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       margin-top: 3px;
       flex: 1;
       padding-top: 15px;
   }

   .show-product-name {
       width: 100%;
       text-align: center;
       font-family: "kalameh", sans-serif;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
       font-size: .85rem;
   }

   .show-product-brand {
       font-size: 14px;
       font-weight: 700;
       color: var(--main, var(--main));
   }

   .show-product-model {
       font-size: 12px;
       font-weight: 700;
       color: var(--main, var(--main));
   }

   .show-product-name,
   .show-product-price {
       user-select: none;
   }

   /* ── Price row ── */
   .show-main-price-holder {
       margin-top: 10px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-direction: row-reverse;
   }

   .show-off-percent {
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: "IranYekan";
       border-radius: 12px;
       padding: 0 5px;
       font-size: 13px;
       color: var(--white, #fff);
       background-color: var(--main, var(--main));
   }

   .show-price-without-discount {
       display: flex;
       width: 100%;
       justify-content: left;
       color: var(--gray, #888);
       font-size: 14px;
       text-decoration: line-through;
   }

   .show-final-price {
       display: flex;
       align-items: center;
       gap: 3px;
       font-size: 16px;
   }

   .showtoman {
       font-size: 13px;
   }

   .pd-badges-bar {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       padding: 24px 10px;
       margin: 14px 0;
       /* background-color: var(--gray); */
       border-radius: var(--border-r);
       /* border: 1px solid var(--mid-main); */
       background: #fff;
       box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
   }


   .pd-badge {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       padding: 5px 12px;
       border-radius: 99px;
       font-size: .78rem;
       font-family: "Dana", sans-serif;
       white-space: nowrap;
       border: 1.5px solid transparent;
       height: var(--border-r);
       background: none !important;
       border: 1px solid var(--main);
   }

   /* امتیاز */
   .pd-badge--rating {
       background: #fff8f0;
       /* border-color: var(--black); */
       color: var(--black);
       display: flex;
       gap: 4px;
       align-items: center;
   }

   .pd-badge--no-rating {
       background: #f5f5f5;
       border-color: #e8e8e8;
       color: #aaa;
       font-size: .75rem;
   }

   .pd-badge__stars {
       display: flex;
       gap: 1px;
   }

   .pd-star {
       font-size: .85rem;
       color: #a5a1a1;
   }

   .pd-star--on {
       color: var(--main);
   }

   .pd-star--off {
       color: #ddd;
       letter-spacing: 1px;
       font-size: .8rem;
   }

   .pd-badge__val {
       font-weight: 700;
       font-family: "IranYekan", sans-serif;
   }

   .pd-badge__sub {
       color: #aaa;
       font-size: .72rem;
   }

   /* پرفروش */
   .pd-badge--top {
       background: #fff9e6;
       border-color: #ffd966;
       color: #7a5800;
   }

   /* جدید */
   .pd-badge--new {
       background: #f0f7ff;
       border-color: #b3d4f5;
       color: #1a4f7a;
   }

   /* موجودی */
   .pd-badge--stock {
       background: #f0faf4;
       border-color: #a8d5b5;
       color: #1a5c32;
   }

   .pd-badge--stock-low {
       background: #fff5f0;
       border-color: #f5c0a0;
       color: #7a2e00;
   }

   .pd-badge--out {
       background: #fdf0f0;
       border-color: #f5b0b0;
       color: #7a0000;
   }

   /* گارانتی */
   .pd-badge--warranty {
       background: #f5f0ff;
       border-color: #c8b0f5;
       color: #3d1a7a;
   }

   /* ارسال */
   .pd-badge--delivery {
       background: #f0f8ff;
       border-color: #b0d4f5;
       color: #1a3f7a;
   }

   .pd-badge__icon {
       font-size: .9rem;
       line-height: 1;
   }


   .rev-holder {
       display: flex;
       width: 100%;
       overflow-x: auto;
       flex-wrap: nowrap !important;
       scroll-snap-type: x mandatory;
       flex-direction: row;
   }


   @media (width < 1024px) {}

   /* ===== Responsive ===== */
   @media (max-width: 900px) {
       .stock-badge {
           right: 25px;
       }

       .info-top-section {
           margin-top: 0;
           /* justify-content: center; */
       }

       .product-grid {
           display: flex;
           flex-direction: column;
           gap: 15px;

           align-items: stretch;

       }

       .info-section {
           order: 3;
       }

       .product-title {
           font-size: 20px;
       }

       .price-final {
           font-size: 26px;
       }
   }

   @media (max-width: 600px) {
       .container {
           padding: 0 16px;
       }

       .product-page {
           padding: 24px 0 0px;
       }

       .price-box {
           padding: 16px;
       }

       .thumb {
           width: 60px;
           height: 60px;
       }
   }

   @media (max-width: 500px) {
       .show-cards-cardsection {
           scroll-snap-type: x mandatory;

       }
   }

   @media (max-width: 350px) {
       .pr-section {
           font-size: 18px;
       }

       .discount-badge {
           font-size: 10px;
           padding: 3px;
       }
   }