/* Category tabs */
.ts-tabs {
    display: flex;
    gap: .5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    margin-bottom: 2rem;
}
.ts-tab {
    background: transparent;
    border: 0;
    padding: 0 1.5rem .85rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: #888;
    cursor: pointer;
    position: relative;
    transition: color .15s ease;
}
.ts-tab:hover { color: #222; }
.ts-tab.is-active {
    color: #1a1a1a;
}
.ts-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #1a1a1a;
}
.ts-tab-content { display: none; }
.ts-tab-content.is-active { display: block; }

.ts-empty {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 3rem 0;
}

/* Collection group titles within a tab */
.ts-collection-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .01em;
    margin: 0 0 1.25rem;
}
.ts-collection-grid { margin-bottom: 2.5rem; }
.ts-collection-grid:last-child { margin-bottom: 0; }

/* Full-width hero image at the top of the page */
.ts-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}
.ts-hero__image {
    display: block;
    width: 100%;
    height: auto;
}

.ts-card { text-align: center; }
.ts-card__image {
    position: relative;
    background: none;
    overflow: hidden;
    margin-bottom: 1rem;
    width: 100%;
    border: 0;
    padding: 0;
    cursor: zoom-in;
    transition: transform .2s ease;
}
/* White card background only inside the Totes tab. */
.ts-tab-content[data-tab-content="totes"] .ts-card__image { background: #fff; }
/* Reserve a square area only while the image is still loading,
   so the spinner has somewhere to sit. Collapses once the image arrives. */
.ts-card__image:not(:has(img.is-loaded)) {
    aspect-ratio: 1 / 1;
}
.ts-card__image:hover { transform: translateY(-2px); }
.ts-card__image:focus-visible { outline: 2px solid #222; outline-offset: 3px; }

/* Spinner shown while the image hasn't loaded yet */
.ts-card__image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid rgba(0, 0, 0, 0.12);
    border-top-color: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    animation: ts-card-spin .9s linear infinite;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 1;
    transition: opacity .3s ease;
}
.ts-card__image:has(img.is-loaded)::before { opacity: 0; }
@keyframes ts-card-spin {
    to { transform: rotate(360deg); }
}

/* Price badge overlay (top-right of product image) */
.ts-card__price {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background: rgba(255, 255, 255, 0.96);
    color: #1a1a1a;
    padding: .35rem .65rem;
    border-radius: 4px;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    z-index: 2;
    pointer-events: none;
}

.ts-card__image img {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .4s ease;
}
.ts-card__image img.is-loaded {
    opacity: 1;
    transform: translateY(0);
}
.ts-card__title { padding-top: .25rem; }
.ts-card__swatches {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.ts-card__swatches-label {
    font-size: .85rem;
    color: #555;
    letter-spacing: .02em;
    margin-right: .15rem;
}
.ts-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #ccc;
    cursor: pointer;
    padding: 0;
    transition: transform .15s ease, border-color .15s ease;
}
.ts-swatch:hover { transform: scale(1.12); }
.ts-swatch.is-active { border-color: #222; transform: scale(1.12); }
.ts-swatch--black  { background: #1a1a1a; }
.ts-swatch--white  { background: #ffffff; }
.ts-swatch--sepia  { background: #d5c4b4; }

/* View toggle (used for totes — front/back) — plain text labels, not circles.
   Defined after .ts-swatch so all the circle-shape rules get overridden. */
.ts-card__swatches--views { gap: 1.2rem; }
.ts-swatch--view {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    border: 0;
    padding: .25rem .25rem;
    font-size: .9rem;
    font-weight: 500;
    color: #777;
    letter-spacing: .02em;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.15);
    text-underline-offset: 4px;
}
.ts-swatch--view:hover {
    transform: none;
    color: #1a1a1a;
    text-decoration-color: rgba(0, 0, 0, 0.5);
}
.ts-swatch--view.is-active {
    transform: none;
    color: #1a1a1a;
    font-weight: 700;
    text-decoration-color: #1a1a1a;
}

.ts-sidebar {
    background: rgba(0, 0, 0, 0.03);
    padding: 2rem 3rem 3rem 3rem;
    border-radius: 4px;
    position: sticky;
    top: 1rem;
    /* Push down so the sidebar's top lines up with the first image row,
       clearing the collection title above the product grid. */
    margin-top: 3.1rem;
}
.ts-sidebar-notice {
    font-size: .8rem;
    line-height: 1.5;
    color: #555;
    margin: 0 0 1.25rem;
}
.ts-fabric-intro {
    font-size: .85rem;
    line-height: 1.55;
    color: #333;
    margin: .5rem 0 1rem;
}
.ts-fabric {
    margin: .5rem 0 0;
    padding: 0;
}
.ts-fabric dt {
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #777;
    margin-top: .85rem;
}
.ts-fabric dt:first-child { margin-top: 0; }

/* Care instructions list */
.ts-care {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    font-size: .85rem;
    line-height: 1.5;
    color: #333;
}
.ts-care li {
    padding-left: 1.2rem;
    position: relative;
    margin-bottom: .35rem;
}
.ts-care li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #999;
}
.ts-fabric dd {
    margin: .15rem 0 0;
    font-size: .85rem;
    line-height: 1.5;
    color: #333;
}

/* Model photo links */
.ts-model-links {
    list-style: none;
    margin: .75rem 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.ts-model-links a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    cursor: pointer;
}
.ts-model-links a::before {
    content: '\1F441'; /* eye icon */
    font-size: .95rem;
}
/* Underline lives only on the text, so the eye icon is never underlined. */
.ts-model-links__label {
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.25);
    text-underline-offset: 3px;
}
.ts-model-links a:hover .ts-model-links__label { text-decoration-color: #1a1a1a; }
@media (max-width: 768px) {
    .ts-sidebar { position: static; margin-top: 2rem; }
}

/* Lightbox */
.ts-lightbox {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 2rem;
    cursor: zoom-out;
}
.ts-lightbox.is-open { display: flex; }
.ts-lightbox__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -24px 0 0 -24px;
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.18);
    border-top-color: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    animation: ts-lightbox-spin .9s linear infinite;
    box-sizing: border-box;
    font-size: 0; /* hides any leftover text inside the ring */
    text-indent: -9999px;
}
.ts-lightbox__spinner.is-error {
    margin: 0;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    animation: none;
    color: #fff;
    font-size: .9rem;
    letter-spacing: .03em;
    text-indent: 0;
}
@keyframes ts-lightbox-spin {
    to { transform: rotate(360deg); }
}
.ts-lightbox__figure {
    margin: 0;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: default;
}
.ts-lightbox__image {
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    background: #fff;
    border-radius: 4px;
}
.ts-lightbox__caption {
    color: #fff;
    text-align: center;
    margin-top: 1rem;
    font-size: 1rem;
    letter-spacing: .02em;
    opacity: 0;
    transition: opacity .2s ease;
}
.ts-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    padding: .25rem .75rem;
    opacity: .8;
    transition: opacity .15s ease, transform .15s ease;
}
.ts-lightbox__close:hover { opacity: 1; transform: scale(1.1); }

