/* TaLim Default — base styles. Mobile first; breakpoints 750px and 990px.
   Every value comes from the --tt-* variables written by snippets/css-variables.liquid. */

*, *::before, *::after { box-sizing: border-box; }
/* the hidden attribute always wins over a class display (Shopify themes do the same): a .tt-field
   label with hidden stayed a flex box and showed a second variant picker */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--tt-header-height, 0px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--tt-color-page);
  color: var(--tt-color-text);
  font-family: var(--tt-font-body);
  font-weight: var(--tt-font-body-weight);
  font-style: var(--tt-font-body-style);
  font-size: var(--tt-body-size);
  line-height: var(--tt-body-line-height);
  -webkit-font-smoothing: antialiased;
}
.tt-main { flex: 0 0 auto; outline: none; } /* classic: a short page ends at the footer (white below), no footer pinned to the bottom */
img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* headings + type presets (h1..h6 settings) */
h1, .tt-h1, h2, .tt-h2, h3, .tt-h3, h4, .tt-h4, h5, .tt-h5, h6, .tt-h6 { margin: 0 0 0.5em; }
h1, .tt-h1 { font-family: var(--tt-h1-font); font-weight: var(--tt-h1-weight); font-size: calc(var(--tt-h1-size) * 0.72); line-height: var(--tt-h1-line-height); letter-spacing: var(--tt-h1-letter-spacing); text-transform: var(--tt-h1-case); }
h2, .tt-h2 { font-family: var(--tt-h2-font); font-weight: var(--tt-h2-weight); font-size: calc(var(--tt-h2-size) * 0.78); line-height: var(--tt-h2-line-height); letter-spacing: var(--tt-h2-letter-spacing); text-transform: var(--tt-h2-case); }
h3, .tt-h3 { font-family: var(--tt-h3-font); font-weight: var(--tt-h3-weight); font-size: calc(var(--tt-h3-size) * 0.85); line-height: var(--tt-h3-line-height); letter-spacing: var(--tt-h3-letter-spacing); text-transform: var(--tt-h3-case); }
h4, .tt-h4 { font-family: var(--tt-h4-font); font-weight: var(--tt-h4-weight); font-size: var(--tt-h4-size); line-height: var(--tt-h4-line-height); letter-spacing: var(--tt-h4-letter-spacing); text-transform: var(--tt-h4-case); }
h5, .tt-h5 { font-family: var(--tt-h5-font); font-weight: var(--tt-h5-weight); font-size: var(--tt-h5-size); line-height: var(--tt-h5-line-height); letter-spacing: var(--tt-h5-letter-spacing); text-transform: var(--tt-h5-case); }
h6, .tt-h6 { font-family: var(--tt-h6-font); font-weight: var(--tt-h6-weight); font-size: var(--tt-h6-size); line-height: var(--tt-h6-line-height); letter-spacing: var(--tt-h6-letter-spacing); text-transform: var(--tt-h6-case); }
@media (min-width: 750px) {
  h1, .tt-h1 { font-size: var(--tt-h1-size); }
  h2, .tt-h2 { font-size: var(--tt-h2-size); }
  h3, .tt-h3 { font-size: var(--tt-h3-size); }
}
.tt-text-body { font-family: var(--tt-font-body); font-weight: var(--tt-font-body-weight); }
.tt-text-subheading { font-family: var(--tt-font-subheading); font-weight: var(--tt-font-subheading-weight); }
.tt-text-accent { font-family: var(--tt-font-accent); font-weight: var(--tt-font-accent-weight); }

/* sections: one wrapper per section from the renderer (tt-section).
   Opt-in: a section whose schema "class" includes "tt-cv" skips layout/paint while off screen
   (same CSS in editor and storefront). Only for sections with no fixed/sticky/popover children:
   content-visibility contains paint, which would clip menus, drawers and dialogs. */
