/* TEARZ — upsell "Збери свій фіт". Scoped to .tup-* */
.tup-inline, .tup-fit, .tup-cart { --tup-ink: #111; --tup-mute: #6b6b6b; --tup-line: #e5e5e5; --tup-soft: #f7f7f5; font-family: Arial, Helvetica, sans-serif; color: var(--tup-ink); }
.tup-inline *, .tup-fit *, .tup-cart * { box-sizing: border-box; }
.tup-inline button, .tup-fit button, .tup-cart button { font: inherit; }

/* Item (shared) */
.tup-item { display: grid; gap: 12px; align-items: start; min-width: 0; }
.tup-photo { display: block; background: var(--tup-soft); overflow: hidden; }
.tup-photo img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.tup-photo:hover img { transform: scale(1.04); }
.tup-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tup-name { color: var(--tup-ink); text-decoration: none; font-size: 12px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tup-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.tup-price { font-size: 13px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.tup-price-now { font-weight: 700; }
.tup-price del { color: var(--tup-mute); font-size: 12px; }
.tup-price small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--tup-ink); padding: 2px 5px; }
.tup-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.tup-size { min-width: 36px; height: 32px; padding: 0 8px; border: 1px solid #cfcfcf; background: #fff; color: var(--tup-ink); font-size: 12px; cursor: pointer; border-radius: 0; }
.tup-size:hover { border-color: var(--tup-ink); }
.tup-size[aria-pressed="true"] { background: var(--tup-ink); color: #fff; border-color: var(--tup-ink); }
.tup-add { height: 38px; padding: 0 14px; border: 1px solid var(--tup-ink); background: var(--tup-ink); color: #fff; font-size: 12px; cursor: pointer; border-radius: 0; transition: opacity .2s; }
.tup-add:disabled { background: #fff; color: var(--tup-mute); border-color: #cfcfcf; cursor: default; }
.tup-add.is-added { background: #fff; color: var(--tup-ink); }
.tup-inline button:focus-visible, .tup-fit button:focus-visible, .tup-cart button:focus-visible, .tup-fit a:focus-visible, .tup-inline a:focus-visible { outline: 2px solid var(--tup-ink); outline-offset: 2px; }

/* Mini variant (inline + cart) */
.tup-item--mini { grid-template-columns: 72px minmax(0, 1fr); }
.tup-item--mini .tup-photo { aspect-ratio: 4 / 5; }
.tup-item--mini .tup-add { height: 34px; align-self: flex-start; }
.tup-item--mini .tup-size { min-width: 32px; height: 28px; font-size: 11px; }

/* 1) Inline "Носять разом" */
.tup-inline { margin: 4px 0 20px; padding: 16px; background: var(--tup-soft); }
.tup-inline-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; font-size: 12px; }
.tup-inline-head span { letter-spacing: .08em; text-transform: uppercase; }
.tup-inline-head b { font-size: 12px; }
.tup-inline-list { display: grid; gap: 14px; }

/* 2) "Збери свій фіт" */
.tup-fit { margin: 44px 0 0 !important; padding-top: 28px !important; border-top: 1px solid var(--tup-line) !important; }
.tup-fit-head { margin-bottom: 22px; max-width: 640px; }
.tup-kicker { font-size: 10px; letter-spacing: .16em; color: var(--tup-mute); }
.tup-fit-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 28px; letter-spacing: -.02em; margin: 8px 0 8px; line-height: 1.15; }
.tup-fit-head p { margin: 0; font-size: 13px; line-height: 1.6; color: #444; }
.tup-fit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.tup-fit-grid--nophoto { grid-template-columns: 1fr; }
.tup-fit-photo { margin: 0; background: var(--tup-soft); aspect-ratio: 4 / 5; overflow: hidden; position: sticky; top: 96px; }
.tup-fit-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tup-fit-list { display: flex; flex-direction: column; }
.tup-fit-grid--nophoto .tup-fit-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tup-item--row { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--tup-line); }
.tup-item--row:first-child { padding-top: 0; }
.tup-item--row .tup-photo { aspect-ratio: 4 / 5; }
.tup-item--row .tup-name { font-size: 13px; }
.tup-item--row .tup-body { gap: 9px; }
.tup-item--row .tup-add { align-self: flex-start; min-width: 160px; }
.tup-fit-grid--nophoto .tup-item--row { grid-template-columns: 1fr; border: 0; padding: 0; }

/* 3) Cart panel */
.tup-cart { margin: 18px 0 14px; padding: 14px; background: var(--tup-soft); }
.tup-cart-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; font-size: 12px; }
.tup-cart-head b { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.tup-cart-head span { color: #444; }
.tup-cart-list { display: grid; gap: 12px; }
.tup-cart-done { font-size: 13px; font-weight: 700; text-align: center; padding: 4px 0; }
.tearz-bundle-line b { color: inherit; }

@media (max-width: 900px) {
  .tup-fit-grid { grid-template-columns: 1fr; gap: 18px; }
  .tup-fit-photo { position: static; aspect-ratio: 4 / 4.4; }
}
@media (max-width: 700px) {
  .tup-fit { margin-top: 36px !important; padding-top: 24px !important; }
  .tup-fit-title { font-size: 24px; }
  .tup-fit-photo { margin: 0 -20px; }
  .tup-item--row { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .tup-item--row .tup-add { min-width: 0; width: 100%; }
  .tup-fit-grid--nophoto .tup-fit-list { grid-template-columns: 1fr; }
}
/* Swipeable recommendations: large images, inline quick-add. */
.tup-carousel{--tup-ink:#111;--tup-mute:#666;--tup-soft:#f7f7f5;--tup-line:#e5e5e5;margin:48px 0 0;padding:28px 0 12px;border-top:1px solid var(--tup-line);min-width:0;color:#111;font-family:Arial,Helvetica,sans-serif}
.tup-carousel *{box-sizing:border-box}
.tup-carousel-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:24px}
.tup-carousel-head h2{font:600 18px/1.3 Arial,sans-serif;letter-spacing:.025em;margin:0}
.tup-carousel-head p{font:12px/1.6 Arial,sans-serif;color:#666;margin:8px 0 0}
.tup-carousel-controls{display:flex;gap:6px;flex-shrink:0}
.tup-carousel-controls button{height:44px;width:44px;border:1px solid #ddd;border-radius:50%;background:#fff;color:#111;font:26px Arial;cursor:pointer}
.tup-carousel-controls button:disabled{opacity:.28;cursor:default}
.tup-carousel-track{display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0;scrollbar-width:thin;scrollbar-color:#aaa #eee;padding:0 0 18px;align-items:flex-start}
.tup-item--carousel{flex:0 0 calc((100% - 60px)/3.2);display:flex;flex-direction:column;gap:14px;scroll-snap-align:start;min-width:0}
.tup-visual{position:relative;width:100%;background:var(--tup-soft)}
.tup-item--carousel .tup-photo{width:100%;aspect-ratio:4/5;padding:18px 14px 46px}
.tup-item--carousel .tup-photo img{object-fit:contain;mix-blend-mode:multiply}
.tup-quick{position:absolute;right:10px;bottom:10px;width:44px;height:44px;background:transparent;border:0;color:#111;font:26px Arial;cursor:pointer}
.tup-item--carousel .tup-body{width:100%;gap:8px}
.tup-item--carousel .tup-name{font-size:12px;font-weight:600;line-height:1.5;min-height:36px}
.tup-item--carousel .tup-price-now{font-size:13px;font-weight:400}
.tup-options{display:flex;flex-direction:column;gap:10px;padding-top:8px;width:100%}
.tup-carousel [hidden]{display:none!important}
.tup-carousel .tup-size{min-width:44px;height:44px;font-size:12px}
.tup-carousel .tup-add{height:44px;width:100%;font:12px Arial}
.tup-carousel button:focus-visible,.tup-carousel a:focus-visible,.tup-carousel-track:focus-visible{outline:2px solid #111;outline-offset:-2px}
@media(max-width:900px){.tup-item--carousel{flex-basis:calc((100% - 32px)/2.3)}.tup-carousel-track{gap:16px}}
@media(max-width:700px){.tup-carousel{margin-top:32px;padding-top:24px}.tup-carousel-head{gap:8px;margin-bottom:18px}.tup-carousel-head h2{font-size:16px}.tup-carousel-head p{font-size:11px;max-width:230px}.tup-carousel-controls{gap:2px}.tup-carousel-controls button{width:36px;height:44px;border:0}.tup-carousel-track{gap:14px}.tup-item--carousel{flex-basis:72%}.tup-item--carousel .tup-photo{padding:16px 10px 44px}}
@media(prefers-reduced-motion:reduce){.tup-carousel .tup-photo img{transition:none}}

/* Larger, frameless products; native finger scrolling and mouse dragging. */
.tup-carousel .tup-visual,.tup-carousel .tup-photo{background:transparent;border:0;box-shadow:none}
.tup-carousel .tup-item--carousel .tup-photo{padding:0;aspect-ratio:1/1}
.tup-carousel .tup-photo img{transform:none;mix-blend-mode:normal;user-select:none;-webkit-user-drag:none}
.tup-carousel-track{scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom;cursor:grab}
.tup-carousel-track::-webkit-scrollbar{display:none}
.tup-carousel-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.tup-carousel-track.is-dragging *{cursor:grabbing!important}
.tup-carousel .tup-item--carousel{flex-basis:calc((100% - 40px)/2.7)}
.tup-carousel .tup-quick{right:0;bottom:0;background:rgba(255,255,255,.9);border-radius:50%}
@media(max-width:900px){.tup-carousel .tup-item--carousel{flex-basis:calc((100% - 20px)/1.8)}}
@media(max-width:700px){.tup-carousel .tup-item--carousel{flex-basis:84%}.tup-carousel-track{gap:12px;padding-bottom:8px}}

/* Make the conditional bundle saving visible before browsing. */
.tup-bundle-offer{background:transparent;color:#111;padding:0 0 16px;margin:0 0 24px;border-bottom:1px solid #e8e8e8}
.tup-bundle-equation{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font:500 12px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.06em}
.tup-bundle-equation strong{font:600 18px/1.4 Arial,Helvetica,sans-serif;letter-spacing:-.02em;white-space:nowrap}
.tup-bundle-offer p{font:11px/1.6 Arial,Helvetica,sans-serif;color:#777;margin:1px 0 0}
.tup-carousel .tup-price{gap:5px 9px;align-items:center}
.tup-carousel .tup-price-regular{font-size:13px;color:#777;order:0}
.tup-carousel .tup-price-bundle{font-size:21px;font-weight:700;order:1}
.tup-saving{display:inline-block;background:#111;color:#fff;padding:4px 6px;font:700 10px Arial,sans-serif;white-space:nowrap;order:2}
.tup-price-condition{flex-basis:100%;order:3;font:10px/1.5 Arial,sans-serif;color:#666;letter-spacing:.02em}
@media(max-width:700px){.tup-bundle-offer{padding-bottom:14px;margin-bottom:20px}.tup-bundle-equation strong{font-size:17px}.tup-bundle-offer p{font-size:10px}.tup-carousel .tup-price-bundle{font-size:20px}}

/* Equal visible product scale, without stretching garment proportions. */
.tup-carousel .tup-photo{position:relative}
.tup-carousel .tup-image-crop{position:absolute;display:block;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden}
.tup-carousel .tup-image-crop img{position:absolute;max-width:none;max-height:none;object-fit:fill;transform:none}
.tup-carousel .tup-item--carousel .tup-name{height:36px;flex-shrink:0}

/* Refined grey offer: closer to title, stronger type, soft corners. */
.tup-carousel .tup-carousel-head{margin-bottom:10px}
.tup-carousel .tup-bundle-offer{background:#e5e5e5;color:#111;padding:16px 18px;margin:0 0 24px;border:0;border-radius:10px}
.tup-carousel .tup-bundle-equation{font-size:14px;font-weight:600;letter-spacing:.025em}
.tup-carousel .tup-bundle-equation strong{font-size:22px;font-weight:700}
.tup-carousel .tup-bundle-offer p{font-size:12px;line-height:1.5;color:#333;margin:1px 0 0}
@media(max-width:700px){.tup-carousel .tup-carousel-head{margin-bottom:8px}.tup-carousel .tup-bundle-offer{padding:14px 16px;margin-bottom:20px}.tup-carousel .tup-bundle-equation{font-size:13px}.tup-carousel .tup-bundle-equation strong{font-size:21px}.tup-carousel .tup-bundle-offer p{font-size:12px}}