/* Small additions to Tabler. Theme swatches mirror the backgrounds of generated images. */
:root { --app-blue: #0096d6; }

.app-mark { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
            border-radius: .5rem; background: var(--app-blue); color: #fff; font-size: 1.25rem; }
.app-mark-lg { width: 3.5rem; height: 3.5rem; font-size: 2rem; border-radius: .9rem; }

.t-hp-blue  { background: radial-gradient(circle at 0 0, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 30%), linear-gradient(160deg, #6aa5dd, #4f8ccc); }
.t-omen     { background: linear-gradient(180deg, #f4f4f4, #c6c6c6); }
.t-omni     { background: linear-gradient(180deg, #fde8da, #f2a37a); }
.t-light    { background: linear-gradient(180deg, #ffffff, #eef2f7); }
.t-midnight { background: linear-gradient(180deg, #1e293b, #0f172a); color: #fff; }

/* icons inside buttons */
.btn > .ti { margin-right: .35rem; font-size: 1.1em; }
.btn > .ti:only-child { margin-right: 0; }

/* catalogue cards */
.product-card { position: relative; overflow: hidden; }
.product-select { position: absolute; top: .6rem; left: .6rem; z-index: 2; background: rgba(255,255,255,.9);
                  border-radius: .4rem; padding: .25rem .35rem; line-height: 1; cursor: pointer; }
.product-select .form-check-input { margin: 0; }
.product-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: .75rem; }
@media (max-width: 575.98px) { .product-card .card-body { padding: .75rem; } .product-card .card-title { font-size: .9rem; } }
.product-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.2)); }
.product-thumb .ti { font-size: 4rem; opacity: .4; }
.spec-mini li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-bar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1030;
            width: min(760px, calc(100% - 2rem)); }

/* product page */
.product-hero { position: relative; display: flex; gap: 1rem; align-items: center; justify-content: center;
                min-height: 260px; padding: 1.5rem; border-radius: var(--tblr-card-border-radius) var(--tblr-card-border-radius) 0 0; }
.product-hero img { max-width: 100%; max-height: 280px; object-fit: contain; min-width: 0; flex: 1 1 0;
                    filter: drop-shadow(0 8px 14px rgba(0,0,0,.22)); }
.product-hero .badge { position: absolute; left: 1rem; bottom: 1rem; }
.product-hero .ti { font-size: 5rem; opacity: .4; }
.port-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 1rem; text-align: center; }
.port-grid .ti { display: block; font-size: 1.75rem; margin-bottom: .25rem; color: var(--tblr-primary); }
.port-grid span { font-size: .8rem; font-weight: 600; }

/* product form */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; }
.photo-tile { border: 1px solid var(--tblr-border-color); border-radius: .5rem; padding: .5rem; }
.photo-tile img { width: 100%; height: 90px; object-fit: contain; margin-bottom: .35rem; }

/* series */
.series-swatch { height: 110px; display: flex; align-items: center; justify-content: center;
                 border-radius: var(--tblr-card-border-radius) var(--tblr-card-border-radius) 0 0; font-weight: 700; font-size: 1.2rem; }
.series-swatch img { max-height: 70px; max-width: 70%; object-fit: contain; }
.accent-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: middle; }

/* branding */
.brand-preview { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: .75rem; background: var(--tblr-bg-surface-secondary); }
.brand-preview img { height: 48px; max-width: 120px; object-fit: contain; }

/* share page */
.preview-box { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center;
               background: repeating-conic-gradient(#f1f3f5 0% 25%, #fff 0% 50%) 50% / 24px 24px; }
.preview-box img { max-width: 100%; max-height: 78vh; box-shadow: 0 6px 24px rgba(0,0,0,.18); transition: opacity .2s; }
.preview-box img:not([src]) { display: none; }
.preview-spinner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.preview-spinner[hidden] { display: none; }