.tt-section { position: relative; }
.tt-main > .tt-cv:not(:first-child) { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.tt-page-width { width: 100%; max-width: calc(var(--tt-page-width) + 2 * var(--tt-page-gutter)); margin-inline: auto; padding-inline: var(--tt-page-gutter); }
@media (min-width: 750px) { :root { --tt-page-gutter: 32px; } }
@media (min-width: 990px) { :root { --tt-page-gutter: 48px; } }
.tt-full-width { width: 100%; }

/* layout helpers used by the group block and sections */
.tt-stack { display: flex; flex-direction: column; gap: var(--tt-gap, 16px); }
.tt-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--tt-gap, 16px); }
.tt-grid { display: grid; gap: var(--tt-gap, 16px); grid-template-columns: repeat(var(--tt-cols-mobile, 1), minmax(0, 1fr)); }
@media (min-width: 750px) { .tt-grid { grid-template-columns: repeat(var(--tt-cols-tablet, var(--tt-cols, 2)), minmax(0, 1fr)); } }
@media (min-width: 990px) { .tt-grid { grid-template-columns: repeat(var(--tt-cols, 3), minmax(0, 1fr)); } }
.tt-align-start { align-items: flex-start; } .tt-align-center { align-items: center; } .tt-align-end { align-items: flex-end; }
.tt-justify-start { justify-content: flex-start; } .tt-justify-center { justify-content: center; } .tt-justify-end { justify-content: flex-end; } .tt-justify-between { justify-content: space-between; }
.tt-text-left { text-align: left; } .tt-text-center { text-align: center; } .tt-text-right { text-align: right; }

/* media */
.tt-media { position: relative; overflow: hidden; background: var(--tt-color-surface); border-radius: var(--tt-media-radius, 0); }
.tt-media > img, .tt-media > video, .tt-media > picture > img { width: 100%; height: 100%; object-fit: cover; }
.tt-ratio { aspect-ratio: var(--tt-ratio, 1); }
.tt-placeholder { width: 100%; height: 100%; fill: currentColor; opacity: 0.35; background: var(--tt-color-surface); }

/* buttons */
.tt-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s, opacity .15s;
}
.tt-button--primary { background: var(--tt-button-primary-background); color: var(--tt-button-primary-text); border: var(--tt-button-primary-border-width) solid var(--tt-button-primary-border); border-radius: var(--tt-button-primary-radius); font-family: var(--tt-button-primary-font); font-weight: var(--tt-button-primary-weight); text-transform: var(--tt-button-primary-case); }
.tt-button--secondary { background: var(--tt-button-secondary-background); color: var(--tt-button-secondary-text); border: var(--tt-button-secondary-border-width) solid var(--tt-button-secondary-border); border-radius: var(--tt-button-secondary-radius); font-family: var(--tt-button-secondary-font); font-weight: var(--tt-button-secondary-weight); text-transform: var(--tt-button-secondary-case); }
.tt-button--link { background: none; border: 0; padding: 0; min-height: 0; text-decoration: underline; }
.tt-button:hover { opacity: 0.88; }
.tt-button[disabled], .tt-button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.tt-pill { border-radius: var(--tt-pill-radius); }

/* inputs */
.tt-input, .tt-select, .tt-textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; font-size: var(--tt-input-size);
  background: var(--tt-input-background); color: var(--tt-input-text);
  border: var(--tt-input-border-width) solid var(--tt-input-border); border-radius: var(--tt-input-radius);
}
.tt-textarea { min-height: 120px; resize: vertical; }
.tt-field { display: flex; flex-direction: column; gap: 6px; }
.tt-field__label { font-size: 0.875em; }

/* focus + accessibility */
:focus-visible { outline: 2px solid var(--tt-color-foreground); outline-offset: 2px; }
.tt-visually-hidden, .tt-visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tt-skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 8px 16px; background: var(--tt-color-background); color: var(--tt-color-foreground); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

/* badges */
.tt-badge { display: inline-flex; align-items: center; padding: 2px 10px; font-size: 12px; font-family: var(--tt-badge-font); text-transform: var(--tt-badge-case); border-radius: var(--tt-badge-radius); }
.tt-badge--sale { background: var(--tt-badge-sale-background); color: var(--tt-badge-sale-text); }
.tt-badge--soldout { background: var(--tt-badge-soldout-background); color: var(--tt-badge-soldout-text); }

