/* CASE2CASE SALE PAGE V1.0.5 */ .c2c-sale-page-active .c2c-v2-hero h1{ letter-spacing:-1.5px; } .c2c-sale-page-active .c2c-v2-subtitle{ max-width:700px; } .c2c-sale-model-wrap{ display:flex; align-items:center; gap:8px; margin-left:auto; min-width:265px; } .c2c-sale-model-wrap>span{ flex:0 0 auto; color:#9299a4; font-size:12px; white-space:nowrap; } .c2c-sale-model-select{ height:40px; min-width:190px; padding:0 34px 0 12px; border:1px solid #dfe3e8; border-radius:11px; background:#fff; color:#222832; font-family:inherit; font-size:12px; outline:none; cursor:pointer; } .c2c-sale-model-select:hover{ border-color:#cbd2da; } .c2c-sale-model-select:focus{ border-color:#15191f; } .c2c-sale-page-active .c2c-v2-badge--sale{ box-shadow: 0 6px 14px rgba(118,53,255,.18); } @media(max-width:1180px){ .c2c-sale-model-wrap{ min-width:220px; } .c2c-sale-model-wrap>span{ display:none; } .c2c-sale-model-select{ min-width:200px; } } @media(max-width:960px){ .c2c-sale-model-wrap{ grid-column:1 / -1; grid-row:2; width:100%; min-width:0; margin:0; } .c2c-sale-model-wrap>span{ display:none; } .c2c-sale-model-select{ width:100%; min-width:0; height:42px; border-radius:11px; } } /* CASE2CASE_SALE_BANNER_CLEAN_V3 */ .c2c-v2-body [class*="sale"][class*="hero"] h1, .c2c-v2-body [class*="sale"][class*="hero"] h2, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-hero__title, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-page-hero__title, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-banner__title { position: relative; z-index: 2; color: #17191c; -webkit-text-stroke: 0; text-shadow: none; } .c2c-v2-body [class*="sale"][class*="hero"] p, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-hero__subtitle, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-page-hero__subtitle, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-banner__subtitle { position: relative; z-index: 2; color: #5f6670; -webkit-text-stroke: 0; text-shadow: none; } .c2c-v2-body [class*="sale"][class*="hero"] [class*="breadcrumb"] { position: relative; z-index: 2; color: #6d737c; -webkit-text-stroke: 0; text-shadow: none; } .c2c-v2-body [class*="sale"][class*="hero"] [class*="breadcrumb"] a { color: inherit; } @media (max-width: 768px) { .c2c-v2-body [class*="sale"][class*="hero"] h1, .c2c-v2-body [class*="sale"][class*="hero"] h2, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-hero__title, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-page-hero__title, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-banner__title { color: #17191c; -webkit-text-stroke: 0; text-shadow: none; } .c2c-v2-body [class*="sale"][class*="hero"] p, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-hero__subtitle, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-page-hero__subtitle, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-banner__subtitle { color: #5f6670; -webkit-text-stroke: 0; text-shadow: none; } } /* CASE2CASE_SALE_MOBILE_COMPACT_V4 */ @media (max-width: 768px) { /* 1) Повертаємо меншу мобільну висоту банера */ .c2c-v2-body [class*="sale"][class*="hero"]{ min-height: 176px !important; padding-top: 16px !important; padding-bottom: 16px !important; overflow: hidden; } .c2c-v2-body [class*="sale"][class*="hero"] h1, .c2c-v2-body [class*="sale"][class*="hero"] h2, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-hero__title, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-page-hero__title, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-banner__title{ margin: 0 0 8px 0 !important; line-height: 1.02 !important; } .c2c-v2-body [class*="sale"][class*="hero"] p, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-hero__subtitle, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-page-hero__subtitle, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-banner__subtitle{ margin: 0 !important; line-height: 1.3 !important; } /* 2) Компактний верхній рядок: iPhone/Android + вид списком/плиткою */ .c2c-sale-mobile-top-row{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; width:100% !important; margin:10px 0 10px 0 !important; } .c2c-sale-mobile-tabs-wrap{ display:flex !important; align-items:center !important; gap:8px !important; flex:1 1 auto !important; min-width:0 !important; } .c2c-sale-mobile-view-wrap{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; flex:0 0 auto !important; margin-left:auto !important; } .c2c-sale-mobile-view-wrap > button, .c2c-sale-mobile-view-wrap > a, .c2c-sale-mobile-view-wrap > div > button, .c2c-sale-mobile-view-wrap > div > a{ width:42px !important; height:42px !important; min-width:42px !important; min-height:42px !important; padding:0 !important; border-radius:10px !important; } /* 3) Трохи компактніше відступи під верхнім керуванням */ .c2c-sale-mobile-top-row + *{ margin-top:8px !important; } .c2c-sale-model-select{ height:40px !important; border-radius:10px !important; } } /* CASE2CASE_SALE_MOBILE_COMPACT_V4_1 */ @media (max-width: 768px) { /* 1. Ще компактніший SALE banner */ .c2c-v2-body [class*="sale"][class*="hero"]{ height: 150px !important; min-height: 150px !important; max-height: 150px !important; padding-top: 11px !important; padding-bottom: 11px !important; box-sizing: border-box !important; } .c2c-v2-body [class*="sale"][class*="hero"] h1, .c2c-v2-body [class*="sale"][class*="hero"] h2, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-hero__title, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-page-hero__title, .c2c-v2-body [class*="sale"][class*="hero"] .c2c-sale-banner__title{ margin-bottom: 5px !important; } /* 2. Рядок iPhone / Android + grid/list */ .c2c-sale-mobile-top-row{ margin-top: 7px !important; margin-bottom: 2px !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 44px !important; } /* * 3. НЕ розтягуємо контейнер iPhone / Android. * Саме це прибирає сіру смугу після Android. */ .c2c-sale-mobile-tabs-wrap{ flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: max-content !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } .c2c-sale-mobile-tabs-wrap::before, .c2c-sale-mobile-tabs-wrap::after{ display: none !important; content: none !important; } /* * Зберігаємо фон тільки на самих кнопках, * а не на всьому контейнері. */ .c2c-sale-mobile-tabs-wrap > button, .c2c-sale-mobile-tabs-wrap > a{ flex: 0 0 auto !important; } /* 4. Grid/list залишаємо справа */ .c2c-sale-mobile-view-wrap{ flex: 0 0 auto !important; margin: 0 0 0 auto !important; padding: 0 !important; background: transparent !important; } /* 5. Прибираємо простір перед пошуком моделі */ .c2c-sale-mobile-top-row + *{ margin-top: 0 !important; } .c2c-sale-mobile-top-row + div, .c2c-sale-mobile-top-row + section{ padding-top: 0 !important; } /* * Сам model-search притискаємо до верхнього рядка. */ [data-sale-v3-input]{ margin-top: 0 !important; } [data-sale-v3-input]:first-child{ margin-top: 0 !important; } } /* CASE2CASE_SALE_BANNER_DARK_EXACT_V1 */ @media (max-width: 768px) { /* * EXACT SALE HERO ONLY. * No pseudo-elements. * No layout/height/position changes. */ .c2c-sale-page-active .c2c-v2-hero{ box-shadow: inset 0 0 0 9999px rgba(0,0,0,.38) !important; } .c2c-sale-page-active .c2c-v2-hero h1{ color:#fff !important; -webkit-text-stroke:0 !important; text-shadow: 0 2px 8px rgba(0,0,0,.38) !important; } .c2c-sale-page-active .c2c-v2-hero .c2c-v2-subtitle{ color:rgba(255,255,255,.94) !important; -webkit-text-stroke:0 !important; text-shadow: 0 1px 6px rgba(0,0,0,.34) !important; } } /* CASE2CASE_SALE_BANNER_CONTRAST_V1 */ @media (max-width: 768px) { /* * Прибираємо старе майже непомітне inset-затемнення. */ .c2c-sale-page-active .c2c-v2-hero{ box-shadow:none !important; } /* * Затемнюємо саме внутрішній шар банера. * Ліворуч — сильніше під текстом, * праворуч — майже прозоро, щоб залишити картинку. */ .c2c-sale-page-active .c2c-v2-hero .c2c-v2-heroin{ background: linear-gradient( 90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.47) 42%, rgba(0,0,0,.24) 67%, rgba(0,0,0,.04) 100% ) !important; } /* * Заголовок — білий + темний контур. */ .c2c-sale-page-active .c2c-v2-hero .c2c-v2-heroin h1{ color:#fff !important; -webkit-text-stroke: .45px rgba(0,0,0,.72) !important; text-shadow: 0 1px 2px rgba(0,0,0,.90), 0 3px 10px rgba(0,0,0,.55) !important; } /* * Підзаголовок. */ .c2c-sale-page-active .c2c-v2-hero .c2c-v2-subtitle{ color:#fff !important; -webkit-text-stroke: .25px rgba(0,0,0,.62) !important; text-shadow: 0 1px 2px rgba(0,0,0,.82), 0 2px 8px rgba(0,0,0,.48) !important; } /* * Хлібні крихти теж робимо читабельними. */ .c2c-sale-page-active .c2c-v2-hero .c2c-v2-breadcrumb, .c2c-sale-page-active .c2c-v2-hero .c2c-v2-breadcrumb a{ color:rgba(255,255,255,.90) !important; text-shadow: 0 1px 3px rgba(0,0,0,.62) !important; } .c2c-sale-page-active .c2c-v2-hero .c2c-v2-heartline{ color:#fff !important; } } /* CASE2CASE_SALE_CARD_BALANCE_V1 */ /* * SALE GRID ONLY. * List view is untouched. * * Image stays where it is. * Cart button stays at the bottom. * Product information is centered vertically * in the free space between them. */ #c2c-v2-root:not(.is-list) .c2c-sale-v3-toolbar + .c2c-v2-grid .c2c-v2-card{ display:flex !important; flex-direction:column !important; } #c2c-v2-root:not(.is-list) .c2c-sale-v3-toolbar + .c2c-v2-grid .c2c-v2-cardmedia{ flex:0 0 auto !important; } #c2c-v2-root:not(.is-list) .c2c-sale-v3-toolbar + .c2c-v2-grid .c2c-v2-cardbody{ flex:1 1 auto !important; display:flex !important; flex-direction:column !important; justify-content:center !important; margin:0 !important; padding-top:12px !important; padding-bottom:12px !important; } #c2c-v2-root:not(.is-list) .c2c-sale-v3-toolbar + .c2c-v2-grid .c2c-v2-title{ margin-top:0 !important; margin-bottom:8px !important; } #c2c-v2-root:not(.is-list) .c2c-sale-v3-toolbar + .c2c-v2-grid .c2c-sale-v3-price{ margin-top:0 !important; } #c2c-v2-root:not(.is-list) .c2c-sale-v3-toolbar + .c2c-v2-grid .c2c-sale-v3-colors{ margin-top:6px !important; } #c2c-v2-root:not(.is-list) .c2c-sale-v3-toolbar + .c2c-v2-grid .c2c-v2-cart{ flex:0 0 auto !important; margin-top:0 !important; } /* MOBILE — трохи компактніше */ @media (max-width:768px){ #c2c-v2-root:not(.is-list) .c2c-sale-v3-toolbar + .c2c-v2-grid .c2c-v2-cardbody{ padding-top:8px !important; padding-bottom:8px !important; } #c2c-v2-root:not(.is-list) .c2c-sale-v3-toolbar + .c2c-v2-grid .c2c-v2-title{ margin-bottom:7px !important; } #c2c-v2-root:not(.is-list) .c2c-sale-v3-toolbar + .c2c-v2-grid .c2c-sale-v3-colors{ margin-top:5px !important; } } /* CASE2CASE_SALE_CARD_MOBILE_TEXT_UP_V1 */ @media (max-width:768px){ /* * Visual shift only. * Does NOT change card height or document flow. */ #c2c-v2-root:not(.is-list) .c2c-sale-v3-toolbar + .c2c-v2-grid .c2c-v2-cardbody{ transform:translateY(-10px) !important; } } /* CASE2CASE_SALE_DESKTOP_STICKY_TOOLBAR_V1 */ @media (min-width:961px){ /* * Sticky ONLY for the SALE controls row: * iPhone / Android * model search * count * sorting * grid/list */ .c2c-sale-v3-toolbar{ position:sticky !important; top: var( --c2c-sale-desktop-sticky-top, 0px ) !important; z-index:1200 !important; background:#fff !important; box-shadow: 0 8px 18px rgba(17,25,40,.08) !important; border-radius: 0 0 12px 12px !important; } } /* CASE2CASE_SALE_DESKTOP_STICKY_TOOLBAR_V1_1 */ @media (min-width:961px){ .c2c-sale-v3-toolbar{ position:sticky !important; top: var( --c2c-sale-desktop-sticky-top, 72px ) !important; /* * High enough above cards, * lower than main website header. */ z-index:700 !important; background:#fff !important; box-shadow: 0 6px 16px rgba(17,25,40,.08) !important; } }