:root {
  --listing-gap: 38px;
  --listing-section-space: 34px;
}

.crumb {
padding: 18px 0 6px;
      font-size: 13.5px;
      color: var(--muted);
      font-weight: 600
}

.crumb a:hover {
color: var(--royal)
}

.crumb span {
margin: 0 7px;
      opacity: .5
}

.buy-btn {
background: var(--royal);
      color: #fff;
      border: none;
      border-radius: 13px;
      padding: 16px;
      font-family: var(--display);
      font-weight: 700;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      width: 100%;
      transition: background-color var(--transition-default), transform var(--transition-default), box-shadow var(--transition-default)
}

.buy-btn:hover {
background: var(--royal-deep)
}

.owner-listing-state {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 15px;
  border: 1px solid #b9e8d2;
  border-radius: 13px;
  background: #f0fbf6;
  color: #087a4b;
}

.owner-listing-state svg {
  flex: none;
  margin-top: 1px;
}

.owner-listing-state span {
  display: grid;
  gap: 3px;
}

.owner-listing-state strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
}

.owner-listing-state small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.manage-listing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px;
  border: 1.5px solid var(--royal);
  border-radius: 13px;
  background: #fff;
  color: var(--royal);
  font-weight: 700;
  transition: background-color var(--transition-default), color var(--transition-default);
}

.actions .manage-listing-btn:hover,
.actions .manage-listing-btn:focus-visible {
  background: var(--royal);
  color: #fff;
}

.manage-listing-btn:hover {
  color: #fff !important;
}

.offer-btn {
background: #fff;
      color: var(--ink);
      border: 1.5px solid var(--line);
      border-radius: 13px;
      padding: 15px;
      font-weight: 700;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      transition: color var(--transition-default), border-color var(--transition-default), background-color var(--transition-default)
}

.offer-btn:hover {
border-color: var(--royal);
      color: var(--royal)
}

.offer-btn:disabled,
.offer-btn[aria-disabled="true"] {
      border-color: var(--line);
      background: var(--mist);
      color: var(--muted);
      cursor: not-allowed;
      opacity: .72
}

.offer-btn__currency {
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
}

.seller .msg-btn {
background: #fff;
      border: 1.5px solid var(--line);
      border-radius: 10px;
      padding: 9px 15px;
      font-weight: 700;
      font-size: 13.5px;
      color: var(--ink);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition: color var(--transition-default), border-color var(--transition-default), background-color var(--transition-default)
}

.seller .msg-btn:hover {
border-color: var(--royal);
      color: var(--royal)
}

.offer-panel .pin input {
border: none;
      outline: none;
      width: 100%;
      min-width: 0;
      font-size: 16px;
      font-weight: 700;
      color: var(--ink)
}

.card:hover {
transform: translateY(-5px);
      box-shadow: var(--shadow);
      border-color: var(--royal-soft)
}

.card {
background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      min-width: 0;
      transition: transform var(--transition-default), box-shadow var(--transition-default), border-color var(--transition-default)
}

.card .ci {
height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      position: relative
}

.card .ci .b {
position: absolute;
      top: 10px;
      left: 10px;
      font-size: 10.5px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 999px
}

.card .cb {
padding: 12px 13px;
      display: flex;
      flex: 1;
      flex-direction: column;
      min-width: 0
}

.card .cb .t {
font-weight: 700;
      font-size: 14px;
      line-height: 1.25;
      overflow-wrap: anywhere
}

.card .cb .f {
display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-top: auto;
      padding-top: 8px;
      min-width: 0
}

.card .cb .p {
font-family: var(--display);
      font-weight: 800;
      font-size: 16px
}

.card .cb .s {
font-size: 11.5px;
      color: var(--muted);
      min-width: 0;
      overflow-wrap: anywhere;
      text-align: right
}

.prof-ol {
position: fixed;
      inset: 0;
      background: rgba(11, 20, 55, .35);
      z-index: var(--z-overlay);
      display: none
}

.prof-ol.show {
display: block
}

.prof-panel {
position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 480px;
      max-width: 100%;
      background: #fff;
      z-index: var(--z-modal);
      transform: translateX(100%);
      transition: transform .28s cubic-bezier(.2, .8, .3, 1);
      display: flex;
      flex-direction: column;
      box-shadow: -20px 0 60px -20px rgba(11, 20, 55, .22)
}

.prof-panel.open {
transform: none
}