/* drawers, dialogs, popovers (tt-drawer / tt-dialog components in tt-runtime.js) */
tt-drawer, tt-dialog { display: contents; }
.tt-overlay { position: fixed; inset: 0; z-index: 90; background: rgb(0 0 0 / 0.4); opacity: 0; pointer-events: none; transition: opacity .2s; }
.tt-overlay[data-open] { opacity: 1; pointer-events: auto; }
.tt-drawer {
  position: fixed; top: 0; bottom: 0; z-index: 100; width: min(420px, 100vw); overflow: auto;
  background: var(--tt-drawer-background); color: var(--tt-drawer-text); border-inline-start: 1px solid var(--tt-drawer-border);
  transition: transform .25s ease; will-change: transform;
}
.tt-drawer--right { right: 0; transform: translateX(100%); }
.tt-drawer--left { left: 0; transform: translateX(-100%); border-inline-start: 0; border-inline-end: 1px solid var(--tt-drawer-border); }
.tt-drawer[data-open] { transform: none; }
.tt-popover { background: var(--tt-popover-background); color: var(--tt-popover-text); border-radius: var(--tt-popover-radius); border: var(--tt-popover-border); box-shadow: var(--tt-popover-shadow); }
html[data-tt-scroll-lock] { overflow: hidden; }

/* icons (inline SVG from snippets/icon.liquid) */
.tt-icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: var(--tt-icon-stroke); fill: none; flex: none; }
.tt-icon[class*="tt-icon--lucide"] { stroke-linecap: round; stroke-linejoin: round; } /* classic Lucide shapes */

