/* TipTop Product Rail */
.tt.tt-shop { background-color: var(--tt-paper); padding: clamp(36px, 4vw, 56px) 0; }
.tt.tt-shop .tt-sec-head { margin-bottom: 18px; align-items: center; }
.tt.tt-shop .tt-sec-head .tt-h2 { font-size: var(--tt-fs-h2); max-width: none; margin-right: auto; }
.tt .tt-rail-all { font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.tt .tt-rail-all:hover { color: var(--tt-red); }
.tt.tt-shop .tt-rail { --per: 5; }
@media (max-width: 1100px) { .tt.tt-shop .tt-rail { --per: 3; } }
@media (max-width: 767px) { .tt.tt-shop .tt-rail { --per: 2.15; --tt-rail-gap: 10px; } .tt.tt-shop .tt-rail-nav { display: none; } }
.tt .tt-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.tt .tt-chip { font-family: var(--tt-font-sans); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .08em; text-transform: uppercase; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--tt-line); background-color: var(--tt-paper); color: var(--tt-ink); cursor: pointer; transition: all .2s; }
.tt .tt-chip:hover, .tt .tt-chip:focus { border-color: var(--tt-ink); background-color: var(--tt-paper); color: var(--tt-ink); }
.tt .tt-chip[aria-pressed="true"] { background-color: var(--tt-ink); border-color: var(--tt-ink); color: #fff; }

/* --tt-rail-gap, never --gap: Elementor containers define --gap themselves. */
.tt .tt-rail { --per: 4; --tt-rail-gap: 16px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * var(--tt-rail-gap)) / var(--per)); gap: var(--tt-rail-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.tt .tt-rail::-webkit-scrollbar { display: none; }
.tt .tt-rail__empty { color: var(--tt-mute); padding: 40px 0; }
.tt .tt-rail .tt-card { scroll-snap-align: start; }
/* Card styles: assets/css/cards.css (shared with the Shop Archive and Product widgets). */

.tt .tt-rail-nav { display: flex; gap: 8px; }
.tt .tt-rail-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--tt-line); background-color: var(--tt-paper); color: var(--tt-ink); cursor: pointer; display: grid; place-items: center; }
.tt .tt-rail-nav button:hover, .tt .tt-rail-nav button:focus-visible { border-color: var(--tt-ink); background-color: var(--tt-paper); color: var(--tt-ink); }
.tt .tt-rail-nav button[disabled] { opacity: .35; cursor: default; }
.tt .tt-rail-nav svg { width: 18px; height: 18px; }
.tt .tt-rail-bar { margin-top: 28px; height: 1px; background-color: var(--tt-line); position: relative; }
.tt .tt-rail-bar i { position: absolute; top: -.5px; bottom: -.5px; left: 0; width: 20%; background-color: var(--tt-ink); transition: left .15s linear, width .3s; }