/* Local-only home mockup. Geometry measured from royalcanin.ru, 2026-09-28. */
#home-draft { --hd-accent: #660099; display: flow-root; overflow: clip; min-height: 65svh; background: #fff; }
#home-draft *, #home-draft *::before, #home-draft *::after { box-sizing: border-box; }
#home-draft .hd-hero { width: 100%; max-width: 1440px; margin: 80px auto; padding: 0 65px; }
#home-draft .hd-slider { position: relative; margin: -20px -20px 0; padding: 20px 20px 60px; overflow: hidden; touch-action: pan-y; }
#home-draft .hd-track { display: flex; gap: 500px; transition: transform 300ms ease; will-change: transform; }
#home-draft .hd-slide { flex: 0 0 100%; min-width: 0; aspect-ratio: 65 / 24; }
#home-draft .hd-card { height: 100%; padding: clamp(18px, 2.4vw, 30px) clamp(18px, 5.6vw, 80px); display: flex; flex-direction: column; gap: 8px; border-radius: 10px; background: #f2f4f7; box-shadow: 0 0 20px rgba(0,0,0,.10); }
#home-draft .hd-cta { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100%; max-width: 280px; margin-top: auto; padding: clamp(5px, .7vw, 10px) 31px; border: 2px solid var(--hd-accent); border-radius: 50px; background: var(--hd-accent); color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.4; text-decoration: none; text-align: center; cursor: pointer; user-select: none; -webkit-user-drag: none; }
#home-draft .hd-arrow { position: absolute; top: calc(100% - 32px); width: 20px; height: 20px; margin: -10px 0 0; padding: 2px; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--hd-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
#home-draft .hd-arrow svg { display: block; height: 100%; width: auto; }
#home-draft .hd-prev { left: 18px; }
#home-draft .hd-prev svg { transform: rotate(180deg); }
#home-draft .hd-next { left: 52px; }
#home-draft .hd-arrow:disabled { opacity: .35; filter: grayscale(1); cursor: default; }
#home-draft .hd-pagination { position: absolute; left: 0; right: 0; bottom: 28px; width: calc(100% - 106px); height: 8px; margin: 0 16px 0 auto; display: flex; }
#home-draft .hd-marker { position: relative; display: block; flex: 1 1 0; min-width: 0; height: 8px; margin: 0 5px; padding: 0; border: 0; border-radius: 8px; box-shadow: none; background: rgba(0,0,0,.035); cursor: pointer; }
#home-draft .hd-marker::after { content: ''; position: absolute; inset: -8px 0; }
#home-draft .hd-marker.is-active { background: var(--hd-accent); }
#home-draft :is(.hd-arrow,.hd-marker,.hd-cta,.hd-slider):focus-visible { outline: 2px solid var(--hd-accent); outline-offset: 5px; }
#home-draft .hd-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1439px) { #home-draft .hd-hero { padding-inline: 30px; } }
@media (max-width: 1024px) {
 #home-draft .hd-slide { aspect-ratio: 241 / 102; }
 #home-draft .hd-card { padding: clamp(18px,2.5vw,30px) clamp(18px,4.1vw,44px); }
 #home-draft .hd-cta { max-width: 230px; }
}
@media (max-width: 767px) {
 #home-draft .hd-hero { max-width: 497px; margin-block: 40px; padding-inline: 16px; }
 #home-draft .hd-slide { aspect-ratio: .64 / 1; }
 #home-draft .hd-card { padding: clamp(18px,6vw,24px) clamp(18px,6vw,30px); gap: 6px; }
 #home-draft .hd-cta { width: 100%; max-width: none; padding: 11px 16px; }
 #home-draft .hd-next { left: auto; right: 18px; }
 #home-draft .hd-pagination { width: calc(100% - 86px); height: 6px; bottom: 29px; margin-inline: auto; }
 #home-draft .hd-marker { height: 6px; }
}
@media (prefers-reduced-motion: reduce) { #home-draft .hd-track { transition: none; } }

/* Override inherited main width; retain the site header offset. */
#home-draft { max-width: none; }

/* First slide — unified photo composition. Fonts match the supplied reference. */
@font-face { font-family: 'HD DIN'; src: url('/fonts/home-draft/DINPro.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'HD DIN'; src: url('/fonts/home-draft/DINPro-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'HD DIN'; src: url('/fonts/home-draft/DINPro-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
#home-draft .hd-gift { position: relative; isolation: isolate; overflow: hidden; padding: 0; background: #f6f4f0; font-family: 'HD DIN',Tahoma,sans-serif; }
#home-draft .hd-gift::after { content: ''; position: absolute; inset: -35px; z-index: -3; background: url('/images/home-draft/personal-gift.png') right center / auto 100% no-repeat; filter: blur(30px); opacity: .20; pointer-events: none; }
#home-draft .hd-gift-photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
#home-draft .hd-gift-photo img { display: block; position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; object-fit: contain; mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 5%,rgba(0,0,0,.5) 14%,#000 28%); }
#home-draft .hd-gift::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(250,248,245,.85),rgba(250,248,245,.65) 30%,rgba(250,248,245,.15) 52%,transparent 66%); pointer-events: none; }
#home-draft .hd-gift-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; width: 53%; height: 100%; padding: 28px 0 28px clamp(32px,5.6vw,80px); background: transparent; }
#home-draft .hd-gift-title { margin: 0; padding: 0; color: #660099; font: 400 clamp(28px,3vw,42px)/1.12 'HD DIN',Tahoma,sans-serif; letter-spacing: -.025em; }
#home-draft .hd-gift-title span, #home-draft .hd-gift-title strong { display: block; }
#home-draft .hd-gift-title span { color: #744181; font-weight: 400; }
#home-draft .hd-gift-title strong { color: #660099; font-weight: 700; }
#home-draft .hd-gift-details { max-width: 435px; }
#home-draft .hd-gift-description { margin: 0; padding: 0; color: #433e43; font-size: clamp(16px,1.45vw,20px); font-weight: 400; line-height: 1.4; }
#home-draft .hd-gift-note { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; margin: 16px 0 0; color: #6a626b; font-size: clamp(12px,1.06vw,14px); line-height: 1.35; }
#home-draft .hd-gift-note strong { font-weight: 500; color: #57445e; }
#home-draft .hd-gift-dot { color: #88618f; }
#home-draft .hd-gift-cta { gap: 16px; width: 280px; max-width: 100%; margin-top: 22px; min-height: 0; padding: clamp(5px,.7vw,10px) 31px; font: 500 16px/1.4 'HD DIN',Tahoma,sans-serif; box-shadow: none; transition: box-shadow .2s ease; }
#home-draft .hd-gift-cta:hover { background: #660099; color: #fff; box-shadow: 0 5px 18px rgba(102,0,153,.14); }
#home-draft .hd-gift-cta svg { flex: 0 0 18px; }
@media (min-width:768px) and (max-width:1024px) {
 #home-draft .hd-gift-copy { width: 54%; padding: 18px 0 18px clamp(24px,4.1vw,42px); gap: 14px; }
 #home-draft .hd-gift-title { font-size: clamp(25px,3.2vw,32px); }
 #home-draft .hd-gift-description { font-size: clamp(15px,1.8vw,18px); line-height: 1.35; }
 #home-draft .hd-gift-note { margin-top: 11px; font-size: 12px; }
 #home-draft .hd-gift-cta { width: 230px; margin-top: 15px; }
}
@media (max-width:767px) {
 #home-draft .hd-gift { display: block; }
 #home-draft .hd-gift::after { background-position: 75% center; background-size: auto 100%; filter: blur(28px); opacity: .28; }
 #home-draft .hd-gift-photo { inset: 80px 0 155px; z-index: -2; }
 #home-draft .hd-gift-photo img { height: 100%; width: auto; min-width: 100%; mask-image: linear-gradient(0deg,transparent 0%,rgba(0,0,0,.08) 3%,rgba(0,0,0,.28) 7%,rgba(0,0,0,.58) 12%,rgba(0,0,0,.86) 18%,#000 24%,#000 96%,transparent 100%); }
 #home-draft .hd-gift::before { display: block; background: linear-gradient(180deg,rgba(249,247,243,.97) 0%,rgba(249,247,243,.90) 9%,rgba(249,247,243,.10) 23%,transparent 33%,transparent 58%,rgba(249,247,243,.08) 65%,rgba(249,247,243,.30) 73%,rgba(249,247,243,.65) 83%,rgba(249,247,243,.92) 93%,#f9f7f3 100%); }
 #home-draft .hd-gift-copy { width: 100%; height: 100%; padding: 20px clamp(20px,6vw,28px); justify-content: space-between; align-items: stretch; gap: 0; }
 #home-draft .hd-gift-title { font-size: clamp(23px,6.35vw,31px); line-height: 1.12; letter-spacing: -.03em; }
 #home-draft .hd-gift-details { width: 100%; max-width: none; }
 #home-draft .hd-gift-description { font-size: 14px; line-height: 1.32; }
 #home-draft .hd-gift-note { margin-top: 10px; gap: 2px 5px; font-size: 11.5px; line-height: 1.3; }
 #home-draft .hd-gift-cta { width: 100%; max-width: none; margin-top: 13px; padding: 11px 16px; font-size: 16px; font-weight: 500; line-height: 1.4; }
}
@media (min-width:400px) and (max-width:767px) {
 #home-draft .hd-gift-photo { top: 100px; bottom: 165px; }
 #home-draft .hd-gift-description { font-size: 16px; line-height: 1.35; }
 #home-draft .hd-gift-note { font-size: 12px; }
}
@media (prefers-reduced-motion:reduce) { #home-draft .hd-gift-cta { transition: none; } }

/* Refinements requested alongside the bonus slide. */
#home-draft .hd-gift-title span { color: #660099; font-weight: 500; }
#home-draft .hd-gift-description { font-weight: 500; }
#home-draft .hd-gift-description strong { color: #660099; font-weight: 500; }
#home-draft .hd-gift-note, #home-draft .hd-gift-note strong, #home-draft .hd-gift-dot { color: #660099; font-weight: 500; }
@media(max-width:767px) {
 #home-draft .hd-gift-title { width: 100%; font-size: clamp(23px,7.4vw,36px); line-height: 1.1; letter-spacing: -.025em; }
 #home-draft .hd-gift::before { background: linear-gradient(180deg,rgba(253,251,247,.98) 0%,rgba(253,251,247,.92) 10%,rgba(249,247,243,.30) 22%,transparent 33%,transparent 58%,rgba(249,247,243,.08) 65%,rgba(249,247,243,.30) 73%,rgba(249,247,243,.65) 83%,rgba(249,247,243,.92) 93%,#f9f7f3 100%); }
}


/* Reference layout: sharp side panel on desktop, sharp lower band on mobile. */
#home-draft .hd-bonus { position: relative; isolation: isolate; overflow: hidden; padding: 0; background: #faf9f6; font-family: 'HD DIN',Tahoma,sans-serif; }
#home-draft .hd-bonus-photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
#home-draft .hd-bonus-photo img { position: absolute; right: 23%; top: 8%; height: 84%; width: auto; max-width: none; display: block; mask-image: linear-gradient(90deg,transparent,rgba(0,0,0,.12) 8%,rgba(0,0,0,.5) 18%,#000 34%),linear-gradient(180deg,transparent,#000 10%,#000 92%,transparent); mask-composite: intersect; }
#home-draft .hd-bonus::before { content: ''; position: absolute; inset: 0 23% 0 0; z-index: -1; background: linear-gradient(90deg,#faf9f6 0%,rgba(250,249,246,.95) 26%,rgba(250,249,246,.4) 43%,transparent 61%); pointer-events: none; }
#home-draft .hd-bonus-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: 100%; width: 36%; padding: clamp(24px,3.2vw,44px) 0 clamp(24px,3.2vw,44px) clamp(26px,3.2vw,44px); }
#home-draft .hd-bonus-title { margin: 0; padding: 0; color: #660099; font: 700 clamp(29px,3.4vw,46px)/1.08 'HD DIN',Tahoma,sans-serif; letter-spacing: -.03em; }
#home-draft .hd-bonus-title strong { display: block; font-weight: 700; }
#home-draft .hd-bonus-title > span { display: block; margin-top: 10px; color: #744181; font-size: .72em; line-height: 1.15; font-weight: 400; }
#home-draft .hd-phone-break { display: none; }
#home-draft .hd-bonus-description { margin: 18px 0; padding: 0; color: #484149; font-size: clamp(17px,1.6vw,22px); line-height: 1.36; max-width: 380px; }
#home-draft .hd-bonus-description strong { color: #660099; font-weight: 500; }
#home-draft .hd-bonus-note { display: none; }
#home-draft .hd-bonus-cta { width: 280px; max-width: 100%; margin: 0; gap: 14px; padding: 11px 18px; font: 500 17px/1.4 'HD DIN',Tahoma,sans-serif; }
#home-draft .hd-bonus-cta svg { flex: 0 0 18px; }
#home-draft .hd-bonus-badge { position: absolute; inset: 0 0 0 auto; width: 23%; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: #660099; color: #fff; border: 0; border-radius: 0; box-shadow: none; mask: none; }
#home-draft .hd-bonus-badge > svg { display: none; }
#home-draft .hd-bonus-badge > strong { font-size: clamp(48px,6.1vw,82px); line-height: 1; letter-spacing: -.055em; white-space: nowrap; font-weight: 700; }
#home-draft .hd-bonus-badge > strong span { font-size: .56em; font-weight: 500; }
#home-draft .hd-bonus-badge-label { color: #fff; margin-top: 20px; font-size: clamp(17px,1.8vw,24px); font-weight: 500; line-height: 1.16; text-transform: uppercase; }
#home-draft .hd-bonus-badge-rate { margin-top: 27px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.35); color: #efdcf9; font-size: clamp(13px,1.15vw,16px); line-height: 1.3; }
@media(min-width:768px) and (max-width:1024px) {
 #home-draft .hd-bonus-copy { width: 38%; padding: 22px 0 22px 26px; }
 #home-draft .hd-bonus-title { font-size: clamp(28px,3.5vw,35px); }
 #home-draft .hd-bonus-description { font-size: 17px; margin: 13px 0; line-height: 1.3; }
 #home-draft .hd-bonus-cta { padding: 8px 13px; font-size: 16px; }
 #home-draft .hd-bonus-badge { padding: 18px; }
 #home-draft .hd-bonus-badge > strong { font-size: clamp(42px,5.6vw,57px); }
 #home-draft .hd-bonus-badge-label { font-size: 18px; margin-top: 15px; }
 #home-draft .hd-bonus-badge-rate { font-size: 13px; margin-top: 20px; }
}

#home-draft .hd-bonus-copy { justify-content: center; gap: clamp(24px,4vw,56px); }
/* Portrait art direction: photograph extends behind the heading; the offer band stays sharp. */
@media(max-width:767px) {
 #home-draft .hd-bonus { container-type: inline-size; background: #faf9f6; }
 #home-draft .hd-bonus-photo { inset: 0 0 30%; }
 #home-draft .hd-bonus-photo img { top: auto; bottom: 0; right: 0; height: auto; width: 132%; min-width: 0; object-fit: contain; mask-image: linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 4%,rgba(0,0,0,.65) 10%,rgba(0,0,0,.92) 17%,#000 24%); mask-composite: add; }
 #home-draft .hd-bonus::before { inset: 0 0 30%; background: linear-gradient(180deg,#faf9f6 0%,rgba(250,249,246,.85) 18%,rgba(250,249,246,.25) 29%,transparent 39%); }
 #home-draft .hd-bonus-copy { width: 100%; height: 100%; padding: 7% 6%; justify-content: flex-start; gap: 0; }
 #home-draft .hd-phone-break { display: block; }
 #home-draft .hd-bonus-title { font-size: 8cqw; line-height: 1.06; letter-spacing: -.025em; }
 #home-draft .hd-bonus-title > strong { max-width: none; white-space: nowrap; }
 #home-draft .hd-bonus-title > strong .hd-phone-break { display: none; }
 #home-draft .hd-bonus-title > span { margin-top: 2.5cqw; font-size: .8em; line-height: 1.1; color: #744181; }
 #home-draft .hd-bonus-description { margin: 3cqw 0 0; font-size: 3.6cqw; line-height: 1.28; max-width: 69%; color: #514854; }
 #home-draft .hd-bonus-cta { position: absolute; bottom: 4.5%; left: 6%; width: 88%; max-width: none; padding: 2.4cqw 3cqw; min-height: 44px; font-size: clamp(15px,4cqw,18px); }
 #home-draft .hd-bonus-badge { inset: auto 0 17% 0; width: 100%; height: 13%; padding: 2cqw 6%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; column-gap: 4cqw; align-items: center; justify-content: start; background: #660099; mask: none; }
 #home-draft .hd-bonus-badge > strong { grid-column: 1; grid-row: 1 / 3; font-size: 11.5cqw; }
 #home-draft .hd-bonus-badge-label { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(12px,3.5cqw,17px); line-height: 1.1; }
 #home-draft .hd-bonus-badge-rate { grid-column: 2; grid-row: 2; margin: 0; padding: 0; border: 0; font-size: clamp(12px,3.4cqw,16px); line-height: 1.1; }
}




/* Full-height original photo: no duplicated or blurred background layers. */
@media(min-width:768px) {
 #home-draft .hd-bonus-photo img { top: 0; right: 23%; height: 100%; width: auto; mask-image: linear-gradient(90deg,transparent,rgba(0,0,0,.12) 8%,rgba(0,0,0,.5) 18%,#000 34%); }
}

@media(min-width:768px) and (max-width:1024px) {
 #home-draft .hd-bonus-copy { justify-content: flex-start; gap: 16px; padding-top: 28px; }
}

/* Compact mobile heading and a higher, clearer photographic scene. */
@media(max-width:767px) {
 #home-draft .hd-bonus-copy { padding-top: 6%; }
 #home-draft .hd-bonus-title > span { font-size: .75em; margin-top: 2cqw; white-space: nowrap; }
 #home-draft .hd-bonus-title > span .hd-phone-break { display: none; }
 #home-draft .hd-bonus-photo img { width: 140%; mask-image: linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 3%,rgba(0,0,0,.85) 7%,#000 12%); }
 #home-draft .hd-bonus::before { background: linear-gradient(180deg,#faf9f6 0%,rgba(250,249,246,.7) 12%,rgba(250,249,246,.12) 22%,transparent 29%); }
}

/* The short bonus offer uses a compact portrait composition, independently of other slides. */
@media(max-width:767px) {
 #home-draft .hd-slider[data-slide="2"] .hd-track { aspect-ratio: .72 / 1; }
 #home-draft .hd-slider[data-slide="2"] .hd-slide { aspect-ratio: auto; min-height: 0; }
 #home-draft .hd-bonus-photo img { width: 132%; mask-image: linear-gradient(180deg,transparent 0%,rgba(0,0,0,.3) 3%,rgba(0,0,0,.8) 8%,#000 15%); }
 #home-draft .hd-bonus::before { background: linear-gradient(180deg,#faf9f6 0%,rgba(250,249,246,.8) 13%,rgba(250,249,246,.15) 24%,transparent 33%); }
 #home-draft .hd-bonus-title { font-size: clamp(24px,8cqw,37px); }
 #home-draft .hd-bonus-title > span { color: #660099; }
 #home-draft .hd-bonus-cta { bottom: 3%; }
 #home-draft .hd-bonus-badge { bottom: 16%; height: 14%; }
}
@media(min-width:768px) and (max-width:1024px) {
 #home-draft .hd-bonus-copy { width: 35%; gap: 20px; }
 #home-draft .hd-bonus-cta { width: 220px; max-width: 100%; }
}


/* Deliberate portrait-like type hierarchy within the tablet landscape banner. */
@media(min-width:768px) and (max-width:1024px) {
 #home-draft .hd-bonus-copy { width: 32%; padding: 24px 16px 76px clamp(26px,3.2vw,34px); justify-content: center; gap: 20px; }
 #home-draft .hd-bonus-title { font-size: clamp(30px,3.5vw,36px); line-height: 1.03; letter-spacing: -.02em; }
 #home-draft .hd-bonus-title .hd-phone-break { display: block; }
 #home-draft .hd-bonus-title > span { margin-top: 12px; font-size: .72em; line-height: 1.12; color: #744181; }
 #home-draft .hd-bonus-cta { width: 220px; min-height: 44px; padding: 8px 10px; gap: 8px; font-size: 15px; }
}