.prof-hd {
display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px;
      border-bottom: 1px solid var(--line);
      flex: none
}

.prof-hd .tit {
font-family: var(--display);
      font-weight: 800;
      font-size: 16px
}

.prof-hd .cls {
width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      cursor: pointer
}

.prof-hd .cls:hover {
background: var(--mist)
}

.prof-bd {
flex: 1;
      overflow-y: auto;
      padding: 22px
}

.prof-hero-row {
display: flex;
      gap: 16px;
      align-items: flex-start;
      margin-bottom: 20px
}

.prof-av {
width: 68px;
      height: 68px;
      border-radius: 50%;
      background: var(--royal);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 26px;
      flex: none;
      position: relative
}

.prof-av .on {
position: absolute;
      bottom: 2px;
      right: 2px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--verified);
      border: 2px solid #fff
}

.prof-nm {
font-family: var(--display);
      font-weight: 800;
      font-size: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap
}

.prof-vb {
background: #E4FBF0;
      color: #0E9F62;
      font-size: 11px;
      font-weight: 800;
      padding: 3px 9px;
      border-radius: 999px
}

.prof-rat {
display: flex;
      align-items: center;
      gap: 8px;
      margin: 6px 0
}

.prof-stars {
color: #F5A623;
      font-size: 17px;
      letter-spacing: 1px
}

.prof-rn {
font-weight: 800;
      font-size: 17px
}

.prof-rc {
font-size: 13px;
      color: var(--muted);
      font-weight: 600
}

.prof-meta {
font-size: 13px;
      color: var(--muted);
      font-weight: 600;
      display: flex;
      flex-wrap: wrap;
      gap: 10px
}

.prof-meta span {
display: flex;
      align-items: center;
      gap: 5px
}

.prof-stats {
display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--line);
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 18px
}

.prof-stats .ps {
background: #fff;
      padding: 13px 10px;
      text-align: center
}

.prof-stats .ps .pv {
font-family: var(--display);
      font-weight: 800;
      font-size: 17px
}

.prof-stats .ps .pl {
font-size: 11.5px;
      color: var(--muted);
      font-weight: 600;
      margin-top: 2px
}

.prof-msg-btn {
width: 100%;
      background: var(--royal);
      color: #fff;
      border: none;
      border-radius: 11px;
      padding: 13px;
      font-weight: 700;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 18px;
      font-family: inherit;
      cursor: pointer
}

.prof-msg-btn:hover {
background: var(--royal-deep)
}

.gcard .badge-this {
position: absolute;
      top: -9px;
      right: 12px;
      background: var(--royal);
      color: #fff;
      font-size: 10.5px;
      font-weight: 800;
      padding: 3px 9px;
      border-radius: 999px
}

.toast {
position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(120px);
      background: var(--ink);
      color: #fff;
      padding: 14px 22px;
      border-radius: 13px;
      font-weight: 600;
      font-size: 14.5px;
      box-shadow: var(--shadow);
      max-width: calc(100% - (2 * var(--container-padding)));
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition: transform .35s cubic-bezier(.2, .8, .3, 1), opacity var(--transition-default), visibility 0s linear .35s;
      z-index: var(--z-dropdown);
      display: flex;
      align-items: center;
      gap: 9px
}

.toast.show {
transform: translateX(-50%) translateY(0);
      visibility: visible;
      opacity: 1;
      transition-delay: 0s
}

/* ========================================================================== 
   listing page
   ========================================================================== */

.product {
display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
      gap: var(--listing-gap);
      padding: 14px 0 60px;
      align-items: start
}

.gallery,
.buybox {
      min-width: 0
}

.gallery .main-img {
position: relative;
      border-radius: 18px;
      /* height: 440px; */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 150px;
      border: 1px solid var(--line);
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      isolation: isolate;
      touch-action: pan-y
}

.gallery-track {
      display: flex;
      width: 100%;
      height: 100%;
      transform: translate3d(0, 0, 0);
      transition: transform 360ms cubic-bezier(.22, .8, .3, 1);
      will-change: transform
}

.gallery-slide {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 100%;
      min-width: 100%;
      height: 100%;
      font-size: inherit
}

.gallery-arrow {
      position: absolute;
      top: 50%;
      z-index: 3;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(11, 20, 55, .12);
      border-radius: 50%;
      background: rgba(255, 255, 255, .94);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow);
      transform: translateY(-50%);
      transition: color var(--transition-default), background-color var(--transition-default), box-shadow var(--transition-default), transform var(--transition-default), opacity var(--transition-default)
}

