/* Final application contrast rules. Native commerce and the shared header have
   separate styles. Artwork, garment colours and SVG artwork are left intact. */
.tshirthub-app {
  --app-control-ink: #171717;
  --app-control-hover: #333333;
  --app-control-accent: #b52e5c;
  --app-focus: #d12665;
  --app-copy-muted: #626262;
  --app-control-border: #888888;
}

/* A menu button's foreground used to override .dialog-primary, producing
   #222 text on #171717. Declare both colours for every primary state. */
.tshirthub-app .app-dialog .dialog-primary,
.tshirthub-app .app-dialog .menu-items button.dialog-primary,
.tshirthub-app .workshop-cta,
.tshirthub-app .inspiration-end .header-cta,
.tshirthub-app .know-end button,
.tshirthub-app .shop-add,
.tshirthub-app .add-cart-button,
.tshirthub-app .checkout-button:not(:disabled),
.tshirthub-app .checkout-submit:not(:disabled) {
  background: var(--app-control-ink);
  border-color: var(--app-control-ink);
  color: #ffffff;
}
.tshirthub-app .app-dialog .dialog-primary:hover,
.tshirthub-app .app-dialog .menu-items button.dialog-primary:hover,
.tshirthub-app .workshop-cta:hover,
.tshirthub-app .inspiration-end .header-cta:hover,
.tshirthub-app .know-end button:hover,
.tshirthub-app .shop-add:hover,
.tshirthub-app .add-cart-button:hover,
.tshirthub-app .checkout-button:not(:disabled):hover,
.tshirthub-app .checkout-submit:not(:disabled):hover {
  background: var(--app-control-hover);
  border-color: var(--app-control-hover);
  color: #ffffff;
}
.tshirthub-app .app-dialog .dialog-primary:active,
.tshirthub-app .app-dialog .menu-items button.dialog-primary:active,
.tshirthub-app .workshop-cta:active,
.tshirthub-app .inspiration-end .header-cta:active,
.tshirthub-app .know-end button:active,
.tshirthub-app .shop-add:active,
.tshirthub-app .add-cart-button:active,
.tshirthub-app .checkout-button:not(:disabled):active {
  background: var(--app-control-accent);
  border-color: var(--app-control-accent);
  color: #ffffff;
}
.tshirthub-app .app-dialog .menu-items button:not(.dialog-primary):not([data-action="studio"]) {
  background: #ffffff;
  color: var(--app-control-ink);
}
.tshirthub-app .app-dialog .menu-items button:not(.dialog-primary):not([data-action="studio"]):hover {
  background: #f5f5f5;
  color: var(--app-control-ink);
}
.tshirthub-app .app-dialog .menu-items [data-action="studio"],
.tshirthub-app .app-dialog .menu-items [data-action="studio"]:hover {
  background: var(--app-control-ink);
  border-color: var(--app-control-ink);
  color: #ffffff;
}
.tshirthub-app .library-preview-dialog .library-preview-actions .library-studio-button {
  background: #ffffff;
  border-color: var(--app-control-border);
  color: var(--app-control-ink);
}
.tshirthub-app .library-preview-dialog .library-preview-actions .library-studio-button:hover,
.tshirthub-app .library-preview-dialog .library-preview-actions .library-studio-button:active {
  background: var(--app-control-accent);
  border-color: var(--app-control-accent);
  color: #ffffff;
}
.tshirthub-app .app-dialog .dialog-header>.icon-button,
.tshirthub-app .app-dialog .saved-item>.icon-button {
  background: #f5f5f5;
  color: var(--app-control-ink);
}
.tshirthub-app .app-dialog .dialog-header>.icon-button:hover,
.tshirthub-app .app-dialog .saved-item>.icon-button:hover {
  background: #e9e9e9;
  color: var(--app-control-ink);
}

/* Small supporting text needs the same contrast as other body text. These
   selectors target interface labels, never text printed on a garment. */
