/* Shared first-paint skeletons.  The layer keeps each section's measured
   height while its content is being prepared, so navigation never jumps. */
.site-skeleton-host{position:relative;isolation:isolate}
.site-skeleton-host.site-skeleton-loading> :not(.site-skeleton-layer){visibility:hidden!important}
.site-skeleton-element-loading{position:relative;isolation:isolate}.site-skeleton-element-loading> :not(.site-skeleton-element-layer){visibility:hidden!important}
.site-skeleton-layer{position:absolute;inset:0;z-index:4;display:grid;align-content:center;gap:16px;padding:clamp(28px,6vw,72px);overflow:hidden;background:var(--skeleton-surface,#f6efe3);pointer-events:none}
.site-skeleton-element-layer{position:absolute;inset:0;z-index:3;display:grid;align-content:center;gap:12px;padding:14px;overflow:hidden;background:var(--skeleton-surface,#f6efe3);pointer-events:none}.site-skeleton-element-layer .site-skeleton-photo{min-height:180px}.site-skeleton-element-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.site-skeleton-element-grid .site-skeleton-block{height:120px}.site-skeleton-list-stack{display:grid;gap:10px;width:100%}.site-skeleton-pill-row{display:flex;flex-wrap:wrap;gap:9px}.site-skeleton-pill-row .site-skeleton-pill{width:92px;height:36px}.site-skeleton-search{display:block;width:min(100%,420px);height:46px;border-radius:10px;background:rgba(154,169,170,.2)}
.site-skeleton-layer[hidden]{display:none!important}
.site-skeleton-stack{display:grid;gap:12px;width:min(100%,720px);margin-inline:auto}
.site-skeleton-line,.site-skeleton-block,.site-skeleton-dot{display:block;border-radius:999px;background:linear-gradient(105deg,rgba(154,169,170,.24) 20%,rgba(255,255,255,.72) 44%,rgba(154,169,170,.24) 68%);background-size:280% 100%;animation:siteSkeletonShimmer 1.35s ease-in-out infinite}
.site-skeleton-line{height:16px;width:72%}
.site-skeleton-line.wide{width:94%;height:24px}
.site-skeleton-line.short{width:48%}
.site-skeleton-line.tiny{width:28%;height:12px}
.site-skeleton-block{height:150px;width:100%;border-radius:14px}
.site-skeleton-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.site-skeleton-grid .site-skeleton-block{height:170px}
.site-skeleton-grid.two .site-skeleton-block{height:130px}
.site-skeleton-hero{width:min(100%,620px);margin-inline-start:0}
.site-skeleton-hero .site-skeleton-line.wide{height:52px;width:64%}
.site-skeleton-hero .site-skeleton-line.short{height:18px;width:42%}
.site-skeleton-host#today{--skeleton-surface:#f6efe3}
.site-skeleton-host#upload{--skeleton-surface:#fffdf9}
.site-skeleton-host#guides,.site-skeleton-host#qa,.site-skeleton-host#tips{--skeleton-surface:#f6efe3}
.site-skeleton-host#beans{--skeleton-surface:#163547}.site-skeleton-host#beans .site-skeleton-line,.site-skeleton-host#beans .site-skeleton-pill{background:linear-gradient(105deg,rgba(255,255,255,.15) 20%,rgba(255,255,255,.5) 44%,rgba(255,255,255,.15) 68%);background-size:280% 100%}
.site-skeleton-host#deals{--skeleton-surface:#e3f0f0}
.site-skeleton-host#archive{--skeleton-surface:#f6efe3}
.site-skeleton-host#profile{--skeleton-surface:#f6efe3}
.site-skeleton-host.public-profile-page{--skeleton-surface:#f6efe3}
.site-skeleton-host.admin-page{--skeleton-surface:#f6efe3}
.site-skeleton-host.deals-page{--skeleton-surface:#f6efe3;min-height:640px}
.site-skeleton-host.legal-page{--skeleton-surface:#f6efe3;min-height:620px}
.site-skeleton-host.card{--skeleton-surface:rgba(255,253,249,.9)}
.public-profile-skeleton{min-height:720px}
.site-skeleton-layer[data-kind="dark"]{color:#fffdf9}
@keyframes siteSkeletonShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(max-width:700px){
  .site-skeleton-layer{padding:28px 16px;gap:12px}
  .site-skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .site-skeleton-grid .site-skeleton-block{height:130px}
  .site-skeleton-hero .site-skeleton-line.wide{height:40px;width:82%}
  .site-skeleton-host.deals-page{min-height:720px}
  .site-skeleton-host.legal-page{min-height:760px}
}
@media(prefers-reduced-motion:reduce){.site-skeleton-line,.site-skeleton-block,.site-skeleton-dot{animation:none}}

/* Shapes mirror the real surfaces instead of presenting one generic block. */
.site-skeleton-hero,.site-skeleton-section,.site-skeleton-upload,.site-skeleton-profile,.site-skeleton-deals-page,.site-skeleton-legal{width:min(100%,1100px);margin-inline:auto}
.site-skeleton-hero{display:flex;align-items:center;gap:22px;min-height:230px;padding:22px 0}
.site-skeleton-logo{display:block;width:86px;height:86px;flex:0 0 86px;border-radius:50%;background:linear-gradient(105deg,rgba(154,169,170,.22),rgba(255,255,255,.78),rgba(154,169,170,.22));background-size:280% 100%;animation:siteSkeletonShimmer 1.35s ease-in-out infinite}
.site-skeleton-section{display:grid;gap:22px}.site-skeleton-heading{display:grid;gap:11px;width:min(100%,560px)}
.site-skeleton-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.site-skeleton-card-grid .site-skeleton-block{height:190px}.site-skeleton-bean-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;padding:16px;border-radius:16px;background:rgba(255,255,255,.1)}
.site-skeleton-today-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);gap:22px;padding:16px;border-radius:16px;background:rgba(255,255,255,.5)}
.site-skeleton-photo{display:block;min-height:310px;border-radius:12px;background:linear-gradient(105deg,rgba(154,169,170,.24),rgba(255,255,255,.78),rgba(154,169,170,.24));background-size:280% 100%;animation:siteSkeletonShimmer 1.35s ease-in-out infinite}
.site-skeleton-copy,.site-skeleton-upload-copy,.site-skeleton-form,.site-skeleton-stack{display:grid;align-content:center;gap:13px}.site-skeleton-copy{padding:12px 4px}
.site-skeleton-upload{display:grid;grid-template-columns:minmax(0,.8fr) minmax(300px,1.2fr);gap:34px;align-items:center;min-height:430px}.site-skeleton-upload-copy{padding:20px}.site-skeleton-form{padding:20px;border-radius:14px;background:rgba(255,255,255,.7);box-shadow:0 8px 22px rgba(22,53,71,.06)}
.site-skeleton-dropzone{display:block;height:150px;border:2px dashed rgba(154,169,170,.4);border-radius:12px;background:rgba(255,255,255,.45)}.site-skeleton-field{display:block;height:46px;border-radius:8px;background:linear-gradient(105deg,rgba(154,169,170,.24),rgba(255,255,255,.78),rgba(154,169,170,.24));background-size:280% 100%;animation:siteSkeletonShimmer 1.35s ease-in-out infinite}.site-skeleton-button{display:block;width:46%;height:46px;border-radius:999px;background:rgba(154,169,170,.28)}
.site-skeleton-profile{display:grid;gap:18px}.site-skeleton-cover{display:block;height:250px;border-radius:14px;background:linear-gradient(105deg,rgba(154,169,170,.24),rgba(255,255,255,.78),rgba(154,169,170,.24));background-size:280% 100%;animation:siteSkeletonShimmer 1.35s ease-in-out infinite}.site-skeleton-profile-identity{display:flex;align-items:center;gap:16px;padding:4px 12px}.site-skeleton-avatar{display:block;width:118px;height:118px;flex:0 0 118px;border-radius:50%;background:rgba(154,169,170,.28)}.site-skeleton-profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.site-skeleton-panel{display:block;height:145px;border-radius:12px;background:rgba(255,255,255,.7)}
.site-skeleton-deals-page{display:grid;gap:24px}.site-skeleton-filter-row{display:flex;gap:9px;flex-wrap:wrap}.site-skeleton-pill{display:block;width:78px;height:34px;border-radius:999px;background:rgba(154,169,170,.25)}.site-skeleton-deal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.site-skeleton-deal-card{display:block;height:300px;border-radius:12px;background:linear-gradient(105deg,rgba(154,169,170,.24),rgba(255,255,255,.78),rgba(154,169,170,.24));background-size:280% 100%;animation:siteSkeletonShimmer 1.35s ease-in-out infinite}
.site-skeleton-legal{display:grid;gap:15px;max-width:820px;margin-inline:0}.site-skeleton-paragraph{display:block;width:100%;height:72px;border-radius:8px;background:rgba(154,169,170,.2)}.site-skeleton-paragraph.short{width:68%;height:48px}
@media(max-width:700px){.site-skeleton-hero{min-height:170px;gap:14px}.site-skeleton-logo{width:62px;height:62px;flex-basis:62px}.site-skeleton-today-card,.site-skeleton-upload,.site-skeleton-bean-card{grid-template-columns:1fr;gap:14px}.site-skeleton-photo{min-height:210px}.site-skeleton-upload{min-height:560px}.site-skeleton-upload-copy{padding:4px}.site-skeleton-form{padding:14px}.site-skeleton-card-grid,.site-skeleton-deal-grid,.site-skeleton-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.site-skeleton-card-grid .site-skeleton-block{height:135px}.site-skeleton-deal-card{height:235px}.site-skeleton-cover{height:190px}.site-skeleton-avatar{width:100px;height:100px;flex-basis:100px}.site-skeleton-panel{height:120px}.site-skeleton-legal{max-width:none}}

/* Main-page skeletons need a visible gutter just like the loaded sections;
   otherwise the placeholders touch the section edges during first paint. */
body:not(.profile-page) .site-skeleton-host>.site-skeleton-layer{padding-inline:clamp(20px,5vw,60px)!important}
body:not(.profile-page) .site-skeleton-host>.site-skeleton-element-layer{padding:18px!important}
@media(max-width:700px){
 body:not(.profile-page) .site-skeleton-host>.site-skeleton-layer{padding:28px 20px!important}
 body:not(.profile-page) .site-skeleton-host>.site-skeleton-element-layer{padding:16px!important}
}

/* Match the public profile's full-bleed cover while its private data loads;
   the skeleton should not reintroduce the old boxed presentation. */
.public-profile-page.site-skeleton-loading>.site-skeleton-layer{padding:0!important}
.public-profile-page .public-profile-skeleton{width:100%;max-width:none;margin:0}
.public-profile-page .public-profile-skeleton .site-skeleton-cover{height:230px;border-radius:0}
.public-profile-page .public-profile-skeleton .site-skeleton-profile-identity,
.public-profile-page .public-profile-skeleton .site-skeleton-profile-grid{width:min(1120px,calc(100% - 32px));margin-inline:auto}
@media(max-width:700px){.public-profile-page .public-profile-skeleton .site-skeleton-cover{height:170px}}

/* Keep every first-paint shape inside a real section gutter.  The previous
   full-height layers were flush to the section edges, making their top and
   bottom rows look clipped while content was loading. */
.site-skeleton-host>.site-skeleton-layer{
  padding-block:clamp(28px,5vw,58px)!important;
}
.site-skeleton-host>.site-skeleton-element-layer{
  padding-block:clamp(18px,3vw,30px)!important;
}
.site-skeleton-layer>.site-skeleton-hero,
.site-skeleton-layer>.site-skeleton-section,
.site-skeleton-layer>.site-skeleton-upload,
.site-skeleton-layer>.site-skeleton-profile,
.site-skeleton-layer>.site-skeleton-deals-page,
.site-skeleton-layer>.site-skeleton-legal{
  padding-block:clamp(10px,2vw,24px);
}
/* Public profiles keep their edge-to-edge cover, but their identity and
   content placeholders still receive a comfortable vertical rhythm. */
.public-profile-page.site-skeleton-loading>.site-skeleton-layer{padding-block:0!important}
.public-profile-page .public-profile-skeleton .site-skeleton-profile-identity,
.public-profile-page .public-profile-skeleton .site-skeleton-profile-grid{padding-block:18px}
@media(max-width:700px){
  .site-skeleton-host>.site-skeleton-layer{padding-block:24px!important}
  .site-skeleton-host>.site-skeleton-element-layer{padding-block:16px!important}
  .site-skeleton-layer>.site-skeleton-hero,
  .site-skeleton-layer>.site-skeleton-section,
  .site-skeleton-layer>.site-skeleton-upload,
  .site-skeleton-layer>.site-skeleton-profile,
  .site-skeleton-layer>.site-skeleton-deals-page,
  .site-skeleton-layer>.site-skeleton-legal{padding-block:8px}
  .public-profile-page .public-profile-skeleton .site-skeleton-profile-identity,
  .public-profile-page .public-profile-skeleton .site-skeleton-profile-grid{padding-block:12px}
}

/* Section-specific first paint.  The real surfaces have different tones and
   proportions, so their placeholders should not all look like one gray card. */
.site-skeleton-host#today>.site-skeleton-layer{background:#eaf4f4;align-content:start}
.site-skeleton-host#today .site-skeleton-today-card{background:rgba(217,237,241,.82);gap:18px;padding:14px}
.site-skeleton-host#today .site-skeleton-photo{min-height:0;aspect-ratio:1;background:linear-gradient(105deg,rgba(118,174,184,.28) 20%,rgba(255,255,255,.78) 44%,rgba(118,174,184,.28) 68%);background-size:280% 100%}
.site-skeleton-host#today .site-skeleton-line{background:linear-gradient(105deg,rgba(72,132,145,.25) 20%,rgba(255,255,255,.82) 44%,rgba(72,132,145,.25) 68%);background-size:280% 100%}

.site-skeleton-host#archive>.site-skeleton-layer{background:#f6efe3;align-content:start}
.site-skeleton-host#archive .site-skeleton-card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.site-skeleton-host#archive .site-skeleton-card-grid .site-skeleton-block{height:auto;aspect-ratio:1;border-radius:11px;background:linear-gradient(105deg,rgba(177,157,132,.24) 20%,rgba(255,253,249,.82) 44%,rgba(177,157,132,.24) 68%);background-size:280% 100%}

.site-skeleton-host#upload>.site-skeleton-layer{background:#fffdf9;align-content:start}
.site-skeleton-host#upload .site-skeleton-upload{min-height:360px}
.site-skeleton-host#upload .site-skeleton-form{background:#f6efe3}
.site-skeleton-host#upload .site-skeleton-field{background:linear-gradient(105deg,rgba(177,157,132,.22) 20%,rgba(255,253,249,.9) 44%,rgba(177,157,132,.22) 68%);background-size:280% 100%}

.site-skeleton-host#guides>.site-skeleton-layer,
.site-skeleton-host#qa>.site-skeleton-layer,
.site-skeleton-host#tips>.site-skeleton-layer{background:#f6efe3;align-content:start}
.site-skeleton-host#guides .site-skeleton-card-grid .site-skeleton-block{height:170px;background:linear-gradient(105deg,rgba(177,157,132,.24) 20%,rgba(255,253,249,.8) 44%,rgba(177,157,132,.24) 68%);background-size:280% 100%}
.site-skeleton-host#qa .site-skeleton-card-grid .site-skeleton-block{height:132px;background:linear-gradient(105deg,rgba(126,163,166,.24) 20%,rgba(255,253,249,.82) 44%,rgba(126,163,166,.24) 68%);background-size:280% 100%}
.site-skeleton-host#tips .site-skeleton-card-grid .site-skeleton-block{height:148px;background:linear-gradient(105deg,rgba(239,170,90,.22) 20%,rgba(255,253,249,.82) 44%,rgba(239,170,90,.22) 68%);background-size:280% 100%}

.site-skeleton-host#beans>.site-skeleton-layer{background:#163547;align-content:start}
.site-skeleton-host#beans .site-skeleton-photo{background:linear-gradient(105deg,rgba(255,255,255,.13) 20%,rgba(255,255,255,.38) 44%,rgba(255,255,255,.13) 68%);background-size:280% 100%}
.site-skeleton-host#beans .site-skeleton-block{background:linear-gradient(105deg,rgba(255,255,255,.12) 20%,rgba(255,255,255,.36) 44%,rgba(255,255,255,.12) 68%);background-size:280% 100%}

.site-skeleton-host#deals>.site-skeleton-layer,
.site-skeleton-host.deals-page>.site-skeleton-layer{background:#e3f0f0;align-content:start}
.site-skeleton-host#deals .site-skeleton-deal-card,
.site-skeleton-host.deals-page .site-skeleton-deal-card{height:286px;background:linear-gradient(105deg,rgba(108,163,167,.22) 20%,rgba(255,255,255,.8) 44%,rgba(108,163,167,.22) 68%);background-size:280% 100%}

.site-skeleton-host#profile>.site-skeleton-layer,
.site-skeleton-host.public-profile-page>.site-skeleton-layer{background:#fffdf9;align-content:start}
.site-skeleton-host#profile .site-skeleton-cover,
.site-skeleton-host.public-profile-page .site-skeleton-cover{background:linear-gradient(105deg,rgba(126,163,166,.2) 20%,rgba(255,255,255,.84) 44%,rgba(126,163,166,.2) 68%);background-size:280% 100%}

/* On touch browsers, a gallery loading state is intentionally static.  A
   shimmer for every placeholder competes with image decoding and scrolling. */
@media (hover:none), (max-width:700px){
  .site-skeleton-host#today>.site-skeleton-layer *,
  .site-skeleton-host#archive>.site-skeleton-layer *,
  #featuredCard>.site-skeleton-element-layer *,
  #galleryGrid>.site-skeleton-element-layer *{animation:none!important}
  .site-skeleton-host#today .site-skeleton-today-card{grid-template-columns:1fr;gap:10px;padding:10px}
  .site-skeleton-host#today .site-skeleton-photo{aspect-ratio:1;min-height:0}
  .site-skeleton-host#today .site-skeleton-copy{display:none}
  .site-skeleton-host#archive .site-skeleton-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .site-skeleton-host#archive .site-skeleton-card-grid .site-skeleton-block{min-height:0}
  .site-skeleton-host#upload .site-skeleton-upload{min-height:390px}
  .site-skeleton-host#guides .site-skeleton-card-grid .site-skeleton-block{height:142px}
  .site-skeleton-host#qa .site-skeleton-card-grid .site-skeleton-block{height:112px}
  .site-skeleton-host#tips .site-skeleton-card-grid .site-skeleton-block{height:124px}
  .site-skeleton-host#deals .site-skeleton-deal-card,
  .site-skeleton-host.deals-page .site-skeleton-deal-card{height:224px}
}

/* Element-level loaders use the same section palette and density as their
   parent, including cards that arrive after the outer section is visible. */
#featuredCard>.site-skeleton-element-layer{background:#eaf4f4;padding:14px!important}
#featuredCard>.site-skeleton-element-layer .site-skeleton-element-grid{display:block}
#featuredCard>.site-skeleton-element-layer .site-skeleton-photo{min-height:0;aspect-ratio:1;background:linear-gradient(105deg,rgba(118,174,184,.28) 20%,rgba(255,255,255,.78) 44%,rgba(118,174,184,.28) 68%);background-size:280% 100%}
#galleryGrid>.site-skeleton-element-layer,
#publicProfileGalleryGrid>.site-skeleton-element-layer,
#profileGalleryGrid>.site-skeleton-element-layer{background:#f6efe3;padding:14px!important}
#galleryGrid>.site-skeleton-element-layer .site-skeleton-element-grid,
#publicProfileGalleryGrid>.site-skeleton-element-layer .site-skeleton-element-grid,
#profileGalleryGrid>.site-skeleton-element-layer .site-skeleton-element-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#galleryGrid>.site-skeleton-element-layer .site-skeleton-block,
#publicProfileGalleryGrid>.site-skeleton-element-layer .site-skeleton-block,
#profileGalleryGrid>.site-skeleton-element-layer .site-skeleton-block{height:auto;aspect-ratio:1;border-radius:11px;background:linear-gradient(105deg,rgba(177,157,132,.24) 20%,rgba(255,253,249,.82) 44%,rgba(177,157,132,.24) 68%);background-size:280% 100%}
#dealsGrid>.site-skeleton-element-layer,
#beanDealsGrid>.site-skeleton-element-layer,
#dealsPageGrid>.site-skeleton-element-layer{background:#e3f0f0;padding:16px!important}
#dealsGrid>.site-skeleton-element-layer .site-skeleton-deal-card,
#beanDealsGrid>.site-skeleton-element-layer .site-skeleton-deal-card,
#dealsPageGrid>.site-skeleton-element-layer .site-skeleton-deal-card{height:270px;background:linear-gradient(105deg,rgba(108,163,167,.22) 20%,rgba(255,255,255,.8) 44%,rgba(108,163,167,.22) 68%);background-size:280% 100%}
#profilePresetsList>.site-skeleton-element-layer,
#profileEquipmentList>.site-skeleton-element-layer,
#publicProfileSettingsList>.site-skeleton-element-layer,
#publicProfileEquipmentList>.site-skeleton-element-layer{background:#fffdf9;padding:16px!important}
@media(max-width:700px){
  #galleryGrid>.site-skeleton-element-layer .site-skeleton-element-grid,
  #publicProfileGalleryGrid>.site-skeleton-element-layer .site-skeleton-element-grid,
  #profileGalleryGrid>.site-skeleton-element-layer .site-skeleton-element-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #dealsGrid>.site-skeleton-element-layer .site-skeleton-deal-card,
  #beanDealsGrid>.site-skeleton-element-layer .site-skeleton-deal-card,
  #dealsPageGrid>.site-skeleton-element-layer .site-skeleton-deal-card{height:214px}
}