/* home.css — главная (sketch 1.B1–B9, S01 R03: П1–П6, П10). Sizes: S01 px at 1440 × --px. */

/* ---------- split header: the menu is divided by the centre photo of the gallery (S01 П1) ---------- */
.hdr--split { position: absolute; left: 0; right: 0; top: var(--util); background: transparent; z-index: 30; height: calc(70 * var(--px)); }
.hdr--split .hdr__in { gap: 0; align-items: center; }
.hdr--split .hdr__half { flex: 1 1 0; display: flex; align-items: center; gap: calc(30 * var(--px)); min-width: 0; }
.hdr--split .hdr__half--r { justify-content: flex-end; }
.hdr--split .hdr__hole { flex: none; width: calc(var(--gcw) + 2 * var(--gg)); }
.hdr--split .nav { gap: calc(22 * var(--px)); font-size: calc(14.5 * var(--px)); }
.hdr--split .nav a, .hdr--split .nav button { height: calc(70 * var(--px)); }
.hdr--split .hdr__tools { margin-left: 0; gap: calc(18 * var(--px)); }
.hdr--split .search__in { width: calc(40 * var(--px)); padding: 0; border-color: transparent; background: transparent; cursor: pointer; color: transparent;
   }
.hdr--split .search__in::placeholder { color: transparent; }
.hdr--split .search.open .search__in, .hdr--split .search__in:focus { width: calc(250 * var(--px)); padding: 0 calc(16 * var(--px)) 0 calc(40 * var(--px));
  background: var(--white); border-color: var(--violet); color: var(--ink); cursor: text; position: absolute; right: 0; z-index: 2; }
.hdr--split .search__in:focus::placeholder { color: #9c94a3; }
.hdr--split .search .ico { z-index: 3; }
.hdr--split .cartbtn { padding: 0 calc(12 * var(--px)); background: rgba(255, 255, 255, .7); }
.hdr--split .cartbtn [data-cartsum] { display: none; }
.hdr--split .mega { top: calc(70 * var(--px)); }
.hdr--split .logo { width: calc(150 * var(--px)); }

/* the float strip appears after the hero (transform only) */
.hdr--float { position: fixed; left: 0; right: 0; top: 0; transform: translateY(-110%); transition: transform .38s var(--ease); }
.hdr--float.on { transform: none; }

/* ---------- hero (S01 П1, П2): five photos, the centre one rises to the very top ---------- */
.hero { position: relative; overflow: hidden; padding-bottom: calc(46 * var(--px));
  --gcw: calc(444 * var(--px));                               /* centre width */
  --gch: min(calc(470 * var(--px)), calc(50svh - 10px));      /* centre height, low windows shrink (ADAPTIVE.md §3) */
  --gsw: calc(252 * var(--px));                               /* side width */
  --gsh: calc(var(--gch) * 0.585);                            /* side height: 275 / 470 */
  --gg: calc(41 * var(--px)); }                               /* gap */
.hero__blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.blob { position: absolute; fill: var(--lilac); }
.blob--tl { left: 0; top: 0; width: 34%; height: 58%; }
.blob--tr { right: 0; top: 0; width: 30%; height: 52%; }
.blob--bl { left: 0; bottom: 0; width: 40%; height: 34%; }
.blob--br { right: 0; bottom: 0; width: 40%; height: 30%; }
.gal { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr var(--gsw) var(--gcw) var(--gsw) 1fr; column-gap: var(--gg); align-items: end; }
.gal__f { position: relative; display: block; overflow: hidden; border-radius: calc(4 * var(--px)); background: var(--powder); }
.gal__f img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gal__f:hover img { transform: scale(1.03); }
.gal__f--c { height: var(--gch); border-radius: 0 0 calc(4 * var(--px)) calc(4 * var(--px)); }
.gal__f--c img { object-position: 50% 46%; }
.gal__f--s, .gal__f--o { height: var(--gsh); }
.gal__f--o:first-child { border-radius: 0 calc(4 * var(--px)) calc(4 * var(--px)) 0; }
.gal__f--o:last-child { border-radius: calc(4 * var(--px)) 0 0 calc(4 * var(--px)); }
.gal__f--o img { object-position: 50% 50%; }
.hero__txt { position: relative; z-index: 1; text-align: center; padding-top: min(calc(46 * var(--px)), 4.4svh); }
.hero__h1 { font-size: min(calc(60 * var(--px)), 6.9svh); }
.hero__h1 span { display: block; }
.hero__sub { margin: min(calc(20 * var(--px)), 2svh) auto 0; max-width: calc(760 * var(--px)); font-size: calc(17 * var(--px)); line-height: 1.5; color: var(--ink-2); }
.hero__act { margin-top: min(calc(28 * var(--px)), 2.8svh); display: flex; justify-content: center; }
.hero__prom { justify-content: center; margin-top: min(calc(22 * var(--px)), 2.2svh); color: var(--ink); }

/* ---------- tiles: 2 × 4, own colour and own photo shape each (S01 П3, П4) ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.tile { position: relative; display: block; aspect-ratio: 631 / 400; border-radius: var(--r); overflow: hidden; isolation: isolate; }
.tile--lilac { background: var(--lilac); }
.tile--powder { background: var(--powder); }
.tile--magenta { background: var(--magenta); color: var(--white); }
.tile--violet { background: var(--violet); color: var(--white); }
.tile--line { background: var(--white); box-shadow: inset 0 0 0 1px #cfc5d6; }
.tile--magenta .tag, .tile--violet .tag { color: var(--white); opacity: .85; }
.tile__txt { position: absolute; z-index: 2; left: calc(30 * var(--px)); bottom: calc(26 * var(--px)); max-width: 44%; display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.tile__name { font: 300 calc(30 * var(--px))/1.1 var(--f-mono); text-transform: uppercase; }
.tile__n { font-size: calc(14 * var(--px)); opacity: .75; }
.tile__ph { position: absolute; z-index: 1; display: flex; gap: calc(24 * var(--px)); }
.tile__ph img { object-fit: cover; transition: transform .7s var(--ease); }
.tile:hover .tile__ph img { transform: scale(1.04); }
/* rect and arch: the photo takes one side, the label the other bottom corner (S01 П3: [01] photo right, [03] and [04] photo left) */
.tile--rect .tile__ph, .tile--arch .tile__ph { top: calc(30 * var(--px)); bottom: calc(30 * var(--px)); width: 49%; }
.tile--rect .tile__ph img { width: 100%; height: 100%; border-radius: calc(6 * var(--px)); }
.tile--arch .tile__ph img { width: 100%; height: 100%; border-radius: 50% 50% 46% 46% / 40% 40% 32% 32%; }
.tile--ph-r .tile__ph { right: calc(30 * var(--px)); }
.tile--ph-r .tile__txt { left: calc(30 * var(--px)); max-width: 40%; }
.tile--ph-l .tile__ph { left: calc(30 * var(--px)); }
.tile--ph-l .tile__txt { left: auto; right: calc(30 * var(--px)); max-width: 40%; }
/* circles: two circles, label top-left (S01 П3 [02]) */
.tile--circles .tile__txt { top: calc(28 * var(--px)); bottom: auto; max-width: 80%; }
.tile--circles .tile__ph { left: 0; right: 0; bottom: 7%; justify-content: center; }
.tile--circles .tile__ph img { width: 42.5%; aspect-ratio: 1; border-radius: 50%; }

/* ---------- carousel of hits (S01 П5): three cards, arrows beyond the container ---------- */
.car { position: relative; }
.car__view { overflow: hidden; padding: 0; margin: 0 var(--pad); }
.car__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * calc(36 * var(--px))) / 3); gap: calc(36 * var(--px));
  transition: transform .6s var(--ease); }
