/* Shared grid/list presentation. Kept last in the asset chain so it can safely
   normalize cards created by the public shelf, search, discovery and owner UI. */
.tg-view-toggle {
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px;
  clear:both; margin:18px 0 10px; padding:9px 11px; border:1px solid rgba(20,36,28,.13);
  border-radius:12px; background:#fff; box-sizing:border-box;
}
.tg-view-toggle span { margin-right:auto; color:var(--tg-muted,#5e665f); font-size:.78rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.tg-view-toggle button { min-height:38px; padding:8px 11px; border:1px solid #d9ded9; border-radius:9px; background:#f7f9f7; color:#26382c; font:800 .8rem/1.2 inherit; cursor:pointer; white-space:normal; }
.tg-view-toggle button.is-active { border-color:#315c45; background:#315c45; color:#fff; }
.tg-view-switchable { clear:both; min-width:0; min-height:0; margin-bottom:clamp(32px,5vw,72px)!important; overflow:visible; }
.tg-view-switchable[data-view-mode="grid"] { grid-template-columns:repeat(auto-fit,minmax(min(245px,100%),1fr))!important; }

/* Every list card gets one bounded media column and one fluid content column. */
.tg-view-switchable[data-view-mode="list"] { display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:14px!important; }
.tg-view-switchable[data-view-mode="list"]>article {
  position:relative; display:grid!important; grid-template-columns:clamp(170px,24vw,280px) minmax(0,1fr)!important;
  grid-auto-rows:auto!important; align-items:start!important; width:100%!important; max-width:100%!important;
  min-width:0!important; min-height:0!important; height:auto!important; margin:0!important; box-sizing:border-box!important;
  overflow:visible!important;
}
.tg-view-switchable[data-view-mode="list"]>article>a:first-child,
.tg-view-switchable[data-view-mode="list"]>article>.tg-photo,
.tg-view-switchable[data-view-mode="list"]>article>.tg-member-item-image,
.tg-view-switchable[data-view-mode="list"]>article>.tg-chance-result-image {
  position:relative; grid-column:1!important; grid-row:1!important; align-self:start!important;
  display:block; width:100%!important; min-width:0!important; height:auto!important; aspect-ratio:4/3!important;
  overflow:hidden!important; border-radius:15px 0 0 15px;
}
.tg-view-switchable[data-view-mode="list"]>article>a:first-child img,
.tg-view-switchable[data-view-mode="list"]>article>.tg-photo img,
.tg-view-switchable[data-view-mode="list"]>article>.tg-member-item-image img,
.tg-view-switchable[data-view-mode="list"]>article>.tg-chance-result-image img {
  display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important;
  max-width:100%!important; max-height:none!important; aspect-ratio:4/3!important; object-fit:cover!important;
}
.tg-view-switchable[data-view-mode="list"]>article>div:not(.tg-shelf-preview) {
  grid-column:2!important; grid-row:1!important; align-self:start!important; width:auto!important; min-width:0!important;
  max-width:100%!important; padding:clamp(14px,2.5vw,24px)!important; box-sizing:border-box!important; overflow:visible!important;
}

/* Prevent long names, URLs, descriptions and control groups from escaping. */
.tg-view-switchable[data-view-mode="list"] h1,
.tg-view-switchable[data-view-mode="list"] h2,
.tg-view-switchable[data-view-mode="list"] h3,
.tg-view-switchable[data-view-mode="list"] p,
.tg-view-switchable[data-view-mode="list"] small,
.tg-view-switchable[data-view-mode="list"] span,
.tg-view-switchable[data-view-mode="list"] a,
.tg-view-switchable[data-view-mode="list"] button { max-width:100%; overflow-wrap:anywhere; word-break:normal; }
.tg-view-switchable[data-view-mode="list"] .tg-inline-editable { min-width:0; max-width:100%; }
.tg-view-switchable[data-view-mode="list"] .tg-inline-editable h2,
.tg-view-switchable[data-view-mode="list"] .tg-inline-editable h3,
.tg-view-switchable[data-view-mode="list"] .tg-inline-editable p { min-width:0; padding-right:2.5rem; }
.tg-view-switchable[data-view-mode="list"] .tg-owner-share,
.tg-view-switchable[data-view-mode="list"] .tg-card-actions,
.tg-view-switchable[data-view-mode="list"] .tg-item-tools,
.tg-view-switchable[data-view-mode="list"] article nav,
.tg-view-switchable[data-view-mode="list"] .tg-fulfillment,
.tg-view-switchable[data-view-mode="list"] .tg-chance-result-badges {
  display:flex!important; flex-wrap:wrap!important; align-items:center!important; justify-content:flex-start!important;
  gap:.55rem!important; min-width:0!important; height:auto!important;
}
.tg-view-switchable[data-view-mode="list"] .tg-owner-share>* ,
.tg-view-switchable[data-view-mode="list"] .tg-card-actions>* ,
.tg-view-switchable[data-view-mode="list"] .tg-item-tools>* ,
.tg-view-switchable[data-view-mode="list"] article nav>* { flex:0 1 auto; white-space:normal; }
.tg-view-switchable[data-view-mode="list"] details,
.tg-view-switchable[data-view-mode="list"] form,
.tg-view-switchable[data-view-mode="list"] fieldset,
.tg-view-switchable[data-view-mode="list"] input,
.tg-view-switchable[data-view-mode="list"] select,
.tg-view-switchable[data-view-mode="list"] textarea { min-width:0!important; max-width:100%!important; box-sizing:border-box!important; }
.tg-view-switchable[data-view-mode="list"] .tg-angle-hover-bubble { width:min(260px,calc(100% - 1.3rem)); }

/* All-shelves cards wrap their own anchor, so their internal layout is handled separately. */
.tg-view-switchable[data-view-mode="list"].tg-all-shelves-grid>article { display:block!important; overflow:hidden!important; }
.tg-view-switchable[data-view-mode="list"].tg-all-shelves-grid>article>a {
  display:grid!important; grid-template-columns:clamp(190px,28vw,310px) minmax(0,1fr)!important;
  grid-auto-rows:min-content!important; align-content:start!important; column-gap:clamp(16px,3vw,28px); width:100%; height:auto!important; box-sizing:border-box;
}
.tg-view-switchable[data-view-mode="list"].tg-all-shelves-grid .tg-shelf-preview {
  grid-column:1!important; grid-row:1/span 8!important; width:100%; min-width:0; height:auto!important;
  min-height:0!important; margin:0!important; aspect-ratio:16/10; align-self:start;
}
.tg-view-switchable[data-view-mode="list"].tg-all-shelves-grid article>a>*:not(.tg-shelf-preview) { grid-column:2!important; min-width:0; max-width:100%; }

.tg-member-pagination,.tg-item-pagination { position:relative; z-index:2; clear:both; margin-top:24px!important; margin-bottom:clamp(45px,7vw,90px)!important; }
.tg-shell>.tg-minor-footer,.tg-public>footer,.tg-market>.tg-minor-footer,footer.tg-minor-footer { clear:both; position:relative; z-index:3; margin-top:clamp(32px,6vw,80px); }

@media(max-width:760px) {
  .tg-view-toggle { justify-content:flex-start; }
  .tg-view-toggle span { width:100%; margin-right:0; }
  .tg-view-toggle button { flex:1 1 150px; }
  .tg-view-switchable[data-view-mode="list"]>article { display:block!important; border-radius:16px!important; overflow:hidden!important; }
  .tg-view-switchable[data-view-mode="list"]>article>a:first-child,
  .tg-view-switchable[data-view-mode="list"]>article>.tg-photo,
  .tg-view-switchable[data-view-mode="list"]>article>.tg-member-item-image,
  .tg-view-switchable[data-view-mode="list"]>article>.tg-chance-result-image {
    width:100%!important; max-width:none!important; border-radius:15px 15px 0 0!important; aspect-ratio:16/10!important;
  }
  .tg-view-switchable[data-view-mode="list"]>article>a:first-child img,
  .tg-view-switchable[data-view-mode="list"]>article>.tg-photo img,
  .tg-view-switchable[data-view-mode="list"]>article>.tg-member-item-image img,
  .tg-view-switchable[data-view-mode="list"]>article>.tg-chance-result-image img { aspect-ratio:16/10!important; }
  .tg-view-switchable[data-view-mode="list"]>article>div:not(.tg-shelf-preview) { width:100%!important; padding:16px!important; }
  .tg-view-switchable[data-view-mode="list"].tg-all-shelves-grid>article>a { display:block!important; }
  .tg-view-switchable[data-view-mode="list"].tg-all-shelves-grid .tg-shelf-preview { width:100%; margin:0 0 1rem!important; border-radius:12px; }
  .tg-view-switchable[data-view-mode="list"] .tg-angle-hover-bubble { display:none!important; }
}