/* ════════════════════════════════════════════════════════════════ wardrobe-product.css Зафиксированный стиль для товарных страниц гардероба (Wave F). Применяется к: belaya-rubashka, bryuki, yubki, bluzy, trikotazh, palto, futbolka-i-top, platya, dzhinsy, zhaket-posadka. Не применяется к: obuv, sumki, aksessuary (там другая логика). Подключение в : Принципы (zafixirovany в notes/design-rules-product-pages.md): 1. История — двухколоночник с крупной иллюстрацией 2. «Как выбирать и носить» — светлые карточки 2×2, без чёрных подложек 3. Типы/силуэты — карточки с фото 4:5 сверху 4. Тёмный читабельный текст ════════════════════════════════════════════════════════════════ */ /* ── История — двухколоночник с крупной иллюстрацией ────── */ .history-twocol{ display:grid; grid-template-columns:.95fr 1.05fr; gap:36px; align-items:start; } .history-illus{ margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:0 14px 36px rgba(17,17,17,.09); background:#fffaf0; } .history-illus img{ width:100%; height:auto; display:block; } .history-content .history-intro{ font-size:16px; color:var(--muted); line-height:1.7; margin:0 0 22px; } .history-content .history-intro b{ color:var(--ink); font-weight:660; } .history-content .timeline{margin:0;} /* ── «Как выбирать и носить» — светлая 2×2, override portal-compact.css ─── */ /* Селектор с .lesson-copy специфичнее, чем правила в portal-compact.css */ .lesson-grid{ grid-template-columns:repeat(2,1fr)!important; gap:18px!important; } .lesson-card{ min-height:auto!important; background:#fff!important; color:var(--ink)!important; box-shadow:0 6px 18px rgba(17,17,17,.07)!important; border-radius:var(--radius)!important; display:flex!important; flex-direction:row!important; align-items:stretch; overflow:hidden; } .lesson-card .lesson-media{ width:42%; flex-shrink:0; height:auto!important; background:#fffaf0!important; display:flex; align-items:center; justify-content:center; } .lesson-card .lesson-media img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center; } .lesson-card .lesson-copy{ flex:1; padding:24px 26px 22px!important; display:flex; flex-direction:column; justify-content:center; } .lesson-card .lesson-copy h3{ color:var(--ink)!important; font-size:20px!important; font-family:Georgia,serif!important; font-weight:520!important; line-height:1.18!important; margin:0 0 8px!important; } .lesson-card .lesson-copy p{ color:#1a1a1a!important; font-size:14px!important; line-height:1.6!important; margin:0!important; } /* ── Типы/силуэты — карточки с фото 4:5 ───────────────────── */ .types-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .type-card{ padding:0; background:#fff; border-radius:var(--radius); box-shadow:0 6px 18px rgba(17,17,17,.06); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s,transform .2s; } .type-card:hover{ box-shadow:0 14px 36px rgba(17,17,17,.09); transform:translateY(-2px); } .type-card .tc-img{ aspect-ratio:4/5; overflow:hidden; background:#e8e0d8; } .type-card .tc-img img{ width:100%; height:100%; object-fit:cover; display:block; } .type-card .tc-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; } .type-card .tc-tag{ font-size:10.5px; font-weight:780; letter-spacing:.1em; text-transform:uppercase; color:#80324d; } .type-card h3{ font-family:Georgia,serif; font-size:18px; font-weight:520; margin:2px 0 4px; color:var(--ink); } .type-card p{ font-size:13.5px; color:#1a1a1a; line-height:1.6; margin:0; } .type-card p b{ color:var(--ink); font-weight:660; } /* ── По фигуре — 2 колонки ──────────────────────────────── */ .figure-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .figure-card{ padding:24px 26px 22px; background:#fff; border-radius:var(--radius); box-shadow:0 6px 18px rgba(17,17,17,.06); } .figure-card h3{ font-family:Georgia,serif; font-size:19px; font-weight:520; margin:0 0 10px; color:var(--ink); } .figure-card .fc-tag{ font-size:10.5px; font-weight:780; letter-spacing:.1em; text-transform:uppercase; color:#bd8b2e; margin-bottom:6px; } .figure-card p{ font-size:14px; color:#1a1a1a; line-height:1.6; margin:0 0 10px; } .figure-card ul{ margin:6px 0 0; padding-left:18px; font-size:13.5px; color:#1a1a1a; line-height:1.6; } .figure-card li b{ color:var(--ink); font-weight:660; } /* ── Двухколоночник, чек-листы (ткани, с чем, уход) ────── */ .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .col-card{ padding:24px 26px 22px; background:#fff; border-radius:var(--radius); box-shadow:0 6px 18px rgba(17,17,17,.06); } .col-card h3{ font-family:Georgia,serif; font-size:18px; font-weight:520; margin:0 0 10px; color:var(--ink); } .col-card .cc-tag{ font-size:10.5px; font-weight:780; letter-spacing:.1em; text-transform:uppercase; color:#bd8b2e; margin-bottom:8px; } .col-card ul{ margin:0; padding-left:18px; font-size:13.5px; color:#1a1a1a; line-height:1.65; } .col-card li{margin-bottom:5px;} .col-card li b{ color:var(--ink); font-weight:660; } .col-card p{ font-size:13.5px; color:#1a1a1a; line-height:1.6; } /* ── Сезон — 4 колонки ─────────────────────────────────── */ .season-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .season-card{ padding:22px 22px 20px; background:#fff; border-radius:var(--radius); box-shadow:0 6px 18px rgba(17,17,17,.06); } .season-card .s-tag{ font-size:10.5px; font-weight:780; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; } .season-card.s-spring .s-tag{color:#789265;} .season-card.s-summer .s-tag{color:#b87333;} .season-card.s-autumn .s-tag{color:#80324d;} .season-card.s-winter .s-tag{color:#3a4f6e;} .season-card h4{ font-family:Georgia,serif; font-size:17px; font-weight:520; margin:0 0 8px; color:var(--ink); } .season-card ul{ margin:0; padding-left:16px; font-size:12.5px; color:#1a1a1a; line-height:1.55; } .season-card li{margin-bottom:3px;} /* ── Качество в магазине — нумерованный список ─────────── */ .quality-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .quality-item{ padding:18px 22px; background:#fff; border-radius:var(--radius); box-shadow:0 6px 18px rgba(17,17,17,.06); display:flex; gap:14px; align-items:flex-start; } .quality-item .q-num{ font-family:Georgia,serif; font-size:28px; color:rgba(189,139,46,.5); font-weight:520; line-height:.9; width:42px; flex-shrink:0; } .quality-item h4{ font-family:Georgia,serif; font-size:16px; font-weight:520; margin:0 0 4px; color:var(--ink); } .quality-item p{ font-size:13px; color:#1a1a1a; line-height:1.55; margin:0; } .quality-item p b{ color:var(--ink); font-weight:660; } /* ── Куда дальше — canonical next-compact в is-footer ────── */ .next-compact{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .next-compact a{ display:block; padding:22px 24px; border-radius:var(--radius); background:#fff; box-shadow:0 6px 18px rgba(17,17,17,.07); text-decoration:none; color:var(--ink); transition:box-shadow .2s,transform .2s; } .next-compact a:hover{ box-shadow:0 14px 36px rgba(17,17,17,.12); transform:translateY(-2px); } .next-compact .label{ font-size:10.5px; font-weight:780; text-transform:uppercase; letter-spacing:.1em; color:#bd8b2e; margin-bottom:6px; } .next-compact h4{ font-family:Georgia,serif; font-size:16px; font-weight:520; line-height:1.15; margin:0 0 6px; } .next-compact p{ font-size:12.5px; color:var(--muted); line-height:1.55; margin:0; } /* ── Responsive ─────────────────────────────────────────── */ @media(max-width:1180px){ .types-grid,.season-grid{grid-template-columns:repeat(2,1fr);} .figure-grid,.two-col,.quality-list{grid-template-columns:1fr;} .next-compact{grid-template-columns:repeat(2,1fr);} } @media(max-width:960px){ .history-twocol{grid-template-columns:1fr;gap:24px;} } @media(max-width:760px){ .lesson-grid{grid-template-columns:1fr!important;} .lesson-card{flex-direction:column!important;} .lesson-card .lesson-media{width:100%;aspect-ratio:4/3;} } @media(max-width:600px){ .types-grid,.season-grid,.next-compact{grid-template-columns:1fr;} } /* ════════════════════════════════════════════════════════════════ F-extra: классы для obuv/sumki/aksessuary (новая логика — стиль, статус, цена) ════════════════════════════════════════════════════════════════ */ /* ── Уровни цены — 4 колонки ─────────────────────────────── */ .price-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .price-card{ padding:22px 22px 20px; border-radius:var(--radius); background:#fff; border:1px solid rgba(17,17,17,.08); display:flex; flex-direction:column; gap:10px; min-height:340px; } .price-card.p-mass{background:#f7f3ec;} .price-card.p-mid{background:#efe9dc;} .price-card.p-premium{background:#1a1a1a;color:#fffaf0;border:none;} .price-card.p-haute{background:#111;color:#fffaf0;border:1px solid #bd8b2e;} .price-card .p-tag{ font-family:Georgia,serif; font-style:italic; font-size:13px; letter-spacing:.04em; opacity:.7; margin-bottom:4px; } .price-card.p-premium .p-tag, .price-card.p-haute .p-tag{color:#bd8b2e;opacity:1;} .price-card .p-range{ font-family:Georgia,serif; font-size:18px; font-weight:520; color:#1a1a1a; } .price-card.p-premium .p-range, .price-card.p-haute .p-range{color:#fffaf0;} .price-card h3{ font-family:Georgia,serif; font-size:17px; font-weight:520; margin:6px 0 4px; color:#1a1a1a; line-height:1.3; } .price-card.p-premium h3, .price-card.p-haute h3{color:#fffaf0;} .price-card p{ font-size:13.5px; line-height:1.6; color:#3a3a3a; margin:0; } .price-card.p-premium p, .price-card.p-haute p{color:rgba(255,250,240,.85);} .price-card .p-brands{ font-size:12.5px; font-style:italic; color:#676057; margin-top:auto; padding-top:10px; border-top:1px dashed rgba(17,17,17,.15); line-height:1.55; } .price-card.p-premium .p-brands, .price-card.p-haute .p-brands{color:rgba(255,250,240,.75);border-top-color:rgba(189,139,46,.4);} /* ── Обязательный минимум — карточки 2-3 колонки ─────── */ .essentials-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .essential-card{ padding:20px 22px; border-radius:var(--radius); background:#fffaf0; border-left:3px solid #bd8b2e; display:flex; flex-direction:column; gap:6px; } .essential-card .e-num{ font-family:Georgia,serif; font-style:italic; font-size:13px; color:#bd8b2e; letter-spacing:.06em; } .essential-card h3{ font-family:Georgia,serif; font-size:17px; font-weight:520; margin:0; color:#1a1a1a; } .essential-card p{ font-size:14px; line-height:1.6; color:#1a1a1a; margin:4px 0 0; } .essential-card .e-meta{ font-size:12.5px; font-style:italic; color:#676057; margin-top:6px; } /* ── Коды дороговизны — карточки с историей ─────────── */ .code-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .code-card{ padding:24px; border-radius:var(--radius); background:#fff; border:1px solid rgba(17,17,17,.08); display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; } .code-card .c-marker{ width:56px; height:56px; border-radius:50%; background:#bd8b2e; color:#fffaf0; display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-style:italic; font-size:13px; text-align:center; line-height:1.15; padding:6px; flex-shrink:0; } .code-card .c-body h3{ font-family:Georgia,serif; font-size:16px; font-weight:520; margin:0 0 6px; color:#1a1a1a; } .code-card .c-body p{ font-size:13.5px; line-height:1.65; color:#1a1a1a; margin:0; } .code-card .c-body .c-year{ font-family:Georgia,serif; font-style:italic; font-size:12.5px; color:#bd8b2e; margin-bottom:2px; display:block; } @media(max-width:1100px){ .price-grid{grid-template-columns:repeat(2,1fr);} .essentials-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:700px){ .price-grid,.essentials-grid,.code-grid{grid-template-columns:1fr;} }