.gallery-arrow--previous {
      left: 14px
}

.gallery-arrow--next {
      right: 14px
}

.gallery-arrow:hover:not(:disabled) {
      color: var(--royal);
      background: #fff;
      box-shadow: var(--shadow-primary-hover);
      transform: translateY(-50%) scale(1.04)
}

.gallery-arrow:disabled {
      cursor: default;
      opacity: .38
}

.gallery-arrow[hidden] {
      display: none
}

.main-img__media {
      display: block;
      line-height: 1
}

.gallery .main-img .grade {
position: absolute;
      top: 16px;
      left: 16px;
      font-size: 12px;
      font-weight: 800;
      padding: 5px 12px;
      border-radius: 999px;
      z-index: 3
}

.gallery .main-img .fav {
position: absolute;
      top: 14px;
      right: 14px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .92);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      box-shadow: var(--shadow);
      z-index: 3;
      transition:
        color var(--transition-default),
        background-color var(--transition-default),
        transform var(--transition-default),
        box-shadow var(--transition-default)
}

.gallery .main-img .fav:hover {
background: var(--royal-soft);
      color: var(--royal);
      opacity: 1;
      transform: scale(1.05);
      box-shadow: var(--shadow-primary-hover)
}

.gallery .main-img .fav.on,
.gallery .main-img .fav.is-wishlisted,
.gallery .main-img .fav[aria-pressed="true"] {
color: var(--danger)
}

.gallery .main-img .fav.on svg,
.gallery .main-img .fav.is-wishlisted svg,
.gallery .main-img .fav[aria-pressed="true"] svg {
fill: var(--danger)
}

.thumbs {
display: flex;
      gap: 12px;
      width: 100%;
      min-width: 0;
      margin-top: 14px;
      padding-bottom: 4px;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-inline: contain;
      scroll-snap-type: x proximity;
      scrollbar-width: thin;
      scrollbar-color: var(--line) transparent
}

.thumb {
flex: 1 1 0;
      min-width: 0;
      height: 84px;
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34px;
      cursor: pointer;
      border: 2px solid transparent;
      font-family: inherit;
      scroll-snap-align: start;
      transition: border-color var(--transition-default), box-shadow var(--transition-default), transform var(--transition-default)
}

.thumb img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      object-fit: cover
}

.thumbs.is-scrollable .thumb {
      flex: 0 0 84px
}

.thumb:hover {
      transform: translateY(-1px)
}

.thumb.active {
border-color: var(--royal);
      box-shadow: 0 0 0 2px var(--royal-soft)
}

.thumb:focus-visible {
      outline: 3px solid rgba(46, 91, 255, .28);
      outline-offset: 2px
}

