html {
overflow-x: hidden;
max-width: 100%;
}
body {
font-family: 'Inter', sans-serif;
background-color: #FFFFFF;
overflow-x: hidden;
overflow-y: auto;
max-width: 100%;
height: 100dvh;
display: flex;
flex-direction: column;
}
body.account-drawer-open,
body.contact-sales-drawer-open,
body.vs-tryon-category-modal-open,
body.account-tryon-history-modal-open {
overflow: hidden;
}
details.account-tryon-history-modal-item > summary {
list-style: none;
}
details.account-tryon-history-modal-item > summary::-webkit-details-marker {
display: none;
}
.serif-italic {
font-family: 'Playfair Display', serif;
font-style: italic;
}
.glass-card {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
.image-gradient {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(to top, rgba(249, 248, 255, 0.9), transparent);
}
.hero-compare-frame {
position: relative;
border-radius: 40px;
overflow: hidden;
width: min(100%, 460px);
aspect-ratio: 3 / 4;
background: #ffffff;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
margin-left: auto;
margin-right: auto;
}
.hero-compare-before,
.hero-compare-after img {
width: 100%;
height: 100%;
object-fit: contain;
background: #ffffff;
}
.hero-compare-after {
position: absolute;
inset: 0;
clip-path: inset(0 0 100% 0);
animation: heroCompareReveal 12s ease-in-out infinite;
}
.hero-compare-divider {
position: absolute;
left: 0;
right: 0;
top: 0%;
height: 2px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 20px rgba(255, 255, 255, 0.6);
animation: heroCompareDivider 12s ease-in-out infinite;
z-index: 25;
}
@keyframes heroCompareReveal {
0% {
clip-path: inset(0 0 100% 0);
}
33% {
clip-path: inset(0 0 0% 0);
}
67% {
clip-path: inset(0 0 0% 0);
}
100% {
clip-path: inset(0 0 100% 0);
}
}
@keyframes heroCompareDivider {
0% {
top: 0%;
}
33% {
top: 100%;
}
67% {
top: 100%;
}
100% {
top: 0%;
}
}
/* === Birebir Tasarım İçin Özel Renkler ve Stiller === */
.right-panel-bg {
background-color: #F4F5FB; /* Görseldeki hafif mavi/mor ton */
}
.canvas-bg {
background-color: #F8F9FE; /* Canvas iç arka planı */
}
.canvas-border {
border-color: #D2D6E1; /* Kesik çizgi rengi */
}
/* Özel Kaydırma Çubuğu - Katalog için */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
/* MacBook Demo Frame */
.macbook-frame {
max-width: 920px;
margin: 0 auto;
border-radius: 14px 14px 0 0;
background: #1e1e1e;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.06);
overflow: hidden;
}
.macbook-titlebar {
display: flex;
align-items: center;
height: 38px;
padding: 0 14px;
background: #2a2a2a;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.macbook-traffic-lights {
display: flex;
gap: 7px;
}
.macbook-traffic-lights span {
width: 11px;
height: 11px;
border-radius: 50%;
}
.macbook-traffic-lights .tl-red { background: #ff5f57; }
.macbook-traffic-lights .tl-yellow { background: #febc2e; }
.macbook-traffic-lights .tl-green { background: #28c840; }
.macbook-titlebar-text {
flex: 1;
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.25em;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
margin-right: 52px;
}
/* Hero yanında MacBook: FYND_website_old ile aynı */
#home-demo-studio .home-demo-macbook-visual .macbook-frame {
max-width: 100%;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06);
}
#home-demo-studio .home-demo-macbook-visual .macbook-base {
max-width: 100%;
}
/* MacBook içi: Try-On düzeni — sabit yükseklik, dikey scroll yok (eski site) */
.macbook-screen.home-macbook-tryon {
display: flex;
height: clamp(340px, 66vh, 780px);
max-height: min(780px, 80vh);
min-height: 0;
overflow: hidden;
background: #fff;
}
/* Preview: scale to fill vertical space (portrait looks tiny with w-full + object-contain) */
#home-demo-studio .home-demo-canvas-image-wrap {
flex: 1 1 0%;
min-height: 0;
min-width: 0;
display: flex;
align-items: flex-end;
justify-content: center;
}
#home-demo-studio #home-demo-canvas-output {
height: 100%;
width: auto;
max-width: 100%;
max-height: none;
object-fit: contain;
object-position: bottom center;
transform: scale(1.07);
transform-origin: bottom center;
}
#home-demo-studio .tryon-product-track {
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #0a0a0a transparent;
}
#home-demo-studio .tryon-product-track::-webkit-scrollbar {
height: 2px;
}
#home-demo-studio .tryon-product-track::-webkit-scrollbar-track {
background: transparent;
}
#home-demo-studio .tryon-product-track::-webkit-scrollbar-thumb {
background: #0a0a0a;
border-radius: 9999px;
}
#home-demo-studio .tryon-product-card {
box-sizing: border-box;
border: 3px solid transparent;
min-width: 2.75rem !important;
max-height: 100%;
aspect-ratio: 3 / 4;
}
#home-demo-studio .tryon-product-card.selected-item {
border-color: #000;
}
.macbook-chin {
height: 18px;
background: linear-gradient(to bottom, #2a2a2a, #1e1e1e);
border-radius: 0 0 0 0;
position: relative;
}
.macbook-chin::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
border-radius: 2px 2px 0 0;
background: rgba(255,255,255,0.06);
}
.macbook-base {
max-width: 1020px;
margin: 0 auto;
height: 12px;
background: linear-gradient(to bottom, #c0c0c0, #9a9a9a);
border-radius: 0 0 8px 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
/* Ana hero karşılaştırma: mobilde daha küçük, taşma yok */
.hero-compare-frame {
width: min(100%, 300px);
max-width: 88vw;
border-radius: 28px;
}
/* Live demo MacBook: mobil — dikey yığın; sol panelde agresif max-height yok (TOPS/BOTTOMS üst üste binmesin) */
/* İçerik kadar uzasın; dikey scroll yok (TOPS + BOTTOMS + önizleme tam görünsün) */
#home-demo-studio .macbook-screen.home-macbook-tryon {
flex-direction: column;
height: auto;
min-height: 0;
max-height: none;
overflow-x: hidden;
overflow-y: visible;
}
#home-demo-studio .macbook-frame {
overflow: visible;
}
#home-demo-studio .home-macbook-tryon-left,
#home-demo-studio .home-macbook-tryon-right {
width: 100% !important;
flex: 0 1 auto;
min-height: 0;
}
#home-demo-studio .home-macbook-tryon-left {
max-height: none;
overflow-y: visible;
overflow-x: hidden;
}
/* İki kategori bloğu eşit flex-1 ile sıkışmasın — doğal yükseklik */
#home-demo-studio .home-macbook-tryon-left .home-demo-categories-stack {
flex: 0 0 auto;
min-height: 0;
}
#home-demo-studio .home-macbook-tryon-left .home-demo-category-block {
flex: 0 0 auto !important;
min-height: 0;
}
#home-demo-studio .home-macbook-tryon-right {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow: visible;
}
#home-demo-studio .home-macbook-tryon-right .canvas-bg {
min-height: 12rem;
max-height: min(62vh, 420px);
}
#home-demo-studio .home-demo-canvas-image-wrap {
align-items: center;
justify-content: center;
}
#home-demo-studio #home-demo-canvas-output {
transform: none;
display: block;
height: auto;
max-height: min(58vh, 360px);
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
object-fit: contain;
object-position: center center;
}
#home-demo-studio .tryon-product-card img {
max-height: min(28vw, 118px);
height: auto !important;
width: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
object-fit: contain;
}
#home-demo-studio .tryon-product-track {
flex: 0 0 auto !important;
min-height: 5.75rem;
max-height: none;
}
}
/* Mobil menü açıkken arka plan kaydırmasını kapat */
body.mobile-nav-open {
overflow: hidden;
}
#mobile-nav-backdrop {
transition: opacity 0.2s ease;
}
#mobile-nav-backdrop.is-open {
opacity: 1 !important;
pointer-events: auto !important;
}
#mobile-nav-panel {
transition: opacity 0.2s ease, transform 0.2s ease;
}
#mobile-nav-panel.is-open {
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
/* Dokunmatikte VS / yatay rail kart aksiyonları (hover yok) */
@media (hover: none), (pointer: coarse) {
#vs-results-grid .vs-card-img-actions,
#catalog-panel-visual-search .vs-hscroll-rail .vs-card-img-actions {
opacity: 1 !important;
transform: translateY(0) !important;
}
#vs-results-grid .vs-result-card button[data-i18n-aria-label="a11y.favorite"] {
opacity: 0.92 !important;
transform: translateY(0) !important;
}
}
/* Try-on CTA: credits / ∞ same scale, softer than main label */
.tryon-cta-main {
font-size: 1em;
}
.tryon-cta-emoji {
font-size: 1.28em;
line-height: 1;
display: inline-block;
vertical-align: -0.08em;
}
.tryon-cta-subtle {
font-size: 0.9em;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.02em;
}
.tryon-cta-on-light .tryon-cta-subtle {
color: #9ca3af;
}
.tryon-cta-on-dark .tryon-cta-subtle {
color: rgba(255, 255, 255, 0.55);
}
/* Catalog card hover */
#catalog-view .catalog-card {
border: 2px solid transparent;
transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
#catalog-view .catalog-card:hover {
transform: scale(1.04);
border-color: #000;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
z-index: 10;
}
#catalog-view .catalog-card.is-selected {
border-color: #000;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
#catalog-view .catalog-card-fav {
pointer-events: auto;
}
#catalog-view .catalog-card-fav[aria-pressed='true'] {
color: rgb(220 38 38);
border-color: rgba(248 113 113 / 0.45);
}
/* Expand must stay clickable on touch (no :hover); fine pointer keeps subtle reveal. */
#catalog-view .catalog-card-expand {
pointer-events: auto;
opacity: 0.9;
transition: opacity 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
#catalog-view .catalog-card-expand {
opacity: 0;
}
#catalog-view .catalog-card:hover .catalog-card-expand,
#catalog-view .catalog-card:focus-within .catalog-card-expand {
opacity: 1;
}
}
#catalog-view .catalog-card .catalog-card-title {
max-width: 100%;
}
/* Deneme kabini: kartta isim/marka/fiyat yok; detay sadece expand modalında */
#catalog-view .catalog-blind-card .catalog-card-text-block {
display: none !important;
}
/* Katalog / community / wardrobe: 2 sütun mobilde → görsel tavanı (3:4 ile uyumlu) */
#catalog-view #catalog-panel-catalog .relative.aspect-\[3\/4\],
#catalog-view #catalog-panel-community .relative.aspect-\[3\/4\],
#catalog-view #catalog-panel-wardrobe .relative.aspect-\[3\/4\] {
max-height: min(62vw, 220px);
}
@media (min-width: 640px) {
#catalog-view #catalog-panel-catalog .relative.aspect-\[3\/4\],
#catalog-view #catalog-panel-community .relative.aspect-\[3\/4\],
#catalog-view #catalog-panel-wardrobe .relative.aspect-\[3\/4\] {
max-height: min(40vw, 300px);
}
}
@media (min-width: 1280px) {
#catalog-view #catalog-panel-catalog .relative.aspect-\[3\/4\],
#catalog-view #catalog-panel-community .relative.aspect-\[3\/4\],
#catalog-view #catalog-panel-wardrobe .relative.aspect-\[3\/4\] {
max-height: min(28vw, 360px);
}
}
#catalog-panel-visual-search #vs-results-grid .relative.aspect-\[3\/4\] {
max-height: min(48vh, 280px);
}
@media (min-width: 768px) {
#catalog-panel-visual-search #vs-results-grid .relative.aspect-\[3\/4\] {
max-height: min(50vh, 320px);
}
}
#catalog-panel-visual-search #vs-flow-results .relative.aspect-\[3\/4\].rounded-lg {
max-height: min(42vh, 260px);
}
#favorites-view .fav-product-card {
border: 2px solid transparent;
transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
max-width: 240px;
width: 100%;
margin-inline: auto;
}
#favorites-view .fav-product-card:hover {
transform: scale(1.04);
border-color: #000;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
z-index: 10;
}
#favorites-view .favorites-garments-grid.is-empty,
#favorites-view .favorites-outfits-grid.is-empty,
#favorites-view .favorites-wardrobe-grid.is-empty {
display: block;
}
#favorites-view .favorites-wardrobe-cat-chip {
border: 1px solid #d1d5db;
padding: 0.45rem 0.75rem;
font-size: calc(9px + 1pt);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #4b5563;
background: #fff;
border-radius: 2px;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#favorites-view .favorites-wardrobe-cat-chip:hover:not(.is-active) {
border-color: #111;
color: #111;
}
#favorites-view .favorites-wardrobe-cat-chip.is-active {
background-color: #000;
color: #fff;
border-color: #000;
}
#favorites-view .favorites-empty-state {
width: 100%;
max-width: 28rem;
margin: 0;
align-self: start;
}
@media (min-width: 1280px) {
#favorites-view .favorites-page-grid {
align-content: start;
grid-auto-rows: auto;
}
#favorites-view .favorites-page-aside {
align-self: start;
/* Katalog aside gibi: sağ rail hücresini doldur (genişlik = min(400px,100%)) */
justify-self: stretch;
}
}
/* Portallı modallar: #shop-views-stage overflow-hidden ve main overflow-y-auto dışında (viewport’a sabitlenir). */
#catalog-product-detail-backdrop {
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
}
#catalog-product-detail-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
#catalog-product-detail-tab {
left: 50%;
top: 50%;
box-sizing: border-box;
/* 9:16 portrait — width capped by viewport height so full frame fits */
width: min(440px, 96vw, calc(92dvh * 9 / 16));
aspect-ratio: 9 / 16;
max-height: 92dvh;
transform: translate(-50%, -50%) scale(0.94);
opacity: 0;
pointer-events: none;
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}
#catalog-product-detail-tab.is-open {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
pointer-events: auto;
}
#catalog-product-detail-tab .catalog-product-detail-photo {
flex: 1 1 0;
min-height: 0;
position: relative;
}
#catalog-selected-expand-backdrop {
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
}
#catalog-selected-expand-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
#catalog-selected-expand-panel {
left: 50%;
top: 50%;
box-sizing: border-box;
width: min(92vw, 400px);
max-height: min(85dvh, 720px);
transform: translate(-50%, -50%) scale(0.96);
opacity: 0;
pointer-events: none;
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}
#catalog-selected-expand-panel.is-open {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
pointer-events: auto;
}
#catalog-selected-expand-img {
max-height: min(68dvh, 560px);
width: 100%;
object-fit: contain;
background: #f9fafb;
}
body.catalog-product-detail-open,
body.catalog-selected-expand-open,
body.catalog-mobile-tryon-open,
body.favorites-mobile-tryon-open,
body.catalog-fynd-link-modal-open {
overflow: hidden;
}
/* Mobil: try-on paneli FAB ile açılan bottom-sheet */
#catalog-tryon-mobile-backdrop,
#favorites-tryon-mobile-backdrop {
transition: opacity 0.3s ease;
}
#catalog-tryon-mobile-backdrop.is-open,
#favorites-tryon-mobile-backdrop.is-open {
opacity: 1 !important;
pointer-events: auto !important;
}
/* Modal açıkken header dim (mobil try-on sheet; ürün linki modalında sadece backdrop) */
body.catalog-mobile-tryon-open #main-nav,
body.favorites-mobile-tryon-open #main-nav {
filter: brightness(0.45);
pointer-events: none;
transition: filter 0.3s ease;
}
/*
* Ürün linki bul: statik tailwind.css içinde z-[212]/z-[214] üretilmiyor → sınıf yok sayılıyordu;
* z-index:auto ile #main-nav (60) üstte kalıyordu. Açıkça üst katman.
*/
#catalog-fynd-link-modal {
z-index: 220;
}
@media (max-width: 1279px) {
#catalog-view #catalog-fynd-link-inline {
display: none !important;
}
#catalog-view #catalog-tryon-aside {
position: fixed;
left: 0;
right: 0;
/* Ekranın altına yaslanır; FAB (z-index üstte) ile aynı taban hizası */
bottom: 0;
top: auto;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 max(1rem, env(safe-area-inset-left, 0px)) 0
max(1rem, env(safe-area-inset-right, 0px));
z-index: 86;
transform: translateY(105%);
visibility: hidden;
pointer-events: none;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
overflow: visible; /* handle’daki X taşmasın diye (absolute çocuk) */
}
#catalog-view #catalog-tryon-aside.catalog-tryon-mobile-open {
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
#catalog-view #catalog-tryon-aside #catalog-tryon-mobile-handle {
width: 100%;
max-width: min(400px, 100%);
}
#catalog-view #catalog-tryon-aside .catalog-tryon-panel {
width: 100%;
max-width: min(400px, 100%);
margin-left: auto;
margin-right: auto;
max-height: min(82dvh, 680px);
border-radius: 1.25rem 1.25rem 0 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.2);
padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}
/* Üst sürükleme çubuğu (pill) kaldırıldı — kapatma panel içinde */
#catalog-tryon-mobile-handle,
#favorites-tryon-mobile-handle {
min-height: 0;
padding: 0;
box-sizing: border-box;
display: block;
position: relative;
overflow: hidden;
}
#catalog-tryon-mobile-handle::before,
#favorites-tryon-mobile-handle::before {
display: none;
content: none;
}
#catalog-view #catalog-tryon-aside .catalog-portrait-kicker {
display: none !important;
}
#catalog-view #catalog-tryon-aside #catalog-portrait-clear {
top: 0.5rem;
}
#catalog-view #catalog-tryon-aside #catalog-portrait-empty {
padding-top: 0.75rem;
}
#catalog-view #catalog-tryon-aside .catalog-tryon-toprow .catalog-tryon-portrait-col {
width: 34%;
max-width: 140px;
align-self: start;
flex-shrink: 0;
}
#catalog-view #catalog-tryon-aside .catalog-tryon-toprow .catalog-tryon-portrait-col #catalog-portrait-dropzone.catalog-tryon-canvas {
width: 100%;
aspect-ratio: 3 / 4;
min-height: 160px;
max-height: 310px;
border-radius: 0.5rem;
}
#catalog-view #catalog-tryon-aside .catalog-tryon-selected-col {
flex: 1;
min-width: 0;
align-self: start;
}
#catalog-view #catalog-tryon-aside .csel-chip {
width: 52px;
height: 70px;
border-radius: 5px;
}
/* Favoriler: katalog ile aynı mobil bottom-sheet + FAB */
#favorites-view #favorites-tryon-aside {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 max(1rem, env(safe-area-inset-left, 0px)) 0
max(1rem, env(safe-area-inset-right, 0px));
z-index: 86;
transform: translateY(105%);
visibility: hidden;
pointer-events: none;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
overflow: visible;
}
#favorites-view #favorites-tryon-aside.favorites-tryon-mobile-open {
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
#favorites-view #favorites-tryon-aside #favorites-tryon-mobile-handle {
width: 100%;
max-width: min(400px, 100%);
}
#favorites-view #favorites-tryon-aside #favorites-tryon-panel.catalog-tryon-panel {
width: 100%;
max-width: min(400px, 100%);
margin-left: auto;
margin-right: auto;
max-height: min(82dvh, 680px);
border-radius: 1.25rem 1.25rem 0 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.2);
padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}
#favorites-view #favorites-tryon-aside #favorites-tryon-panel .catalog-portrait-kicker {
display: none !important;
}
#favorites-view #favorites-tryon-aside #favorites-tryon-panel #favorites-portrait-clear {
top: 0.5rem;
}
#favorites-view #favorites-tryon-aside #favorites-tryon-panel #favorites-portrait-empty {
padding-top: 0.75rem;
}
#favorites-view #favorites-tryon-aside .catalog-tryon-toprow .catalog-tryon-portrait-col {
width: 34%;
max-width: 140px;
align-self: start;
flex-shrink: 0;
}
#favorites-view
#favorites-tryon-aside
.catalog-tryon-toprow
.catalog-tryon-portrait-col
#favorites-portrait-dropzone.catalog-tryon-canvas {
width: 100%;
aspect-ratio: 3 / 4;
min-height: 160px;
max-height: 310px;
border-radius: 0.5rem;
}
#favorites-view #favorites-tryon-aside .catalog-tryon-toprow .catalog-tryon-selected-col {
flex: 1;
min-width: 0;
align-self: start;
}
#favorites-view #favorites-tryon-aside #favorites-portrait-browse-btn,
#favorites-view #favorites-tryon-aside #favorites-portrait-avatar-btn {
white-space: normal;
line-height: 1.15;
}
#favorites-view #favorites-tryon-aside .csel-chip {
width: 52px;
height: 70px;
border-radius: 5px;
}
}
/* Catalog avatar şeridi: toprow altında tam panel genişliği, büyük kutular */
#catalog-view #catalog-avatar-picker .catalog-avatar-picker-track {
gap: 0.5rem;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
#catalog-view #catalog-avatar-picker .catalog-body-avatar-item {
width: clamp(3.5rem, 16vw, 4.5rem) !important;
min-width: 3.25rem;
flex: 0 0 auto;
border-radius: 0.5rem;
scroll-snap-align: start;
transition: border-color 0.15s, box-shadow 0.15s;
}
#catalog-view #catalog-avatar-picker .catalog-body-avatar-item img {
height: clamp(4.5rem, 22vw, 6rem) !important;
min-height: 4rem;
width: 100%;
object-fit: contain;
object-position: center;
}
#catalog-view #catalog-avatar-picker .catalog-body-avatar-item:active {
border-color: #111;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}
/* Favoriler: katalog ile aynı avatar şeridi (inline picker) */
#favorites-view #favorites-avatar-picker .catalog-avatar-picker-track {
gap: 0.5rem;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
#favorites-view #favorites-avatar-picker .favorites-body-avatar-item {
width: clamp(3.5rem, 16vw, 4.5rem) !important;
min-width: 3.25rem;
flex: 0 0 auto;
border-radius: 0.5rem;
scroll-snap-align: start;
transition: border-color 0.15s, box-shadow 0.15s;
}
#favorites-view #favorites-avatar-picker .favorites-body-avatar-item img {
height: clamp(4.5rem, 22vw, 6rem) !important;
min-height: 4rem;
width: 100%;
object-fit: contain;
object-position: center;
}
#favorites-view #favorites-avatar-picker .favorites-body-avatar-item:active {
border-color: #111;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}
/* Avatar şeridi: dar ekran / telefon */
@media (max-width: 1279px) {
#catalog-view .catalog-body-avatars .catalog-body-avatar-item,
#favorites-view .catalog-body-avatars .favorites-body-avatar-item {
width: clamp(3.5rem, 17vw, 4.5rem) !important;
min-width: 3.25rem;
flex: 0 0 auto;
border-radius: 0.5rem;
transition: box-shadow 0.15s, border-color 0.15s;
}
#catalog-view .catalog-body-avatars .catalog-body-avatar-item img,
#favorites-view .catalog-body-avatars .favorites-body-avatar-item img {
height: clamp(4.5rem, 22vw, 6rem) !important;
min-height: 4rem;
width: 100%;
object-fit: contain;
object-position: center;
}
#catalog-view .catalog-body-avatars .catalog-body-avatar-item:active,
#favorites-view .catalog-body-avatars .favorites-body-avatar-item:active {
border-color: #111;
box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}
#catalog-view #catalog-avatars-body .flex.flex-row[role='list'],
#favorites-view #favorites-avatars-body .flex.flex-row[role='list'] {
gap: 0.5rem;
padding-bottom: 0.25rem;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
#catalog-view #catalog-avatars-body .catalog-body-avatar-item,
#favorites-view #favorites-avatars-body .favorites-body-avatar-item {
scroll-snap-align: start;
}
#catalog-view #vs-tryon-drawer .vs-tryon-body-avatar-item {
width: clamp(3.5rem, 17vw, 4.5rem) !important;
min-width: 3.25rem;
flex: 0 0 auto;
scroll-snap-align: start;
}
#catalog-view #vs-tryon-drawer .vs-tryon-body-avatar-item img {
height: clamp(4.5rem, 22vw, 6rem) !important;
min-height: 4rem;
width: 100%;
object-fit: contain;
object-position: center;
}
#catalog-view #vs-avatars-body .flex.flex-row[role='list'] {
gap: 0.5rem;
padding-bottom: 0.25rem;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
}
@media (min-width: 1280px) {
#catalog-view #catalog-panel-catalog .relative.aspect-\[3\/4\],
#catalog-view #catalog-panel-community .relative.aspect-\[3\/4\],
#catalog-view #catalog-panel-wardrobe .relative.aspect-\[3\/4\] {
max-height: min(28vw, 360px);
}
}
#catalog-panel-visual-search #vs-results-grid .relative.aspect-\[3\/4\] {
max-height: min(48vh, 280px);
}
@media (min-width: 768px) {
#catalog-panel-visual-search #vs-results-grid .relative.aspect-\[3\/4\] {
max-height: min(50vh, 320px);
}
}
#catalog-panel-visual-search #vs-flow-results .relative.aspect-\[3\/4\].rounded-lg {
max-height: min(42vh, 260px);
}
#favorites-view .fav-product-card {
border: 2px solid transparent;
transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
max-width: 240px;
width: 100%;
margin-inline: auto;
}
#favorites-view .fav-product-card:hover {
transform: scale(1.04);
border-color: #000;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
z-index: 10;
}
#favorites-view .favorites-garments-grid.is-empty,
#favorites-view .favorites-outfits-grid.is-empty,
#favorites-view .favorites-wardrobe-grid.is-empty {
display: block;
}
#favorites-view .favorites-wardrobe-cat-chip {
border: 1px solid #d1d5db;
padding: 0.45rem 0.75rem;
font-size: calc(9px + 1pt);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #4b5563;
background: #fff;
border-radius: 2px;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#favorites-view .favorites-wardrobe-cat-chip:hover:not(.is-active) {
border-color: #111;
color: #111;
}
#favorites-view .favorites-wardrobe-cat-chip.is-active {
background-color: #000;
color: #fff;
border-color: #000;
}
#favorites-view .favorites-empty-state {
width: 100%;
max-width: 28rem;
margin: 0;
align-self: start;
}
@media (min-width: 1280px) {
#favorites-view .favorites-page-grid {
align-content: start;
grid-auto-rows: auto;
}
#favorites-view .favorites-page-aside {
align-self: start;
/* Katalog aside gibi: sağ rail hücresini doldur (genişlik = min(400px,100%)) */
justify-self: stretch;
}
}
/* Portallı modallar: #shop-views-stage overflow-hidden ve main overflow-y-auto dışında (viewport’a sabitlenir). */
#catalog-product-detail-backdrop {
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
}
#catalog-product-detail-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
#catalog-product-detail-tab {
left: 50%;
top: 50%;
box-sizing: border-box;
/* 9:16 portrait — width capped by viewport height so full frame fits */
width: min(440px, 96vw, calc(92dvh * 9 / 16));
aspect-ratio: 9 / 16;
max-height: 92dvh;
transform: translate(-50%, -50%) scale(0.94);
opacity: 0;
pointer-events: none;
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}
#catalog-product-detail-tab.is-open {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
pointer-events: auto;
}
#catalog-product-detail-tab .catalog-product-detail-photo {
flex: 1 1 0;
min-height: 0;
position: relative;
}
#catalog-selected-expand-backdrop {
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
}
#catalog-selected-expand-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
#catalog-selected-expand-panel {
left: 50%;
top: 50%;
box-sizing: border-box;
width: min(92vw, 400px);
max-height: min(85dvh, 720px);
transform: translate(-50%, -50%) scale(0.96);
opacity: 0;
pointer-events: none;
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}
#catalog-selected-expand-panel.is-open {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
pointer-events: auto;
}
#catalog-selected-expand-img {
max-height: min(68dvh, 560px);
width: 100%;
object-fit: contain;
background: #f9fafb;
}
body.catalog-product-detail-open,
body.catalog-selected-expand-open,
body.catalog-mobile-tryon-open,
body.catalog-fynd-link-modal-open {
overflow: hidden;
}
/* Avatar şeridi: dar ekran / telefon — vw + clamp ile ölçek, yatay kaydırma */
@media (max-width: 1279px) {
#catalog-view .catalog-body-avatars .catalog-body-avatar-item,
#favorites-view .catalog-body-avatars .favorites-body-avatar-item {
width: clamp(3.75rem, 19vmin, 5.75rem) !important;
min-width: 3.75rem;
flex: 0 0 auto;
}
#catalog-view .catalog-body-avatars .catalog-body-avatar-item img,
#favorites-view .catalog-body-avatars .favorites-body-avatar-item img {
height: clamp(4.75rem, 24vmin, 7rem) !important;
min-height: 4.75rem;
width: 100%;
object-fit: contain;
object-position: center;
}
#catalog-view #catalog-avatars-body .flex.flex-row[role='list'],
#favorites-view #favorites-avatars-body .flex.flex-row[role='list'] {
gap: 0.5rem;
padding-bottom: 0.375rem;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
#catalog-view #catalog-avatars-body .catalog-body-avatar-item,
#favorites-view #favorites-avatars-body .favorites-body-avatar-item {
scroll-snap-align: start;
}
#catalog-view #vs-tryon-drawer .vs-tryon-body-avatar-item {
width: clamp(3.75rem, 19vmin, 5.75rem) !important;
min-width: 3.75rem;
flex: 0 0 auto;
scroll-snap-align: start;
}
#catalog-view #vs-tryon-drawer .vs-tryon-body-avatar-item img {
height: clamp(5rem, 26vmin, 7rem) !important;
min-height: 5rem;
width: 100%;
object-fit: contain;
object-position: center;
}
#catalog-view #vs-avatars-body .flex.flex-row[role='list'] {
gap: 0.5rem;
padding-bottom: 0.375rem;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
}
@media (min-width: 1280px) {
#catalog-tryon-mobile-backdrop,
#favorites-tryon-mobile-backdrop {
display: none !important;
}
#catalog-view #catalog-tryon-fab,
#favorites-view #favorites-tryon-fab {
display: none !important;
}
}
#catalog-subheader-tabs.catalog-subheader-tabs-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
}
#catalog-subheader-tabs .catalog-subtab-row {
text-align: center;
justify-content: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#catalog-product-detail-tab #catalog-product-detail-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
#catalog-view .catalog-upload-slot label > .relative {
transition: border-color 200ms ease, background-color 200ms ease;
}
#catalog-view .catalog-upload-slot:hover label > .relative {
border-color: #0a0a0a;
background-color: #f3f4f6;
}
#catalog-view .catalog-tryon-panel {
width: 100%;
max-width: 400px;
min-width: 260px;
max-height: calc(100dvh - 5.5rem);
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
}
@media (min-width: 1280px) {
#catalog-view .catalog-tryon-panel {
max-height: calc(100dvh - 4rem);
}
/* Favoriler try-on: masaüstünde sağ sütun (mobilde yalnızca bottom-sheet kuralları geçerli) */
#favorites-view #favorites-tryon-panel.catalog-tryon-panel {
width: 100%;
max-width: 400px;
min-width: 260px;
max-height: calc(100dvh - 4rem);
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
}
}
#catalog-view .catalog-tryon-history-thumb {
flex: 0 0 auto;
}
#catalog-view .catalog-tryon-history-thumb img,
#favorites-view .catalog-tryon-history-thumb img {
display: block;
object-fit: contain;
object-position: center;
}
#catalog-view .catalog-tryon-canvas,
#favorites-view .catalog-tryon-canvas {
flex-shrink: 0;
}
#catalog-view #catalog-portrait-dropzone.catalog-tryon-canvas,
#favorites-view #favorites-portrait-dropzone.catalog-tryon-canvas {
width: 11rem;
min-height: 168px;
aspect-ratio: 3 / 4;
}
@media (min-width: 768px) and (max-width: 1279px) {
#catalog-view .catalog-tryon-toprow .catalog-tryon-portrait-col #catalog-portrait-dropzone.catalog-tryon-canvas,
#favorites-view .catalog-tryon-toprow .catalog-tryon-portrait-col #favorites-portrait-dropzone.catalog-tryon-canvas {
width: 11rem;
max-width: 100%;
}
}
/* Try-on sonuç + ürün detayı / expand: z-index burada (tailwind.css’te z-[210]+ arbitrary yok) */
#tryon-result-modal {
z-index: 205;
padding: 0 !important;
}
#catalog-product-detail-backdrop {
z-index: 300;
}
#catalog-product-detail-tab {
z-index: 301;
}
#catalog-selected-expand-backdrop {
z-index: 302;
}
#catalog-selected-expand-panel {
z-index: 303;
}
/* Try-on sonuç modali: sol 9:16 çerçeve, sağ dikey parça görselleri */
#tryon-result-modal .tryon-result-dialog-panel {
width: 100vw;
height: 100dvh;
max-width: 100vw;
max-height: 100dvh;
min-width: 0;
border-radius: 0;
border: 0;
}
#tryon-result-body.tryon-result-body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 0;
padding: 0.75rem;
}
#tryon-result-body.tryon-result-body--with-pieces {
align-items: stretch;
justify-content: flex-start;
}
#tryon-result-body.tryon-result-body--with-pieces .tryon-result-aspect-col {
justify-content: flex-start;
}
/* Çerçeve boyutu Tailwind build’de yoksa bile panele sığsın (geniş landscape sonuç taşmasın) */
#tryon-result-modal .tryon-result-aspect-col {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#tryon-result-modal .tryon-result-aspect-frame {
display: block;
width: 100%;
max-width: 100%;
height: 100%;
aspect-ratio: auto;
max-height: none;
min-height: 0;
min-width: 0;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
border-radius: 0.75rem;
}
#tryon-result-body .tryon-result-aspect-frame {
max-height: none;
min-height: 0;
box-sizing: border-box;
}
/* Show the whole generated image without cropping inside the frame. */
#tryon-result-modal #tryon-result-img {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: contain;
object-position: center center;
margin: 0;
}
#tryon-result-img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center center;
flex: 1 1 auto;
min-height: 0;
min-width: 0;
}
#tryon-result-body .tryon-result-piece-strip {
max-height: none;
}
#tryon-result-modal #tryon-result-garments-col:not(.hidden) {
flex: 0 0 min(28vw, 320px);
min-width: min(28vw, 320px);
}
@media (max-width: 639px) {
#tryon-result-body.tryon-result-body--with-pieces {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
#tryon-result-body.tryon-result-body--with-pieces .tryon-result-aspect-col {
flex: 0 0 auto;
width: 100%;
}
#tryon-result-modal #tryon-result-garments-col:not(.hidden) {
flex: 1 1 auto;
min-height: 0;
max-height: min(38dvh, 320px);
border-left: none !important;
padding-left: 0 !important;
}
#tryon-result-modal #tryon-result-piece-links-wrap {
border-left: none !important;
padding-left: 0 !important;
padding-top: 0.5rem;
border-top: 1px solid #f3f4f6;
}
#tryon-result-body.tryon-result-body--with-pieces .tryon-result-piece-strip {
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
max-height: none;
-webkit-overflow-scrolling: touch;
}
#tryon-result-modal .tryon-result-aspect-frame {
width: 100%;
max-width: 100%;
min-height: min(56dvh, 520px);
}
}
.tryon-result-piece-thumb {
display: block;
width: 100%;
max-width: 11.5rem;
margin-left: auto;
margin-right: auto;
aspect-ratio: 3 / 4;
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid #e5e7eb;
padding: 0;
background: #f3f4f6;
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tryon-result-piece-thumb:hover {
border-color: #9ca3af;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.tryon-result-piece-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
pointer-events: none;
}
.tryon-result-piece-thumb--text {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #374151;
padding: 0.5rem;
line-height: 1.25;
}
#catalog-view .catalog-tryon-canvas.is-dragover,
#favorites-view .catalog-tryon-canvas.is-dragover {
border-color: #0a0a0a;
background-color: #f3f4f6;
}
#catalog-view .catalog-tryon-canvas.has-portrait,
#favorites-view .catalog-tryon-canvas.has-portrait {
border-style: solid;
border-width: 1px;
border-color: #d1d5db;
background-color: #ffffff;
}
#catalog-view .catalog-tryon-canvas.has-portrait .catalog-portrait-kicker,
#favorites-view .catalog-tryon-canvas.has-portrait .catalog-portrait-kicker {
display: none;
}
#catalog-view #catalog-portrait-preview {
z-index: 14;
}
#catalog-view #catalog-portrait-preview.hidden {
display: none !important;
}
#catalog-view #catalog-portrait-preview:not(.hidden) {
display: block !important;
object-fit: contain;
object-position: center center;
}
#catalog-view #catalog-portrait-empty {
z-index: 1;
}
#favorites-view #favorites-portrait-preview {
z-index: 14;
}
#favorites-view #favorites-portrait-preview.hidden {
display: none !important;
}
#favorites-view #favorites-portrait-preview:not(.hidden) {
display: block !important;
object-fit: contain;
object-position: center center;
}
#favorites-view #favorites-portrait-empty {
z-index: 1;
}
/* FYND Clothes / ürün linki — fitting room + favoriler sağ sütun (aynı kart) */
#catalog-view .catalog-fynd-link-inline,
#favorites-view .catalog-fynd-link-inline {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
text-align: center;
}
#catalog-fynd-hanger-wrap,
#favorites-fynd-hanger-wrap {
position: relative;
}
/* Seçim sayacı: yalnızca askı (xl altı) ile birlikte; askının sol üstü, masaüstünde gizli */
#catalog-fynd-selection-badge,
#favorites-fynd-selection-badge {
position: absolute;
top: 0.05rem;
left: 0.05rem;
right: auto;
z-index: 2;
min-width: 1.375rem;
height: 1.375rem;
padding: 0 0.32rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
color: #fff;
background: #dc2626;
border-radius: 9999px;
border: 2px solid #0a0a0a;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
pointer-events: none;
}
@media (min-width: 1280px) {
#catalog-fynd-selection-badge,
#favorites-fynd-selection-badge {
display: none !important;
}
}
#catalog-fynd-selection-badge.is-hidden,
#favorites-fynd-selection-badge.is-hidden {
display: none !important;
}
/* Mobil try-on FAB: seçim sayısı (askı kartı gizliyken) */
#catalog-tryon-fab-selection-badge,
#favorites-tryon-fab-selection-badge {
position: absolute;
top: 0.1rem;
right: 0.1rem;
z-index: 1;
min-width: 1.125rem;
height: 1.125rem;
padding: 0 0.28rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.5625rem;
font-weight: 800;
line-height: 1;
color: #fff;
background: #dc2626;
border-radius: 9999px;
border: 2px solid #111827;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
pointer-events: none;
}
#catalog-tryon-fab-selection-badge.is-hidden,
#favorites-tryon-fab-selection-badge.is-hidden {
display: none !important;
}
#catalog-view .catalog-avatars-toggle:focus-visible,
#favorites-view .catalog-avatars-toggle:focus-visible,
#catalog-view #vs-tryon-drawer .catalog-avatars-toggle:focus-visible {
outline: 2px solid #111;
outline-offset: 2px;
}
#catalog-view .catalog-body-avatar-item {
cursor: grab;
touch-action: manipulation;
}
#catalog-view .catalog-body-avatar-item:active {
cursor: grabbing;
}
#catalog-view .catalog-body-avatar-item:focus-visible {
outline: 2px solid #000;
outline-offset: 2px;
}
#favorites-view .favorites-body-avatar-item {
cursor: grab;
touch-action: manipulation;
}
#favorites-view .favorites-body-avatar-item:active {
cursor: grabbing;
}
#favorites-view .favorites-body-avatar-item:focus-visible {
outline: 2px solid #000;
outline-offset: 2px;
}
#catalog-view .catalog-subtab {
border-bottom-width: 2px;
border-bottom-style: solid;
}
#catalog-view .catalog-subtab:not(.is-active) {
border-bottom-color: transparent !important;
color: rgb(107, 114, 128);
}
#catalog-view .catalog-subtab:not(.is-active):hover {
color: #111;
}
#catalog-view .catalog-subtab.is-active {
border-bottom-color: #000 !important;
color: #111 !important;
}
#catalog-view .catalog-gender-chip {
border: 1px solid #d1d5db;
padding: 0.5rem 0.85rem;
font-size: calc(10px + 2pt);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #4b5563;
background: #fff;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#catalog-view .catalog-gender-chip:hover:not(.is-active) {
border-color: #111;
color: #111;
}
#catalog-view .catalog-brand-chip.is-active,
#catalog-view .catalog-gender-chip.is-active {
background-color: #000;
color: #fff;
border-color: #000;
}
/* Fitting room: Women / Men segment (sliding pill) — chips stay transparent */
#catalog-view .catalog-gender-segment .catalog-gender-chip {
border: none;
background: transparent;
color: #6b7280;
box-shadow: none;
}
#catalog-view .catalog-gender-segment .catalog-gender-chip:hover:not(.is-active) {
border: none;
color: #111;
}
#catalog-view .catalog-gender-segment .catalog-gender-chip.is-active {
background: transparent;
color: #111;
border: none;
}
#catalog-view .catalog-gender-segment .catalog-gender-chip:focus,
#catalog-view .catalog-gender-segment .catalog-gender-chip:focus-visible {
outline: none;
box-shadow: none;
}
#catalog-view .catalog-gender-segment {
outline: none;
}
#catalog-view #catalog-gender-segment-pill {
outline: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* ── Catalog workflow guide ──────────────────────────────── */
#catalog-view #catalog-state-a-guide,
#favorites-view #favorites-state-a-guide {
display: none !important;
}
/* CTA buttons: visually disabled when not ready */
#catalog-view .catalog-cta-btn[data-disabled="true"],
#favorites-view .catalog-cta-btn[data-disabled="true"] {
opacity: 0.38;
cursor: not-allowed;
filter: grayscale(0.3);
}
/* Error flash container (+ aynı çerçeve davranışı: favoriler try-on = fitting room) */
#catalog-view .catalog-cta-btns-wrap,
#favorites-view #favorites-tryon-panel .catalog-cta-btns-wrap {
border-radius: 4px;
outline: 2px solid transparent;
outline-offset: 2px;
transition: outline-color 200ms ease;
}
/* Favoriler try-on: katalog (#catalog-view) ile aynı +2pt tipografi — CTA ve geçmiş başlığı genişlik/yükseklik hissi eşit */
#favorites-view #favorites-tryon-panel .text-\[9px\] {
font-size: calc(9px + 2pt) !important;
}
#favorites-view #favorites-tryon-panel .text-\[10px\] {
font-size: calc(10px + 2pt) !important;
}
#favorites-view #favorites-tryon-panel .text-\[11px\] {
font-size: calc(11px + 2pt) !important;
}
@media (min-width: 640px) {
#favorites-view #favorites-tryon-panel .sm\:text-\[12px\] {
font-size: calc(12px + 2pt) !important;
}
}
/* Favoriler CTA: katalogdaki butonla aynı dikey dolgu (içerik +2pt sonrası hizası) */
#favorites-view #favorites-tryon-panel .catalog-cta-btn {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes catalogCtaError {
0% { background-color: transparent; outline-color: transparent; }
15% { background-color: rgba(254,226,226,0.7); outline-color: rgba(239,68,68,0.55); }
75% { background-color: rgba(254,226,226,0.7); outline-color: rgba(239,68,68,0.55); }
100% { background-color: transparent; outline-color: transparent; }
}
#catalog-view .catalog-cta-btns-wrap.cta-error-flash,
#favorites-view .catalog-cta-btns-wrap.cta-error-flash {
animation: catalogCtaError 750ms ease forwards;
}
/* Workflow hint bar (slides in above buttons) */
#catalog-view #catalog-workflow-hint {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 240ms ease, opacity 180ms ease;
}
#catalog-view #catalog-workflow-hint.is-visible {
max-height: 44px;
opacity: 1;
}
#favorites-view #favorites-workflow-hint {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 240ms ease, opacity 180ms ease;
}
#favorites-view #favorites-workflow-hint.is-visible {
max-height: 44px;
opacity: 1;
}
#catalog-view .catalog-category-tabs-track {
justify-content: center;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
#catalog-view .catalog-category-tab {
flex-shrink: 0;
border: 1px solid #d1d5db;
padding: 0.5rem 0.85rem;
font-size: calc(10px + 2pt);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #4b5563;
background: #fff;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
@media (max-width: 639px) {
#catalog-view .catalog-category-tab {
padding: 0.4rem 0.5rem;
font-size: calc(9px + 1pt);
letter-spacing: 0.08em;
}
}
#catalog-view .catalog-category-tab:hover {
border-color: #111;
color: #111;
}
#catalog-view .catalog-category-tab.is-active {
background: #111;
color: #fff;
border-color: #111;
}
/* Catalog: tüm tipografi +2pt (sadece #catalog-view içi) */
#catalog-view .ui-kicker {
font-size: calc(10px + 2pt) !important;
}
#catalog-view .ui-btn {
font-size: calc(10px + 2pt) !important;
}
#catalog-view .text-xs {
font-size: calc(0.75rem + 2pt) !important;
}
#catalog-view .text-sm {
font-size: calc(0.875rem + 2pt) !important;
}
#catalog-view .text-base {
font-size: calc(1rem + 2pt) !important;
}
#catalog-view .text-lg {
font-size: calc(1.125rem + 2pt) !important;
}
#catalog-view .text-xl {
font-size: calc(1.25rem + 2pt) !important;
}
#catalog-view .text-2xl {
font-size: calc(1.5rem + 2pt) !important;
}
#catalog-view .text-\[8px\] {
font-size: calc(8px + 2pt) !important;
}
#catalog-view .text-\[9px\] {
font-size: calc(9px + 2pt) !important;
}
#catalog-view .text-\[10px\] {
font-size: calc(10px + 2pt) !important;
}
#catalog-view .text-\[11px\] {
font-size: calc(11px + 2pt) !important;
}
#catalog-view .text-\[26px\] {
font-size: calc(26px + 2pt) !important;
}
#catalog-view .text-\[32px\] {
font-size: calc(32px + 2pt) !important;
}
@media (min-width: 640px) {
#catalog-view .sm\:text-\[11px\] {
font-size: calc(11px + 2pt) !important;
}
}
@media (min-width: 768px) {
#catalog-view .md\:text-\[32px\] {
font-size: calc(32px + 2pt) !important;
}
#catalog-view .md\:text-2xl {
font-size: calc(1.5rem + 2pt) !important;
}
}
#catalog-view footer h4 {
font-size: calc(1rem + 2pt);
}
#catalog-view .catalog-upload-slot.is-selected .relative.aspect-\[3\/4\] {
border-color: #000;
border-style: solid;
}
#catalog-view .catalog-upload-slot-actions .catalog-add-to-wardrobe-btn.is-wardrobe-pinned {
border-color: rgba(5, 150, 105, 0.55);
color: rgb(6, 95, 70);
background: rgba(236, 253, 245, 0.95);
}
/* ── Selected-items strip inside try-on panel ─────────────── */
#catalog-selected-items {
display: none;
margin-bottom: 0;
}
#catalog-selected-items.has-items {
display: flex;
flex-direction: column;
flex: 1 1 0%;
min-width: 0;
}
#favorites-selected-items {
display: none;
margin-bottom: 0;
}
#favorites-selected-items.has-items {
display: flex;
flex-direction: column;
flex: 1 1 0%;
min-width: 0;
}
.csel-chip {
position: relative;
width: 62px;
height: 82px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
border: 1.5px solid #e5e7eb;
background: #f3f4f6;
cursor: pointer;
}
.csel-chip img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.csel-chip-remove {
position: absolute;
top: 2px;
right: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(0,0,0,0.7);
color: #fff;
font-size: 9px;
line-height: 1;
font-weight: 700;
border: none;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
padding: 0;
z-index: 2;
}
.csel-chip:hover .csel-chip-remove { display: flex; }
/* Nav active state (js ile yönetilir) */
.nav-link {
border-bottom: 1.5px solid transparent;
padding-bottom: 0.25rem;
}
.nav-link.is-active {
color: #000;
border-bottom-color: #000;
}
#mobile-nav-panel .nav-link {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(243 244 246);
padding-bottom: 0.875rem;
}
#mobile-nav-panel .nav-link.is-active {
border-bottom-color: #000;
}
/* Header’dan taşınan site linkleri (footer alt şerit) */
.footer-nav-site-link.is-active {
color: #fff;
text-decoration: underline;
text-underline-offset: 0.25rem;
}
/* === UI helpers (home/try-on typographic system) === */
.ui-kicker {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6b7280; /* gray-500 */
}
.ui-h1 {
font-weight: 900;
letter-spacing: -0.03em;
text-transform: uppercase;
line-height: 0.95;
}
.ui-h2 {
font-weight: 900;
letter-spacing: -0.03em;
text-transform: uppercase;
line-height: 0.95;
}
.ui-body {
font-size: 0.95rem;
line-height: 1.65;
color: #4b5563; /* gray-600 */
}
.ui-input {
border: 1px solid #e5e7eb; /* gray-200 */
background: #fff;
border-radius: 0.75rem; /* match rounded-xl feel */
outline: none;
}
.ui-input:focus {
border-color: #000;
}
.ui-btn {
border-radius: 0.75rem;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 0.75rem 1.25rem;
transition: background-color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.ui-btn-primary {
background: #000;
color: #fff;
}
.ui-btn-primary:hover { opacity: 0.92; }
.ui-btn-secondary {
background: #fff;
color: #000;
border: 1px solid #d1d5db; /* gray-300 */
}
.ui-btn-secondary:hover { background: #f9fafb; } /* gray-50 */
.lang-btn.is-active {
color: #000;
}
/* Home landing: stacking + scroll — hero z-index was covering the MacBook demo + community */
#home-view {
isolation: isolate;
}
#home-view > main {
z-index: 0;
}
/* Partnership editorial (Newsreader / Manrope + Material Symbols) */
#partnership-view {
border-top: 1px solid rgb(0 0 0 / 0.06);
}
#partnership-view .material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
#partnership-view .editorial-title {
line-height: 0.9;
}
#partnership-view .partnership-hero-needle {
color: rgb(91 94 102 / 0.88);
pointer-events: none;
}
#partnership-view .partnership-hero-needle svg {
width: 100%;
height: auto;
max-height: min(440px, 52vh);
display: block;
}
@media (max-width: 1023px) {
#partnership-view .partnership-hero-needle {
max-width: 200px;
margin-left: auto;
margin-right: auto;
}
}
/* Üst menü: normal akıştaki yüksek z’li içerik üzerinde kalsın; drawer/modal (z≥70) üstte kalır */
#main-nav {
position: relative;
z-index: 60;
isolation: isolate;
}
@media (min-width: 768px) {
body.mobile-nav-open {
overflow: auto;
}
}
#shop-views-stage {
position: relative;
z-index: 0;
}
/* Catalog giriş animasyonunda alttaki siyah footer ilk karede görünmesin */
#catalog-view-footer.shop-view-footer--enter-pending {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
/* Shop views horizontal slide (Try-On / Catalog / Partnership) */
.shop-view-layer {
transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* FYND Clothes (visual-search) embedded in shop stage */
#catalog-panel-visual-search .material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
font-size: 20px;
}
#catalog-panel-visual-search .material-symbols-outlined.text-4xl {
font-size: 2.25rem;
}
#catalog-panel-visual-search .glass-effect {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* Tespit canvas’ı mobilde kısalt: “Search selected region” viewport’ta kalsın (Tailwind yoksa yedek) */
#catalog-panel-visual-search #vs-detection-canvas-wrap {
max-height: min(34vh, 280px);
}
@media (min-width: 640px) {
#catalog-panel-visual-search #vs-detection-canvas-wrap {
max-height: min(42vh, 360px);
}
}
@media (min-width: 768px) {
#catalog-panel-visual-search #vs-detection-canvas-wrap {
max-height: min(48vh, 420px);
}
}
#catalog-panel-visual-search .vs-hscroll-rail,
#catalog-fynd-link-modal .vs-hscroll-rail {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 1.5rem;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 4px 2px 14px;
scrollbar-width: thin;
}
#catalog-panel-visual-search .vs-hscroll-rail::-webkit-scrollbar,
#catalog-fynd-link-modal .vs-hscroll-rail::-webkit-scrollbar {
height: 6px;
}
#catalog-panel-visual-search .vs-hscroll-rail::-webkit-scrollbar-thumb,
#catalog-fynd-link-modal .vs-hscroll-rail::-webkit-scrollbar-thumb {
background: rgb(21 28 39 / 0.22);
border-radius: 3px;
}
/* VS kartları: #catalog-view genel +2pt tipografisinden muaf, dar şerit */
#catalog-panel-visual-search .vs-hscroll-card {
flex: 0 0 min(152px, 46vw);
max-width: min(152px, 46vw);
min-width: 0;
box-sizing: border-box;
scroll-snap-align: start;
}
#catalog-panel-visual-search .vs-hscroll-card > div.relative:first-child {
max-height: none;
}
#catalog-panel-visual-search .vs-hscroll-card h3.text-base {
font-size: 0.75rem !important;
line-height: 1.2;
}
#catalog-panel-visual-search .vs-hscroll-card .font-body.text-sm {
font-size: 0.6875rem !important;
}
#catalog-panel-visual-search .vs-hscroll-card p.mb-1 {
font-size: 9px !important;
}
#catalog-panel-visual-search .vs-hscroll-card .vs-tryon-open-btn,
#catalog-panel-visual-search .vs-hscroll-card a.inline-flex.bg-primary {
font-size: 8px !important;
padding: 0.3rem 0.45rem !important;
letter-spacing: 0.06em;
}
#catalog-panel-visual-search .vs-hscroll-card .mb-4 {
margin-bottom: 0.4rem;
}
/* Popup dar: daha küçük kart + sıkı tipografi */
#catalog-fynd-link-modal .vs-hscroll-rail {
gap: 0.5rem;
padding: 2px 0 6px;
}
#catalog-fynd-link-modal .vs-hscroll-card {
flex: 0 0 min(108px, 28vw);
max-width: min(108px, 28vw);
min-width: 0;
box-sizing: border-box;
scroll-snap-align: start;
}
#catalog-fynd-link-modal .vs-hscroll-card > div.relative:first-child {
max-height: none;
}
#catalog-fynd-link-modal .vs-hscroll-card .mb-4 {
margin-bottom: 0.25rem;
}
#catalog-fynd-link-modal .vs-hscroll-card h3 {
font-size: 0.6875rem !important;
line-height: 1.15;
}
#catalog-fynd-link-modal .vs-hscroll-card .font-body.text-sm {
font-size: 0.625rem !important;
}
#catalog-fynd-link-modal .vs-hscroll-card p.mb-1 {
font-size: 8px !important;
}
#catalog-fynd-link-modal .vs-hscroll-card .vs-tryon-open-btn,
#catalog-fynd-link-modal .vs-hscroll-card a.inline-flex.bg-primary {
font-size: 7px !important;
padding: 0.25rem 0.3rem !important;
letter-spacing: 0.05em;
}
#catalog-fynd-link-modal .vs-hscroll-card .mt-auto.flex.flex-col.gap-2 {
gap: 0.25rem;
}
/* Touch: keep image actions visible; desktop keeps hover reveal */
@media (hover: none) {
#catalog-panel-visual-search .vs-card-img-actions,
#catalog-fynd-link-modal .vs-card-img-actions {
opacity: 1 !important;
transform: translateY(0) !important;
}
}
#catalog-panel-visual-search .vs-hscroll-loadmore,
#catalog-fynd-link-modal .vs-hscroll-loadmore {
flex: 0 0 auto;
align-self: center;
min-height: 8rem;
padding: 0.75rem 1.25rem;
max-width: 6.5rem;
line-height: 1.35;
border: 1px solid rgb(21 28 39 / 0.15);
background: rgb(249 249 255 / 0.9);
color: rgb(21 28 39);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
#catalog-panel-visual-search .vs-hscroll-loadmore:hover:not(:disabled),
#catalog-fynd-link-modal .vs-hscroll-loadmore:hover:not(:disabled) {
background: rgb(255 255 255);
border-color: rgb(21 28 39 / 0.35);
}
#catalog-panel-visual-search .vs-hscroll-loadmore:disabled,
#catalog-fynd-link-modal .vs-hscroll-loadmore:disabled {
opacity: 0.35;
cursor: default;
}
#catalog-panel-visual-search .vs-hscroll-sentinel,
#catalog-fynd-link-modal .vs-hscroll-sentinel {
flex: 0 0 4px;
width: 4px;
min-height: 120px;
align-self: stretch;
pointer-events: none;
}
#catalog-fynd-link-modal .vs-hscroll-loadmore {
min-height: 5.5rem;
padding: 0.5rem 0.6rem;
max-width: 4.25rem;
font-size: 9px;
}
#catalog-fynd-link-modal .vs-hscroll-sentinel {
min-height: 90px;
}
#vs-drop-zone.vs-drop-active {
outline: 2px dashed rgb(21 28 39 / 0.35);
outline-offset: 4px;
}
#vs-retailers-backdrop.vs-retailers-open {
opacity: 1;
pointer-events: auto;
}
#vs-retailers-drawer.vs-retailers-open {
transform: translateX(0);
}
#catalog-view #vs-tryon-backdrop {
opacity: 0;
pointer-events: none;
transition: opacity 300ms ease;
}
#catalog-view #vs-tryon-backdrop.vs-tryon-open {
opacity: 1;
pointer-events: auto;
}
#catalog-view #vs-tryon-drawer {
transform: translateX(100%);
}
#catalog-view #vs-tryon-drawer.vs-tryon-open {
transform: translateX(0);
}
/* Mobil / dar ekran: karttaki Try on → panel alttan sheet (buton hizası / sayfa tabanı) */
@media (max-width: 1023px) {
#catalog-view #vs-tryon-drawer {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
max-width: none;
height: auto;
max-height: min(92dvh, 900px);
border-left-width: 0;
border-top: 1px solid rgb(21 28 39 / 0.2);
border-radius: 1.25rem 1.25rem 0 0;
box-shadow: 0 -12px 40px rgba(21, 28, 39, 0.14);
transform: translateY(105%);
}
#catalog-view #vs-tryon-drawer.vs-tryon-open {
transform: translateY(0);
}
#catalog-view #vs-tryon-drawer > div:nth-child(2) {
padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
}
}
#catalog-view #vs-tryon-portrait-dropzone.is-dragover {
border-color: #000;
background-color: #f3f4f6;
}
#catalog-view #vs-tryon-portrait-dropzone.has-portrait .vs-tryon-state-b-guide {
display: none;
}
#catalog-view #vs-tryon-drawer .vs-tryon-canvas {
min-height: 220px;
}
@media (max-width: 767px) {
#catalog-view #vs-tryon-drawer .vs-tryon-canvas {
min-height: 260px;
}
}
#catalog-view #vs-tryon-drawer #vs-tryon-portrait-preview:not(.hidden) {
object-fit: contain;
object-position: center center;
}
#catalog-view #vs-tryon-drawer .vs-tryon-canvas.is-dragover {
border-color: #0a0a0a;
background-color: #f3f4f6;
}
#catalog-view #vs-tryon-drawer .vs-tryon-canvas.has-portrait {
border-style: solid;
border-width: 1px;
border-color: #d1d5db;
background-color: #ffffff;
}
#catalog-view #vs-tryon-drawer .vs-tryon-canvas.has-portrait .vs-tryon-portrait-kicker {
display: none;
}
#catalog-view #vs-tryon-drawer .vs-tryon-body-avatar-item {
cursor: grab;
touch-action: manipulation;
}
#catalog-view #vs-tryon-drawer .vs-tryon-body-avatar-item:active {
cursor: grabbing;
}
#catalog-view #vs-tryon-drawer .vs-tryon-body-avatar-item:focus-visible {
outline: 2px solid #000;
outline-offset: 2px;
}
#catalog-view #vs-tryon-drawer .vs-tryon-cta-btn[data-disabled="true"] {
opacity: 0.38;
cursor: not-allowed;
filter: grayscale(0.3);
}
#catalog-view #vs-tryon-drawer .vs-tryon-cta-btns-wrap {
border-radius: 4px;
outline: 2px solid transparent;
outline-offset: 2px;
transition: outline-color 200ms ease;
}
#catalog-view #vs-tryon-drawer .vs-tryon-cta-btns-wrap.cta-error-flash {
animation: catalogCtaError 750ms ease forwards;
}
#catalog-view #vs-tryon-workflow-hint {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 240ms ease, opacity 180ms ease;
}
#catalog-view #vs-tryon-workflow-hint.is-visible {
max-height: 44px;
opacity: 1;
}
#catalog-panel-visual-search .vs-sort-tab.is-active {
color: #000;
font-weight: 700;
}
#catalog-panel-visual-search .vs-sort-tab:not(.is-active) {
color: #4c4546;
}
#catalog-panel-visual-search .bg-primary,
#catalog-panel-visual-search .hover\:bg-primary:hover {
background-color: #000 !important;
}
#catalog-panel-visual-search .text-primary,
#catalog-panel-visual-search .hover\:text-primary:hover {
color: #000 !important;
}
#catalog-panel-visual-search .text-on-primary,
#catalog-panel-visual-search .hover\:text-on-primary:hover {
color: #fff !important;
}
#catalog-panel-visual-search .border-primary {
border-color: #000 !important;
}
#catalog-panel-visual-search .text-primary\/40 {
color: rgb(0 0 0 / 0.4) !important;
}
@media (prefers-reduced-motion: reduce) {
.shop-view-layer,
#favorites-view {
transition: none !important;
}
.hero-compare-after,
.hero-compare-divider {
animation: none !important;
}
.hero-compare-after {
clip-path: inset(0 0 45% 0);
}
.hero-compare-divider {
top: 55%;
}
}
@media (max-width: 767px) {
#main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
transform: translateZ(0);
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s, background-color 0.3s, border-color 0.3s;
will-change: transform;
}
#main-nav.main-nav-scroll-hidden {
transform: translateY(-100%);
}
#home-view,
#favorites-view,
#catalog-view > main,
#partnership-view > main,
#plans-view > main {
padding-top: 5rem;
box-sizing: border-box;
}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
#main-nav {
transition: none;
}
}
/* Kredi maliyeti rozetleri (arama / önizleme / tam üretim / decoupe) */
.fynd-credit-chip {
display: inline-flex;
align-items: center;
border-radius: 0.25rem;
padding: 0.125rem 0.4rem;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.15;
white-space: nowrap;
}
.fynd-credit-chip--on-primary {
border: 1px solid rgba(255, 255, 255, 0.45);
color: rgba(255, 255, 255, 0.95);
background: rgba(255, 255, 255, 0.12);
}
.fynd-credit-chip--on-dark {
border: 1px solid rgba(255, 255, 255, 0.35);
color: rgba(255, 255, 255, 0.92);
background: rgba(255, 255, 255, 0.08);
}
.fynd-credit-chip--on-light {
border: 1px solid rgba(0, 0, 0, 0.14);
color: rgba(0, 0, 0, 0.72);
background: rgba(255, 255, 255, 0.92);
}
.fynd-credit-chip--on-outline {
border: 1px solid rgba(21, 28, 39, 0.2);
color: inherit;
background: rgba(255, 255, 255, 0.65);
}
.fynd-credit-chip--free {
border: 1px solid rgba(22, 101, 52, 0.35);
color: rgb(22, 101, 52);
background: rgba(220, 252, 231, 0.95);
}