.car__arr { position: absolute; top: calc((100vw - 2 * var(--pad) - 72 * var(--px)) / 3 * 9 / 8 / 2); transform: translateY(-50%); z-index: 2;
  width: calc(44 * var(--px)); height: calc(44 * var(--px)); display: grid; place-items: center; border-radius: 50%; transition: opacity .2s; }
.car__arr:hover { background: var(--pill); }
.car__arr .ico { width: calc(26 * var(--px)); height: calc(26 * var(--px)); stroke-width: 1.3; }
.car__arr--l { left: calc(18 * var(--px)); }
.car__arr--r { right: calc(18 * var(--px)); }
.car__arr[disabled] { opacity: .25; pointer-events: none; }
.card--big .card__name { font-size: calc(22 * var(--px)); margin-top: calc(26 * var(--px)); }
.card--big .price b { font-size: calc(22 * var(--px)); }
.card--big .card__buy .btn { height: calc(46 * var(--px)); padding: 0 calc(28 * var(--px)); font-size: calc(12.5 * var(--px)); }

/* ---------- кому, повод, бюджет ---------- */
.pick__h { margin-bottom: calc(48 * var(--px)); }
.pick { border-top: 1px solid var(--line); }
.pick__row { display: grid; grid-template-columns: calc(200 * var(--px)) 1fr; align-items: center; gap: var(--gap); padding: calc(26 * var(--px)) 0; border-bottom: 1px solid var(--line); }
.pick__row .tag { font-size: calc(15 * var(--px)); text-transform: uppercase; }
.pick .chip--lg:hover { background: var(--lilac); border-color: var(--lilac); color: var(--ink); }