/* price */
.tt-price { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.tt-price__compare { text-decoration: line-through; opacity: 0.6; }
.tt-product-price__tax { margin: 4px 0 0; font-size: 0.85em; opacity: 0.7; }

/* rich text */
.tt-rte > * + * { margin-top: 0.75em; }
.tt-rte img { height: auto; }
.tt-rte table { border-collapse: collapse; width: 100%; }
.tt-rte td, .tt-rte th { border: 1px solid rgb(from var(--tt-color-foreground) r g b / 0.15); padding: 8px; }
/* Estimated delivery (v4 Settings › Shipping and delivery, product.delivery_estimate). */
.tt-product-delivery { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: rgb(from var(--tt-color-foreground) r g b / 0.7); }

/* classic Noir product card (snippets/product-card-classic): home lists, collection and search pages.
   Portrait 3:4 image, black pill badges, wide-tracked name, heavy black price (measured 29 Oct 2026). */
.tt-pcard { position: relative; display: flex; flex-direction: column; gap: 14px; background: transparent; line-height: 1.5; }
.tt-pcard__link { position: absolute; inset: 0; z-index: 1; }
.tt-pcard__media { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #f0f0f0; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.tt-pcard__media img, .tt-pcard__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.tt-pcard__fallback { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0 16px; background: #111111; color: #ffffff; font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-align: center; }
.tt-pcard__badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 8px; }
.tt-pcard__off { display: inline-block; margin: 0; padding: 6px 11px; background: #0a0a0a; border-radius: 999px; color: #ffffff; font-size: clamp(10px, 0.85vw, 12px); font-weight: 700; line-height: 1.1; letter-spacing: 0.06em; }
.tt-pcard__oos-wrap { position: absolute; inset: 0; z-index: 2; display: flex; justify-content: center; align-items: center; }
.tt-pcard__oos { display: inline-block; margin: 0; padding: 9px 18px; background: #0a0a0a; border-radius: 999px; color: #ffffff; font-size: clamp(11px, 0.95vw, 13px); font-weight: 700; line-height: 1; letter-spacing: 0.08em; }
.tt-pcard__fav { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; justify-content: center; align-items: center; width: 34px; height: 34px; background: rgba(255,255,255,0.94); border-radius: 999px; color: #0a0a0a; box-shadow: 0 1px 5px rgba(0,0,0,0.14); }
.tt-pcard__fav-icon { width: 18px; height: 18px; stroke-width: 2; }
.tt-pcard__body { display: flex; flex-direction: column; gap: 5px; padding: 0 2px 4px; }
.tt-pcard__title { display: -webkit-box; margin: 0; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: #111111; font-size: clamp(12.5px, 1vw, 14px); font-weight: 600; line-height: 1.3; letter-spacing: 0.14em; }
.tt-pcard__vendor { display: -webkit-box; margin: 0; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: #9ca3af; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.tt-pcard__prices { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.tt-pcard__price { margin: 0; color: #111111; font-size: clamp(15px, 1.2vw, 18px); font-weight: 800; }
.tt-pcard__compare { margin: 0; color: #9ca3af; font-size: clamp(11px, 0.95vw, 13px); font-weight: 500; text-decoration: line-through; }

/* Noir section header (pill, display heading, subtitle) and black pill button — home and list pages */
.tt-nhead { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 720px; margin-bottom: 48px; }
.tt-nhead__title { margin: 0; color: #111111; font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; line-height: 1.02; letter-spacing: 0.01em; }
.tt-nhead__sub { margin: 0; color: #4b5563; font-size: 16px; line-height: 1.6; }
.tt-npill { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.5; }
.tt-npill--light { background: #ffffff; color: #0a0a0a; } .tt-npill--dark { background: #0a0a0a; color: #ffffff; }
.tt-npill__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px; background: currentColor; animation: tt-npulse 1.9s ease-in-out infinite; }
@keyframes tt-npulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.tt-ncta { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; padding: 13px 24px 13px 28px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: 0.06em; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.tt-ncta:hover { transform: scale(1.03); }
.tt-ncta--solid { background: #0a0a0a; color: #ffffff; } .tt-ncta--invert { background: #ffffff; color: #0a0a0a; }
.tt-nsec { display: flex; flex-direction: column; padding: clamp(52px, 6vw, 84px) 40px; line-height: 1.5; }
.tt-nsec--white { background: #ffffff; } .tt-nsec--mist { background: linear-gradient(135deg, #f9fafb, #f3f4f6); } .tt-nsec--black { background: #0a0a0a; }
.tt-nsec--tight-top { padding-top: clamp(28px, 3.2vw, 44px); }
.tt-nsec__inner { display: flex; flex-direction: column; width: 100%; max-width: 1480px; margin: 0 auto; }
.tt-nsec__more { display: flex; justify-content: center; margin-top: 42px; }
.tt-nsec-empty { margin: 0; padding: 40px 16px; background: #ffffff; border-radius: 14px; color: #4b5563; font-size: 14px; text-align: center; }
/* Noir collection rows (snippets/collection-row) */
.tt-ncats { display: flex; flex-direction: column; gap: 32px; }
.tt-ncat { display: flex; flex-direction: row; align-items: stretch; gap: 24px; width: 100%; color: inherit; text-decoration: none; transition: transform .3s ease; }
.tt-ncat:hover { transform: scale(1.02); }
.tt-ncats > .tt-ncat:nth-child(even) { flex-direction: row-reverse; }
.tt-ncat__img { position: relative; flex-shrink: 1; width: 66.666%; height: 448px; overflow: hidden; background: #111111; border-radius: 16px; }
.tt-ncat__img img, .tt-ncat__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .3s ease; }
.tt-ncat:hover .tt-ncat__img img { filter: brightness(.75); }
.tt-ncat__fallback { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0 16px; background: #161616; color: #ffffff; font-size: 18px; font-weight: 600; text-align: center; text-transform: capitalize; }
.tt-ncat__hover { position: absolute; top: 16px; left: 16px; z-index: 2; opacity: 0; transition: opacity .3s ease; }
.tt-ncat:hover .tt-ncat__hover { opacity: 1; }
.tt-ncat__hover-name { display: inline-flex; align-items: center; margin: 0; padding: 12px 24px; color: #ffffff; font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; line-height: 1.1; letter-spacing: 0.05em; }
.tt-ncat__panel { display: flex; flex-direction: column; flex-shrink: 1; justify-content: flex-end; width: 33.333%; height: 448px; padding: 24px; background: #0a0a0a; border-radius: 16px; }
.tt-ncat__text { display: flex; flex-direction: column; }
.tt-ncat__name { margin: 0 0 10px; color: #ffffff; font-size: clamp(24px, 2.2vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: capitalize; }
.tt-ncat__desc { display: -webkit-box; margin: 0; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #d1d5db; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55; }
.tt-ncat__btn { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; margin-top: 20px; padding: 13px 22px 13px 26px; background: #ffffff; border-radius: 999px; color: #0a0a0a; font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; line-height: 1.5; }
.tt-ncat__arrow { width: 20px; height: 20px; stroke-width: 2.2; }
@media (max-width: 640px) {
  .tt-ncat, .tt-ncats > .tt-ncat:nth-child(even) { flex-direction: column; gap: 6px; }
  .tt-ncat__img { width: 100%; height: 256px; }
  .tt-ncat__panel { width: 100%; height: 224px; }
}
@media (max-width: 640px) { .tt-nsec { padding-left: 14px; padding-right: 14px; } .tt-nhead__title { font-size: 27px; } }

/* classic collection / search page and its filter box (sections/main-collection, main-search, snippets/facet-fields) */
/* Classic TaLim Default collection page (measured from the classic storefront, 29 Oct 2026). */
.tt-cpage { display: block; line-height: 1.5; background: #ffffff; color: #0A1628; }
.tt-cpage__intro { padding: 44px 40px 18px; }
.tt-cpage__hero { display: flex; flex-direction: column; align-items: center; padding: 48px 40px; text-align: center; }
.tt-cpage__title { margin: 0; color: #0A1628; font-size: 36px; font-weight: 800; line-height: 1.5; letter-spacing: -0.03em; }
.tt-cpage__hero .tt-cpage__title { width: 100%; font-size: 34px; text-align: center; }
.tt-cpage__sub { margin: 7px 0 0; color: #5A6B7B; font-size: 15px; }
.tt-cpage__desc { max-width: 660px; margin: 10px auto 0; color: #5A6B7B; font-size: 15px; line-height: 1.6; }
.tt-cpage__rule { height: 1px; background: #E6E8EC; }
.tt-cpage__body { padding: 30px 40px 72px; }
.tt-cpage--all .tt-cpage__body { padding-top: 6px; }
.tt-cpage__row { display: flex; align-items: flex-start; gap: 34px; }
.tt-cpage__side { flex: 0 0 266px; width: 266px; }
.tt-cpage__main { flex: 1 1 auto; min-width: 0; padding-bottom: 1px; } /* classic: a 1px load-more marker under the grid */
.tt-cpage__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 39px; margin-bottom: 20px; }
.tt-cpage__count { display: flex; gap: 5px; margin: 0; font-size: 15px; line-height: 1.5; }
.tt-cpage__count b { font-weight: 700; }
.tt-cpage__count span { color: #5A6B7B; }
.tt-cpage__sort { box-sizing: border-box; min-width: 190px; height: 39px; margin-left: auto; padding: 10px 34px 10px 14px; border: 1px solid #D7DDE6; border-radius: 6px; background: #ffffff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8898' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color: #0A1628; font: inherit; font-size: 14px; line-height: normal; cursor: pointer; appearance: none; -webkit-appearance: none; }
.tt-cpage__filter-btn { display: none; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: #0A1628; font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.5; cursor: pointer; }
.tt-cpage__filter-icon { width: 17px; height: 17px; stroke-width: 2; }
.tt-cpage__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 22px; }
.tt-cpage__empty { padding: 48px 0; color: #5A6B7B; text-align: center; }
.tt-cpage__empty p { margin: 0 0 12px; }
.tt-cpage__empty-clear { color: #D6006E; font-weight: 600; text-decoration: none; }
.tt-cpage__pages { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.tt-cpage__pages .page, .tt-cpage__pages .prev, .tt-cpage__pages .next, .tt-cpage__pages .deco { padding: 6px 10px; }
.tt-cpage__pages a { color: inherit; }
.tt-cpage__pages .current { font-weight: 700; text-decoration: underline; }
/* the filter box */
.tt-facets { display: flex; flex-direction: column; padding: 18px 20px 22px; background: #FBFBFC; border: 1px solid #E6E8EC; border-radius: 6px; }
.tt-facets__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tt-facets__title { display: flex; align-items: center; gap: 9px; }
.tt-facets__funnel { width: 18px; height: 18px; stroke-width: 2; }
.tt-facets__name { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.5; letter-spacing: normal; }
.tt-facets__clear-top { padding: 0 6px; color: #D6006E; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.tt-facets__head { margin: 20px 0 8px; font-size: 13px; font-weight: 800; line-height: 1.5; letter-spacing: normal; }
.tt-facets__list { display: flex; flex-direction: column; }
.tt-facets__row { position: relative; display: flex; align-items: center; gap: 11px; padding: 7px 0; cursor: pointer; }
.tt-facets__cbx { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.tt-facets__box { display: inline-flex; flex: 0 0 19px; justify-content: center; align-items: center; width: 19px; height: 19px; border: 1.5px solid #C2C8D2; border-radius: 5px; background: #ffffff; color: transparent; font-size: 12px; font-weight: 800; line-height: 1; }
.tt-facets__cbx:checked + .tt-facets__box { border-color: #0A1628; background: #0A1628; color: #ffffff; }
.tt-facets__cbx:focus-visible + .tt-facets__box { outline: 2px solid #0A1628; outline-offset: 2px; }
.tt-facets__label { font-size: 14.5px; }
.tt-facets__label--strong { font-weight: 500; }
.tt-facets__price { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: center; }
.tt-facets__num { box-sizing: border-box; width: 100%; min-width: 0; height: 37px; padding: 9px 12px; border: 1px solid #E6E8EC; border-radius: 6px; background: #ffffff; color: #0A1628; font: inherit; font-size: 14px; line-height: normal; -moz-appearance: textfield; }
.tt-facets__num::-webkit-inner-spin-button, .tt-facets__num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tt-facets__dash { color: #5A6B7B; text-align: center; }
.tt-facets__apply { height: 42px; margin-top: 12px; padding: 11px 6px; border: 0; border-radius: 6px; background: #0A1628; color: #ffffff; font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.5; cursor: pointer; }
.tt-facets__apply[hidden] { display: none; }
/* the drawer (1024 px and below) */
.tt-cpage__drawer { width: 320px; max-width: 86vw; overflow-y: auto; background: #ffffff; border: 0; }
.tt-facets--drawer { padding: 18px 18px 30px; background: #ffffff; border: 0; border-radius: 0; }
.tt-facets__top--drawer { margin-bottom: 6px; padding-bottom: 10px; }
.tt-facets__close { display: inline-flex; padding: 1px 4px; border: 0; background: none; color: #0A1628; font-size: 18px; line-height: 1.5; cursor: pointer; }
.tt-facets__sort { box-sizing: border-box; width: 100%; height: 39px; padding: 10px 34px 10px 14px; border: 1px solid #D7DDE6; border-radius: 6px; background: #ffffff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8898' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color: #0A1628; font: inherit; font-size: 14px; line-height: normal; cursor: pointer; -webkit-appearance: none; appearance: none; }
.tt-facets__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.tt-facets__apply-all, .tt-facets__clear-all { box-sizing: border-box; display: block; height: 49px; border-radius: 6px; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: 0.03em; text-align: center; text-decoration: none; cursor: pointer; }
.tt-facets__apply-all { padding: 14px 6px; border: 0; background: #D6006E; color: #ffffff; }
.tt-facets__clear-all { padding: 13px 6px; border: 1px solid #C2C8D2; background: #ffffff; color: #0A1628; }
@media (max-width: 1024px) {
  .tt-cpage__side, .tt-cpage__sort { display: none; }
  .tt-cpage__filter-btn { display: inline-flex; }
  .tt-cpage__bar { min-height: 0; }
  .tt-cpage__count { font-size: 12.5px; }
  .tt-cpage__grid { grid-template-columns: repeat(var(--tcols), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tt-cpage__intro { padding: 44px 14px 18px; }
  .tt-cpage__hero { padding: 48px 14px; }
  .tt-cpage__body { padding: 30px 14px 72px; }
  .tt-cpage__title { font-size: 27px; }
  .tt-cpage__hero .tt-cpage__title { font-size: 26px; }
  .tt-cpage__grid { grid-template-columns: repeat(var(--mcols), minmax(0, 1fr)); gap: 14px 8px; }
  .tt-cpage:not(.tt-cpage--all) .tt-cpage__main { padding-bottom: 0; } /* classic: no marker on a category on phones */
  .tt-facets--drawer .tt-facets__list { gap: 14px; } /* classic: a grid list's phone row gap */
}

/* classic Noir collection page and its filter card (sections/main-collection, .tt-ncpage); the search page keeps the classic TaLim look above.
   Measured from the classic storefront (29 Oct 2026). */
.tt-ncpage { display: block; min-height: 100vh; line-height: 1.5; background: linear-gradient(135deg, #f9fafb, #f3f4f6); color: #0A1628; }
.tt-ncpage .tt-cpage__head { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 52px 40px 10px; text-align: center; }
.tt-ncpage.tt-cpage--all .tt-cpage__head { padding-bottom: 8px; }
.tt-ncpage .tt-cpage__title { width: 100%; max-width: 1480px; margin: 0; color: #111111; font-size: clamp(30px, 4vw, 50px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-align: center; }
.tt-ncpage .tt-cpage__showing { display: flex; justify-content: center; align-items: baseline; gap: 5px; margin: 0; color: #4b5563; font-size: 16px; }
.tt-ncpage .tt-cpage__showing b { color: #111111; font-weight: 700; }
.tt-ncpage .tt-cpage__desc { max-width: 660px; margin: 0 auto; color: #4b5563; font-size: 16px; line-height: 1.6; }
.tt-ncpage .tt-cpage__body { padding: 22px 40px 80px; }
.tt-ncpage .tt-cpage__row { display: flex; align-items: flex-start; gap: 32px; width: 100%; max-width: 1480px; margin: 0 auto; }
.tt-ncpage .tt-cpage__side { flex: 0 0 266px; width: 266px; }
.tt-ncpage .tt-cpage__main { flex: 1 1 auto; min-width: 0; padding-bottom: 0; }
.tt-ncpage .tt-cpage__bar { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 12px; min-height: 0; margin-bottom: 24px; }
.tt-ncpage .tt-cpage__count { display: flex; align-items: baseline; gap: 5px; margin: 0 auto 0 0; font-size: 15px; line-height: 1.5; }
.tt-ncpage .tt-cpage__count b { color: #111111; font-weight: 700; }
.tt-ncpage .tt-cpage__count span { color: #4b5563; }
.tt-ncpage .tt-cpage__sort { display: block; box-sizing: border-box; min-width: 196px; height: 39px; margin-left: auto; padding: 10px 36px 10px 18px; border: 1px solid #e2e4e8; border-radius: 999px; background: #ffffff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8898' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; color: #111111; font: inherit; font-size: 14px; line-height: normal; box-shadow: 0 1px 2px rgba(0,0,0,0.05); cursor: pointer; -webkit-appearance: none; appearance: none; }
.tt-ncpage .tt-cpage__sort:focus { border-color: #0a0a0a; outline: none; }
.tt-ncpage .tt-cpage__count + .tt-cpage__sort { margin-left: 0; }
.tt-ncpage .tt-cpage__filter-btn { display: none; align-items: center; gap: 8px; padding: 9px 18px 9px 16px; border: 1px solid #e2e4e8; border-radius: 999px; background: #ffffff; color: #111111; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; box-shadow: 0 1px 2px rgba(0,0,0,0.05); cursor: pointer; }
.tt-ncpage .tt-cpage__filter-icon { width: 16px; height: 16px; stroke-width: 2; }
.tt-ncpage .tt-cpage__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 24px; }
.tt-ncpage .tt-cpage__empty { padding: 48px 0; color: #4b5563; text-align: center; }
.tt-ncpage .tt-cpage__empty p { margin: 0 0 12px; }
.tt-ncpage .tt-cpage__empty-clear { color: #0a0a0a; font-weight: 600; }
.tt-ncpage .tt-cpage__pages { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.tt-ncpage .tt-cpage__pages .page, .tt-ncpage .tt-cpage__pages .prev, .tt-ncpage .tt-cpage__pages .next, .tt-ncpage .tt-cpage__pages .deco { padding: 6px 10px; }
.tt-ncpage .tt-cpage__pages a { color: inherit; }
.tt-ncpage .tt-cpage__pages .current { font-weight: 700; text-decoration: underline; }
/* the white filter card */
.tt-ncpage .tt-cpage__side .tt-facets { display: flex; flex-direction: column; padding: 22px 22px 24px; background: #ffffff; border: 1px solid #ececec; border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.tt-ncpage .tt-cpage__side .tt-facets__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.tt-ncpage .tt-cpage__side .tt-facets__title { display: flex; align-items: center; gap: 9px; }
.tt-ncpage .tt-cpage__side .tt-facets__funnel { width: 18px; height: 18px; stroke-width: 2; }
.tt-ncpage .tt-cpage__side .tt-facets__name { margin: 0; color: #111111; font-size: 18px; font-weight: 600; line-height: 1.5; letter-spacing: normal; }
.tt-ncpage .tt-cpage__side .tt-facets__clear-top { padding: 0 6px; color: #9ca3af; font-size: 13px; font-weight: 500; text-decoration: none; transition: opacity .18s ease; }
.tt-ncpage .tt-cpage__side .tt-facets__clear-top:hover { opacity: .82; }
.tt-ncpage .tt-cpage__side .tt-facets__head { margin: 22px 0 11px; color: #111111; font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: 0.01em; }
.tt-ncpage .tt-cpage__side .tt-facets__list { display: flex; flex-direction: column; }
.tt-ncpage .tt-cpage__side .tt-facets__row { position: relative; display: flex; align-items: center; gap: 11px; padding: 7px 0; cursor: pointer; }
.tt-ncpage .tt-cpage__side .tt-facets__cbx { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.tt-ncpage .tt-cpage__side .tt-facets__box { display: inline-flex; flex: 0 0 19px; justify-content: center; align-items: center; width: 19px; height: 19px; border: 1.5px solid #C2C8D2; border-radius: 5px; background: #ffffff; color: transparent; font-size: 12px; font-weight: 800; line-height: 1; }
.tt-ncpage .tt-cpage__side .tt-facets__row--avail { gap: 10px; padding: 6px 0; }
.tt-ncpage .tt-cpage__side .tt-facets__row--avail .tt-facets__box { flex-basis: 18px; width: 18px; height: 18px; border-color: #c9ccd1; font-size: 11px; }
.tt-ncpage .tt-cpage__side .tt-facets__cbx:checked + .tt-facets__box { border-color: #0a0a0a; background: #0a0a0a; color: #ffffff; }
.tt-ncpage .tt-cpage__side .tt-facets__cbx:focus-visible + .tt-facets__box { outline: 2px solid #0a0a0a; outline-offset: 2px; }
.tt-ncpage .tt-cpage__side .tt-facets__label { font-size: 14.5px; }
.tt-ncpage .tt-cpage__side .tt-facets__row--avail .tt-facets__label { color: #111111; font-size: 14px; }
.tt-ncpage .tt-cpage__side .tt-facets__label--strong { font-weight: 500; }
.tt-ncpage .tt-cpage__side .tt-facets__price { display: flex; align-items: center; gap: 9px; }
.tt-ncpage .tt-cpage__side .tt-facets__num { box-sizing: border-box; flex: 1 1 0; width: 100%; min-width: 0; height: 40px; padding: 10px 12px; border: 1px solid #e2e4e8; border-radius: 9px; background: #ffffff; color: #111111; font: inherit; font-size: 14px; line-height: normal; -moz-appearance: textfield; }
.tt-ncpage .tt-cpage__side .tt-facets__num:focus { border-color: #0a0a0a; box-shadow: 0 0 0 2px rgba(10,10,10,.12); outline: none; }
.tt-ncpage .tt-cpage__side .tt-facets__num::-webkit-inner-spin-button, .tt-ncpage .tt-cpage__side .tt-facets__num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tt-ncpage .tt-cpage__side .tt-facets__dash { color: #9ca3af; text-align: center; }
.tt-ncpage .tt-cpage__side .tt-facets__apply { height: 42px; margin-top: 14px; padding: 11px 6px; border: 0; border-radius: 999px; background: #0a0a0a; color: #ffffff; font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; cursor: pointer; transition: transform .18s ease; }
.tt-ncpage .tt-cpage__side .tt-facets__apply:hover { transform: scale(1.03); }
.tt-ncpage .tt-cpage__side .tt-facets__apply[hidden] { display: none; }
@media (max-width: 1024px) {
  .tt-ncpage .tt-cpage__row { flex-direction: column; align-items: stretch; gap: 0; }
  .tt-ncpage .tt-cpage__side { display: none; }
  .tt-ncpage .tt-cpage__filter-btn { display: inline-flex; }
  .tt-ncpage .tt-cpage__sort, .tt-ncpage .tt-cpage__count + .tt-cpage__sort { width: 100%; margin-left: 0; }
  .tt-ncpage .tt-cpage__grid { grid-template-columns: repeat(var(--tcols), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tt-ncpage .tt-cpage__head, .tt-ncpage .tt-cpage__body { padding-left: 14px; padding-right: 14px; }
  .tt-ncpage .tt-cpage__title { font-size: 28px; }
  .tt-ncpage .tt-cpage__grid { grid-template-columns: repeat(var(--mcols), minmax(0, 1fr)); gap: 14px 8px; }
}