.tshirthub-app .dialog-content-text,
.tshirthub-app .dialog-note,
.tshirthub-app .dialog-header .eyebrow,
.tshirthub-app .library-preview-copy,
.tshirthub-app .saved-info p,
.tshirthub-app .how-step p,
.tshirthub-app .how-step .step-number,
.tshirthub-app .empty-state p,
.tshirthub-app .size-list th,
.tshirthub-app .size-list td,
.tshirthub-app .checkout-note,
.tshirthub-app .checkout-sub,
.tshirthub-app .checkout-item p,
.tshirthub-app .checkout-summary>p,
.tshirthub-app .cart-info p,
.tshirthub-app .cart-summary .cart-partial,
.tshirthub-app .studio-cart .cart-info p,
.tshirthub-app .studio-cart .checkout-note,
.tshirthub-app .studio-cart-content>.dialog-note,
.tshirthub-app .studio-cart .cart-summary>div>span:last-child,
.tshirthub-app .inline-cart-empty,
.tshirthub-app .home-design>span,
.tshirthub-app .starter-card>span,
.tshirthub-app .starter-card:hover>span,
.tshirthub-app .atelier-promise,
.tshirthub-app .workshop-intro>p,
.tshirthub-app .workshop-copy>.eyebrow,
.tshirthub-app .workshop-copy>p,
.tshirthub-app .workshop-story figcaption,
.tshirthub-app .inspiration-intro>p,
.tshirthub-app .inspiration-meta,
.tshirthub-app .inspiration-caption strong,
.tshirthub-app .inspiration-caption small,
.tshirthub-app .library-empty,
.tshirthub-app .shop-breadcrumb,
.tshirthub-app .shop-heading p,
.tshirthub-app .shop-count,
.tshirthub-app .shop-card-category,
.tshirthub-app .shop-detail-category,
.tshirthub-app .shop-meta,
.tshirthub-app .know-eyebrow,
.tshirthub-app .know-fact-number,
.tshirthub-app .know-facts p,
.tshirthub-app .know-aside nav button>span,
.tshirthub-app .know-help p,
.tshirthub-app .know-search>p,
.tshirthub-app .know-empty p,
.tshirthub-app .know-prototype,
.tshirthub-app .policy-heading .eyebrow,
.tshirthub-app .support-heading>div>span,
.tshirthub-app .support-status,
.tshirthub-app .demo-tag,
.tshirthub-app .studio-steps .step,
.tshirthub-app .studio-steps .step.current,
.tshirthub-app .studio-steps .step.done,
.tshirthub-app .confirmed-garment,
.tshirthub-app .customize-bottom p,
.tshirthub-app .chat-disclaimer,
.tshirthub-app .preview-live,
.tshirthub-app .canvas-note,
.tshirthub-app .print-drag-hint,
.tshirthub-app .chat-composer>div>span,
.tshirthub-app .panel-heading>div>span,
.tshirthub-app .message-label,
.tshirthub-app .message.agent .message-body,
.tshirthub-app .chat-design-card strong,
.tshirthub-app .chat-design-card small,
.tshirthub-app .zoom-controls>span {
  color: var(--app-copy-muted);
}
.tshirthub-app .site-footer,
.tshirthub-app .site-footer .footer-copyright,
.tshirthub-app .site-footer .prototype-note {
  color: var(--app-copy-muted);
}
/* Leave room for the fixed support entry when the footer reaches the bottom. */
.tshirthub-app .site-footer {
  padding-bottom: max(96px, calc(76px + env(safe-area-inset-bottom)));
}
.tshirthub-app .empty-state>span {
  background: #f5f5f5;
  color: var(--app-copy-muted);
}

