@font-face { font-family:CrabDisplay; src:url('/concept/fonts/cormorant-garamond-500.woff2') format('woff2'), url('/concept/fonts/cormorant-garamond-500.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
/* Two editorial compositions. Purchase controls remain persistent and keyboard accessible. */
body[data-premium] { --pad:26px; --display:CrabDisplay,Georgia,serif; }
[data-premium] .top { min-height:82px; border-bottom:1px solid var(--line); }
[data-premium] .top__nav { gap:18px; }
[data-premium] .top__nav a { font-size:12px; font-weight:400; letter-spacing:.02em; }
[data-premium] .top__phone a { font-size:15px; font-weight:500; }
[data-premium] .top__city select { font-size:14px; }
[data-premium] .order-btn { border-radius:2px; font-size:11px; font-weight:500; letter-spacing:.07em; min-height:44px; padding-inline:18px; }
[data-premium] .shelf { gap:14px 20px; padding-block:18px; }
[data-premium] .item { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:0 0 10px; }
[data-premium] .item__title { font:500 25px/1 var(--display); letter-spacing:-.015em; }
[data-premium] .item__title button { font:inherit; }
[data-premium] .item__photo { background:transparent; border-radius:0; }
[data-premium] .item__line { gap:4px 8px; justify-content:flex-start; }
[data-premium] .item__kg { font-size:12px; color:var(--steel); }
[data-premium] .pick { font-size:12px; border-radius:2px; min-height:28px; padding-left:5px; border:1px solid var(--line); }
[data-premium] .pick:disabled { border-color:transparent; background:transparent; color:var(--steel); padding-left:0; }
[data-premium] .pick--kind { font-size:10px; }
/* Строка покупки: цена слева, справа одно место одного размера. Пока товара нет, там кнопка «В корзину +»;
   после добавления на её месте счётчик «− 3 +». Ширина и высота не меняются, поэтому цена и соседи стоят на месте. */
[data-premium] .pack { border:0; border-radius:0; padding:5px 0 0; background:transparent; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
[data-premium] .pack__price { grid-column:1; justify-self:start; font-size:16px; text-align:left; font-weight:500; font-variant-numeric:tabular-nums; }
[data-premium] .pack__ctl { grid-column:2; justify-self:end; display:flex; align-items:stretch; gap:0; width:108px; height:32px; border-radius:2px; overflow:hidden; background:var(--solid); color:var(--on-solid); }
[data-premium] .pack__plus,
[data-premium] .pack__less { display:flex; justify-content:center; align-items:center; width:auto; height:auto; min-width:0; padding:0; border:0; border-radius:0; background:transparent; color:inherit; font-size:17px; font-weight:400; line-height:1; transition:background-color .15s; }
[data-premium] .pack__plus { flex:1 1 auto; gap:8px; }
[data-premium] .pack__plus::before { content:'В корзину'; font-size:12px; letter-spacing:.01em; }
[data-premium] .pack__plus:hover,
[data-premium] .pack__less:hover { background:#ffffff26; }
[data-premium] .pack__plus:focus-visible,
[data-premium] .pack__less:focus-visible { outline:2px solid var(--on-solid); outline-offset:-4px; }
[data-premium] .pack--in .pack__plus { flex:0 0 32px; }
[data-premium] .pack--in .pack__plus::before { content:none; }
[data-premium] .pack__less { flex:0 0 32px; }
[data-premium] .pack__in { flex:1 1 auto; display:flex; justify-content:center; align-items:center; min-width:0; font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; border-inline:1px solid #ffffff2e; cursor:default; }
[data-premium] .pack__in::after { content:'\00a0шт.'; font-weight:400; opacity:.8; }
/* Размер строки покупки зависит от ширины карточки, а не экрана: в узкой карточке кнопка и счётчик меньше,
   в совсем узкой встают под цену во всю ширину. В любом случае оба состояния одного размера. */
[data-premium] .pack { container-type:inline-size; }
@container (max-width:199px) {
 [data-premium] .pack__ctl { width:92px; }
 [data-premium] .pack--in .pack__plus,
 [data-premium] .pack__less { flex-basis:28px; }
 [data-premium] .pack__in::after { content:none; }
}
@container (max-width:159px) {
 [data-premium] .pack__ctl { grid-column:1 / -1; justify-self:stretch; width:auto; }
 [data-premium] .pack__in::after { content:'\00a0шт.'; }
}
[data-premium] .pack--none .pack__price { color:var(--steel); font-size:12px; white-space:normal; }
[data-premium] .photo-hint { border-radius:2px; bottom:6px; right:6px; }
[data-premium] .premium-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:10px; }
[data-premium] .premium-heading h1,[data-premium] .premium-heading h2 { font:500 31px/1 var(--display); }
[data-premium] .premium-heading > span { font-size:12px; color:var(--steel); }
[data-premium] .premium-eyebrow { font-size:9px; letter-spacing:.12em; }
[data-premium] .bottom { gap:3px 12px; padding-block:8px; font-size:12px; }
[data-premium] .bottom__looks { font-size:10px; }
[data-premium] .pane { border-radius:0; border:1px solid var(--line); background:var(--card); padding:22px; }
[data-premium] .pane h1,[data-premium] .pane h2,[data-premium] .about h1,[data-premium] .about__block h2,[data-premium] .reader__title { font-family:var(--display); font-weight:500; }
[data-premium] .pane h1,[data-premium] .pane h2 { font-size:28px; }
[data-premium] .form input,[data-premium] .form select { border-radius:2px; }
[data-premium] .about__block img,[data-premium] .reader__photo { border-radius:0; }
[data-premium] .reader__list button { border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding-block:18px; }
[data-premium] .reader__list button[aria-current] { background:var(--ice); box-shadow:inset 2px 0 var(--solid); }
[data-premium] .sheet { background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:2px; }
[data-premium] .sheet h2 { font:500 36px/1.05 var(--display); }
[data-premium] .sheet::backdrop { background:#14232699; backdrop-filter:blur(5px); }
[data-premium] .item.is-confirmed { box-shadow:inset 0 -2px var(--solid); }
[data-premium] .art-crop { transition:transform 650ms cubic-bezier(.2,.7,.2,1); mask-image:radial-gradient(ellipse closest-side,#000 92%,transparent 100%); }
[data-premium] .item__photo:hover .art-crop { transform:scale(1.025); }

body.look-panorama { --paper:#fbfcfc; --card:#fff; --field:#fff; --ice:#e8eef0; --ink:#17343f; --steel:#566d76; --line:#d3dfe2; --solid:#214955; --on-solid:#fff; --red:#bb463b; --red-dark:#973329; --atlas:url('/images/concept/panorama/collection.jpg'); }
.look-panorama .top { background:#fff; }
.look-panorama .shelf { grid-template-columns:minmax(240px,.95fr) repeat(3,minmax(0,1fr)); grid-template-rows:40px repeat(3,minmax(0,1fr)); }
.look-panorama .premium-story { position:relative; overflow:hidden; isolation:isolate; grid-column:1; grid-row:1 / -1; min-height:0; background:#d9e5e9; }
.look-panorama .premium-story__image { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:-2; }
.look-panorama .premium-story::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(#e9f0f2b0,transparent 65%,#163240ad); }
.look-panorama .premium-story__text { padding:28px 24px; }
.look-panorama .premium-story h1 { font:500 clamp(62px,6vw,91px)/.85 var(--display); letter-spacing:-.04em; margin:30px 0 24px; }
.look-panorama .premium-story p { font-size:13px; line-height:1.6; }
.look-panorama .premium-story__link { position:absolute; bottom:25px; left:24px; right:24px; display:flex; justify-content:space-between; color:white; text-decoration:none; font-size:12px; border-bottom:1px solid #ffffff80; padding-bottom:10px; }
.look-panorama .premium-story__link span { font-size:20px; }
.look-panorama .premium-heading { grid-column:2 / -1; }
.look-panorama .item { display:grid; grid-template-columns:40% minmax(0,1fr); grid-template-rows:1fr auto auto; gap:6px 10px; }
.look-panorama .item__photo { grid-column:1; grid-row:1 / -1; height:100%; min-height:0; }
.look-panorama .art-crop { clip-path:inset(4%); }
.look-panorama .item__title { align-self:end; font-size:24px; }
.look-panorama .pack { grid-column:2; }
.look-panorama .bottom { background:#f1f5f6; }
.look-panorama .pane--side { background:#e8eef0; }

body.look-residence { color-scheme:dark; --paper:#0c2b26; --card:#123e36; --field:#163c35; --ice:#123e36; --ink:#f0efdf; --steel:#b5c8bd; --line:#456158; --solid:#dae7df; --on-solid:#15372e; --red:#c3d6c9; --red-dark:#a7c5b1; --atlas:url('/images/concept/residence/collection.jpg'); }
.look-residence .top { background:#0c2b26; }
.look-residence .top__logo img { filter:brightness(0) invert(1); }
.look-residence .order-btn { background:#dce7df; color:#16372e; }
.look-residence .shelf { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:38px repeat(3,minmax(0,1fr)); gap:12px 22px; }
.look-residence .premium-heading { grid-column:1 / -1; }
.look-residence .premium-heading h1 { font-size:34px; }
.look-residence .item { display:grid; grid-template-columns:38% minmax(0,1fr); grid-template-rows:1fr auto auto; gap:5px 10px; }
.look-residence .item__photo { grid-column:1; grid-row:1 / -1; height:100%; }
.look-residence .art-crop { clip-path:inset(4% round 2px); }
.look-residence .item__title { align-self:end; font-size:24px; }
.look-residence .pack { grid-column:2; }
.look-residence .pick { background-color:#d9e5dc; color:#193c31; }
.look-residence .pick:disabled { background:transparent; color:var(--steel); }
.look-residence .item:first-of-type { grid-column:1 / span 2; grid-row:2 / span 2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto auto; background:#123e36; border:0; padding:16px 22px; gap:8px 20px; }
.look-residence .item:first-of-type .item__photo { grid-column:1 / -1; grid-row:1; min-height:0; }
.look-residence .item:first-of-type .item__title { grid-row:2; grid-column:1 / -1; font-size:38px; }
.look-residence .item:first-of-type .item__line { grid-column:1; grid-row:3; align-self:center; }
.look-residence .item:first-of-type .pack { grid-column:2; grid-row:3; }
.look-residence .item:first-of-type .item__kg { font-size:13px; }
.look-residence .bottom { background:#0a251f; }
.look-residence .pane--side { background:#0c2b26; }

@media(min-width:1100px) and (max-width:1279px) {
 body[data-premium] { --pad:18px; }
 [data-premium] .shelf { gap:10px 12px; }
 [data-premium] .top { gap:14px; }
 [data-premium] .top__nav { gap:10px; }
 .look-panorama .shelf { grid-template-columns:210px repeat(3,minmax(0,1fr)); }
 .look-panorama .item,.look-residence .item { grid-template-columns:34% minmax(0,1fr); gap:4px 7px; }
 [data-premium] .item__title { font-size:21px; }
 [data-premium] .pick { font-size:11px; }
 [data-premium] .pack__price { font-size:14px; }
 .look-residence .item:first-of-type .item__title { font-size:31px; }
}
@media(max-width:1099px) {
 [data-premium] .shelf { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto; }
 .look-panorama .premium-story { grid-column:1 / -1; grid-row:auto; min-height:320px; }
 .look-panorama .premium-story__image { object-position:center 55%; }
 .look-panorama .premium-story h1 { margin-block:20px; font-size:64px; }
 [data-premium] .premium-heading { grid-column:1 / -1; grid-row:auto; min-height:46px; }
 .look-panorama .item,.look-residence .item { display:flex; flex-direction:column; }
 [data-premium] .item__photo { height:190px; flex:none; }
 [data-premium] .item__title { align-self:stretch; }
 .look-residence .item:first-of-type { grid-column:1; grid-row:auto; display:flex; padding:0 0 10px; background:transparent; }
 .look-residence .item:first-of-type .item__photo { height:190px; }
 .look-residence .item:first-of-type .item__title { font-size:24px; }
 .look-residence .item:first-of-type .item__line { align-self:stretch; }
 [data-premium] .bottom { display:flex; flex-wrap:wrap; }
}
@media(max-width:699px) {
 body[data-premium] { --pad:16px; }
 [data-premium] .shelf { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; padding-block:16px; }
 [data-premium] .top { min-height:0; }
 [data-premium] .top__nav a { font-size:15px; }
 [data-premium] .top > .order-btn { font-size:12px; }
 /* Баннер на телефоне не показывается: на узком экране его почти не видно (просьба пользователя 26.10.2026).
    Скрыт только с экрана: заголовок страницы остаётся для экранного диктора и поисковика, ссылка убрана совсем. */
 .look-panorama .premium-story { position:absolute; width:1px; height:1px; min-height:0; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .look-panorama .premium-story__link { display:none; }
 .look-panorama .premium-story__image { object-position:center 64%; }
 .look-panorama .premium-story::after { background:linear-gradient(90deg,#e9f0f2f2,#e9f0f2b0 55%,#e9f0f200); }
 .look-panorama .premium-story__link { color:#17343f; border-color:#17343f80; }
 .look-panorama .premium-story__text { padding:22px; }
 .look-panorama .premium-story h1 { font-size:70px; margin:20px 0 12px; }
 .look-panorama .premium-story p { font-size:12px; }
 [data-premium] .premium-heading { flex-wrap:wrap; gap:6px; }
 [data-premium] .premium-heading h2 { font-size:28px; }
 .look-residence .premium-heading h1 { order:-1; width:100%; font-size:36px; }
 [data-premium] .item,.look-residence .item:first-of-type { padding:0 0 12px; gap:7px; }
 [data-premium] .item__photo,.look-residence .item:first-of-type .item__photo { height:155px; }
 [data-premium] .item__title,.look-residence .item:first-of-type .item__title { font-size:25px; }
 [data-premium] .item__line { margin-top:auto; }
 [data-premium] .pack { width:100%; padding:0; gap:6px; }
 [data-premium] .pack__ctl { grid-column:1 / -1; justify-self:stretch; width:auto; height:38px; }
 [data-premium] .pack--in .pack__plus,
 [data-premium] .pack__less { flex-basis:44px; }
 [data-premium] .pack__in::after { content:'\00a0шт.'; }
 [data-premium] .pack__price { font-size:15px; }
 [data-premium] .bottom__links { flex-wrap:wrap; }
 [data-premium] .pane { padding:18px; }
}
@media(prefers-reduced-motion:no-preference) {
 .look-panorama .premium-story__image[fetchpriority="high"] { animation:coast-reveal 1.2s cubic-bezier(.2,.7,.2,1) backwards; }
 @keyframes coast-reveal { from { transform:scale(1.035); opacity:.55; } to { transform:scale(1); opacity:1; } }
}

/* Документы магазина в «Панораме» и «Резиденции»: заголовки тем же шрифтом, что названия товаров, без рамок. */
[data-premium] .legal-doc__page { border-color: transparent; border-radius: 0; scrollbar-width: thin; }
[data-premium] .legal-doc__page h1 { font: 500 38px/1 var(--display); letter-spacing: -.02em; margin-bottom: 20px; }
[data-premium] .legal-doc__text h2 { font: 500 22px/1.15 var(--display); }
[data-premium] .legal-doc__list a { border-radius: 0; border-width: 0 0 1px; background: transparent; padding-inline: 2px; }
[data-premium] .legal-doc__list a[aria-current] { box-shadow: none; border-color: var(--ink); font-weight: 700; }

/* Края картинки со слоганом растворяются в фоне страницы: так она часть сайта, а не вставленный прямоугольник
   (просьба владельца 16.10.2026; 28.10.2026 попросил растворять слабее: 10 пикселей вместо 34). Маска одна на весь блок, поэтому вместе с фото растворяется и его затемнение.
   Ссылка внизу поднята над зоной растворения. */
.look-panorama .premium-story {
  --fade: 10px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-composite: intersect;
}
.look-panorama .premium-story__text { padding-inline: 34px; }
.look-panorama .premium-story__link { bottom: 46px; left: 34px; right: 34px; }

/* Телефон: картинка со слоганом не занимает первый экран, а стоит узкой полосой над каталогом.
   Попросил владелец 16.10.2026: директор просил страницу без больших баннеров. */
@media (max-width: 699px) {
  .look-panorama .premium-story { --fade: 16px; min-height: 0; height: 112px; }
  .look-panorama .premium-story__text { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 22px 26px; }
  .look-panorama .premium-story .premium-eyebrow, .look-panorama .premium-story p { display: none; }
  .look-panorama .premium-story h1 { margin: 0; font-size: 34px; }
  .look-panorama .premium-story h1 br { display: none; }
  /* Ссылка стоит в самой полосе под слоганом, иначе полоса обрезает её. */
  .look-panorama .premium-story__link { left: 22px; right: auto; bottom: 14px; justify-content: flex-start; gap: 6px; padding: 0; border: 0; font-size: 12px; }
  .look-panorama .premium-story__link span { font-size: 14px; }
}

/* Корзина и список корзины в редакционных вариантах: углы как у кнопок, названия шрифтом заголовков. */
[data-premium] .stepper, [data-premium] .minicart, [data-premium] .totals > .totals__free, [data-premium] .minicart__free { border-radius: 2px; }
[data-premium] .cart__title { font: 500 19px/1.1 var(--display); letter-spacing: -.01em; }
[data-premium] .cart-head h1 { margin: 0; }
[data-premium] .totals__sum dd { font-weight: 600; }
[data-premium] .minicart { box-shadow: 0 22px 44px -24px rgba(12, 30, 38, .4); }

/* Заказ одной страницей в оформлении «Панорама»: прямые углы, заголовки и число дня шрифтом заголовков. */
[data-premium] .buy__card, [data-premium] .summary, [data-premium] .buy__info, [data-premium] .cookie { border-radius: 0; }
[data-premium] .buy__card h1, [data-premium] .buy__card h2, [data-premium] .summary h2 { font: 500 28px/1.05 var(--display); letter-spacing: -.01em; }
[data-premium] .buy__info h2 { font: 500 21px/1.1 var(--display); }
[data-premium] .chip span, [data-premium] .cookie__ok { border-radius: 2px; }
[data-premium] .chip--day b { font: 500 30px/.95 var(--display); }

[data-premium] .photo-note { border-radius: 2px; }
[data-premium] .missing h1 { font: 500 44px/1 var(--display); letter-spacing: -.02em; }

/* Окно товара и подсказки в «Панораме»: прямые углы и заголовок шрифтом заголовков. */
[data-premium] .sheet__choice button, [data-premium] .guide__item { border-radius: 2px; }
[data-premium] .sheet--product h2 { font: 500 30px/1.05 var(--display); }
[data-premium] .sheet__photo .art-crop { mask-image: radial-gradient(ellipse closest-side, #000 92%, transparent 100%); }
.look-panorama .premium-heading { flex-wrap: wrap; row-gap: 6px; }
.look-panorama .premium-heading .delivery-line { margin-left: auto; text-align: right; }
@media (max-width: 1099px) {
  .look-panorama .premium-heading .delivery-line { margin-left: 0; text-align: left; flex-basis: 100%; }
}
/* Ссылка «Как выбрать краба» рядом с заголовком, условия доставки справа в той же строке. */
/* Заголовок, ссылка и строка доставки стоят на общей базовой линии текста: ссылка у верхнего края крупного заголовка
   выглядела криво (замечание владельца 28.10.2026). */
@media (min-width: 1100px) {
  .look-panorama .premium-heading { align-items: baseline; column-gap: 24px; }
  .look-panorama .premium-heading .premium-heading__help { order: 1; align-self: baseline; }
  .look-panorama .premium-heading .delivery-line { order: 2; }
}

/* Баннер из трёх слайдов (28.10.2026): сменяются плавным наплывом, видимый отмечен is-current (concept.js, initSlides).
   Слайд без своего фото показывает знак компании на светлом фоне. Точки над ссылкой «Откуда наш краб». */
.look-panorama .premium-story__image { opacity: 0; transition: opacity .9s ease; }
.look-panorama .premium-story__image.is-current { opacity: 1; }
.look-panorama .premium-story__image--empty { display: block; background: url('/images/placeholder-crab.svg') center 60% / 34% no-repeat, linear-gradient(165deg, #eef3f4, #cbdade); }
.look-panorama .premium-story__dots { position: absolute; left: 34px; bottom: 96px; display: flex; gap: 8px; }
.look-panorama .premium-story__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #ffffff8c; cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.look-panorama .premium-story__dots button[aria-pressed="true"] { width: 22px; background: #fff; }
.look-panorama .premium-story__dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .look-panorama .premium-story__image, .look-panorama .premium-story__dots button { transition: none; }
}