/* ---------- band «Скидка 15% при самовывозе» (S01 П6): full width lilac, white silhouettes by the edges ---------- */
.band { position: relative; background: var(--lilac); overflow: hidden; padding: calc(96 * var(--px)) var(--pad) calc(100 * var(--px)); text-align: center; }
.band__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.band__h { margin-top: calc(18 * var(--px)); }
.band__addr { margin: calc(26 * var(--px)) 0 calc(34 * var(--px)); display: grid; gap: 6px; font-size: calc(16 * var(--px)); }
.band__addr li { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.band__addr .ico { color: var(--magenta); width: calc(18 * var(--px)); height: calc(18 * var(--px)); }
.band__sil { width: calc(330 * var(--px)); height: calc(420 * var(--px)); }
.band__sil--l { left: calc(-40 * var(--px)); bottom: calc(-60 * var(--px)); transform: rotate(-12deg); }
.band__sil--l2 { left: calc(240 * var(--px)); top: calc(-90 * var(--px)); width: calc(220 * var(--px)); height: calc(260 * var(--px)); transform: rotate(18deg); }
.band__sil--r { right: calc(-30 * var(--px)); bottom: calc(-80 * var(--px)); height: calc(520 * var(--px)); transform: rotate(10deg); }
.band__sil--r2 { right: calc(260 * var(--px)); top: calc(-70 * var(--px)); width: calc(230 * var(--px)); height: calc(280 * var(--px)); transform: rotate(-16deg); }

/* ---------- FAQ (S01 П10, desktop: heading left, list right) ---------- */
.faq { display: grid; grid-template-columns: 1fr 1.55fr; gap: calc(60 * var(--px)); align-items: start; }
.faq__h { position: sticky; top: calc(var(--hdr) + 30px); }
.acc { border-bottom: 1px solid var(--line); }
.acc:first-child { border-top: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: calc(26 * var(--px)) 0; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc__q { font: 300 calc(22 * var(--px))/1.25 var(--f-mono); text-transform: uppercase; }
.acc__pl { flex: none; position: relative; width: calc(34 * var(--px)); height: calc(34 * var(--px)); border-radius: 50%; border: 1px solid var(--magenta); transition: transform .3s var(--ease); }
.acc__pl::before, .acc__pl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36%; height: 1.5px; background: var(--magenta); transform: translate(-50%, -50%); }
.acc__pl::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--ease); }
.acc[open] .acc__pl { background: var(--magenta); }
.acc[open] .acc__pl::before, .acc[open] .acc__pl::after { background: var(--white); }
.acc[open] .acc__pl::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc__a { padding: 0 calc(60 * var(--px)) calc(26 * var(--px)) 0; font-size: calc(16 * var(--px)); color: var(--ink-2); display: grid; gap: 8px; }

/* ---------- reach (S01 П10, R02): photo full width + white capsule ---------- */
.reach { position: relative; overflow: hidden; min-height: calc(560 * var(--px)); display: flex; align-items: center; justify-content: flex-end; padding: calc(60 * var(--px)) var(--pad); }
.reach__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.reach__sil--a { width: calc(300 * var(--px)); height: calc(380 * var(--px)); right: calc(-60 * var(--px)); top: calc(-110 * var(--px)); transform: rotate(-14deg); }
.reach__sil--b { width: calc(260 * var(--px)); height: calc(360 * var(--px)); left: 38%; bottom: calc(-150 * var(--px)); transform: rotate(12deg); }
.reach__cap { position: relative; z-index: 1; width: calc(580 * var(--px)); background: var(--white); border-radius: calc(210 * var(--px)); padding: calc(56 * var(--px)) calc(80 * var(--px));
  text-align: center; display: flex; flex-direction: column; align-items: center; margin-right: 6%; }
.reach__rows { display: grid; gap: calc(12 * var(--px)); margin-top: calc(18 * var(--px)); }
.reach__tel { font: 700 calc(22 * var(--px))/1.2 var(--f-text); }
.reach__note { margin-top: calc(14 * var(--px)); font-size: calc(14 * var(--px)); color: var(--ink-2); }
.reach__addr { margin-top: calc(12 * var(--px)); font-size: calc(13.5 * var(--px)); display: grid; gap: 4px; }
.reach__addr li { display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.reach__addr .ico { width: 15px; height: 15px; color: var(--magenta); }
.reach .soc { justify-content: center; margin-top: calc(18 * var(--px)); }

/* low windows (1536 × 730): the first screen still holds the gallery, the headline and «Выбрать подарок» */
@media (max-height: 760px) {
  .hero { padding-bottom: calc(26 * var(--px)); }
  .hdr--split, .hdr--split .nav a, .hdr--split .nav button { height: calc(60 * var(--px)); }
  .hero__sub { font-size: calc(15.5 * var(--px)); }
  .hero .btn--big { height: calc(50 * var(--px)); }
}