/* WhiteCoder Tools — Apple Store inspired, screenshot-first catalog. Scoped to Tools only. */
.wc-toolstore {
  --wc-ink: #1d1d1f;
  --wc-gray: #6e6e73;
  --wc-surface: #f5f5f7;
  background: var(--wc-surface);
  color: var(--wc-ink);
  font-family: "General Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}
.wc-toolstore .container { width: min(1300px,calc(100% - 2 * var(--pad))); }
.wc-toolstore a { text-decoration: none; }
.wc-toolstore h1,.wc-toolstore h2,.wc-toolstore h3 {
  font-family: "General Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.026em; 
  overflow-wrap: normal;
}
.wc-toolstore .btn { display: inline-flex; align-items: center; gap:18px; min-height:47px; padding:0 23px; border:1px solid #d5d5d8; border-radius:100px; background:#fff; color:#222; font-weight:650; font-size:13px; }
.wc-toolstore .btn:hover { border-color:#a4a4a8; }
.wc-toolstore .btn--dark { color:#fff; background:#1d1d1f; border-color:#1d1d1f; }
.wc-toolstore .btn--dark:hover { background:#333; color:#fff; }

/* Left headline / right assistance, as in Apple's Store section. */
.wc-store-hero { padding:clamp(160px,16vw,216px) 0 112px; }
.wc-store-hero__layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; align-items:start; gap:54px; }
.wc-store-hero h1 { margin:0; max-width:850px; font-size:clamp(48px,5.25vw,76px); font-weight:650; line-height:1.10; letter-spacing:-.04em; }
.wc-store-hero h1 strong { font-weight:700; color:#19191b; }
.wc-store-hero h1 span { color:#75757b; }
.wc-store-hero__aside { display:grid; gap:20px; padding-top:14px; }
.wc-store-help { display:flex; align-items:center; gap:13px; }
.wc-store-help__icon { display:grid; place-items:center; background:#e6e6e9; width:42px; height:42px; border-radius:50%; flex:none; color:#2c2c30; }
.wc-store-help__icon svg { height:21px; width:21px; stroke:currentColor; fill:none; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.wc-store-help strong { display:block; font-size:13px; line-height:1.3; font-weight:680; }
.wc-store-help a { display:block; font-size:13px; margin-top:2px; color:#3264ac; font-weight:540; }
.wc-store-help a:hover { text-decoration:underline; }

/* Product-photo categories: no fabricated badges or big category boxes. */
.wc-store-categories { padding-bottom:103px; }
.wc-store-category-row { display:flex; align-items:end; gap:clamp(16px,2vw,30px); overflow-x:auto; padding:10px 0 17px; scroll-snap-type:x proximity; scrollbar-width:none; }
.wc-store-category-row::-webkit-scrollbar { display:none; }
.wc-store-category {
  flex:1 0 0; min-width:133px; max-width:215px;
  display:flex; flex-direction:column; justify-content:end; align-items:center;
  gap:13px; padding:0 2px 10px;
  border:0; background:transparent; color:#262629;
  cursor:pointer; text-align:center; scroll-snap-align:start;
  transition: transform .22s ease;
}
.wc-store-category:hover { transform:translateY(-4px); }
.wc-store-category__picture {
  display:block; position:relative; width:100%; max-width:181px; height:118px;
  background:transparent; overflow:visible;
}
.wc-store-category__screenshot {
  display:block; position:absolute; width:90%; height:96px; left:5%; bottom:6px;
  object-fit:cover; object-position:top center;
  border-radius:10px;
  border:1px solid #d6d7da;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  background:white;
}
.wc-store-category__favicon {
  position:absolute; right:1%; bottom:0;
  width:33px; height:33px; border-radius:10px;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.10);
  border:1px solid rgba(220,220,226,.9);
  z-index:2;
}
.wc-store-category__favicon img { width:23px; height:23px; }
.wc-store-category__stack { display:block; position:relative; width:100%; height:100%; }
.wc-store-category__stack-image {
  position:absolute; height:79px; width:67%; object-fit:cover; object-position:top left;
  border:1px solid #dddde0; border-radius:8px; bottom:9px; background:#fff;
  box-shadow:0 6px 13px rgba(0,0,0,.12);
}
.wc-store-category__stack-image--0 { left:0; z-index:1; }
.wc-store-category__stack-image--1 { left:17%; bottom:16px; z-index:2; }
.wc-store-category__stack-image--2 { left:34%; bottom:23px; z-index:3; }
.wc-store-category__no-image { display:grid;place-items:center;width:100%;height:100%; }
.wc-store-category__no-image svg { width:40px;height:40px;fill:none;stroke:#666;stroke-width:1.5; }
.wc-store-category__label { font-size:13px; font-weight:650; white-space:nowrap; }
.wc-store-category.is-selected .wc-store-category__label { color:#101012; font-weight:800; }
.wc-store-category.is-selected .wc-store-category__picture:after {
  content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:#202023;
}

/* Genuine favicon display */
.wc-tool-icon { display:inline-grid;place-items:center; width:32px; height:32px; flex:none; border-radius:9px; background:#fff; overflow:hidden; }
.wc-tool-icon img { display:block; height:26px; width:26px; object-fit:contain; }
.wc-tool-icon svg { height:22px;width:22px;stroke:#49494c; }

/* Featured catalog cards with real web-app screenshots. */
.wc-store-content { padding-bottom:105px; }
.wc-store-featured { margin-bottom:100px; }
.wc-store-featured__top { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:26px; }
.wc-store-featured__top h2 { font-size:clamp(26px,2.7vw,37px); line-height:1.22; font-weight:680; margin:0; }
.wc-store-featured__top h2 span { color:#74747b; font-weight:590; }
.wc-store-arrows { display:flex; gap:9px; }
.wc-store-arrows button { display:grid;place-items:center; width:40px;height:40px; border:0;border-radius:50%; background:#e7e7ea; color:#525258; cursor:pointer; font-size:22px; }
.wc-store-arrows button:hover { background:#dcdce0; }
.wc-store-featured__rail {
  display:flex; gap:21px; align-items:stretch; overflow-x:auto; 
  padding:0 max(var(--pad),calc((100vw - 1300px)/2)) 16px;
  scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#d5d5da transparent;
}
.wc-store-feature-card {
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  flex:0 0 clamp(304px,32vw,413px);
  min-width:0; min-height:498px;
  padding:0; border-radius:29px;
  background:#fff; color:#1d1d1f;
  box-shadow:0 10px 26px rgba(0,0,0,.035);
  scroll-snap-align:start; transition:transform .28s ease,box-shadow .28s ease;
}
.wc-store-feature-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.09); }
.wc-store-feature-card__copy { padding:31px 30px 25px; min-height:203px; }
.wc-store-feature-card__label { color:#717178; font-size:10px; font-weight:730; letter-spacing:.055em; text-transform:uppercase; }
.wc-store-feature-card__copy h3 { font-size:clamp(28px,2.6vw,36px); line-height:1.15; font-weight:690; margin:17px 0 8px; }
.wc-store-feature-card__copy p { font-size:15px; line-height:1.4; color:#525258; margin:0; max-width:335px; }
.wc-store-feature-card .wc-tool-art { flex:1; min-height:232px; width:100%; }
.wc-store-feature-card__open { display:flex; align-items:center; gap:10px; padding:11px 29px; background:#fff; color:#55555b; font-size:12px; font-weight:680; border-top:1px solid #f1f1f3; }
.wc-store-feature-card__open .wc-tool-icon { width:27px;height:27px; }
.wc-store-feature-card__open .wc-tool-icon img { width:22px;height:22px; }
.wc-store-feature-card__open > span:last-child { margin-left:auto; font-size:18px; font-weight:400; }

/* Image media: actual captures generated from the public tools' own homepages. */
.wc-tool-art { display:block; position:relative; overflow:hidden; min-width:0; background:#ececef; }
.wc-tool-art__uploaded { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.wc-tool-art__fallback { display:flex; align-items:center; justify-content:center; gap:14px; height:100%; background:#ececef; font-size:22px; font-weight:650; }
.wc-tool-art__fallback .wc-tool-icon { width:50px;height:50px; border-radius:13px; }
.wc-tool-art__fallback .wc-tool-icon img { width:40px;height:40px; }

/* All tools directory */
.wc-store-all__head { display:flex; align-items:end; justify-content:space-between; gap:30px; }
.wc-store-all__head h2 { margin:0; font-size:clamp(29px,3.05vw,41px); font-weight:680; line-height:1.17; }
.wc-store-all__head h2 span { font-weight:580; color:#77777f; }
.wc-store-search { display:flex;gap:11px;align-items:center;flex:0 0 276px;padding:12px 17px;border:1px solid #e5e5e8;border-radius:99px;background:#fff; }
.wc-store-search:focus-within { border-color:#929298; outline:1px solid #929298; }
.wc-store-search svg { width:18px;height:18px;stroke:#6b6b70;fill:none;stroke-width:1.7;stroke-linecap:round; }
.wc-store-search input { width:100%; min-width:0; outline:0; border:0; background:transparent; color:#202023; font:13px "General Sans",Inter,system-ui,sans-serif; }
.wc-store-search input::placeholder { color:#8b8b92; }
.wc-store-result-count { font-size:12px; color:#92929a; margin:18px 0 24px; }
.wc-store-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:23px; }
.wc-store-tile { display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:25px;background:#fff;box-shadow:0 9px 25px rgba(0,0,0,.03);color:#1d1d1f;transition:transform .28s ease,box-shadow .28s ease; }
.wc-store-tile:hover { transform:translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.08); }
.wc-store-tile .wc-tool-art { aspect-ratio:1.55; min-height:190px; flex:0 0 auto; }
.wc-store-tile__body { display:flex; flex-direction:column; flex:1; padding:21px 24px 23px; }
.wc-store-tile__name { display:flex; gap:11px; align-items:center; font-size:21px; line-height:1.2; }
.wc-store-tile__name strong { font-weight:690; }
.wc-store-tile__name .wc-tool-icon { border:1px solid #ededf0; }
.wc-store-tile__arrow { font-size:18px; font-weight:450; margin-left:auto; }
.wc-store-tile__body p { font-size:13px; line-height:1.5; color:#67676e; margin:13px 0 20px; }
.wc-store-tile__meta { font-size:11px; font-weight:650; color:#85858c; padding-top:15px; border-top:1px solid #eeeef0; margin-top:auto; }
.wc-store-empty { text-align:center;padding:74px 22px;background:#fff;border-radius:25px; }
.wc-store-empty h3 { font-size:24px;margin:0 0 6px; }
.wc-store-empty p { color:#717179;font-size:14px; }
.wc-store-empty .btn { margin-top:20px;cursor:pointer; }

/* Quiet closing CTA */
.wc-store-outro { background:#ededf0; border-top:1px solid #e3e3e6; padding:70px 0 78px; }
.wc-store-outro__inner { display:flex;align-items:center;justify-content:space-between;gap:35px; }
.wc-store-outro h2 { font-size:clamp(35px,4vw,57px);font-weight:660;line-height:1.13;margin:0; }
.wc-store-outro h2 span { color:#7c7c82; }
.wc-store-outro p { color:#6e6e74;font-size:15px;margin:11px 0 0; }

/* Tool-specific detail pages */
.wc-tool-detail__crumbs { display:flex;align-items:center;gap:12px;padding-top:132px;color:#808088;font-size:12px;font-weight:650; }
.wc-tool-detail__crumbs a { color:#303035; }
.wc-tool-detail__hero { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);align-items:center;gap:clamp(35px,5vw,74px);padding-top:55px;padding-bottom:98px; }
.wc-tool-detail__intro h1 { font-size:clamp(54px,6.9vw,98px);font-weight:700;line-height:1.08;margin:0; }
.wc-tool-detail__intro h1 span { color:#85858a; }
.wc-tool-detail__tagline { font-size:clamp(23px,2.5vw,34px);font-weight:650;line-height:1.2;margin:22px 0 16px; }
.wc-tool-detail__description { font-size:16px;line-height:1.65;color:#67676f;max-width:535px; }
.wc-tool-detail__actions { display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 48px; }
.wc-tool-detail__facts { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-top:22px;border-top:1px solid #dedee2; }
.wc-tool-detail__facts > div { display:grid;gap:8px; }
.wc-tool-detail__facts span { color:#929298;font-size:10px;font-weight:700;letter-spacing:.08em; }
.wc-tool-detail__facts strong { font-size:12px;font-weight:650;overflow-wrap:anywhere; }
.wc-tool-detail__hero > .wc-tool-art { aspect-ratio:1.5;min-height:325px;border-radius:25px;box-shadow:0 18px 45px rgba(0,0,0,.09);border:1px solid #ececef; }
.wc-tool-detail__body { padding:90px 0;background:#fff; }
.wc-tool-detail__body-inner { margin:0 auto;max-width:800px; }
.wc-tool-detail__body .wc-store-eyebrow { font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#87878f;font-weight:750; }
.wc-tool-detail__body h2 { font-size:clamp(36px,4.6vw,62px);font-weight:670;line-height:1.14;margin:0 0 21px; }
.wc-tool-detail__body p:not(.wc-store-eyebrow) { font-size:18px;color:#6c6c73;line-height:1.6;max-width:670px; }
.wc-tool-detail__body a { display:inline-block;font-size:13px;font-weight:680;margin-top:15px;padding-bottom:8px;border-bottom:1px solid #1d1d1f; }
.wc-tool-detail__related { padding-top:87px;padding-bottom:108px; }
.wc-tool-detail__related .wc-store-section-top { display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px; }
.wc-tool-detail__related .wc-store-section-top h2 { margin:0;font-size:clamp(25px,2.8vw,36px);font-weight:670; }
.wc-tool-detail__related .wc-store-section-top h2 span { color:#797980; }
.wc-tool-detail__related .wc-store-section-top a { font-size:12px;font-weight:650; }

@media(max-width:1090px){
  .wc-store-hero__layout { grid-template-columns:minmax(0,1fr) 235px;gap:35px; }
  .wc-store-hero h1 { font-size:clamp(48px,5.4vw,67px); }
  .wc-store-category { min-width:135px; }
  .wc-store-grid { gap:17px; }
}
@media(max-width:850px){
  .wc-store-hero__layout { grid-template-columns:1fr;gap:25px; }
  .wc-store-hero__aside { grid-template-columns:repeat(2,max-content);gap:28px; }
  .wc-store-hero { padding:145px 0 82px; }
  .wc-store-category { flex:0 0 160px; }
  .wc-store-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wc-tool-detail__hero { grid-template-columns:1fr; }
  .wc-tool-detail__hero > .wc-tool-art { aspect-ratio:1.7;min-height:330px; }
}
@media(max-width:640px){
  .wc-store-hero { padding:120px 0 62px; }
  .wc-store-hero h1 { font-size:clamp(42px,10vw,57px);line-height:1.13; }
  .wc-store-hero h1 strong { display:block; }
  .wc-store-hero__aside { grid-template-columns:1fr;gap:17px;padding-top:3px; }
  .wc-store-help__icon { width:36px;height:36px; }
  .wc-store-help__icon svg { width:19px;height:19px; }
  .wc-store-categories { padding-bottom:72px; }
  .wc-store-category-row { gap:14px; }
  .wc-store-category { min-width:133px;flex-basis:133px;gap:8px; }
  .wc-store-category__picture { height:104px; }
  .wc-store-category__screenshot { height:83px;border-radius:8px; }
  .wc-store-category__stack-image { height:66px; }
  .wc-store-category__label { font-size:12px; }
  .wc-store-featured { margin-bottom:72px; }
  .wc-store-featured__top h2 { font-size:26px; }
  .wc-store-arrows { display:none; }
  .wc-store-featured__rail { gap:14px; }
  .wc-store-feature-card { flex-basis:min(350px,calc(100vw - 44px));min-height:458px;border-radius:24px; }
  .wc-store-feature-card__copy { padding:27px 24px 22px;min-height:179px; }
  .wc-store-feature-card__copy h3 { font-size:30px;margin-top:14px; }
  .wc-store-feature-card__copy p { font-size:14px; }
  .wc-store-feature-card__open { padding:10px 24px; }
  .wc-store-all__head { flex-direction:column;align-items:stretch;gap:20px; }
  .wc-store-all__head h2 { font-size:29px; }
  .wc-store-search { flex:0 0 auto;width:100%; }
  .wc-store-grid { grid-template-columns:1fr;gap:18px; }
  .wc-store-tile .wc-tool-art { aspect-ratio:1.55; }
  .wc-store-content { padding-bottom:72px; }
  .wc-store-outro__inner { align-items:start;flex-direction:column; }
  .wc-store-outro h2 { font-size:38px; }
  .wc-tool-detail__crumbs { padding-top:116px; }
  .wc-tool-detail__hero { padding:37px 0 67px;gap:28px; }
  .wc-tool-detail__intro h1 { font-size:clamp(51px,11vw,70px); }
  .wc-tool-detail__hero > .wc-tool-art { aspect-ratio:1.45;min-height:245px; }
  .wc-tool-detail__body { padding:70px 0; }
  .wc-tool-detail__body p:not(.wc-store-eyebrow) { font-size:16px; }
  .wc-tool-detail__related { padding:68px 0 80px; }
}
@media(max-width:400px){
  .wc-store-hero h1 { font-size:40px; }
  .wc-store-feature-card { flex-basis:calc(100vw - 38px); }
  .wc-tool-detail__facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce){
  .wc-store-category,.wc-store-feature-card,.wc-store-tile { transition:none; }
  .wc-store-featured__rail { scroll-behavior:auto; }
}