/* Selfgags store tiles — three equal tiles (Clips4Sale, FapHouse, Clips.com) in one row.
   Placed directly inside <main class="wrap sg-home-page">, so the row is exactly as wide as the card grid:
   left edge = grid column 1, right edge = last grid column, 20px gap (the grid's column gutter).
   Same design on selfgags.com and femdom.selfgags.com; only the links differ (see the HTML files). */
.sg-stores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:var(--sg-home-gap,36px) 0 0;padding:0;container-type:inline-size}
.sg-store{--c:#9447ff;--ct:#c9a6ff;--glow:rgba(148,71,255,.30);--edge:rgba(148,71,255,.55);
  position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.1cqi,26px);
  aspect-ratio:4/3;padding:clamp(16px,2.2cqi,30px);border-radius:14px;border:1px solid var(--edge);
  background:linear-gradient(180deg,#18171c 0%,#111114 100%);color:#f3f2f0;text-decoration:none;text-align:center;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.25;
  box-shadow:0 18px 40px -26px var(--glow),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease;-webkit-tap-highlight-color:transparent}
.sg-store--fh{--c:#f4bb2e;--ct:#ffd56b;--glow:rgba(244,187,46,.26);--edge:rgba(244,187,46,.5)}
.sg-store--clips{--c:#4a6fa5;--ct:#a9c3ec;--glow:rgba(92,135,200,.32);--edge:rgba(102,140,200,.55)}
/* brand top accent line */
.sg-store::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:1;background:linear-gradient(90deg,transparent,var(--c) 30%,var(--c) 70%,transparent)}
/* soft brand glow behind the logo (breathes gently) */
.sg-store-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 38%,var(--glow) 0%,transparent 72%);animation:sg-store-breathe 6s ease-in-out infinite}
/* diagonal light sweep, staggered across the three tiles */
.sg-store::after{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:38%;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,.13) 50%,rgba(255,255,255,0) 75%,transparent 100%);
  transform:translateX(-170%) skewX(-16deg);animation:sg-store-shine 6s ease-in-out infinite}
.sg-store--fh::after,.sg-store--fh .sg-store-fx{animation-delay:-4s}
.sg-store--clips::after,.sg-store--clips .sg-store-fx{animation-delay:-2s}
@keyframes sg-store-shine{0%{transform:translateX(-170%) skewX(-16deg)}24%,100%{transform:translateX(330%) skewX(-16deg)}}
@keyframes sg-store-breathe{0%,100%{opacity:.75}12%{opacity:1}40%{opacity:.75}}
.sg-store>span:not(.sg-store-fx){position:relative;z-index:2}
.sg-store-logo{display:flex;align-items:center;justify-content:center;height:clamp(40px,6cqi,78px);width:100%}
.sg-store-logo img{display:block;width:auto;max-width:78%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.sg-store--c4s .sg-store-logo img{height:96%}
.sg-store--fh .sg-store-logo img{height:44%}
.sg-store--clips .sg-store-logo img{height:100%}
.sg-store-txt{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.4cqi,16px)}
.sg-store-t{font-weight:800;font-size:clamp(14px,1.65cqi,21px);letter-spacing:.02em;text-wrap:balance}
.sg-store-cta{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;border:1px solid var(--edge);
  color:var(--ct);background:rgba(255,255,255,.03);font-weight:800;font-size:clamp(11px,1cqi,13px);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.sg-store-cta span{font-size:1.15em;line-height:1;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.sg-store:hover,.sg-store:focus-visible{transform:translateY(-3px);border-color:var(--c);box-shadow:0 22px 46px -20px var(--glow),0 0 0 1px var(--edge),inset 0 1px 0 rgba(255,255,255,.08)}
.sg-store:hover .sg-store-fx,.sg-store:focus-visible .sg-store-fx{opacity:1;animation-play-state:paused}
.sg-store:hover .sg-store-cta,.sg-store:focus-visible .sg-store-cta{background:var(--c);border-color:var(--c);color:#111}
.sg-store--clips:hover .sg-store-cta,.sg-store--clips:focus-visible .sg-store-cta{color:#fff}
.sg-store:hover .sg-store-cta span,.sg-store:focus-visible .sg-store-cta span{transform:translate(2px,-2px)}
.sg-store:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Phones (theme breakpoint 720px): three compact full-width rows, logo left, text and CTA right; 12px gap = grid gap on phones */
@media(max-width:720px){
  .sg-stores{grid-template-columns:1fr;gap:12px;margin-top:var(--sg-home-gap,28px)}
  .sg-store{aspect-ratio:auto;flex-direction:row;justify-content:flex-start;gap:16px;min-height:88px;padding:14px 16px 14px 14px;text-align:left;border-radius:12px}
  .sg-store::before{inset:0 auto 0 0;width:3px;height:auto;background:linear-gradient(180deg,transparent,var(--c) 25%,var(--c) 75%,transparent)}
  .sg-store-fx{background:radial-gradient(60% 120% at 12% 50%,var(--glow) 0%,transparent 70%)}
  .sg-store::after{width:30%}
  .sg-store-logo{flex:0 0 104px;width:104px;height:44px}
  .sg-store-logo img{max-width:100%}
  .sg-store-txt{align-items:flex-start;gap:8px;min-width:0}
  .sg-store-t{font-size:15px}
  .sg-store-cta{padding:6px 12px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.sg-store,.sg-store *,.sg-store::after{animation:none!important;transition:none!important}.sg-store::after{display:none}.sg-store:hover,.sg-store:focus-visible{transform:none}}
@media(forced-colors:active){.sg-store{background:Canvas;color:LinkText;border:1px solid ButtonText;box-shadow:none}.sg-store::before,.sg-store::after,.sg-store-fx{display:none}.sg-store-cta{border-color:ButtonText;color:LinkText;background:Canvas}}
@media(max-width:380px){.sg-store{gap:12px;padding-inline:12px}.sg-store-logo{flex-basis:88px;width:88px}.sg-store-t{font-size:14px}}

/* Keep logos and actions aligned when a store name wraps to two lines. */
@media(min-width:721px){.sg-store-t{min-height:2.5em;display:flex;align-items:center;justify-content:center}}