.ts-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 0;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ts-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.06);
}
.ts-lightbox__nav--prev { left: 1.25rem; }
.ts-lightbox__nav--next { right: 1.25rem; }
@media (max-width: 600px) {
    .ts-lightbox__nav { width: 40px; height: 40px; font-size: 1rem; }
    .ts-lightbox__nav--prev { left: .5rem; }
    .ts-lightbox__nav--next { right: .5rem; }
}

body.ts-lightbox-open { overflow: hidden; }

/* Size guide tables */
.ts-size-subhead {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #1a1a1a;
    margin: 1.5rem 0 .25rem;
}
.ts-size-subhead:first-of-type { margin-top: 1rem; }
.ts-size-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: .25rem;
    font-size: .8rem;
}
.ts-size-table th,
.ts-size-table td {
    padding: .3rem .25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
}
.ts-size-table th {
    font-weight: 700;
    letter-spacing: .02em;
}
.ts-size-table tbody th {
    width: 30%;
    white-space: nowrap;
}
.ts-size-table thead th {
    font-size: .7rem;
    text-transform: uppercase;
    color: #777;
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.ts-size-table td {
    color: #555;
    white-space: nowrap;
}
.ts-size-table tbody tr:last-child th,
.ts-size-table tbody tr:last-child td { border-bottom: 0; }
.ts-size-note {
    font-size: .75rem;
    color: #777;
    font-style: italic;
    margin: .65rem 0 0;
}