/* Book a Repair page (Sir, Oct 23): reuses css/pages/store.css (.stx). Only the repair-specific bits live here. */

.rpx .rpx-notice{order:3;margin-top:8px;font-size:14px;line-height:19px;color:var(--stx-ink-2)}
#st-latest .rpx-notice{order:2}
.rpx .st-add{text-decoration:none}
/* dark renders (back glass, board) sit in a black picture box */

.rpx .stx-cat.is-on .stx-cat-t{color:var(--stx-bur)}
@keyframes rpx-flash{0%,100%{box-shadow:var(--stx-shadow)}30%{box-shadow:0 0 0 3px rgba(128,0,32,.45),var(--stx-shadow)}}
.rpx-flash{animation:rpx-flash 1.6s ease 2}
/* FAQ: two columns of short answers */

#pgrid .rpx-notice{order:0;margin-top:6px}
/* real part photos (WGP / iFixit, white background): multiply melts the white into the grey picture box */
#pgrid .st-pimg.rpx-part{background:#f5f5f7;overflow:hidden}
#pgrid .st-pimg.rpx-part img,#st-latest .st-pimg.rpx-part img{mix-blend-mode:multiply}
#st-latest .st-pimg.rpx-part{background:#f5f5f7;border-radius:18px;overflow:hidden}
#st-latest .st-pimg.rpx-part img{inset:8%;width:84%;height:84%}
/* All repairs: brand title, then one titled section per device (iPhone, Apple Watch ... Samsung Mobile ...) */
#pgrid .rpx-brand{grid-column:1/-1;margin:56px 0 0;padding-top:28px;border-top:1px solid #d2d2d7;
  font-size:40px;line-height:44px;font-weight:600;letter-spacing:-.6px;color:var(--stx-ink)}
#pgrid .rpx-brand:first-child{margin-top:0;padding-top:0;border-top:0}
#pgrid .rpx-group{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;margin:18px 0 -6px;
  font-size:24px;line-height:28px;font-weight:600;letter-spacing:-.3px;color:var(--stx-ink)}
#pgrid .rpx-group:first-child,#pgrid .rpx-brand+.rpx-group{margin-top:4px}
#pgrid .rpx-group span::before{content:"";display:inline-block;width:8px;height:8px;margin:0 10px 3px 0;border-radius:50%;background:#800020}
#pgrid .rpx-group small{font-size:15px;font-weight:400;letter-spacing:0;color:var(--stx-ink-2)}
/* iFixit photos have their own background: fill the box */
#pgrid .st-pimg.rpx-ph img,#st-latest .st-pimg.rpx-ph img{inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
@media (max-width:734px){#pgrid .rpx-brand{font-size:30px;line-height:34px;margin-top:36px;padding-top:20px}#pgrid .rpx-group{font-size:20px;line-height:24px}}
.rpx-credit{max-width:980px;margin:0 auto;padding:0 22px 40px;font-size:12px;line-height:16px;color:var(--stx-ink-2)}
.rpx .stx-cat-img img{mix-blend-mode:multiply}
/* "See all 16 iPhone repairs" under a folded section */
#pgrid .rpx-seeall{grid-column:1/-1;justify-self:start;min-height:44px;padding:0 20px;border:1px solid #d2d2d7;border-radius:980px;background:#fff;
  font:inherit;font-size:15px;color:var(--stx-link);cursor:pointer;transition:border-color .2s var(--stx-ease)}
@media (hover:hover){#pgrid .rpx-seeall:hover{border-color:var(--stx-link)}}
#pgrid .st-prod .st-pimg+h3{margin-top:14px}
@media (prefers-reduced-motion:reduce){.rpx-flash{animation:none}#pgrid .rpx-seeall{transition:none}}

/* (Sir, Oct 31) glass border on the repair cards: a thin shiny edge (bright top-left, silver bottom-right) like Apple's glass,
   a soft inner highlight, and a light sweep across the edge on hover. Repairs page only. */
/* (smooth pass, Oct 31) no backdrop blur: the cards sit on the flat #f5f5f7 page, so blurring it looked exactly the same
   but made the browser blur behind ~70 cards on every scroll frame (heavy on phones). The glass look = gradient + edges. */
#pgrid .st-prod{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.04),0 12px 32px -14px rgba(0,0,0,.18)}
#pgrid .st-prod::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
  background:linear-gradient(135deg,#fff 0%,#c3c8d1 18%,#f4f5f8 34%,#9ea5b1 52%,#e9ebef 68%,#aeb4bf 84%,#fff 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
#pgrid .st-prod::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,1) 48%,rgba(128,0,32,.35) 52%,transparent 70%) -150% 0/250% 100% no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .3s,background-position 0s .3s}
@media (hover:hover){
  #pgrid .st-prod:hover::after{opacity:1;background-position:150% 0;transition:opacity .2s,background-position 1.1s cubic-bezier(.22,.61,.24,1)}
  #pgrid .st-prod:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 2px 4px rgba(0,0,0,.05),0 22px 44px -16px rgba(0,0,0,.24)}
}
@media (prefers-reduced-transparency:reduce){#pgrid .st-prod{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}}
@media (prefers-reduced-motion:reduce){#pgrid .st-prod::after{display:none}}