/* Scoped to the homepage Top Searched Parts collection. */
/* The test page's stylesheet-only text block must not create a visible row. */
#main #text-block__2:has(link[href*="/binary/MAdqtj"]) {
  display: none !important;
}
@media (max-width: 767px) {
  .ryobi-top-parts .msc-ss-carousel .msc-ss-carousel-strip {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .ryobi-top-parts .msc-ss-carousel-strip::-webkit-scrollbar { display: none; }
  .ryobi-top-parts .msc-ss-carousel .msc-ss-carousel-slide {
    display: flex; width: 100% !important; left: 0 !important;
    transform: none !important; margin: 0; padding: 0;
  }
  .ryobi-top-parts .msc-ss-carousel-slide > .msc-ss-carousel-item {
    flex: 0 0 100% !important; width: 100% !important; min-width: 0;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
}
/* Paint the side gutters without widening the hero or the page's scroll area. */
.ryobi-hero-band {
  position: relative;
}
/* The banner artwork includes a white rim (~2.4% at top and bottom).
   Paint only outside the image box, aligned with the photographs inside it. */
.ryobi-hero-band::before {
  content: '';
  position: absolute;
  inset: 2.4% 0;
  box-shadow: 0 0 0 100vmax #d7d9d3;
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}
/* Introductory subheader: two points larger than the original 12pt. */
#main #text-block__0 p,
#main #text-block__0 p span { font-size: 14pt !important; }
/* Keep the intro readable and evenly wrapped on narrow phones, including Safari. */
@media (max-width: 767px) {
  #main #text-block,
  #main #text-block__0 {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  #main #text-block h1,
  #main #text-block h1 span {
    font-size: clamp(24px, 7vw, 28px) !important;
    line-height: 1.2;
  }
  #main #text-block h1,
  #main #text-block__0 p {
    text-wrap: balance;
    word-break: normal;
    overflow-wrap: normal;
  }
  #main #text-block__0 p,
  #main #text-block__0 p span {
    font-size: 16px !important;
    line-height: 1.4;
  }
}
.ryobi-search-buttons {
  display: flex; justify-content: center; gap: 16px;
  max-width: 1040px; margin: 0 auto -2px; padding: 0 12px;
}
.ryobi-search-buttons .ryobi-search-button {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex: 1 1 0; min-width: 0; min-height: 92px; padding: 20px 24px;
  box-sizing: border-box; border: 2px solid #000; border-radius: 8px;
  background: #000; color: #fff; text-decoration: none;
  font: 700 22px/1.25 Arial, sans-serif; text-transform: uppercase;
  text-align: center;
}
.ryobi-search-button::before {
  content: "";
  --icon-size: 44px;
  display: block; width: var(--icon-size); height: var(--icon-size);
  flex: 0 0 var(--icon-size); overflow: hidden;
  background-repeat: no-repeat;
  background-size: calc(var(--icon-size) * 9.615385) calc(var(--icon-size) * 1.923077);
}
.ryobi-search-button[href$="/iknowmypartnumber"]::before {
  background-image: url('https://images-us-prod.cms.commerce.dynamics.com/cms/api/jhddjbbnpf/imageFileData/MA997O?ver=b433&m=6&q=80');
  background-position: calc(var(--icon-size) * -1.096154) calc(var(--icon-size) * -.461538);
}
.ryobi-search-button[href$="/modelnumberb"]::before {
  background-image: url('https://images-us-prod.cms.commerce.dynamics.com/cms/api/jhddjbbnpf/imageFileData/MA8Gvc?ver=e460&m=6&q=80');
  background-position: calc(var(--icon-size) * -.865385) calc(var(--icon-size) * -.480769);
}
.ryobi-search-buttons .ryobi-search-button:hover { background: #252525; border-color: #a9b312; color: #fff; text-decoration: none; }
.ryobi-search-buttons .ryobi-search-button:focus-visible { outline: 3px solid #828900; outline-offset: 3px; }
@media (max-width: 767px) {
  .ryobi-search-buttons { flex-direction: column; gap: 12px; }
  .ryobi-search-buttons .ryobi-search-button {
    font-size: clamp(13px, 4.1vw, 18px); min-height: 80px;
    padding: 18px 8px; gap: 16px; white-space: nowrap;
    justify-content: flex-start;
  }
  .ryobi-search-button::before { --icon-size: 30px; }
  .ryobi-search-button span:not(.ryobi-search-icon) { flex: 0 1 auto; text-align: left; }
}
.ryobi-top-parts-old-title { display: none !important; }
/* Full-width background band around the centered product collection. */
#main .ryobi-parts-row {
  background-color: #f2f2f2 !important;
  box-shadow: 0 0 0 100vmax #f2f2f2;
  clip-path: inset(0 -100vmax);
  padding-top: 32px;
  padding-bottom: 32px;
}
#main .ryobi-parts-row .ryobi-top-parts { margin-bottom: 0; }
.ms-product-collection.ryobi-top-parts {
  border: 1px solid #c7c7c7;
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  margin-bottom: 40px;
  background: #fff;
}
.ryobi-top-parts .ms-product-collection__heading {
  text-transform: uppercase;
  display: block;
  margin: 0;
  padding: 18px 22px;
  background: #000;
  color: #fff;
  border-bottom: 1px solid #c7c7c7;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}
.ryobi-top-parts .msc-ss-carousel { position: relative; padding: 18px 12px 56px; }
.ryobi-top-parts .msc-ss-carousel-item { box-sizing: border-box; padding: 0 6px; margin: 0; }
.ryobi-top-parts .msc-ss-carousel .msc-flipper {
  position: absolute; top: auto; bottom: 8px; left: calc(50% - 46px);
  right: auto; transform: none; margin: 0; width: 40px; height: 36px;
  color: #333; z-index: 1;
}
.ryobi-top-parts .msc-ss-carousel .msc-flipper--next,
.ryobi-top-parts .msc-ss-carousel .msc-ss-carousel__flipper--next { left: calc(50% + 6px); }
.ryobi-top-parts .msc-product {
  display: flex;
  flex-direction: column;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  padding: 12px;
  background: #fff;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
}
.ryobi-top-parts .msc-product:hover { border-color: #828900; }
.ryobi-top-parts .msc-product:focus-visible { outline: 2px solid #535900; outline-offset: -3px; }
.ryobi-top-parts .msc-product__image {
  height: 190px;
  min-height: 0;
  padding: 0;
  margin: 0 0 12px;
}
.ryobi-top-parts .msc-product__image picture { display: block; height: 100%; }
.ryobi-top-parts .msc-product__image img {
  width: 100%; height: 100%; max-height: 190px; object-fit: contain;
}
.ryobi-top-parts .msc-product__details {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0; margin: 0; min-height: 0;
}
.ryobi-top-parts .msc-product__details .msc-product__title,
.ryobi-top-parts .msc-product__details .msc-product__inventory-label,
.ryobi-top-parts .msc-product__details .msc-price { margin: 0; padding: 0; }
.ryobi-top-parts .msc-product__inventory-label:empty { display: none; }
.ryobi-top-parts .msc-product__details .msc-product__title:last-child { margin-top: 6px; }
@media (max-width: 599px) {
  .ryobi-top-parts .ms-product-collection__heading { font-size: 23px; padding: 16px; }
  .ryobi-top-parts .msc-ss-carousel { padding: 12px 8px 52px; }
}
/* Desktop paddles match the PDP image viewer's circular controls. */
@media (min-width: 992px) {
  .ryobi-top-parts .msc-ss-carousel { padding: 18px 62px; }
  .ryobi-top-parts .msc-ss-carousel .msc-flipper {
    display: flex; align-items: center; justify-content: center;
    top: 50%; bottom: auto; left: 12px; right: auto;
    transform: translateY(-50%);
    width: 40px; height: 40px; padding: 0; border: 0;
    border-radius: 50% !important; background: #fff !important; color: #555;
    box-shadow: 0 .6px 1.8px rgba(0,0,0,.1), 0 3.2px 7.2px rgba(0,0,0,.13) !important;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
  }
  .ryobi-top-parts .msc-ss-carousel .msc-ss-carousel__flipper--next {
    left: auto; right: 12px;
  }
  .ryobi-top-parts .msc-flipper i,
  .ryobi-top-parts .msc-flipper i::before { color: #555; -webkit-text-fill-color: #555; }
  .ryobi-top-parts .msc-flipper:focus-visible { outline: 2px solid #555; outline-offset: 3px; }
}
@media (min-width: 992px) and (hover: hover) {
  .ryobi-top-parts .msc-ss-carousel .msc-flipper:hover {
    background: #f0f0f0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.16), 0 4px 10px rgba(0,0,0,.18) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ryobi-top-parts .msc-ss-carousel .msc-flipper { transition: none; }
}
