/* SDG recommendations: "You may also like" under the product. The cards are the shop's own (Astra + tweaks); here only
   the row: a strip that shows the next card peeking in, snaps card by card, scrolls without a scrollbar, with the title,
   "More from <brand>" and round arrows (computers) on one line. */
.sdg-rec{clear:both;margin:48px 0 8px;padding:0}
.sdg-rec__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin:0 0 16px}
.sdg-rec .sdg-rec__head h2{margin:0!important;padding:0} /* the theme's size for this heading (45 px, as Related products had) */
.sdg-rec__side{display:flex;align-items:center;gap:14px;margin-left:auto}
.sdg-rec__more{color:#191919;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sdg-rec__more:hover{color:#e32c2b}
.sdg-rec__nav{display:flex;gap:8px}
.sdg-rec__nav[hidden]{display:none}
.sdg-rec ul.products li.product[hidden]{display:none!important}
.sdg-rec .sdg-rec__arrow{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:0;margin:0;padding:0;border:1px solid #d7d7d7;border-radius:999px;background:#fff;color:#191919;box-shadow:none;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.sdg-rec .sdg-rec__arrow:hover:not(:disabled){border-color:#000;background:#000;color:#fff}
.sdg-rec .sdg-rec__arrow:focus{outline:0}
.sdg-rec .sdg-rec__arrow:focus-visible{outline:2px solid #000;outline-offset:2px}
.sdg-rec .sdg-rec__arrow:disabled{opacity:.35;cursor:default}

/* the strip (Astra lays ul.products out as a grid of columns; here one row that scrolls) */
.woocommerce .sdg-rec ul.products,.sdg-rec ul.products{--sdg-rec-gap:20px;display:flex!important;flex-wrap:nowrap!important;gap:var(--sdg-rec-gap);grid-template-columns:none!important;margin:0!important;padding:2px 0 6px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:0;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sdg-rec ul.products::-webkit-scrollbar{display:none}
.sdg-rec ul.products::before,.sdg-rec ul.products::after{display:none!important;content:none!important}
.woocommerce .sdg-rec ul.products li.product,.sdg-rec ul.products li.product{flex:0 0 calc((100% - 3 * var(--sdg-rec-gap)) / 4.25)!important;width:auto!important;max-width:none!important;margin:0!important;float:none!important;clear:none!important;scroll-snap-align:start}
@media (max-width:921px){
  .woocommerce .sdg-rec ul.products,.sdg-rec ul.products{--sdg-rec-gap:14px}
  .woocommerce .sdg-rec ul.products li.product,.sdg-rec ul.products li.product{flex-basis:calc((100% - 2 * var(--sdg-rec-gap)) / 3.2)!important}
}
@media (max-width:544px){
  .sdg-rec{margin-top:36px}
  .sdg-rec .sdg-rec__head{display:block;margin-bottom:12px}
  .sdg-rec #sdg-rec-title{font-size:28px;line-height:1.2;text-align:left} /* 45 px broke it into two lines on a phone */
  .sdg-rec__side{margin:6px 0 0}
  .woocommerce .sdg-rec ul.products,.sdg-rec ul.products{--sdg-rec-gap:12px}
  .woocommerce .sdg-rec ul.products li.product,.sdg-rec ul.products li.product{flex-basis:calc((100% - var(--sdg-rec-gap)) / 2.2)!important}
}
@media (prefers-reduced-motion:reduce){.sdg-rec ul.products{scroll-behavior:auto}}
