:root { --ranked-accent: #d56831; --ranked-marker: #e8aa37; }
.ranked-section { padding-block: 12px 38px; background: var(--tw-surface); }
.ranked-panel { padding: 22px; border: 1px solid var(--tw-border); border-radius: 22px; }
.ranked-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ranked-heading h2 { display: flex; align-items: center; flex: 1; min-width: 0; gap: 9px; margin: 0;   white-space: nowrap; }
.ranked-heading .section-title-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranked-heading h2::before { content: ''; flex: 0 0 18px; height: 8px; border-radius: 8px;  }
.ranked-view-all { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 40px; color: var(--ranked-accent); font-size: 12px; font-weight: 700; }
.ranked-view-all span { display: grid; place-items: center; width: 26px; height: 28px; border-radius: 7px; background: var(--ranked-marker); color: var(--tw-surface); font-size: 22px; }
.ranked-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: product-rank; list-style: none; padding: 0; margin: 0; }
.ranked-products > .product { min-width: 0; counter-increment: product-rank; border: 1px solid var(--tw-border); border-radius: var(--product-radius); background: var(--tw-surface); transition: border-color .2s ease, box-shadow .2s ease; }
.ranked-product-link { display: grid; grid-template-columns: 72px 25px minmax(0, 1fr); align-items: center; gap: 8px; padding: 12px; height: 100%; min-height: 120px; border-radius: inherit; }
.ranked-product-image { display: block; width: 72px; height: 90px; object-fit: contain; }
.product-rank::before { content: counter(product-rank, persian); color: var(--ranked-accent); font-size: 25px; font-weight: 700; }
.ranked-product-info { min-width: 0; }
.ranked-products .woocommerce-loop-product__title { margin: 0 0 12px; font-size: 12px; font-weight: 700; line-height: 1.9; overflow-wrap: anywhere; }
.ranked-products .price { color: var(--ranked-accent); font-size: 12px; font-weight: 700; line-height: 1.9; }
.ranked-products .woocommerce-Price-amount { display: inline-block; white-space: nowrap; }
.ranked-products .woocommerce-Price-currencySymbol { font-size: 9px; margin-inline-start: 3px; }
.ranked-products .price del { color: var(--tw-muted); font-size: 10px; }
.ranked-products .price ins { text-decoration: none; background: transparent; }

@media (hover: hover) { .ranked-products > .product:hover { box-shadow: 0 4px 12px rgb(60 40 20 / 6%); } }
@media (max-width: 1199px) { .ranked-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ranked-product-link { grid-template-columns: 62px 22px minmax(0, 1fr); padding: 10px; gap: 6px; } .ranked-product-image { width: 62px; height: 85px; } }
@media (max-width: 900px) { .ranked-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .ranked-panel { padding: 14px; } .ranked-heading { flex-wrap: wrap; gap: 4px; margin-bottom: 14px; } .ranked-heading h2 {  } .ranked-view-all { margin-inline-start: auto; font-size: 11px; } .ranked-products { grid-template-columns: minmax(0, 1fr); } .ranked-product-link { grid-template-columns: 70px 25px minmax(0, 1fr); min-height: 112px; } .ranked-product-image { width: 70px; height: 85px; } }
@media (prefers-reduced-motion: reduce) { .ranked-products > .product { transition: none; } }

.ranked-heading .ranked-view-all { background:var(--tw-section-title,var(--tw-brand)); color:var(--tw-view-all-text,#ffffff); }
.ranked-heading .ranked-view-all > .viewall-chevron { background:transparent; color:inherit; }