.g1 {
background: linear-gradient(135deg, #FFF3DD, #FFE4B5)
}

.g2 {
background: linear-gradient(135deg, #FBEFD7, #F5DFB0)
}

.g3 {
background: linear-gradient(135deg, #FFF7E8, #FFEBC2)
}

.g4 {
background: linear-gradient(135deg, #F7EAD0, #EAD3A0)
}

.g5 {
background: linear-gradient(135deg, #FFFaf0, #FFE9C9)
}

.buybox {
position: sticky;
      top: 92px
}

.title {
font-family: var(--display);
      font-weight: 800;
      font-size: 28px;
      letter-spacing: -.7px;
      line-height: 1.15;
      overflow-wrap: anywhere
}

.sub-spec {
color: var(--muted);
      font-size: 14.5px;
      margin-top: 6px;
      font-weight: 600;
      overflow-wrap: anywhere
}

.price-row {
display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 12px;
      margin: 18px 0 4px
}

.price {
font-family: var(--display);
      font-weight: 800;
      font-size: 38px;
      letter-spacing: -1px
}

.rrp {
color: var(--muted);
      font-size: 17px;
      text-decoration: line-through;
      font-weight: 600
}

.save {
background: #E4FBF0;
      color: #0E9F62;
      font-size: 12.5px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 999px
}

.grade-new {
background: #E4FBF0;
      color: #0E9F62
}

.grade-like {
background: var(--royal-soft);
      color: var(--royal-deep)
}

.grade-good {
background: var(--amber-soft);
      color: var(--amber)
}

.grade-fair {
background: #F0F1F6;
      color: var(--muted)
}

.actions {
display: flex;
      flex-direction: column;
      gap: 11px;
      margin: 22px 0
}

.offer-panel {
display: none;
      margin: 0 0 11px;
      background: var(--royal-soft);
      border-radius: 13px;
      padding: 14px
}

.offer-panel.show {
display: block
}

.offer-panel .ol {
font-weight: 700;
      font-size: 13.5px;
      color: var(--royal-deep);
      margin-bottom: 9px
}

.offer-panel .orow {
display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 9px
}

.offer-panel .pin {
min-width: 0;
      display: flex;
      align-items: center;
      gap: 4px;
      background: #fff;
      border: 1.5px solid var(--royal);
      border-radius: 10px;
      padding: 11px 13px
}

.offer-panel .pin span {
font-weight: 800;
      color: var(--muted)
}

.offer-panel .send {
background: var(--royal);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 0 18px;
      font-weight: 700;
      font-size: 14px
}

.protect {
display: flex;
      gap: 11px;
      align-items: flex-start;
      background: #F2FCF7;
      border: 1px solid #BFEFD7;
      border-radius: 12px;
      padding: 13px 15px;
      margin-bottom: 18px;
      min-width: 0
}

.protect svg {
flex: none;
      color: var(--verified);
      margin-top: 1px
}

.protect .pt h4 {
font-size: 14px;
      font-weight: 800;
      color: #0E9F62
}

.protect .pt p {
font-size: 13px;
      color: #1A8E5C;
      margin-top: 1px
}

.seller {
border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 13px;
      min-width: 0
}

.seller__profile {
      display: flex;
      align-items: center;
      gap: 13px;
      flex: 1;
      min-width: 0
}

.seller .av {
width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--royal-soft);
      color: var(--royal-deep);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 19px;
      flex: none
}

.seller .si {
flex: 1;
      min-width: 0
}

.seller .si .nm {
font-weight: 800;
      font-size: 15.5px;
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap
}

.seller .si .nm .v {
font-size: 10.5px;
      font-weight: 800;
      color: var(--verified);
      background: #E4FBF0;
      padding: 2px 7px;
      border-radius: 999px
}

.seller .si .meta {
font-size: 13px;
      color: var(--muted);
      margin-top: 1px;
      overflow-wrap: anywhere
}

.section {
padding: var(--listing-section-space) 0;
      border-top: 1px solid var(--line)
}

.section h2 {
font-family: var(--display);
      font-weight: 800;
      font-size: 21px;
      letter-spacing: -.5px;
      margin-bottom: 16px
}

.desc {
font-size: 15.5px;
      color: #3A4568;
      line-height: 1.7;
      max-width: 760px
}

.story {
background: linear-gradient(135deg, #FFF3DD, #FFF8EC);
      border: 1px solid #FFE4B5;
      border-radius: 14px;
      padding: 18px 20px;
      max-width: 760px;
      margin-top: 18px;
      display: flex;
      align-items: flex-start;
      gap: 13px
}

.story svg {
flex: none;
      color: var(--leather);
      margin-top: 2px
}

.story .sl {
font-size: 12px;
      font-weight: 800;
      color: var(--leather);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 5px
}

.story p {
font-size: 14.5px;
      color: #5A3D1F;
      line-height: 1.65;
      font-style: italic
}

.specs {
display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 40px;
      max-width: 760px
}

.spec {
display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
      gap: 16px;
      font-size: 14.5px;
      min-width: 0
}

.spec .k {
color: var(--muted);
      font-weight: 600
}

.spec .v {
font-weight: 700;
      min-width: 0;
      overflow-wrap: anywhere;
      text-align: right
}

.grades {
display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      max-width: 820px
}

.gcard {
border: 1.5px solid var(--line);
      border-radius: 13px;
      padding: 15px;
      position: relative
}

.gcard.current {
border-color: var(--royal);
      background: var(--royal-soft)
}

.gcard .gn {
font-family: var(--display);
      font-weight: 800;
      font-size: 15px;
      margin-bottom: 5px
}

.gcard .gd {
font-size: 12.5px;
      color: var(--muted);
      line-height: 1.45
}

.rel-grid {
display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      align-items: stretch
}

.ph-bat {
background: linear-gradient(135deg, #FFF3DD, #FFE4B5)
}

.ph-pad {
background: linear-gradient(135deg, #E8EDFF, #D6E0FF)
}

.ph-helmet {
background: linear-gradient(135deg, #E4FBF0, #CFF6E3)
}

.ph-glove {
background: linear-gradient(135deg, #FDE8EC, #F9D2DB)
}

.ph-shoe {
background: linear-gradient(135deg, #EEEAFE, #E0D8FB)
}

.ptabs {
display: flex;
      gap: 4px;
      background: var(--mist);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 4px;
      margin-bottom: 16px;
      width: fit-content
}

.ptab {
padding: 7px 18px;
      border-radius: 8px;
      border: none;
      background: transparent;
      font-weight: 700;
      font-size: 14px;
      color: var(--muted);
      cursor: pointer;
      font-family: inherit;
      transition: all .15s
}

.ptab.active {
background: var(--royal);
      color: #fff
}

.pmini-grid {
display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
}

.pmini {
border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: all .18s
}

.pmini:hover {
box-shadow: var(--shadow);
      transform: translateY(-3px)
}

.pmini .pi {
height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 38px;
      position: relative
}

.pmini .pi .pg {
position: absolute;
      top: 8px;
      left: 8px;
      font-size: 10px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 999px
}

.pmini .pb {
padding: 10px 11px
}

.pmini .pb .pt {
font-weight: 700;
      font-size: 13.5px;
      line-height: 1.3
}

.pmini .pb .pp {
font-family: var(--display);
      font-weight: 800;
      font-size: 15px;
      margin-top: 5px
}

.pph-bat {
background: linear-gradient(135deg, #FFF3DD, #FFE4B5)
}

.pph-helmet {
background: linear-gradient(135deg, #E4FBF0, #CFF6E3)
}

.pph-shoe {
background: linear-gradient(135deg, #EEEAFE, #E0D8FB)
}

.pph-bag {
background: linear-gradient(135deg, #E5F6FF, #CCEBFA)
}

.pph-pad {
background: linear-gradient(135deg, #E8EDFF, #D6E0FF)
}

.prating-top {
display: grid;
      grid-template-columns: auto 1fr;
      gap: 20px;
      background: var(--mist);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 14px;
      align-items: center
}

.prt-big {
font-family: var(--display);
      font-weight: 800;
      font-size: 44px;
      letter-spacing: -1px;
      text-align: center;
      line-height: 1
}

.prt-stars {
color: #F5A623;
      font-size: 16px;
      text-align: center;
      margin: 3px 0
}

.prt-cnt {
font-size: 12px;
      color: var(--muted);
      font-weight: 600;
      text-align: center
}

.pbar-row {
display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 7px
}

.pbar-row:last-child {
margin-bottom: 0
}

.pbar-lbl {
font-size: 12.5px;
      font-weight: 700;
      width: 14px;
      text-align: right
}

.pbar-st {
font-size: 13px
}

.pbar-track {
flex: 1;
      height: 6px;
      background: var(--line);
      border-radius: 999px;
      overflow: hidden
}

.pbar-fill {
height: 100%;
      background: #F5A623;
      border-radius: 999px
}

.pbar-n {
font-size: 12px;
      color: var(--muted);
      font-weight: 600;
      width: 18px;
      text-align: right
}

.prev-card {
background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 10px
}

.prev-card:last-child {
margin-bottom: 0
}

.prev-hd {
display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px
}

.prev-av {
width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--royal-soft);
      color: var(--royal-deep);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 13px;
      flex: none
}

.prev-nm {
font-weight: 700;
      font-size: 14px
}

.prev-it {
font-size: 11.5px;
      color: var(--muted)
}

.prev-stars {
color: #F5A623;
      font-size: 13px;
      margin-left: auto
}

.prev-txt {
font-size: 13.5px;
      color: #3A4568;
      line-height: 1.6
}

/* ========================================================================== 
   Extracted prototype modifiers
   ========================================================================== */

.listing__div--primary-mt-8 { font-size:12px; color:var(--royal-deep); opacity:.75; margin-top:8px; }

.msg-btn.listing__msg-btn--bordered { background:var(--mist); color:var(--ink); border:1.5px solid var(--line); }

.listing__desc--mb-18 { margin-bottom:18px; }

.listing__ptab-reviews--hidden { display:none; }

.listing__pbar-fill--custom { width:83%; }

.listing__pbar-fill--custom-e995ee2 { width:13%; }

.listing__pbar-fill--warning { width:4%; background:var(--amber); }

.listing__pbar-fill--custom-d2fba0f { width:0%; }

.listing__pbar-fill--danger { width:0%; background:var(--danger); }

.listing__prev-stars--warning { color:#F5A623; }

.listing__span--custom { color:var(--line); }

@media(max-width:1315px) {
  .seller {
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 10px
  }

  .seller__profile {
    grid-column: 1 / -1
  }

  .seller .msg-btn {
    width: 100%
  }
}

@media(max-width:1024px) {
  :root {
    --listing-gap: 30px;
    --listing-section-space: 32px;
  }
}

@media(max-width:900px) {
  :root {
    --listing-gap: 26px;
  }

  .product {
    grid-template-columns: minmax(0, 1fr)
  }

  .buybox {
    position: static
  }

  .gallery .main-img {
    height: 340px;
    font-size: 110px
  }

  .specs {
    grid-template-columns: 1fr
  }

  .grades {
    grid-template-columns: 1fr 1fr
  }

  .rel-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:767px) {
  :root {
    --listing-gap: 24px;
    --listing-section-space: 28px;
  }

  .crumb {
    padding-top: 14px
  }

  .product {
    padding-bottom: 44px
  }

  .title {
    font-size: 26px
  }

  .price {
    font-size: 32px
  }

  .actions {
    margin: 18px 0
  }

  .story {
    padding: 16px 18px
  }
}

@media(max-width:680px) {
  .rel-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px
  }
}

@media(max-width:560px) {
  :root {
    --listing-gap: 20px;
  }

  .gallery .main-img {
    height: 300px;
    font-size: 96px
  }

  .thumbs {
    gap: 8px
  }

  .thumb,
  .thumbs.is-scrollable .thumb {
    flex: 0 0 64px;
    height: 64px;
    font-size: 28px
  }

  .gallery-arrow {
    width: 40px;
    height: 40px
  }

  .gallery-arrow--previous {
    left: 10px
  }

  .gallery-arrow--next {
    right: 10px
  }

  .rel-grid {
    grid-template-columns: 1fr
  }

  .seller {
    padding: 14px
  }

  .protect {
    padding: 12px 14px
  }
}

@media(max-width:480px) {
  :root {
    --listing-section-space: 24px;
  }

  .price {
    font-size: 30px
  }

  .grades {
    grid-template-columns: 1fr
  }

  .prof-hd,
  .prof-bd {
    padding-left: 18px;
    padding-right: 18px
  }

  .prof-stats {
    grid-template-columns: repeat(2, 1fr)
  }

  .prating-top {
    grid-template-columns: 1fr
  }

  .story {
    gap: 10px;
    padding: 15px 16px
  }
}

@media(max-width:390px) {
  .gallery .main-img {
    height: 260px;
    font-size: 86px
  }

  .price {
    font-size: 26px
  }

  .price-row {
    gap: 8px;
    margin: 12px 0 4px
  }

  .rrp {
    font-size: 14px
  }

  .save {
    padding: 2px 8px;
    font-size: 11px
  }

  .actions {
    gap: 8px;
    margin: 14px 0
  }

  .buy-btn {
    padding: 12px;
    border-radius: 11px;
    font-size: 14px
  }

  .offer-btn {
    padding: 11px;
    border-radius: 11px;
    font-size: 14px
  }

  .gallery-arrow {
    width: 36px;
    height: 36px
  }

  .offer-panel .orow {
    grid-template-columns: 1fr
  }

  .offer-panel .send {
    min-height: 44px
  }

  .seller__profile {
    align-items: flex-start
  }
}

/* Mid-range Listing price typography QA. */
@media (min-width: 1200px) and (max-width: 1366px) {
  .price {
    font-size: 36px;
  }

  .prt-big {
    font-size: 42px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .price {
    font-size: 34px;
  }

  .prt-big {
    font-size: 40px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .price {
    font-size: 32px;
  }

  .prt-big {
    font-size: 38px;
  }
}

@media (max-width: 767px) {
  .prt-big {
    font-size: 38px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .gallery-track {
    transition: none
  }

  .thumb {
    scroll-behavior: auto
  }
}

.gallery-slide > span.main-img__media {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f7f8fc url("../../images/generated/cricket-kit.png") center / contain no-repeat;
  color: transparent;
  font-size: 0;
}