/**
 * MHM2 — Related products / "You might also like" recommendation carousels (PDP).
 * Design: "Mediband Related Products". Two blocks (catalog.product.related +
 * product.info.upsell) each render a .rel-band; consecutive bands merge into one
 * shared band. All selectors scoped under .rel-band so nothing bleeds into other
 * PDP blocks. Values lifted from the prototype; Manrope is the site font.
 */

/* shared band — first .rel-band gets the top border + top padding; a following
   one (upsell after related) merges seamlessly */
.rel-band{background:#f8f5f0;border-top:1px solid #eee7dc}
.rel-band + .rel-band{border-top:none}
.rel-band .rel-inner{max-width:1160px;margin:0 auto;padding:52px 28px 58px}
.rel-band + .rel-band .rel-inner{padding-top:0}

/* header row */
.rel-band .rel-h{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.rel-band .rel-eyebrow{font:800 10.5px/1 Manrope,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#c85a17;margin:0 0 6px}
.rel-band .rel-title{margin:0;font:800 23px/1.15 Manrope,sans-serif;color:#16202b;letter-spacing:-.02em}

/* header arrows */
.rel-band .rel-arrows{display:flex;gap:8px;flex:none;margin-right:-4px}
.rel-band .rel-arr{width:40px;height:40px;border-radius:50%;border:1px solid #d9d3c8;background:#fff;color:#16202b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,opacity .15s;padding:0}
.rel-band .rel-arr:hover{background:#16202b;border-color:#16202b;color:#fff}
.rel-band .rel-arr:disabled{opacity:.35;cursor:default}
.rel-band .rel-arr:disabled:hover{background:#fff;color:#16202b;border-color:#d9d3c8}
.rel-band .rel-arr svg{width:17px;height:17px}

/* scroll track */
.rel-band .rel-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:4px 4px 14px;margin:-4px -4px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rel-band .rel-track::-webkit-scrollbar{display:none}

/* card */
.rel-band .rel-card{flex:0 0 208px;scroll-snap-align:start;background:#fff;border:1px solid #eee7dc;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;position:relative}
.rel-band .rel-card:hover{box-shadow:0 10px 26px -10px rgba(20,32,43,.18);transform:translateY(-3px)}

/* thumb (real product image on warm surface) */
.rel-band .rel-thumb{position:relative;display:flex;align-items:center;justify-content:center;height:150px;background:#fbf9f6;border-bottom:1px solid #f2ede4;overflow:hidden;text-decoration:none}
.rel-band .rel-thumb img{max-width:82%;max-height:82%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.rel-band .rel-tag{position:absolute;left:10px;top:10px;font:800 9.5px/1 Manrope,sans-serif;letter-spacing:.07em;text-transform:uppercase;background:#16202b;color:#fff;border-radius:20px;padding:4px 9px;z-index:1}
.rel-band .rel-tag--deal{background:#1f8a5b}

/* card body */
.rel-band .rel-cbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.rel-band .rel-cname{margin:0;font:700 13.5px/1.35 Manrope,sans-serif;color:#16202b;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.rel-band .rel-cname:hover{color:#c85a17}
.rel-band .rel-cfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}

/* price (Magento price-box) — bold 16px; special orange + old struck small */
.rel-band .rel-cprice{min-width:0}
.rel-band .rel-cprice .price-box{margin:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.rel-band .rel-cprice .price-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.rel-band .rel-cprice .price{font:800 16px/1.1 Manrope,sans-serif !important;color:#16202b !important;letter-spacing:-.01em}
.rel-band .rel-cprice .special-price .price{color:#c85a17 !important}
.rel-band .rel-cprice .old-price .price{font-size:12px !important;font-weight:600 !important;color:#a7aeb5 !important;text-decoration:line-through}
.rel-band .rel-cprice .old-price{order:2}

/* rating (Magento SHORT review summary) — small gold stars + muted count */
.rel-band .rel-crate .product-reviews-summary{display:flex;align-items:center;gap:6px;margin:0}
.rel-band .rel-crate .rating-summary{display:inline-flex;align-items:center;margin:0}
.rel-band .rel-crate .rating-summary .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
/* Luma's star-glyph CSS isn't loaded here, so draw the stars ourselves from the
   width-based markup: .rating-result = 5 empty stars; its inner span (width:NN%)
   clips the gold fill. */
.rel-band .rel-crate .rating-result{position:relative;display:inline-block;width:auto;margin:0;vertical-align:middle}
.rel-band .rel-crate .rating-result::before{content:"\2605\2605\2605\2605\2605";display:block;font-size:13px;line-height:1;letter-spacing:1.5px;color:#e2ddd2;font-family:Arial,"Helvetica Neue",sans-serif}
.rel-band .rel-crate .rating-result > span{position:absolute;top:0;left:0;display:block;overflow:hidden;white-space:nowrap}
.rel-band .rel-crate .rating-result > span::before{content:"\2605\2605\2605\2605\2605";display:block;font-size:13px;line-height:1;letter-spacing:1.5px;color:#ef9a22;font-family:Arial,"Helvetica Neue",sans-serif}
.rel-band .rel-crate .rating-result > span > span{display:none}
.rel-band .rel-crate .reviews-actions{font:600 11px Manrope,sans-serif;line-height:1}
.rel-band .rel-crate .reviews-actions .action.view{color:#a7aeb5;text-decoration:none}
.rel-band .rel-crate .reviews-actions .action.view:hover{color:#67707a}
.rel-band .rel-crate .reviews-actions .action.add{display:none}

/* quick-add / view button (+ flips to check on AJAX add) */
.rel-band .rel-qadd{width:34px;height:34px;border-radius:10px;border:1px solid #d9d3c8;background:#fff;color:#c85a17;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s;flex:none;text-decoration:none;padding:0}
.rel-band .rel-qadd:hover{background:#ef7622;border-color:#ef7622;color:#fff}
.rel-band .rel-qadd svg{width:16px;height:16px;display:block}
.rel-band .rel-qadd .rel-ic--check{display:none}
.rel-band .rel-qadd.is-added{background:#1f9d63;border-color:#1f9d63;color:#fff}
.rel-band .rel-qadd.is-added .rel-ic--plus{display:none}
.rel-band .rel-qadd.is-added .rel-ic--check{display:block}
.rel-band .rel-qadd.is-loading{opacity:.6;pointer-events:none}

/* tablet */
@media(max-width:1024px){
  .rel-band .rel-inner{padding-left:22px;padding-right:22px}
  .rel-band .rel-card{flex-basis:196px}
}
/* mobile — hide arrows (swipe), cards peek */
@media(max-width:640px){
  .rel-band .rel-inner{padding:36px 16px 42px}
  .rel-band .rel-title{font-size:19px}
  .rel-band .rel-arrows{display:none}
  .rel-band .rel-track{gap:12px;padding-bottom:10px}
  .rel-band .rel-card{flex-basis:44vw;min-width:158px}
  .rel-band .rel-thumb{height:118px}
  .rel-band .rel-cname{font-size:12.5px;min-height:34px}
  .rel-band .rel-cprice .price{font-size:15px !important}
}