/* v37: поднимаем заголовки LUXE/PREMIUM вверх и переносим изображение под них */ #dkx #dkx-config .dkx__selection-form, #dkx #dkx-config .dkx__selection-form-head, #dkx #dkx-config .dkx__selection-back { display: none !important; } /* Расширяем рабочую область материалов на desktop */ @media (min-width: 1024px) { #dkx #dkx-config { padding-top: 86px !important; } #dkx #dkx-config > .dkx__wrap { width: min(1560px, calc(100vw - 96px)) !important; max-width: none !important; } #dkx #dkx-config .dkx__section-head { max-width: none !important; margin: 0 auto 36px !important; text-align: center !important; } #dkx #dkx-config .dkx__section-title { margin: 0 !important; color: #990011 !important; font-size: clamp(54px, 5vw, 82px) !important; line-height: .88 !important; letter-spacing:0 !important; font-weight: 950 !important; text-transform: uppercase !important; } #dkx #dkx-config .dkx__section-title span { color: #990011 !important; text-shadow: 0 0 34px rgba(153,0,17,.30) !important; } #dkx #dkx-config .dkx__section-text, #dkx #dkx-config .dkx__topline { display: none !important; } #dkx #dkx-config .dkx__config-shell, #dkx #dkx-config .dkx__panel { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } #dkx #dkxLineStep { width: 100% !important; max-width: none !important; padding: 0 0 70px !important; border: 0 !important; background: transparent !important; overflow: visible !important; } #dkx #dkxLineStep .dkx__step-head { display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; gap: 28px !important; margin: 0 0 42px !important; } #dkx #dkxLineStep .dkx__step-title { margin: 0 !important; color: #1a1818 !important; font-size: clamp(48px, 4.4vw, 72px) !important; line-height: .9 !important; letter-spacing:0 !important; font-weight: 950 !important; text-align: left !important; text-transform: none !important; text-shadow: none !important; } #dkx #dkxLineStep .dkx__step-num { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 66px !important; padding: 0 34px !important; border-radius: 999px !important; border: 2px solid rgba(153,0,17,.84) !important; background: rgba(252,246,245,.70) !important; color: #990011 !important; font-size: clamp(16px, 1.25vw, 22px) !important; font-weight: 950 !important; letter-spacing: .045em !important; text-transform: uppercase !important; white-space: nowrap !important; box-shadow: inset 0 1px 0 rgba(252,246,245,.08), 0 14px 34px rgba(26,24,24,.25) !important; } #dkx #dkxLineTabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(34px, 2.8vw, 52px) !important; width: 100% !important; max-width: none !important; padding: 0 0 72px !important; border-bottom: 1px solid rgba(153,0,17,.24) !important; overflow: visible !important; } #dkx #dkxLineTabs .dkx__choice--line { position: relative !important; display: block !important; box-sizing: border-box !important; width: 100% !important; height: clamp(390px, 27.5vw, 475px) !important; min-height: 390px !important; padding: 0 !important; overflow: hidden !important; border-radius: clamp(30px, 2.3vw, 42px) !important; border: 3px solid rgba(168,164,163,.96) !important; cursor: pointer !important; isolation: isolate !important; color: #1a1818 !important; background: radial-gradient(circle at 86% 15%, rgba(26,24,24,.052) 0 2px, transparent 3px), radial-gradient(circle at 92% 21%, rgba(26,24,24,.04) 0 2px, transparent 3px), linear-gradient(180deg, #FCF6F5 0%, #FCF6F5 56%, #FCF6F5 100%) !important; box-shadow: inset 0 1px 0 rgba(252,246,245,.98), inset 0 -1px 0 rgba(26,24,24,.055), 0 22px 52px rgba(26,24,24,.30) !important; transform: translateY(0) scale(1) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease !important; animation: dkxLineHintV37 3.4s ease-in-out infinite !important; } /* отключаем старые псевдоэлементы карточек */ #dkx #dkxLineTabs .dkx__choice--line::before, #dkx #dkxLineTabs .dkx__choice--line::after { content: none !important; display: none !important; } #dkx #dkxLineTabs .dkx__choice--line .dkx__check { display: none !important; } #dkx #dkxLineTabs .dkx__line-media { position: absolute !important; left: auto !important; right: clamp(-42px, -1.7vw, -10px) !important; top: auto !important; bottom: clamp(34px, 3.2vw, 56px) !important; width: clamp(440px, 62%, 720px) !important; height: clamp(338px, 96%, 540px) !important; inset: auto !important; z-index: 2 !important; display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; background: none !important; opacity: 1 !important; transform: translate3d(0,0,0) scale(1) !important; transform-origin: 50% 50% !important; transition: transform .24s ease, filter .24s ease !important; pointer-events: none !important; } #dkx #dkxLineTabs .dkx__line-media img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: right bottom !important; filter: drop-shadow(0 22px 30px rgba(26,24,24,.25)) !important; } #dkx #dkxLineTabs .dkx__line-title { position: absolute !important; left: 7% !important; top: 12% !important; bottom: auto !important; z-index: 3 !important; display: block !important; margin: 0 !important; padding: 0 !important; max-width: calc(100% - clamp(440px, 62%, 720px) - clamp(70px, 6vw, 120px)) !important; color: #1a1818 !important; font-size: clamp(48px, 4.6vw, 84px) !important; line-height: .84 !important; letter-spacing:0 !important; font-weight: 1000 !important; text-transform: uppercase !important; white-space: nowrap !important; text-align: left !important; text-shadow: none !important; pointer-events: none !important; } #dkx #dkxLineTabs .dkx__line-description { position: absolute !important; left: 7% !important; right: calc(clamp(440px, 62%, 720px) + clamp(8px, 1.6vw, 24px)) !important; top: clamp(150px, 36%, 194px) !important; z-index: 3 !important; display: block !important; margin: 0 !important; padding: 0 !important; color: rgba(26,24,24,.90) !important; font-size: clamp(18px, 1.22vw, 24px) !important; line-height: 1.44 !important; font-weight: 520 !important; letter-spacing:0 !important; text-align: left !important; text-shadow: none !important; pointer-events: none !important; } #dkx #dkxLineTabs .dkx__choice--line.active { border-color: #990011 !important; box-shadow: inset 0 1px 0 rgba(252,246,245,.98), inset 0 -1px 0 rgba(26,24,24,.055), 0 0 0 2px rgba(153,0,17,.32), 0 0 30px rgba(153,0,17,.44), 0 0 70px rgba(153,0,17,.26), 0 25px 62px rgba(26,24,24,.36) !important; animation: dkxLineActiveV37 2.4s ease-in-out infinite !important; } #dkx #dkxLineTabs .dkx__choice--line:hover, #dkx #dkxLineTabs .dkx__choice--line:focus-visible { transform: translateY(-5px) scale(1.008) !important; box-shadow: inset 0 1px 0 rgba(252,246,245,.98), inset 0 -1px 0 rgba(26,24,24,.055), 0 28px 66px rgba(26,24,24,.35), 0 0 0 1px rgba(252,246,245,.20) !important; } #dkx #dkxLineTabs .dkx__choice--line:hover .dkx__line-media, #dkx #dkxLineTabs .dkx__choice--line.active .dkx__line-media { transform: translate3d(0,-4px,0) scale(1.045) !important; } } @media (min-width: 1024px) and (max-width: 1240px) { #dkx #dkx-config > .dkx__wrap { width: min(1180px, calc(100vw - 54px)) !important; } #dkx #dkxLineTabs .dkx__choice--line { height: clamp(320px, 32vw, 380px) !important; min-height: 320px !important; } #dkx #dkxLineTabs .dkx__line-title { max-width: calc(100% - clamp(240px, 43%, 360px) - 108px) !important; font-size: clamp(42px, 4.1vw, 62px) !important; } #dkx #dkxLineTabs .dkx__line-description { right: calc(clamp(240px, 43%, 360px) + 34px) !important; top: clamp(132px, 38%, 172px) !important; font-size: clamp(17px, 1.15vw, 21px) !important; } #dkx #dkxLineTabs .dkx__line-media { right: clamp(-22px, -1vw, -6px) !important; bottom: clamp(26px, 2.6vw, 40px) !important; width: clamp(350px, 54%, 520px) !important; height: clamp(270px, 86%, 400px) !important; } } @media (min-width: 1024px) { #dkx #dkxLineTabs .dkx__choice--line[data-line="LUXE"] .dkx__line-media { right: 91px !important; bottom: 34px !important; width: 785px !important; height: 376px !important; } #dkx #dkxLineTabs .dkx__choice--line[data-line="PREMIUM"] .dkx__line-media { right: -66px !important; bottom: 22px !important; width: 900px !important; height: 394px !important; } #dkx #dkxLineTabs .dkx__choice--line[data-line="LUXE"] .dkx__line-media img { transform: translate(150px, 21px) !important; } #dkx #dkxLineTabs .dkx__choice--line[data-line="PREMIUM"] .dkx__line-media img { transform: translate(24px, 27px) !important; } } /* v44: мобильная версия — без ручных сдвигов картинок. Карточка строится CSS-grid: текст слева, изображение справа. Это убирает зависимость от конкретной ширины экрана. */ @media (max-width: 1023px) { #dkx #dkx-config .dkx__selection-form, #dkx #dkx-config .dkx__selection-form-head, #dkx #dkx-config .dkx__selection-back { display: none !important; } #dkx #dkx-config > .dkx__wrap { width: min(100%, calc(100vw - 28px)) !important; max-width: none !important; } #dkx #dkx-config .dkx__section-text, #dkx #dkx-config .dkx__topline { display: none !important; } #dkx #dkx-config .dkx__config-shell, #dkx #dkx-config .dkx__panel { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } #dkx #dkxLineStep { padding: 0 0 36px !important; border: 0 !important; background: transparent !important; overflow: visible !important; } #dkx #dkxLineStep .dkx__step-head { display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; gap: 10px !important; margin: 0 0 16px !important; } #dkx #dkxLineStep .dkx__step-title { margin: 0 !important; font-size: clamp(24px, 7.2vw, 32px) !important; line-height: .95 !important; letter-spacing:0 !important; text-align: left !important; } #dkx #dkxLineStep .dkx__step-num { min-height: 38px !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 11px !important; white-space: nowrap !important; } #dkx #dkxLineTabs { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; width: 100% !important; padding: 0 0 34px !important; border-bottom: 1px solid rgba(153,0,17,.22) !important; overflow: visible !important; } #dkx #dkxLineTabs .dkx__choice--line { position: relative !important; display: grid !important; grid-template-columns: minmax(118px, 43%) minmax(0, 1fr) !important; grid-template-rows: auto 1fr !important; column-gap: clamp(6px, 2vw, 14px) !important; row-gap: 8px !important; width: 100% !important; min-height: clamp(176px, 50vw, 220px) !important; height: auto !important; padding: clamp(16px, 4.4vw, 22px) clamp(12px, 3.8vw, 20px) !important; box-sizing: border-box !important; overflow: hidden !important; border-radius: clamp(20px, 6vw, 26px) !important; border: 2px solid rgba(168,164,163,.96) !important; background: radial-gradient(circle at 86% 15%, rgba(26,24,24,.052) 0 2px, transparent 3px), radial-gradient(circle at 92% 21%, rgba(26,24,24,.04) 0 2px, transparent 3px), linear-gradient(180deg, #FCF6F5 0%, #FCF6F5 56%, #FCF6F5 100%) !important; box-shadow: inset 0 1px 0 rgba(252,246,245,.98), inset 0 -1px 0 rgba(26,24,24,.055), 0 14px 34px rgba(26,24,24,.28) !important; transform: none !important; animation: none !important; isolation: isolate !important; } #dkx #dkxLineTabs .dkx__choice--line::before, #dkx #dkxLineTabs .dkx__choice--line::after, #dkx #dkxLineTabs .dkx__line-divider, #dkx #dkxLineTabs .dkx__line-divider i, #dkx #dkxLineTabs .dkx__choice--line .dkx__check { content: none !important; display: none !important; } #dkx #dkxLineTabs .dkx__choice--line.active { border-color: #990011 !important; box-shadow: inset 0 1px 0 rgba(252,246,245,.98), inset 0 -1px 0 rgba(26,24,24,.055), 0 0 0 2px rgba(153,0,17,.24), 0 0 24px rgba(153,0,17,.36), 0 18px 42px rgba(26,24,24,.32) !important; } #dkx #dkxLineTabs .dkx__line-title { position: static !important; grid-column: 1 !important; grid-row: 1 !important; z-index: 3 !important; display: block !important; align-self: start !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; color: #1a1818 !important; font-size: clamp(27px, 8.2vw, 40px) !important; line-height: .84 !important; letter-spacing:0 !important; font-weight: 1000 !important; text-transform: uppercase !important; white-space: nowrap !important; text-align: left !important; text-shadow: none !important; pointer-events: none !important; } #dkx #dkxLineTabs .dkx__line-description { position: static !important; grid-column: 1 !important; grid-row: 2 !important; z-index: 3 !important; display: block !important; align-self: start !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; color: rgba(26,24,24,.90) !important; font-size: clamp(12px, 3.25vw, 15px) !important; line-height: 1.24 !important; font-weight: 560 !important; letter-spacing:0 !important; text-align: left !important; text-shadow: none !important; pointer-events: none !important; } #dkx #dkxLineTabs .dkx__line-media, #dkx #dkxLineTabs .dkx__choice--line[data-line="LUXE"] .dkx__line-media, #dkx #dkxLineTabs .dkx__choice--line[data-line="PREMIUM"] .dkx__line-media { position: relative !important; grid-column: 2 !important; grid-row: 1 / span 2 !important; align-self: end !important; justify-self: end !important; right: auto !important; bottom: auto !important; left: auto !important; top: auto !important; inset: auto !important; width: 100% !important; max-width: clamp(160px, 49vw, 285px) !important; height: 100% !important; min-height: 120px !important; z-index: 2 !important; display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; background: none !important; opacity: 1 !important; transform: none !important; pointer-events: none !important; } #dkx #dkxLineTabs .dkx__line-media img, #dkx #dkxLineTabs .dkx__choice--line[data-line="LUXE"] .dkx__line-media img, #dkx #dkxLineTabs .dkx__choice--line[data-line="PREMIUM"] .dkx__line-media img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: right bottom !important; transform: none !important; filter: drop-shadow(0 16px 22px rgba(26,24,24,.25)) !important; } } @media (max-width: 390px) { #dkx #dkxLineTabs .dkx__choice--line { grid-template-columns: minmax(104px, 41%) minmax(0, 1fr) !important; min-height: clamp(164px, 51vw, 190px) !important; padding: 15px 12px !important; } #dkx #dkxLineTabs .dkx__line-title { font-size: clamp(25px, 8vw, 31px) !important; } #dkx #dkxLineTabs .dkx__line-description { font-size: clamp(11px, 3.05vw, 12px) !important; line-height: 1.23 !important; } #dkx #dkxLineTabs .dkx__line-media, #dkx #dkxLineTabs .dkx__choice--line[data-line="LUXE"] .dkx__line-media, #dkx #dkxLineTabs .dkx__choice--line[data-line="PREMIUM"] .dkx__line-media { max-width: clamp(150px, 50vw, 230px) !important; min-height: 112px !important; } } @media (max-width: 360px) { #dkx #dkxLineTabs .dkx__choice--line { grid-template-columns: minmax(96px, 40%) minmax(0, 1fr) !important; min-height: 162px !important; padding: 14px 10px !important; } #dkx #dkxLineTabs .dkx__line-title { font-size: clamp(23px, 7.6vw, 28px) !important; } #dkx #dkxLineTabs .dkx__line-description { font-size: 11px !important; line-height: 1.22 !important; } #dkx #dkxLineTabs .dkx__line-media, #dkx #dkxLineTabs .dkx__choice--line[data-line="LUXE"] .dkx__line-media, #dkx #dkxLineTabs .dkx__choice--line[data-line="PREMIUM"] .dkx__line-media { max-width: 190px !important; min-height: 108px !important; } } @keyframes dkxLineHintV37 { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.002); } } @keyframes dkxLineActiveV37 { 0%,100% { transform: translateY(0) scale(1); box-shadow: inset 0 1px 0 rgba(252,246,245,.98), inset 0 -1px 0 rgba(26,24,24,.055), 0 0 0 2px rgba(153,0,17,.28), 0 0 26px rgba(153,0,17,.38), 0 0 60px rgba(153,0,17,.22), 0 25px 62px rgba(26,24,24,.36); } 50% { transform: translateY(-3px) scale(1.006); box-shadow: inset 0 1px 0 rgba(252,246,245,.98), inset 0 -1px 0 rgba(26,24,24,.055), 0 0 0 2px rgba(153,0,17,.40), 0 0 38px rgba(153,0,17,.52), 0 0 82px rgba(153,0,17,.31), 0 28px 68px rgba(26,24,24,.38); } } /* v41: красная вертикальная линия и точка удалены */ #dkx #dkxLineTabs .dkx__line-divider, #dkx #dkxLineTabs .dkx__line-divider i { display: none !important; } #dkx #dkx-config .dkx__config-modal-backdrop, #dkx #dkx-config .dkx__config-modal-close { display: none; } html.dkx-config-modal-open, body.dkx-config-modal-open, html.dkx-protect-modal-open, body.dkx-protect-modal-open, html.dkx-protect-material-open, body.dkx-protect-material-open { overflow: hidden !important; } #dkx:not(.dkx-config-modal-open) #dkxSeriesStep, #dkx:not(.dkx-config-modal-open) #dkxColorsStep, #dkx:not(.dkx-config-modal-open) #dkxProtectStep, #dkx:not(.dkx-config-modal-open) #dkxProtectSeriesStep, #dkx:not(.dkx-config-modal-open) #dkxProtectColorStep, #dkx:not(.dkx-config-modal-open) #dkx-config .dkx__summary { display: none !important; } #dkx #dkx-config .dkx__config-modal-backdrop { position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; background: linear-gradient(180deg, rgba(5,6,8,.90) 0%, rgba(10,10,12,.96) 100%), radial-gradient(circle at 20% 0%, rgba(153,0,17,.20), transparent 36%) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .24s ease !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__config-modal-backdrop { display: block !important; opacity: 1 !important; pointer-events: auto !important; } #dkx.dkx-config-modal-open #dkxLineStep { display: none !important; } #dkx.dkx-config-modal-open > :not(#dkx-config) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } body.dkx-config-modal-open #dkxMobileBar { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__panel { position: fixed !important; top: 10px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 2147483001 !important; width: min(1420px, calc(100vw - 20px)) !important; max-width: none !important; max-height: none !important; height: auto !important; margin: 0 !important; padding: 18px 16px 18px !important; overflow: visible !important; overscroll-behavior: contain !important; scrollbar-width: none !important; background: radial-gradient(circle at 15% 0%, rgba(153,0,17,.12), transparent 34%), linear-gradient(180deg, rgba(8,9,12,.98) 0%, rgba(12,13,17,.995) 100%) !important; border: 1px solid rgba(252,246,245,.08) !important; border-radius: 28px !important; box-shadow: 0 30px 90px rgba(26,24,24,.56), 0 0 0 1px rgba(153,0,17,.12) !important; box-sizing: border-box !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__panel::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__config-modal-close { position: absolute !important; top: 14px !important; right: 14px !important; z-index: 2147483002 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 46px !important; padding: 0 !important; border: 1px solid rgba(252,246,245,.14) !important; border-radius: 14px !important; background: rgba(252,246,245,.07) !important; color: #FCF6F5 !important; font-size: 26px !important; line-height: 1 !important; box-shadow: 0 18px 34px rgba(26,24,24,.28) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; cursor: pointer !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__step { margin-bottom: 10px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__step-head { padding-right: 64px !important; } #dkx.dkx-config-modal-open #dkxProtectStep, #dkx.dkx-config-modal-open #dkxProtectSeriesStep, #dkx.dkx-config-modal-open #dkxProtectColorStep, #dkx.dkx-config-modal-open #dkx-config .dkx__summary { display: none !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__materials { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 10px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material { flex: 0 1 clamp(128px, 9.2vw, 160px) !important; min-height: 208px !important; padding: 0 !important; border-radius: 22px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__sample { inset: 0 !important; width: 100% !important; height: 100% !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material-badge { left: 10px !important; right: 10px !important; bottom: 10px !important; padding: 10px 12px !important; border-radius: 16px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material-name { font-size: 16px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material-meta { font-size: 10px !important; } #dkx #dkx-config .dkx__protect-modal-backdrop { position: fixed !important; inset: 0 !important; z-index: 2147483003 !important; display: none !important; opacity: 0 !important; pointer-events: none !important; background: rgba(5, 6, 8, .72) !important; transition: opacity .22s ease !important; } #dkx #dkx-config .dkx__protect-modal { position: fixed !important; top: 50% !important; left: 50% !important; z-index: 2147483004 !important; display: none !important; width: min(680px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; padding: 28px 24px 24px !important; border-radius: 28px !important; border: 1px solid rgba(153,0,17,.22) !important; background: radial-gradient(circle at 15% 0%, rgba(153,0,17,.16), transparent 34%), linear-gradient(180deg, rgba(252,246,245,.98) 0%, rgba(236,227,216,.98) 100%) !important; box-shadow: 0 24px 70px rgba(26,24,24,.18), 0 0 0 1px rgba(252,246,245,.42) !important; transform: translate(-50%, -50%) scale(.96) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .22s ease, transform .22s ease !important; box-sizing: border-box !important; } #dkx #dkx-config .dkx__protect-modal-close { position: absolute !important; top: 14px !important; right: 14px !important; width: 42px !important; height: 42px !important; border: 1px solid rgba(153,0,17,.18) !important; border-radius: 14px !important; background: rgba(252,246,245,.76) !important; color: #1a1818 !important; font-size: 24px !important; line-height: 1 !important; cursor: pointer !important; } #dkx #dkx-config .dkx__protect-modal-head { display: grid !important; gap: 10px !important; margin-bottom: 18px !important; padding-right: 54px !important; } #dkx #dkx-config .dkx__protect-modal-title { margin: 0 !important; color: #1a1818 !important; font-family:TildaSans, Arial, sans-serif; font-size: 34px !important; line-height: .95 !important; font-weight: 900 !important; } #dkx #dkx-config .dkx__protect-modal-subtitle { margin: 0 !important; color: rgba(26,24,24,.68) !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 600 !important; } #dkx #dkx-config .dkx__protect-modal-choices { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } #dkx.dkx-protect-modal-open #dkx-config .dkx__protect-modal-backdrop { display: block !important; opacity: 1 !important; pointer-events: auto !important; } #dkx.dkx-protect-modal-open #dkx-config .dkx__protect-modal { display: block !important; opacity: 1 !important; pointer-events: auto !important; transform: translate(-50%, -50%) scale(1) !important; } #dkx.dkx-protect-modal-open #dkxProtectStep { visibility: hidden !important; pointer-events: none !important; } #dkx.dkx-protect-modal-open #dkx-config .dkx__panel, #dkx.dkx-protect-material-open #dkx-config .dkx__panel { overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } #dkx.dkx-protect-modal-open #dkx-config .dkx__config-modal-close, #dkx.dkx-protect-material-open #dkx-config .dkx__config-modal-close { display: none !important; } #dkx #dkx-config .dkx__protect-material-backdrop { position: fixed !important; inset: 0 !important; z-index: 2147483005 !important; display: none !important; opacity: 0 !important; pointer-events: none !important; background: rgba(5, 6, 8, .78) !important; transition: opacity .22s ease !important; } #dkx #dkx-config .dkx__protect-material-modal { position: fixed !important; top: 50% !important; left: 50% !important; z-index: 2147483006 !important; display: none !important; width: min(1420px, calc(100vw - 20px)) !important; max-width: calc(100vw - 20px) !important; max-height: none !important; height: auto !important; padding: 18px 16px 16px !important; overflow: visible !important; scrollbar-width: none !important; border-radius: 28px !important; border: 1px solid rgba(153,0,17,.22) !important; background: radial-gradient(circle at 15% 0%, rgba(153,0,17,.16), transparent 34%), linear-gradient(180deg, rgba(252,246,245,.98) 0%, rgba(236,227,216,.98) 100%) !important; box-shadow: 0 24px 70px rgba(26,24,24,.18), 0 0 0 1px rgba(252,246,245,.42) !important; transform: translate(-50%, -50%) scale(.96) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .22s ease, transform .22s ease !important; box-sizing: border-box !important; } #dkx #dkx-config .dkx__protect-material-modal::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } #dkx #dkx-config .dkx__protect-material-close { position: absolute !important; top: 14px !important; right: 14px !important; width: 42px !important; height: 42px !important; border: 1px solid rgba(153,0,17,.18) !important; border-radius: 14px !important; background: rgba(252,246,245,.76) !important; color: #1a1818 !important; font-size: 24px !important; line-height: 1 !important; cursor: pointer !important; } #dkx #dkx-config .dkx__protect-material-head { display: grid !important; gap: 10px !important; margin-bottom: 18px !important; padding-right: 54px !important; } #dkx #dkx-config .dkx__protect-material-title { margin: 0 !important; color: #1a1818 !important; font-family:TildaSans, Arial, sans-serif; font-size: 34px !important; line-height: .95 !important; font-weight: 900 !important; } #dkx #dkx-config .dkx__protect-material-subtitle { margin: 0 !important; color: rgba(26,24,24,.68) !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 600 !important; } #dkx #dkx-config .dkx__protect-material-body { display: grid !important; gap: 10px !important; } #dkx #dkx-config .dkx__protect-material-section { display: grid !important; gap: 10px !important; } #dkx #dkx-config .dkx__protect-material-label strong { color: #1a1818 !important; font-size: 20px !important; line-height: 1 !important; font-weight: 900 !important; } #dkx #dkx-config .dkx__protect-material-series { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; } #dkx #dkx-config .dkx__protect-material-colors { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 10px !important; } #dkx #dkx-config .dkx__protect-material-colors .dkx__material { flex: 0 1 clamp(128px, 9.2vw, 160px) !important; min-height: 208px !important; padding: 0 !important; border-radius: 22px !important; } #dkx #dkx-config .dkx__protect-material-colors .dkx__sample { inset: 0 !important; width: 100% !important; height: 100% !important; } #dkx #dkx-config .dkx__protect-material-colors .dkx__material-badge { left: 10px !important; right: 10px !important; bottom: 10px !important; padding: 10px 12px !important; border-radius: 16px !important; } #dkx #dkx-config .dkx__protect-material-colors .dkx__material-name { font-size: 16px !important; } #dkx #dkx-config .dkx__protect-material-colors .dkx__material-meta { font-size: 10px !important; } #dkx.dkx-protect-material-open #dkx-config .dkx__protect-material-backdrop { display: block !important; opacity: 1 !important; pointer-events: auto !important; } #dkx.dkx-protect-material-open #dkx-config .dkx__protect-material-modal { display: block !important; opacity: 1 !important; pointer-events: auto !important; transform: translate(-50%, -50%) scale(1) !important; } #dkx.dkx-protect-material-open #dkxProtectSeriesStep, #dkx.dkx-protect-material-open #dkxProtectColorStep { visibility: hidden !important; pointer-events: none !important; } #dkxModal .dkx__modal-order-summary { display: none; gap: 10px; margin: 0 0 16px; padding: 16px; border-radius: 18px; background: rgba(252,246,245,.72); border: 1px solid rgba(153,0,17,.16); } #dkxModal .dkx__modal-order-price { color: #1a1818; font-size: 22px; font-weight: 900; line-height: 1; } #dkxModal .dkx__modal-order-tags { display: flex; flex-wrap: wrap; gap: 8px; } #dkxModal .dkx__modal-order-tags span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(252,246,245,.64); border: 1px solid rgba(153,0,17,.12); color: rgba(26,24,24,.76); font-size: 12px; font-weight: 800; line-height: 1; } @media (max-width: 1023px) { #dkx.dkx-config-modal-open #dkx-config .dkx__panel { inset: 0 !important; left: 0 !important; top: 0 !important; transform: none !important; width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; padding: 78px 14px 26px !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: thin !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__panel::-webkit-scrollbar { display: block !important; width: 6px !important; height: 6px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__panel::-webkit-scrollbar-thumb { background: rgba(252,246,245,.22) !important; border-radius: 999px !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material, #dkx #dkx-config .dkx__protect-material-colors .dkx__material { padding: 0 !important; overflow: hidden !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__sample, #dkx #dkx-config .dkx__protect-material-colors .dkx__sample { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; aspect-ratio: auto !important; padding: 0 !important; border-radius: inherit !important; background: transparent !important; box-shadow: none !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__sample img, #dkx #dkx-config .dkx__protect-material-colors .dkx__sample img { border-radius: inherit !important; } #dkx.dkx-config-modal-open #dkx-config .dkx__material-badge, #dkx #dkx-config .dkx__protect-material-colors .dkx__material-badge { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; margin-top: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #dkx #dkx-config .dkx__protect-modal { width: calc(100vw - 24px) !important; padding: 22px 14px 14px !important; border-radius: 24px !important; } #dkx #dkx-config .dkx__protect-modal-title { font-size: 28px !important; } #dkx #dkx-config .dkx__protect-modal-choices { grid-template-columns: 1fr !important; } #dkx #dkx-config .dkx__protect-material-modal { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; padding: 22px 14px 14px !important; border-radius: 24px !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: thin !important; } #dkx #dkx-config .dkx__protect-material-modal::-webkit-scrollbar { display: block !important; width: 6px !important; height: 6px !important; } #dkx #dkx-config .dkx__protect-material-modal::-webkit-scrollbar-thumb { background: rgba(252,246,245,.22) !important; border-radius: 999px !important; } #dkx #dkx-config .dkx__protect-material-title { font-size: 28px !important; } #dkx #dkx-config .dkx__protect-material-colors { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } }