body{ background:#f3f4f6; }

  .sp-wrap{
    /* max-width:1200px; */
    margin:0 auto;
    padding:10px 10px calc(74x + 18px);
  }

.sp-card{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:18px;
  overflow:visible; /* hidden idi */
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}

.sp-head,
.sp-top,
.sp-meta,
.sp-mobile-hours,
.sp-desktop-hours{
  overflow:visible;
}

.sp-mobile-hours,
.sp-desktop-hours{
  position:relative;
  z-index:40;
}

  .sp-cover{ height:210px; background:#e5e7eb center/cover no-repeat; }
  .sp-head{ padding:12px 12px 16px; }

  /* ===== TOP ROW ===== */
  .sp-top{
    display:flex;
    gap:14px;
    align-items:flex-start;
    position:relative;
  }

  .sp-avatar{
    width:66px;height:66px;border-radius:16px;
    object-fit:cover;background:#fff;margin-top:-28px;
    border:3px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.12);
    flex:0 0 auto;
  }

  .sp-meta{ flex:1; min-width:0; }

  .sp-name-row{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
  }

  .sp-name{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#111827;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }

  .sp-verified{
    color:#0ea5e9;
    font-size:18px;
    line-height:1;
    flex:0 0 auto;
  }

  /* ===== Desktop right buttons (ONLY desktop) ===== */
  .sp-desktop-actions{
    display:none; /* mobile: hidden */
    flex:0 0 auto;
    width:min(430px, 100%);
    align-self:flex-start;
  }

  .sp-desk-stack{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .sp-desktop-topline{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    align-items:stretch;
  }
  .sp-desktop-topline.has-open-hours{
    grid-template-columns:minmax(0, 1fr);
  }
  .sp-desktop-topline.has-open-hours > :not(.sp-desktop-hours){
    display:none !important;
  }
  .sp-mobile-hours-inline{
    margin-top:12px;
  }
  .sp-mobile-hours{
    display:none;
    margin-top:12px;
    width:100%;
  }
  .sp-mobile-hours .store-hours-widget,
  .sp-mobile-hours .store-hours-widget__trigger{
    width:100%;
  }
  .sp-desktop-hours{
    min-width:0;
  }
  .sp-desktop-hours .store-hours-widget{
    height:100%;
  }
  .sp-desktop-hours .store-hours-widget__trigger{
    min-height:54px;
    height:100%;
    box-sizing:border-box;
    padding:10px 14px;
    gap:10px;
  }
  .sp-desktop-hours .store-hours-widget__icon{
    width:30px;
    height:30px;
    border-radius:9px;
    font-size:14px;
  }
  .sp-desktop-hours .store-hours-widget__content{
    flex-direction:row;
    align-items:center;
    gap:10px;
  }
  .sp-desktop-hours .store-hours-widget__label{
    flex:0 0 auto;
    font-size:11px;
    margin:0;
  }
  .sp-desktop-hours .store-hours-widget__summary{
    flex:1 1 auto;
    min-width:0;
    font-size:13px;
    gap:8px;
    flex-wrap:nowrap;
    white-space:nowrap;
  }
  .sp-desktop-hours .store-hours-widget__summary > span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .sp-desktop-hours .store-hours-widget__chevron{
    font-size:14px;
  }

  .sp-follow-desktop{
    width:100%;
    min-width:0;
    min-height:54px;
    border-radius:16px;
    border:1px solid #c7d2fe;
    background:#dbeafe;
    color:#2563eb;
    font-weight:800;
    font-size:14px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    cursor:pointer;
    user-select:none;
    transition:all .15s ease;
  }
  .sp-follow-desktop:hover{ background:#bfdbfe; border-color:#93c5fd; }

  .sp-follow-desktop.is-following{
    background:#e5e7eb;
    border-color:#d1d5db;
    color:#111827;
  }
  .sp-follow-desktop.is-following:hover{ background:#d1d5db; }
  .sp-follow-desktop.is-disabled{
    background:#f8fafc;
    border-color:#e2e8f0;
    color:#94a3b8;
    cursor:default;
  }

  .sp-call-desktop{
    width:100%;
    min-height:54px;
    border-radius:16px;
    border:1px solid #22c55e;
    background:#fff;
    color:#111827;
    font-weight:900;
    font-size:16px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-decoration:none;
    transition:all .15s ease;
    white-space:nowrap;
  }
  .sp-call-desktop i{ color:#16a34a; font-size:18px; }
  .sp-call-desktop:hover{
    background:#f0fdf4;
    transform:translateY(-1px);
  }
  .sp-call-desktop.is-hidden{ display:none; }
  .sp-phone-reveal{
    width:100%;
    border-radius:16px;
    border:1px solid #22c55e;
    background:#fff;
    padding:14px 18px;
    display:none;
    flex-direction:column;
    gap:10px;
    align-items:center;
  }
  .sp-phone-reveal.is-open{ display:flex; }
  .sp-phone-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#111827;
    font-weight:800;
    font-size:16px;
    text-decoration:none;
    transition:color .15s ease;
    white-space:nowrap;
  }
  .sp-phone-link i{
    color:#16a34a;
    font-size:18px;
    flex:0 0 auto;
  }
  .sp-phone-link:hover{
    color:#10b981;
  }

  /* ===== Desktop inline stats line (screenshot kimi) ===== */
  .sp-inline-stats{
    display:none;
    margin-top:6px;
    font-size:13px;
    font-weight:700;
    color:#111827;
  }
  .sp-inline-stats .muted{ color:#94a3b8; font-weight:700; }
  .sp-inline-stats .sep{ color:#cbd5e1; margin:0 8px; font-weight:900; }

  /* ===== Stats + Follow (mobile layout stays as you had) ===== */
  .actions-row{ position:relative; width:100%; }

  .sp-actions{
    margin-top:14px;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:stretch;
  }

  .sp-stats{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    background:#fff;
    border:1px solid #eef0f3;
    border-radius:12px;
    overflow:hidden;
    width:100%;
  }

  .sp-stat{ padding:10px 8px; text-align:center; }
  .sp-stat + .sp-stat{ border-left:1px solid #eef0f3; }

  .sp-num{ font-size:16px;font-weight:900;color:#111827;line-height:1.1; }
  .sp-lbl{ margin-top:4px;font-size:12px;font-weight:700;color:#6b7280;line-height:1.1; }

  /* Mobile follow button (existing) */
  .sp-follow{
    border-radius:12px;
    border:1px solid #93c5fd;
    background:#dbeafe;
    color:#1d4ed8;
    font-weight:600;
    font-size:13px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:110px;
    height:38px;
    min-height:38px;
    padding:8px 12px;
    user-select:none;
    white-space:nowrap;
    transition:all 0.15s ease;
    right:0;
    top:25px;
    position:absolute;
  }
  .sp-follow:hover{ background:#bfdbfe; border-color:#60a5fa; }
  .sp-follow .plus{ font-size:18px; line-height:0; display:inline-block; }
  .sp-follow.is-following{ background:#e5e7eb;border-color:#d1d5db;color:#111827; }
  .sp-follow.is-following:hover{ background:#d1d5db; }
  .sp-mobile-cta-row{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
  }
  .sp-mobile-topline{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    width:100%;
  }
  .sp-mobile-topline.has-open-hours{
    grid-template-columns:minmax(0, 1fr);
  }
  .sp-mobile-topline.has-open-hours > :not(.sp-mobile-hours){
    display:none !important;
  }
  .sp-mobile-cta-row.is-single{
    grid-template-columns:minmax(0,1fr);
  }
  .sp-call-mobile{
    border-radius:12px;
    border:1px solid #22c55e;
    background:#22c55e;
    color:#fff;
    font-weight:600;
    font-size:13px;
    height:38px;
    min-height:38px;
    padding:8px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 12px 24px rgba(34,197,94,.18);
    transition:all .15s ease;
  }
  .sp-call-mobile i{ font-size:18px; }
  .sp-call-mobile:hover{
    background:#16a34a;
    border-color:#16a34a;
    color:#fff;
  }

  /* ===== Body ===== */
  .sp-body{ padding:16px 12px 16px;border-top:1px solid #f3f4f6; }
  .sp-desc{
    margin:0;font-size:14px;line-height:1.6;color:#111827;
    white-space:pre-line;word-break:break-word;
  }

  /* desktop-da description bir az yuxarıda görünsün */
  .sp-body{ padding-top:14px; }

  /* ===== Address ===== */
  .sp-address{
    margin-top:12px;display:flex;align-items:flex-start;gap:10px;
    font-weight:700;color:#111827;font-size:14px;
  }
  .sp-address i{ color:#f97316;font-size:18px;margin-top:2px; }
  .sp-address a{
    color:#111827;text-decoration:underline;text-underline-offset:3px;
  }
  .sp-address a:hover{ color:#f97316; }

  /* ===== Gallery ===== */
  .sp-gallery{
    margin-top:16px;border-top:1px solid #f3f4f6;padding-top:14px;position:relative;
  }
  .sp-gal-wrap{ position:relative; }
  .sp-gal-row{
    display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:2px 2px 8px;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  }
  .sp-gal-btn{ flex:0 0 auto;border:none;padding:0;background:transparent;cursor:pointer;scroll-snap-align:start; }
  .sp-gal-item{
    width:118px;aspect-ratio:4/3;border-radius:14px;border:1px solid #eef0f3;
    overflow:hidden;background:#f3f4f6;box-shadow:0 6px 14px rgba(15,23,42,.06);
  }
  .sp-gal-item img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s ease; }
  .sp-gal-btn:hover .sp-gal-item img{ transform:scale(1.04); }

  .sp-gal-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    width:36px;height:36px;border-radius:50%;
    border:1px solid #e5e7eb;background:#fff;
    box-shadow:0 6px 18px rgba(15,23,42,.12);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;z-index:10;color:#6b7280;font-size:18px;
    transition:all 0.15s ease;
  }
  .sp-gal-arrow:hover{ background:#f3f4f6;color:#111827; }
  .sp-gal-arrow.is-hidden{ opacity:0; pointer-events:none; }
  .sp-gal-arrow-left{ left:4px; }
  .sp-gal-arrow-right{ right:4px; }

  /* ===== Section ===== */
  .sp-section{ margin-top:16px; }
  .sp-section-title{ margin:0 0 12px;font-weight:700;font-size:18px;color:#111827;padding:0 2px; }
  .sp-grid{
    display:grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap:5px;
    padding:0;
  }
  .sp-loader{
    text-align:center;
    color:#6b7280;
    font-size:13px;
    padding:12px 0 4px;
  }
  .sp-pager{ margin-top:16px; display:flex; justify-content:center; }
  .sp-empty{
    background:#fff;border:1px dashed #e5e7eb;border-radius:12px;
    padding:24px 14px;color:#6b7280;text-align:center;font-weight:700;font-size:15px;
  }

  /* ✅ MOBIL hissəni zədələmirik */
  @media (max-width: 800px) {
    .sp-mobile-hours-inline{
      display:none;
    }
    .sp-mobile-hours{
      display:block;
      margin-top:0;
      min-width:0;
    }
    .sp-mobile-hours .store-hours-widget{ border-radius:12px; }
    .sp-mobile-hours .store-hours-widget__trigger{
      height:38px;
      min-height:38px;
      border-radius:12px;
      padding:8px 10px;
      gap:8px;
    }
    .sp-mobile-hours .store-hours-widget__icon{
      width:26px;
      height:26px;
      border-radius:8px;
      font-size:13px;
    }
    .sp-mobile-hours .store-hours-widget__content{
      flex-direction:row;
      align-items:center;
      gap:8px;
    }
    .sp-mobile-hours .store-hours-widget__label{
      font-size:10px;
      flex:0 0 auto;
      line-height:1;
    }
    .sp-mobile-hours .store-hours-widget__summary{
      font-size:11px;
      gap:5px;
      flex:1 1 auto;
      min-width:0;
      flex-wrap:nowrap;
      white-space:nowrap;
      line-height:1;
    }
    .sp-mobile-hours .store-hours-widget__summary > span:last-child{
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .sp-mobile-hours .store-hours-widget__chevron{
      font-size:13px;
    }
    .sp-actions{
      margin-top:14px;
      display:flex;
      flex-direction:column;
      gap:12px;
      align-items:stretch;
      width:100%;
    }
    .sp-num{ font-size:18px; }
    .sp-lbl{ font-size:12px; }

    .sp-follow{
      background:#e5e7eb;
      border-color:#d1d5db;
      color:#111827;
      top:0 !important;
      min-width:0;
      height:38px;
      min-height:38px;
      width:100%;
      padding:8px 12px !important;
      position:relative;
      right:auto;
    }
    .sp-gal-row::-webkit-scrollbar{ display:none; }
.sp-avatar {
  width: 110px;
  height: 110px;
  border-radius: 16px;
  object-fit: cover;
  background: #fff;
  margin-top: -28px;
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  flex: 0 0 auto;
}
  }

  /* ✅ Desktop: screendeki kimi sadə görünüş (yalnız desktop) */
  @media (min-width:900px){
    .sp-wrap{ padding:20px 16px 40px; }
    .sp-cover{ height:320px; }
    .sp-head{ padding:20px 20px 14px; }
    .sp-body{ padding:18px 20px 20px; }

    .sp-avatar{ width:140px;height:140px;margin-top:-61px;border-radius:22px; }
    .sp-name{ font-size:22px; }

    /* desktop inline stats göstər */
    .sp-inline-stats{ display:block; }

    /* mobile stats block desktop-da görünməsin */
    .actions-row{ display:none; }

    /* sağ düymələr göstər */
    .sp-desktop-actions{ display:block; }
    .sp-mobile-hours-inline{ display:none; }
    .sp-mobile-hours{ display:none; }

    .sp-section-title{ font-size:20px; }

    /* gallery item böyük */
    .sp-gal-item{ width:180px; }
  }

  /* desktop */
.sp-desktop-hours .store-hours-widget__trigger{
  min-height:46px;
  height:46px;
  padding:10px 12px;
  gap:8px;
}

.sp-follow-desktop{
  min-height:46px;
  padding:11px 14px;
  font-size:13px;
}

.sp-call-desktop{
  min-height:46px;
  padding:11px 14px;
  font-size:14px;
}

/* mobile */
@media (max-width: 800px) {
  .sp-mobile-hours .store-hours-widget{ border-radius:10px; }

  .sp-mobile-hours .store-hours-widget__trigger{
    height:46px;
    min-height:46px;
    border-radius:10px;
    padding:10px 12px;
    gap:6px;
  }

  .sp-mobile-hours .store-hours-widget__icon{
    width:22px;
    height:22px;
    border-radius:7px;
    font-size:11px;
  }

  .sp-mobile-hours .store-hours-widget__label{
    font-size:9px;
  }

  .sp-mobile-hours .store-hours-widget__summary{
    font-size:10px;
    gap:4px;
  }

  .sp-follow{
    height:46px;
    min-height:46px;
    padding:10px 12px !important;
    font-size:12px;
    border-radius:10px;
  }

  .sp-call-mobile{
    height:46px;
    min-height:46px;
    padding:10px 12px;
    font-size:12px;
    border-radius:10px;
  }
}

  @media (max-width:1200px){
    .sp-grid{
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:0;
      padding:0 7px;
    }
  }

  @media (max-width:800px){
    .sp-grid{
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:0;
      padding:0 3px;
    }
  }

  /* ===== LIGHTBOX ===== */
  .lb{ position:fixed; inset:0; z-index:12000; display:none; }
  .lb.is-open{ display:block; }
  .lb-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.78); }
  .lb-shell{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    justify-content:center; align-items:center;
    padding:14px;
  }
  .lb-top{
    width:min(980px, 100%);
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin-bottom:10px; color:#fff; font-weight:800;
    user-select:none;
  }
  .lb-close{
    border:none; background:rgba(255,255,255,.12); color:#fff;
    border-radius:12px; padding:10px 12px; font-weight:900; cursor:pointer;
    display:flex; align-items:center; gap:8px;
  }
  .lb-close:hover{ background:rgba(255,255,255,.18); }
  .lb-stage{
    width:min(980px, 100%);
    border-radius:18px; overflow:hidden;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 18px 60px rgba(0,0,0,.45);
    position:relative;
  }
  .lb-viewport{
    width:100%;
    height:min(66vh, 560px);
    display:flex; align-items:center; justify-content:center;
    padding:10px;
  }
  .lb-img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
  .lb-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    border:none; width:44px;height:44px; border-radius:14px;
    background:rgba(0,0,0,.35); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:900;
  }
  .lb-nav:hover{ background:rgba(0,0,0,.5); }
  .lb-prev{ left:10px; }
  .lb-next{ right:10px; }
  .lb-strip{
    border-top:1px solid rgba(255,255,255,.14);
    padding:10px 10px 12px;
    background:rgba(0,0,0,.20);
  }
  .lb-strip-row{
    display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .lb-strip-row::-webkit-scrollbar{ display:none; }
  .lb-th{
    flex:0 0 auto; width:74px; aspect-ratio:4/3;
    border-radius:12px; overflow:hidden;
    border:2px solid transparent; background:#111;
    cursor:pointer; opacity:.9;
  }
  .lb-th img{ width:100%; height:100%; object-fit:cover; display:block; }
  .lb-th.is-active{ border-color:#60a5fa; opacity:1; }
  body.lb-lock{ overflow:hidden; }
  

  /* ===== CUSTOM SCROLLBAR ===== */
.sp-gal-row {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f3f4f6;
}

.sp-gal-row::-webkit-scrollbar {
  height: 6px;
}

.sp-gal-row::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

.sp-gal-row::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

.sp-gal-row::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}