/* Secondary actions remain legible on white and pale grey surfaces. */
.tshirthub-app .save-button,
.tshirthub-app .size-guide,
.tshirthub-app .view-cart-button,
.tshirthub-app .shop-favorites-link,
.tshirthub-app .shop-breadcrumb button,
.tshirthub-app .shop-categories button,
.tshirthub-app .mobile-studio-tabs>button,
.tshirthub-app .app-dialog .remove-cart,
.tshirthub-app .studio-cart .quantity .remove-cart {
  color: var(--app-copy-muted);
}
.tshirthub-app .save-button:hover,
.tshirthub-app .size-guide:hover,
.tshirthub-app .view-cart-button:hover,
.tshirthub-app .shop-favorites-link:hover,
.tshirthub-app .shop-breadcrumb button:hover,
.tshirthub-app .shop-categories button:hover,
.tshirthub-app .shop-categories button[aria-current="true"],
.tshirthub-app .mobile-studio-tabs>button.selected,
.tshirthub-app .app-dialog .remove-cart:hover,
.tshirthub-app .studio-cart .quantity .remove-cart:hover {
  color: var(--app-control-ink);
}
.tshirthub-app .quick-edits button,
.tshirthub-app .view-toggle button,
.tshirthub-app .variant-options button,
.tshirthub-app .garment-options button {
  background: #ffffff;
  border-color: var(--app-control-border);
  color: #555555;
}
.tshirthub-app .quick-edits button:hover,
.tshirthub-app .view-toggle button:hover,
.tshirthub-app .variant-options button:hover,
.tshirthub-app .garment-options button:hover {
  background: #f5f5f5;
  border-color: var(--app-control-ink);
  color: var(--app-control-ink);
}
.tshirthub-app .view-toggle button.selected,
.tshirthub-app .variant-options button.selected,
.tshirthub-app .garment-options button.selected {
  background: var(--app-control-ink);
  border-color: var(--app-control-ink);
  color: #ffffff;
}
.tshirthub-app .view-toggle,
.tshirthub-app .zoom-controls {
  background: #f5f5f5;
  border-color: var(--app-control-border);
}
.tshirthub-app .studio-screen .panel-heading .icon-button,
.tshirthub-app .studio-screen .chat-composer .icon-button,
.tshirthub-app .studio-screen .zoom-controls .icon-button {
  color: var(--app-control-ink);
}
.tshirthub-app .studio-screen .panel-heading .icon-button:hover,
.tshirthub-app .studio-screen .chat-composer .icon-button:hover,
.tshirthub-app .studio-screen .zoom-controls .icon-button:hover {
  background: #e9e9e9;
  color: var(--app-control-ink);
}
.tshirthub-app .chat-send {
  background: var(--app-control-accent);
  color: #ffffff;
}
.tshirthub-app .chat-send:hover {
  background: #942149;
  color: #ffffff;
}
.tshirthub-app .support-faq,
.tshirthub-app .berry-link {
  color: var(--app-control-accent);
}
.tshirthub-app .support-toggle,
.tshirthub-app .support-toggle:hover,
.tshirthub-app .support-toggle:focus-visible,
.tshirthub-app .support-toggle:active {
  color: #ff9bc0;
}
.tshirthub-app .support-faq:hover,
.tshirthub-app .berry-link:hover {
  color: #942149;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Explicit field boundaries and placeholders also survive the old resets. */
.tshirthub-app .hero-composer,
.tshirthub-app .chat-composer,
.tshirthub-app .know-search>div,
.tshirthub-app .product-quantity,
.tshirthub-app .shop-quantity,
.tshirthub-app .checkout-fields input,
.tshirthub-app .checkout-fields select,
.tshirthub-app .checkout-extra input,
.tshirthub-app .checkout-extra textarea {
  border-color: var(--app-control-border);
}
.tshirthub-app .hero-composer textarea::placeholder,
.tshirthub-app .chat-composer textarea::placeholder,
.tshirthub-app .know-search input::placeholder,
.tshirthub-app .checkout-fields input::placeholder,
.tshirthub-app .checkout-extra input::placeholder,
.tshirthub-app .checkout-extra textarea::placeholder {
  color: var(--app-copy-muted);
  opacity: 1;
}
.tshirthub-app .hero-composer:focus-within,
.tshirthub-app .chat-composer:focus-within,
.tshirthub-app .know-search>div:focus-within {
  border-color: var(--app-focus);
  outline: 2px solid var(--app-focus);
  outline-offset: 3px;
}

/* Excludes the independently styled shared header. This focus colour exceeds
   3:1 on both the white app canvas and the dark footer/control backgrounds. */
.tshirthub-app :is(main,.app-dialog,.commerce-footer,.site-footer,.support-widget) :is(button,a,input,textarea,select,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 4px;
}
.tshirthub-app .studio-screen .print-control:focus-visible {
  outline: 2px solid #171717;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #ffffff;
}

/* Disabled actions remain readable; their disabled semantics and behaviour
   are unchanged. Do not dim garment swatches or artwork previews. */
.tshirthub-app :is(main,.app-dialog) button:disabled:not(.color-swatch),
.tshirthub-app :is(main,.app-dialog) button:disabled:not(.color-swatch):is(:hover,:active,:focus-visible) {
  background: #eeeeee;
  border-color: #888888;
  color: #626262;
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed;
}

@media (forced-colors: active) {
  .tshirthub-app :is(main,.app-dialog,.commerce-footer,.site-footer,.support-widget) :is(button,a,input,textarea,select,summary,[tabindex]):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 4px;
  }
}

.library-pagination{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:28px 0;padding:16px;color:#222;background:#fff}.library-pagination button{min-height:44px;padding:10px 16px;border:1px solid #767676;border-radius:6px;background:#171717;color:#fff;font:inherit}.library-pagination button:disabled{background:#ece7de;color:#59534b;opacity:1;cursor:default}.library-pagination button:focus-visible{outline:3px solid #d12665;outline-offset:3px}.library-pagination[hidden]{display:none}
@media(max-width:480px){.library-pagination{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 0}.library-pagination>span{grid-column:1/-1;grid-row:1;text-align:center}.library-pagination>button{width:100%;padding-inline:10px;font-size:14px;align-self:stretch}}