/* ==========================================================================
   WebPack.kz — 2026 redesign — "Заказная продукция" (custom-order) styles.
   Split out of style2026.css so the two areas can be edited independently
   (loaded right after style2026.css in main.tpl; relies on that file's :root
   custom properties — --wp-blue, --wp-bg-panel, --wp-border, etc. — which
   apply here too since CSS variables resolve against the document, not
   per-file). Everything below is scoped under .wp-page-content.

   "Заказная продукция" (custom order) pages — modules/page/templates_2025/
   custom_*.tpl, rendered inside page.tpl's generic {else} branch, which now
   carries .wp-root.wp-page-content (previously carried neither, so every one
   of these pages rendered as an unstyled stream of text/links). Scoped under
   .wp-page-content rather than bare .wp-root since some class names here
   (.info-wrap, .item-tile-info-panel) are common enough to risk colliding
   with other .wp-root-scoped pages if left unscoped.
   ========================================================================== */
.wp-page-content{ }

/* Top-of-page grey panel for custom-order index pages (custom_pack.tpl etc), matching the
   homepage's full-bleed .wp-catalog section look — not just a contained rounded card. These
   pieces sit deep inside page.tpl's own max-width-capped, padded [role="main"] column, so
   getting a true edge-to-edge background needs the standard "break out of the parent
   container" trick (100vw + negative margin pulls it to the viewport edges) on each piece,
   with an inner .wp-container (same class the homepage's own .wp-catalog uses) putting the
   actual content back at the site's normal max-width/padding. Built from 3 separately-owned
   pieces that share one background colour and sit with zero gap so they read as one continuous
   band: the breadcrumb (in the shared page.tpl wrapper — .wp-page-custom-breadcrumb), the
   eyebrow+h1 header (.wp-catalog__head), and the tile grid (.wp-page-custom-grid-panel, wrapper
   around the same .wp-catalog__grid/.wp-catalog__tile markup the homepage catalog section uses,
   so the tiles render pixel-identical). The request-quote form further down stays on the plain
   white page background, untouched. */
.wp-page-content .breadcrumbs-box.wp-page-custom-breadcrumb,
.wp-page-content .wp-catalog__head,
.wp-page-content .wp-page-custom-grid-panel{
  background:var(--wp-bg-panel); width:100vw; position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; box-sizing:border-box;
}
/* Two gaps otherwise show the white .content-full-wrap behind this grey panel: (1) that
   wrapper's own generic padding-top:48px (.wp-root [role="main"].section-outer-box, shared by
   every page.tpl page — not something to change site-wide) sits above the breadcrumb, so pull
   the panel up by that exact amount to cover it; (2) the breadcrumb .menu's own margin-bottom:16px
   collapses straight through this box (no padding-bottom to contain it) and shows as a sliver
   below — killed directly on the .menu instead. */
.wp-page-content .breadcrumbs-box.wp-page-custom-breadcrumb{ padding-top:32px; padding-bottom:16px; margin-top:-48px; margin-bottom:0; }
.wp-page-content .breadcrumbs-box.wp-page-custom-breadcrumb .menu{ margin-bottom:0; }
.wp-page-content .wp-catalog__head{ padding:0; margin-top:0; margin-bottom:0; }
/* h1 no longer has a .wp-eyebrow sibling above it here (badge removed from custom_pack.tpl),
   so the ".wp-eyebrow + .h1-title{margin-top:0}" rule no longer matches and the generic
   .h1-title{margin-top:32px} would double up with the breadcrumb's own margin-bottom:16px
   above it (same doubled-gap issue explained where that generic rule is declared). */
.wp-page-content .wp-catalog__head .h1-title{ margin-top:0; }
/* .wp-catalog__head is display:flex (for the title+tabs layout other pages use it for); as a
   flex item .wp-container's own max-width alone doesn't make it grow to fill — it shrinks to
   its title text's content width instead, so margin:auto centered a ~270px box instead of the
   full 1424px column. width:100% forces it to fill the flex row first, then max-width caps it
   exactly like it does as a normal block child elsewhere (e.g. inside .wp-page-custom-grid-panel,
   which isn't flex and never had this problem). */
.wp-page-content .wp-catalog__head > .wp-container{ width:100%; }
.wp-page-content .wp-page-custom-grid-panel{ padding-bottom:20px; margin-top:0; margin-bottom:20px; }

/* hero "свяжитесь с нами" panel (top of page, .type-second) and the closing
   "Есть вопросы?" panel (bottom, no modifier) — both share this markup. */
.wp-page-content .info-contacts-panel-box{
  background:var(--wp-bg-panel); border-radius:var(--wp-radius-lg); padding:32px; margin:24px 0 32px;
}
/* the hero variant (.type-second, holds the real page <h1> on rebuilt product pages) sits
   directly on the white page background per the reference design — no card/panel look; the
   plain (bottom "Есть вопросы?") variant keeps the grey panel treatment above. */
.wp-page-content .info-contacts-panel-box.type-second{ background:none; border-radius:0; padding:0; }
.wp-page-content .info-contacts-panel-box .box-inner-wrap{ display:flex; flex-wrap:wrap; gap:32px; }
.wp-page-content .info-contacts-panel-box .title-inner-wrap{ flex:1 1 420px; min-width:280px; }
.wp-page-content .info-contacts-panel-box .photo-inner-wrap{ flex:1 1 320px; min-width:240px; }
.wp-page-content .info-contacts-panel-box .photo-inner-wrap .elm-photo{
  border-radius:var(--wp-radius); overflow:hidden; height:100%; min-height:220px;
}
.wp-page-content .info-contacts-panel-box .photo-inner-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
/* hero (.type-second) photo — roughly a third of the default flexed-to-fill size, fixed
   rather than flex:1 1 320px so it doesn't keep growing to match the text column's height. */
.wp-page-content .info-contacts-panel-box.type-second .photo-inner-wrap{ flex:0 0 370px; min-width:0; align-self:flex-start; }
.wp-page-content .info-contacts-panel-box.type-second .photo-inner-wrap .elm-photo{ height:395px; min-height:0; background:var(--wp-bg-panel); }
/* contain (not cover) so the photo is never cropped — the panel behind it fills any
   letterboxing gap left/right or top/bottom of the image's own aspect ratio. */
.wp-page-content .info-contacts-panel-box.type-second .photo-inner-wrap img{ object-fit:contain; }
.wp-page-content .info-contacts-panel-box h1.section-title,
.wp-page-content .info-contacts-panel-box h3.section-title{ margin-top:0; }
.wp-page-content .info-contacts-panel-box p{ margin:0 0 20px; }

.wp-page-content .info-inner-wrap{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.wp-page-content .elm-ico.ico-attention{
  flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:50%; box-shadow:var(--wp-shadow-card);
}
.wp-page-content .elm-ico.ico-attention img{ width:20px; height:20px; }
.wp-page-content .info-title{ font-size:13px; color:var(--wp-text-muted); }
.wp-page-content .info-value a, .wp-page-content .info-value .link-main{ font-size:16px; font-weight:700; color:var(--wp-ink); }
.wp-page-content .info-value a:hover{ color:var(--wp-blue); }

.wp-page-content .messages-inner-wrap{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.wp-page-content .btn-action-ico.button-soc-att{
  flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.wp-page-content .btn-action-ico.button-soc-att img{ width:100%; height:100%; }
.wp-page-content .messages-title{ font-size:14px; font-weight:600; color:var(--wp-ink); line-height:1.4; }

.wp-page-content .button-inner-wrap .btn{
  display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 28px; border:none; border-radius:10px;
  background:linear-gradient(135deg,var(--wp-btn-grad-a),var(--wp-btn-grad-b)); color:#fff; font-weight:700; font-size:15px;
  cursor:pointer; text-decoration:none;
}
.wp-page-content .button-inner-wrap .btn:hover{ filter:brightness(1.12) saturate(1.1); color:#fff; }

/* 4-up "use cases" strip inside the hero panel (shared by ~19 custom-order pages, hence a
   modifier rather than changing the default: .items-grid-2 gives a 2x2 layout instead of
   the default single row of 4, used where the page only has 4 use-case items and the hero
   column is narrower — e.g. custom_vakumnie_packety.tpl). */
.wp-page-content .items-inner-wrap{ margin-top:24px; }
.wp-page-content .items-inner-wrap .items-wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.wp-page-content .items-inner-wrap .items-wrap.items-grid-2{ grid-template-columns:repeat(2,1fr); }
/* ".tile-bg" alone = the compact mini-tile variant used by the ~19 other custom-order pages'
   use-case grids. ".tile-bg.tile-main" together = advantage.tpl's own "Преимущества работы с
   нашей компанией" cards (homepage-style, full size) — excluded here with :not(.tile-main) so
   this compact override doesn't also shrink those on every page that includes advantage.tpl. */
.wp-page-content .item-tile-info-ico.tile-bg:not(.tile-main){
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; background:#fff;
  border-radius:var(--wp-radius); padding:16px; height:100%; box-sizing:border-box;
}
.wp-page-content .item-tile-info-ico.tile-bg:not(.tile-main) .tile-ico{ width:32px; height:32px; }
.wp-page-content .item-tile-info-ico.tile-bg:not(.tile-main) .tile-ico img{ width:100%; height:100%; object-fit:contain; }
.wp-page-content .item-tile-info-ico.tile-bg:not(.tile-main) .tile-title{ font-size:13px; font-weight:600; color:var(--wp-ink); line-height:1.4; }

/* two-column info panels ("о товаре" + "минимальный тираж") */
.wp-page-content .tiles-box.items-info-panels .items-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:32px 0; }
.wp-page-content .item-tile-info-panel{
  background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius-lg); padding:28px; height:100%; box-sizing:border-box;
}
.wp-page-content .item-tile-info-panel.tile-no-border{ border:none; background:none; padding:0; }
.wp-page-content .item-tile-info-panel.tile-bg{ background:var(--wp-bg-panel); border:none; }
/* .type-bleed modifier — full-bleed grey band edge-to-edge (not just a tinted card), for the
   one page that specifically asked for it (custom_vakumnie_packety.tpl); the plain
   ".items-info-panels" class is shared by ~19 other custom-order pages so this needed its own
   modifier rather than changing the shared rules above. The left ("о товаре") side sits
   directly on the grey band with no card of its own (.tile-no-border); the right ("минимальный
   тираж") side keeps the plain white bordered card so it stands out against the grey. */
.wp-page-content .tiles-box.items-info-panels.type-bleed{
  background:var(--wp-bg-panel); width:100vw; position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; padding:40px 0; box-sizing:border-box;
}
.wp-page-content .tiles-box.items-info-panels.type-bleed .items-wrap{
  max-width:var(--wp-maxw); margin:0 auto; padding:0 32px; box-sizing:border-box;
}
.wp-page-content .item-tile-info-panel .tile-title{ font-weight:700; color:var(--wp-ink); margin-bottom:12px; }
.wp-page-content .item-tile-info-panel .tile-title.tile-title-small{ font-size:15px; margin-bottom:10px; }
/* ".wp-root .tiles-box .tile-title{font-size:15px}" (3 classes) outranks the generic
   ".wp-root .h3-title{font-size:18px}" (2 classes) purely on selector count whenever a
   ".tile-title.h3-title" heading (e.g. "Минимальный тираж") sits inside a .tiles-box
   ancestor — this restores the intended 18px h3 size for that combination specifically. */
.wp-page-content .item-tile-info-panel .tile-title.h3-title{ font-size:18px; }
/* first heading in the (now cardless, .tile-no-border) left "о товаре" column — zero the
   generic h2-title's 32px margin-top so it lines up with the white card's own 28px padding
   on the right instead of starting visibly lower. */
.wp-page-content .item-tile-info-panel.tile-no-border > .h2-title:first-child{ margin-top:0; }
.wp-page-content .item-tile-info-panel > .h2-title:first-child{ margin-top:0; }
.wp-page-content .item-tile-info-panel .list-dots{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px; }
.wp-page-content .item-tile-info-panel .list-dots li{ position:relative; padding-left:16px; font-size:14px; color:var(--wp-text); line-height:1.55; }
.wp-page-content .item-tile-info-panel .list-dots li::before{
  content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--wp-blue);
}
.wp-page-content .item-tile-info-panel p{ margin:0 0 12px; }
.wp-page-content .item-tile-info-panel .asterix{ color:var(--wp-red); }
.wp-page-content .item-tile-info-panel .tile-actions-wrap{ display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.wp-page-content .item-tile-info-panel .tile-submit .btn{
  display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 22px; border:none; border-radius:10px;
  background:linear-gradient(135deg,var(--wp-btn-grad-a),var(--wp-btn-grad-b)); color:#fff; font-weight:700; font-size:14px;
  cursor:pointer; text-decoration:none;
}
.wp-page-content .item-tile-info-panel .tile-submit .btn:hover{ filter:brightness(1.12) saturate(1.1); color:#fff; }
.wp-page-content .item-tile-info-panel .tile-actions .tile-button{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.wp-page-content .item-tile-info-panel .tile-actions .tile-button img{ width:100%; height:100%; }

/* "Преимущества" 3-col list + delivery message tile */
.wp-page-content .item-wrap.wrap-full{ grid-column:1/-1; }
.wp-page-content .list-rows{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.wp-page-content .list-rows-3{ grid-template-columns:repeat(3,1fr); }
.wp-page-content .list-rows li{
  background:var(--wp-bg-panel); border-radius:var(--wp-radius); padding:16px 18px; font-size:14px; color:var(--wp-ink);
  font-weight:600; line-height:1.4;
}
.wp-page-content .item-tile-info-panel.tile-message{ display:flex; align-items:center; gap:16px; background:var(--wp-bg-panel); border:none; }
.wp-page-content .item-tile-info-panel.tile-message .tile-ico{ flex:none; width:40px; height:40px; }
.wp-page-content .item-tile-info-panel.tile-message .tile-ico img{ width:100%; height:100%; object-fit:contain; }
.wp-page-content .item-tile-info-panel.tile-message .tile-title{ margin:0; font-weight:600; font-size:14px; }

/* numbered "что нужно знать для расчёта стоимости" list */
.wp-page-content .tiles-list-box{ margin:32px 0; }
.wp-page-content .tiles-list-box .box-inner-wrap{ background:var(--wp-bg-panel); border-radius:var(--wp-radius-lg); padding:28px; }
.wp-page-content .tiles-list-box .title-inner-wrap .section-title{ margin:0 0 20px; }
.wp-page-content .tiles-list-box .items-wrap{ display:flex; flex-wrap:wrap; gap:16px 32px; }
.wp-page-content .item-tile-info-number{ display:flex; align-items:center; gap:12px; }
.wp-page-content .item-tile-info-number .tile-number{ font-size:22px; font-weight:800; color:var(--wp-blue); }
.wp-page-content .item-tile-info-number .tile-title{ font-size:14px; font-weight:600; color:var(--wp-ink); }
/* .tiles-list-box also wraps the "типовые размеры" grid (.size-custom-wrap), which needs its
   own background/padding instead of the numbered-list treatment above. */
.wp-page-content .tiles-list-box.size-custom-wrap{ background:none; padding:0; }
.wp-page-content .size-custom-wrap .items-inner-wrap{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:16px; }
.wp-page-content .size-custom-wrap .items-inner-wrap.item-tile-category-main{ background:none; border:none; padding:0; }
.wp-page-content .size-custom-wrap .items-wrap{ display:flex; flex-wrap:wrap; gap:16px; }
.wp-page-content .size-custom-wrap .item-wrap{
  flex:1 1 140px; max-width:160px; text-align:center; background:#fff; border:1px solid var(--wp-border);
  border-radius:var(--wp-radius); padding:16px; box-sizing:border-box;
}
/* .items-grid-6 modifier — stretches the row to fill the full section width instead of
   clustering at max-width:160px each (only opted into where the page has exactly 6 size
   tiles; ".size-custom-wrap" itself is shared by other custom-order pages with different
   tile counts, so this doesn't touch the default). */
.wp-page-content .size-custom-wrap .items-wrap.items-grid-6{ display:grid; grid-template-columns:repeat(6,1fr); }
.wp-page-content .size-custom-wrap .items-wrap.items-grid-6 .item-wrap{ max-width:none; }
.wp-page-content .size-custom-wrap .item-wrap img{ width:100%; height:80px; object-fit:cover; margin-bottom:10px; }
.wp-page-content .size-custom-wrap .tile-info{ font-size:13px; font-weight:600; color:var(--wp-ink); }
.wp-page-content .size-custom-wrap .info-inner-wrap{ margin-top:4px; }

/* examples photo slider */
.wp-page-content .tiles-slider-examples-box{ margin:32px 0; }
.wp-page-content .slider-examples .items-wrap{ display:flex; gap:16px; flex-wrap:wrap; }
.wp-page-content .item-tile-example{
  display:block; width:180px; height:180px; border-radius:var(--wp-radius); overflow:hidden; border:1px solid var(--wp-border); background:#fff;
}
.wp-page-content .item-tile-example img{ width:100%; height:100%; object-fit:contain; }
.wp-page-content .slider-examples-pagination{ display:none; }

/* product-type category tiles (Прозрачные/Цветные/С логотипом) */
.wp-page-content .items-categories .items-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:24px 0; }
/* .items-flex-fill modifier — flex instead of a fixed-column grid, so whichever tab panel is
   active (this page's material/type tabs have different card counts: 3 vs 4) always spreads
   evenly across exactly one row instead of the grid's fixed 3 columns wrapping a 4th item.
   ".items-categories" itself is shared by ~19 other custom-order pages so this only fires
   where the modifier is explicitly added. */
.wp-page-content .items-categories .items-wrap.items-flex-fill{ display:flex; flex-wrap:wrap; gap:20px; }
.wp-page-content .items-categories .items-wrap.items-flex-fill .item-wrap{ flex:1 1 0; min-width:0; max-width:325px; }
/* the ".active" qualifier here matters: an unqualified "display:flex" would outrank
   ".item-wrap.js-tab-block{display:none}" on specificity and show every tab's cards at once
   regardless of which tab is selected. */
.wp-page-content .items-categories .items-wrap.items-flex-fill .item-wrap.active{ display:flex; }
.wp-page-content .items-categories .items-wrap.items-flex-fill .item-tile-category-main{ width:100%; }
.wp-page-content .item-tile-category-main{
  display:block; background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius-lg); padding:24px;
  text-align:center; text-decoration:none; box-sizing:border-box;
}
.wp-page-content .item-tile-category-main .tile-title{ font-size:16px; font-weight:700; color:var(--wp-ink); margin-bottom:14px; }
.wp-page-content .item-tile-category-main .tile-photo-wrap{ height:140px; margin-bottom:14px; }
.wp-page-content .item-tile-category-main .tile-photo{ display:block; width:100%; height:100%; }
.wp-page-content .item-tile-category-main .tile-photo img{ width:100%; height:100%; object-fit:cover; }
/* .type-photo-contain modifier — some pages' images are small square icon-like assets, not
   real product photos, so cropping them with object-fit:cover zoomed in on the centre and
   lost the picture; contain shows the whole image, letterboxed, instead. */
.wp-page-content .items-categories.type-photo-contain .item-tile-category-main .tile-photo{
  display:flex; align-items:center; justify-content:center;
}
.wp-page-content .items-categories.type-photo-contain .item-tile-category-main .tile-photo img{
  width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain;
}
.wp-page-content .item-tile-category-main .tile-info{ font-size:13px; color:var(--wp-text-muted); line-height:1.5; }
/* "По назначению" tab (custom_vakumnie_packety.tpl) has no product photos, so its cards use
   an icon badge in the same 140px slot as the photo tabs, keeping card heights consistent
   whichever tab is active. */
.wp-page-content .item-tile-category-main .tile-ico-wrap{ height:140px; margin-bottom:14px; display:flex; align-items:center; justify-content:center; }
.wp-page-content .item-tile-category-main .tile-ico-badge{
  width:72px; height:72px; border-radius:50%; background:rgba(46,127,203,.1);
  display:flex; align-items:center; justify-content:center; flex:none;
}

/* "Преимущества работы с нашей компанией" (advantage.tpl, shared include) — card look now
   matches the homepage's own ".tiles-box .item-tile-info-ico" (white, bordered) instead of a
   flat grey fill, so this shared component reads the same everywhere it's used. */
.wp-page-content .tiles-box.items-about .items-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:20px 0; }

/* "Этапы работы" numbered steps (advantage.tpl, shared include) */
.wp-page-content .tiles-box.items-steps{ margin:20px 0 32px; }
.wp-page-content .tiles-box.items-steps .items-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.wp-page-content .item-tile-step{ display:flex; flex-direction:column; gap:12px; }
.wp-page-content .item-tile-step .tile-photo-wrap{ position:relative; border-radius:var(--wp-radius); overflow:hidden; height:160px; }
.wp-page-content .item-tile-step .tile-photo{ width:100%; height:100%; }
.wp-page-content .item-tile-step .tile-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.wp-page-content .item-tile-step .tile-number{
  position:absolute; top:10px; left:10px; width:32px; height:32px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:var(--wp-blue);
}
.wp-page-content .item-tile-step .tile-info-wrap .tile-title{ font-size:15px; font-weight:700; color:var(--wp-ink); margin-bottom:4px; }
.wp-page-content .item-tile-step .tile-info-wrap p{ margin:0; font-size:13px; color:var(--wp-text-muted); }

/* FAQ grid (questions.tpl, shared include) — same look as .wp-catalog-page's own copy */
.wp-page-content .wp-faq{ margin-top:16px; }
.wp-page-content .wp-faq__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wp-page-content .wp-faq__card{ background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius); padding:20px; }
.wp-page-content .wp-faq__badge{
  display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:20px; font-size:11px; font-weight:700;
  margin-bottom:10px; color:#fff;
}
.wp-page-content .wp-faq__badge--product{ background:var(--wp-blue); }
.wp-page-content .wp-faq__badge--usage{ background:var(--wp-amber); }
.wp-page-content .wp-faq__badge--top{ background:var(--wp-green); }
.wp-page-content .wp-faq__badge--order{ background:var(--wp-red); }
.wp-page-content .wp-faq__question{ font-size:15px; font-weight:700; color:var(--wp-ink); margin:0 0 8px; }
.wp-page-content .wp-faq__answer{ font-size:14px; color:var(--wp-text); line-height:1.55; margin:0; }

/* ==========================================================================
   CUSTOM-ORDER PRODUCT PAGE — extra components (custom_vakumnie_packety.tpl
   and any other individual product page rebuilt against the same reference
   design). Generic names (wp-contact-cards, wp-cta-band, wp-color-*, wp-seo-panel)
   so later pages in this section can reuse them without redeclaring.
   ========================================================================== */

/* hero "свяжитесь с нами" row as 3 side-by-side cards instead of a stacked list —
   used in the hero .info-contacts-panel-box.type-second on rebuilt product pages. */
.wp-page-content .wp-contact-cards{ display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 24px; }
.wp-page-content .wp-contact-card{
  /* basis/min-width tuned so only 2 cards fit per row at this hero column's real width
     (~580px) — at the old 190px basis all 3 fit but each only got ~220px, too narrow for
     "+7 (727) 310-85-06" to stay on one line (it wrapped mid-number). Forcing a 2-per-row
     wrap here gives each remaining card ~285px, matching the reference design. */
  flex:1 1 230px; min-width:220px; display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius); padding:14px 16px;
  text-decoration:none; box-sizing:border-box;
}
.wp-page-content .wp-contact-card__icon{
  flex:none; width:48px; height:48px; border-radius:var(--wp-radius); background:var(--wp-bg-panel);
  display:flex; align-items:center; justify-content:center;
}
.wp-page-content .wp-contact-card__icon img{ width:32px; height:32px; }
.wp-page-content .wp-contact-card__label{ font-size:13px; font-weight:600; color:var(--wp-text-muted); display:block; }
.wp-page-content .wp-contact-card__value{ font-size:15px; font-weight:800; color:var(--wp-ink); display:block; white-space:nowrap; }
.wp-page-content .wp-contact-card:hover .wp-contact-card__value{ color:var(--wp-blue); }

/* CTA button placed directly under the hero photo (instead of under the contacts) — same
   gradient/radius as the site's standard button (.button-inner-wrap .btn, .tile-submit .btn,
   .frm-submit-btn etc.), not the darker 180deg nav-bar gradient it had before. */
.wp-page-content .photo-inner-wrap .btn.button-photo-cta{
  margin-top:16px; width:100%; height:50px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:linear-gradient(135deg,var(--wp-btn-grad-a),var(--wp-btn-grad-b));
  color:#fff; font-size:15px; font-weight:700; text-decoration:none; box-sizing:border-box;
  border:none; cursor:pointer;
}
.wp-page-content .photo-inner-wrap .btn.button-photo-cta:hover{ filter:brightness(1.12) saturate(1.1); color:#fff; }

/* outline button variant for secondary CTAs ("Рассчитать стоимость") */
.wp-page-content .btn.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 22px;
  border:1px solid var(--wp-blue); border-radius:10px; background:none; color:var(--wp-blue);
  font-weight:700; font-size:14px; cursor:pointer; text-decoration:none;
  transition:background-color .25s ease, color .25s ease;
}
.wp-page-content .btn.btn-outline:hover{ background:var(--wp-blue); color:#fff; }

/* "что нужно знать для расчёта стоимости" — upgraded from a plain inline number+label
   row to individual bordered/hover cards (this block had no card treatment at all before,
   just a flex-wrap list inside .tiles-list-box's shared grey box, which is now unset here
   since each item carries its own card background instead). */
.wp-page-content .tiles-list-box .box-inner-wrap{ background:none; padding:0; }
.wp-page-content .tiles-list-box .items-wrap{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
/* .type-bleed modifier — full-bleed grey band (like ".items-info-panels.type-bleed" above),
   for the one page/instance that specifically asked for it; ".tiles-list-box" on its own is
   shared by ~18 other custom-order pages so this needed its own opt-in modifier. */
/* margin-top:0 overrides the shared ".tiles-list-box{margin:32px 0}" above — this band already
   gets its own vertical spacing from its 40px padding, so the base rule's 32px margin-top was
   stacking on top of it for a ~72px gap after "Преимущества работы с нашей компанией". */
.wp-page-content .tiles-list-box.type-bleed{
  background:var(--wp-bg-panel); width:100vw; position:relative; left:50%; right:50%;
  margin-top:0; margin-left:-50vw; margin-right:-50vw; padding:40px 0; box-sizing:border-box;
}
.wp-page-content .tiles-list-box.type-bleed .box-inner-wrap{
  max-width:var(--wp-maxw); margin:0 auto; padding:0 32px; box-sizing:border-box;
}
.wp-page-content .tiles-list-box .items-wrap.items-grid-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }

/* .type-bleed on ".title-box" ("Виды пакетов") — same full-bleed grey band, but ".title-box"
   has no single wrapping child of its own (unlike .box-inner-wrap/.items-wrap above), so the
   template adds a plain .wp-container around all of it (title+tabs+panels) for the max-width
   cap instead. ".title-box" itself is extremely widely shared, so this only ever fires when
   both classes are present together. */
.wp-page-content .title-box.type-bleed{
  background:#fff; width:100vw; position:relative; left:50%; right:50%;
  margin-top:0; margin-left:-50vw; margin-right:-50vw; margin-bottom:0; padding:0 0 40px; box-sizing:border-box; display:block;
}
/* the heading's own generic ".h2-title{margin-top:32px}" was stacking on top of the band's
   24px padding-top (56px total to the actual heading text) instead of just the padding alone
   — same fix already applied to the "Наша компания..." band's own heading. */
.wp-page-content .title-box.type-bleed .h2-title:first-child,
.wp-page-content .title-box.type-bleed .title-wrap:first-child > .h2-title{ margin-top:0; }
.wp-page-content .item-tile-info-number{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; background:#fff;
  border:1px solid var(--wp-border); border-radius:var(--wp-radius); padding:22px; box-sizing:border-box;
  transition:box-shadow .3s ease, transform .3s ease; height:100%;
}
.wp-page-content .item-tile-info-number:hover{ box-shadow:var(--wp-shadow-card); transform:translateY(-2px); }
.wp-page-content .item-tile-info-number .tile-number{ font-size:28px; font-weight:800; color:var(--wp-border); line-height:1; }
.wp-page-content .item-tile-info-number .tile-title{ font-size:15px; font-weight:700; color:var(--wp-ink); }

/* .item-wrap.js-tab-block panels (main2026.js's initCatalogTabs toggles .active on click)
   had no show/hide rule outside of .wp-catalog's own copy (homepage), so on every
   custom-order page reusing this same tabs pattern all panels — both tabs' cards — were
   showing at once regardless of which tab was selected. */
.wp-page-content .item-wrap.js-tab-block{ display:none; }
.wp-page-content .item-wrap.js-tab-block.active{ display:block; }

/* underline tabs ("Виды пакетов") — .btn.button-tab had no styling at all outside of
   .wp-product/.wp-catalog-page contexts, so on custom-order pages it rendered as bare
   text; this gives it the same animated-underline treatment those contexts use. */
.wp-page-content .tabs-wrap.tabs-underline ul.menu{
  display:flex; gap:28px; list-style:none; margin:0; padding:0; border-bottom:1px solid var(--wp-border);
}
.wp-page-content .tabs-wrap.tabs-underline .btn.button-tab{
  position:relative; display:block; padding:0 0 14px; background:none; border:none; border-radius:0; height:auto;
  font-size:16px; font-weight:600; color:var(--wp-ink); cursor:pointer; text-decoration:none;
}
.wp-page-content .tabs-wrap.tabs-underline .btn.button-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--wp-blue);
  transform:scaleX(0); transform-origin:center; transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.wp-page-content .tabs-wrap.tabs-underline .btn.button-tab:hover,
.wp-page-content .tabs-wrap.tabs-underline .btn.button-tab.active{ color:var(--wp-blue); }
.wp-page-content .tabs-wrap.tabs-underline .btn.button-tab:hover::after,
.wp-page-content .tabs-wrap.tabs-underline .btn.button-tab.active::after{ transform:scaleX(1); }

/* colour-palette swatches (PANTONE-style grid) */
.wp-page-content .wp-color-panel{ display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap; margin-top:32px; }
.wp-page-content .wp-color-panel__info{ flex:0 0 280px; }
.wp-page-content .wp-color-panel__info h3{ margin:0 0 8px; font-size:17px; font-weight:800; color:var(--wp-ink); }
.wp-page-content .wp-color-panel__info p{ margin:0 0 14px; font-size:14px; line-height:1.6; color:var(--wp-text-muted); }
.wp-page-content .wp-color-swatches{
  flex:1 1 480px; min-width:280px; display:grid; grid-template-columns:repeat(8,1fr); gap:14px 12px;
}
.wp-page-content .wp-color-swatch{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.wp-page-content .wp-color-swatch__chip{
  width:100%; height:44px; border-radius:var(--wp-radius); border:1px solid rgba(27,29,34,.1);
  transition:transform .25s ease;
}
.wp-page-content .wp-color-swatch:hover .wp-color-swatch__chip{ transform:translateY(-2px); }
.wp-page-content .wp-color-swatch__name{ font-size:12px; font-weight:600; color:var(--wp-text-muted); text-align:center; }
/* .wp-size-swatches modifier — same swatch grid/hover language as "Цветовая гамма", reused for
   "Типовые размеры" (photo chips instead of colour chips: taller, object-fit:cover, and 6
   columns to match the 6 size tiles instead of the colour grid's 8). */
.wp-page-content .wp-size-swatches{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.wp-page-content .wp-size-swatches .wp-color-swatch{ flex:none; justify-content:flex-end; }
.wp-page-content .wp-size-swatches .wp-color-swatch__chip{
  display:block; border-radius:6px 6px 0 0; border:none;
  background:linear-gradient(180deg,var(--wp-blue-grad-top),var(--wp-blue-grad-bottom));
}
/* each block's width/height is the bag's real cm size × a fixed 4px/см scale, so blocks
   are proportional to one another in both dimensions, not just decoratively stepped. */
.wp-page-content .wp-size-swatches .wp-color-swatch:nth-child(1) .wp-color-swatch__chip{ width:32px; height:60px; }
.wp-page-content .wp-size-swatches .wp-color-swatch:nth-child(2) .wp-color-swatch__chip{ width:40px; height:80px; }
.wp-page-content .wp-size-swatches .wp-color-swatch:nth-child(3) .wp-color-swatch__chip{ width:60px; height:80px; }
.wp-page-content .wp-size-swatches .wp-color-swatch:nth-child(4) .wp-color-swatch__chip{ width:64px; height:168px; }
.wp-page-content .wp-size-swatches .wp-color-swatch:nth-child(5) .wp-color-swatch__chip{ width:80px; height:100px; }
.wp-page-content .wp-size-swatches .wp-color-swatch:nth-child(6) .wp-color-swatch__chip{ width:100px; height:160px; }

/* full-bleed blue CTA band, dropped between the tech content and the "buy in shop" strip */
.wp-page-content .wp-cta-band{
  background:linear-gradient(180deg,var(--wp-blue-grad-top),var(--wp-blue-grad-bottom));
  width:100vw; position:relative; left:50%; right:50%;
  margin-top:0; margin-bottom:0; margin-left:-50vw; margin-right:-50vw; padding:36px 0; box-sizing:border-box;
}
.wp-page-content .wp-cta-band__row{
  max-width:var(--wp-maxw); margin:0 auto; padding:0 32px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.wp-page-content .wp-cta-band__title{ font-size:19px; font-weight:800; color:#fff; display:block; margin-bottom:6px; }
.wp-page-content .wp-cta-band__text{ font-size:14px; font-weight:600; color:rgba(255,255,255,.85); display:block; }
.wp-page-content .wp-cta-band__actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.wp-page-content .wp-cta-band__actions .btn-white{
  height:50px; padding:0 28px; display:flex; align-items:center; border-radius:var(--wp-radius);
  background:#fff; color:var(--wp-blue-grad-bottom); font-size:15px; font-weight:800; text-decoration:none;
  transition:transform .25s ease;
}
.wp-page-content .wp-cta-band__actions .btn-white:hover{ color:var(--wp-blue-grad-bottom); transform:translateY(-1px); }
.wp-page-content .wp-cta-band__actions .btn-outline-white{
  height:50px; padding:0 28px; display:flex; align-items:center; border-radius:var(--wp-radius);
  border:1px solid rgba(255,255,255,.6); color:#fff; font-size:15px; font-weight:800; text-decoration:none;
  transition:background-color .25s ease;
}
.wp-page-content .wp-cta-band__actions .btn-outline-white:hover{ color:#fff; background:rgba(255,255,255,.14); }

/* "Характеристики" spec table (custom_vakumnie_packety.tpl) — each cell carries its own
   label above the value (not one shared header row) so the same markup collapses cleanly
   into stacked cards on mobile. */
.wp-page-content #vak-specs{ margin:32px 0; }
.wp-page-content #vak-specs .h2-title{ margin:0 0 16px; }
/* "Характеристики" block on custom_zip_lock.tpl — plain white, same treatment as #vak-specs;
   the .wp-seo-text grey band right above it already provides the section break. */
.wp-page-content #ziplock-specs{ margin:32px 0 40px; }
.wp-page-content #ziplock-specs .h2-title{ margin:0 0 16px; }
/* "Характеристики" block on custom_vozdush.tpl — same plain-white treatment, placed right
   after .wp-seo-text like on the zip-lock page. */
.wp-page-content #vpp-specs{ margin:32px 0 40px; }
.wp-page-content #vpp-specs .h2-title{ margin:0 0 16px; }
/* "Характеристики" block on custom_virubnaya_ruchka.tpl — was sitting flush against the blue
   .wp-cta-band right below it with no breathing room. */
.wp-page-content #vr-specs{ margin:32px 0 40px; }
.wp-page-content #vr-specs .h2-title{ margin:0 0 16px; }
/* "Характеристики" block on custom_musor.tpl — placed right after .wp-seo-text, same
   treatment as the other custom-order pages' spec tables. */
.wp-page-content #musor-specs{ margin:32px 0 40px; }
.wp-page-content #musor-specs .h2-title{ margin:0 0 16px; }
.wp-page-content .spec-table{ background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius-lg); overflow:hidden; }
.wp-page-content .spec-row{
  display:grid; grid-template-columns:1.3fr 1.4fr 1fr 0.9fr 0.9fr 1.2fr; gap:16px; align-items:center;
  padding:16px 20px;
}
.wp-page-content .spec-row:nth-child(odd){ background:var(--wp-bg-panel); }
.wp-page-content .spec-row + .spec-row{ border-top:1px solid var(--wp-border); }
.wp-page-content .spec-row{ transition:background-color .2s ease; }
.wp-page-content .spec-row:hover{ background:rgba(46,127,203,.08); }
.wp-page-content .spec-cell-name{ font-size:14px; font-weight:700; color:var(--wp-ink); }
.wp-page-content .spec-label{ display:block; font-size:11px; font-weight:600; color:var(--wp-text-muted); text-transform:uppercase; letter-spacing:.02em; margin-bottom:3px; }
.wp-page-content .spec-value{ display:block; font-size:13px; font-weight:500; color:var(--wp-ink); line-height:1.4; }
@media (max-width:900px){
  .wp-page-content .spec-row{ grid-template-columns:1fr; gap:10px; padding:18px 20px; }
  .wp-page-content .spec-cell-name{ font-size:15px; padding-bottom:4px; border-bottom:1px solid var(--wp-border); margin-bottom:2px; }
  .wp-page-content #ziplock-specs{ margin:24px 0 32px; }
  .wp-page-content #vpp-specs{ margin:24px 0 32px; }
  .wp-page-content #vr-specs{ margin:24px 0 32px; }
  .wp-page-content #musor-specs{ margin:24px 0 32px; }
}

/* generic full-bleed grey section — reusable on any plain <div> (wrap the content in a nested
   ".wp-container" for the max-width cap), used across the custom-order pages for SEO text
   blocks, "Купить в интернет-магазине" strips, etc. instead of a bespoke id + duplicated
   rules per page. */
.wp-page-content .wp-bleed-panel{
  background:var(--wp-bg-panel); width:100vw; position:relative; left:50%; right:50%;
  margin-top:0; margin-left:-50vw; margin-right:-50vw; margin-bottom:0; padding:40px 0; box-sizing:border-box;
}
.wp-page-content .wp-bleed-panel > .wp-container{ max-width:var(--wp-maxw); margin:0 auto; padding:0 32px; box-sizing:border-box; }
.wp-page-content .wp-bleed-panel .h2-title:first-child,
.wp-page-content .wp-bleed-panel .h1-title:first-child{ margin-top:0; }
/* SEO text block (custom_vakumnie_packety.tpl and other custom-order pages) — plain text, no
   card styling. */
.wp-page-content .wp-seo-text .h2-title{ margin:0 0 16px; }
.wp-page-content .wp-seo-text p{ margin:0 0 14px; }
.wp-page-content .wp-seo-text p:last-child{ margin-bottom:0; }
/* "Преимущества работы с нашей компанией" moved to the top of the page (right after the
   "Наша компания.../Минимальный тираж" panels) on a white full-bleed band, instead of its
   default position at the very bottom via advantage.tpl (which each page includes with
   hide_advantages=1 to suppress the duplicate). Reusable across every custom-order page that
   wants this — started on custom_vakumnie_packety.tpl and custom_vozdush.tpl, now the
   standard treatment for all of them. */
.wp-page-content .wp-advantages-top{
  background:#fff; width:100vw; position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; padding:40px 0; box-sizing:border-box;
}
.wp-page-content .wp-advantages-top .wp-container{ max-width:var(--wp-maxw); margin:0 auto; padding:0 32px; box-sizing:border-box; }
/* the heading's own generic ".h2-title{margin-top:32px}" was stacking on top of this band's
   own 40px padding-top. */
.wp-page-content .wp-advantages-top .h2-title{ margin-top:0; }
/* 4 columns (one row) — the notice sits stacked under the title (nested inside .tile-title,
   matching the hero tiles) instead of as a third flex item beside it, so 4 narrow columns
   don't force awkward wrapping. */
.wp-page-content .wp-advantages-top .tiles-box.items-about .items-wrap{ grid-template-columns:repeat(4,1fr); }

/* "Купить ... в интернет-магазине" cross-sell strip — reusable ".wp-shop-cross" modifier on
   top of ".wp-bleed-panel" (full-bleed grey band), for any custom-order page with a product
   slider. Product cards sit directly on the grey band instead of as white cards on it — the
   shared ".wp-product-cross" white-card/shadow/margin treatment is stripped here rather than
   changed at the source, since other pages use it on a plain (non-bleed) background. */
.wp-page-content .wp-shop-cross .wp-product-cross{ background:none; box-shadow:none; margin:0; }
.wp-page-content .wp-shop-cross .action-wrap .button-link{
  display:inline-flex; align-items:center; gap:6px; color:var(--wp-blue); font-weight:600; font-size:14px;
  text-decoration:none;
}
.wp-page-content .wp-shop-cross .action-wrap .button-link:hover{ color:var(--wp-blue-dark); }
/* "Смотреть готовые товары"/"Смотреть все товары" arrows — plain "&rarr;" character with the
   same hover-slide animation used site-wide (.wp-popular__more, .wp-product-cross .button-link,
   .wp-basket .button-link), replacing the old static, non-animating arrow-forward.svg icon. */
.wp-page-content .wp-shop-cross .button-link .button-ico span,
.wp-page-content .wp-product-cross .more-box .button-ico span{
  display:inline-block; transition:transform .25s ease;
}
.wp-page-content .wp-shop-cross .button-link:hover .button-ico span,
.wp-page-content .wp-product-cross .more-box .button-link:hover .button-ico span{
  transform:translateX(4px);
}
/* a <p> inside a plain ".info-wrap" can have no margin reset, so its default ~15px browser
   margin-top stacks with the title-box's own 16px flex row-gap (looks like a ~32px gap under
   the heading instead of the intended 16px) — reusable fix, not tied to one page's id. */
.wp-page-content .wp-shop-cross .info-wrap p{ margin:0; }
/* same double-gap pattern as the .info-wrap p fix above, other side: the heading's own generic
   h1/h2-title margin-bottom:16px stacks with the title-box's 16px flex row-gap, so the heading
   sits 32px above the paragraph/product-grid instead of the intended 16px. Zero it here so the
   flex gap is the single source of that spacing, matching every other row gap in this component. */
.wp-page-content .wp-shop-cross .h1-title,
.wp-page-content .wp-shop-cross .h2-title{ margin-bottom:0; }
/* when .wp-shop-cross isn't inside .wp-bleed-panel (e.g. custom_vakumnie_packety.tpl, where the
   section runs on white background instead), the generic h1/h2-title top margin isn't zeroed by
   the bleed-panel rule above — cancel it here too so the heading doesn't get an oversized gap. */
.wp-page-content .wp-shop-cross .h1-title:first-child,
.wp-page-content .wp-shop-cross .h2-title:first-child{ margin-top:0; }
/* #vak-shop-bleed (custom_vakumnie_packety.tpl), #vpp-shop-bleed (custom_vozdush.tpl) and
   #vr-shop-bleed (custom_virubnaya_ruchka.tpl) are the .wp-shop-cross sections NOT wrapped in
   .wp-bleed-panel (each runs on plain white background, right after its own request-form
   .wp-bleed-panel), so the margin-top:0 above — meant to cancel the double-padding when a
   40px-padded panel is already the direct parent — instead left them flush with zero breathing
   room above. Restore the same 40px used everywhere else as the section-gap rhythm
   (.wp-bleed-panel / .wp-advantages-top padding), so top and bottom space around these headings
   match instead of drifting out of sync on every edit. */
#vak-shop-bleed .h1-title:first-child, #vak-shop-bleed .h2-title:first-child,
#vpp-shop-bleed .h1-title:first-child, #vpp-shop-bleed .h2-title:first-child,
#vr-shop-bleed .h1-title:first-child, #vr-shop-bleed .h2-title:first-child{ margin-top:40px; }
.wp-page-content .wp-shop-cross .title-box .section-title a{ color:inherit; transition:color .2s ease; }
.wp-page-content .wp-shop-cross .title-box .section-title a:hover{ color:var(--wp-blue); }

@media (max-width: 900px){
  .wp-page-content .wp-color-swatches{ grid-template-columns:repeat(4,1fr); }
  .wp-page-content .tiles-list-box .items-wrap{ grid-template-columns:repeat(2,1fr); }
}

/* request-quote form (request_custom.tpl, shared include) — two-column card: blue "why us"
   sidebar + the actual form, matching the "обратная связь" reference design. */
.wp-page-content .frm-section-head{ max-width:780px; margin:8px 0 0; }
/* this page (custom_vakumnie_packety.tpl) reorders its sections a lot, and the form's actual
   preceding sibling kept changing every time — two earlier fixes tied to specific preceding
   elements (a grey band, a title-box) silently stopped matching each time the layout was
   reordered, since neither was adjacent to .frm-section-head anymore. Anchored instead to
   "#custom-scrool", the fixed marker div that already sits immediately before this include
   (it's the scroll target for every "Оставить заявку" button on the page) — that adjacency
   can't drift when other sections get reordered, so this stays correct going forward. */
.wp-page-content #custom-scrool + .frm-section-head{ margin-top:24px; }
/* scrollIntoView({block:"start"}) (scroolTo(), used by every "Оставить заявку" button) aligns
   #custom-scrool with the very top of the viewport — right under the sticky .wp-header
   (~127px desktop / ~108px mobile), which otherwise covers the "Заказная продукция" heading
   right after the jump. scroll-margin-top leaves room for it. */
.wp-page-content #custom-scrool{ scroll-margin-top:140px; }
@media (max-width:900px){
  .wp-page-content #custom-scrool{ scroll-margin-top:120px; }
}
/* on custom_vakumnie_packety.tpl the form now sits inside .wp-bleed-panel (grey band with its
   own 40px top padding), so the extra 32px above stacks into an oversized gap — cancel it there. */
.wp-page-content .wp-bleed-panel #custom-scrool + .frm-section-head{ margin-top:0; }
.wp-page-content .frm-section-head .wp-h2{ font-size:24px; margin-bottom:8px; }
.wp-page-content .frm-section-head p{ margin:0; }
.wp-page-content .form-main-box{
  background:#fff; border:1px solid var(--wp-border); border-radius:var(--wp-radius-lg); margin:32px 0;
  position:relative; overflow:hidden; box-shadow:var(--wp-shadow-card);
}
/* inside .wp-bleed-panel (custom_vakumnie_packety.tpl) the panel's own 40px bottom padding
   already closes the section, so the card's own 32px margin-bottom would stack on top of it
   and make the bottom gap (72px) uneven against the top gap (40px) — cancel it there. */
.wp-page-content .wp-bleed-panel .form-main-box{ margin-bottom:0; }
.wp-page-content .form-main-box .frm-succefull-message{ display:none; text-align:center; padding:48px 24px; }
.wp-page-content .form-main-box.active .frm-succefull-message{ display:block; }
.wp-page-content .form-main-box.active .form-inner-wrap{ display:none; }
.wp-page-content .frm-succefull-message .frm-title{ font-size:18px; font-weight:700; color:var(--wp-ink); margin-bottom:12px; }
.wp-page-content .frm-succefull-message .elm-ico{ width:48px; height:48px; margin:0 auto; }
.wp-page-content .frm-succefull-message .elm-ico img{ width:100%; height:100%; }

.wp-page-content .frm-layout{ display:flex; flex-wrap:wrap; }

/* sidebar */
.wp-page-content .frm-aside{
  flex:0 0 320px; min-width:280px; box-sizing:border-box; padding:36px 32px;
  background:linear-gradient(180deg,var(--wp-blue-grad-top),var(--wp-blue-grad-bottom));
  display:flex; flex-direction:column; gap:26px;
}
.wp-page-content .frm-aside-title{ font-size:18px; font-weight:700; color:#fff; line-height:1.4; margin-bottom:8px; text-shadow:0 0 20px rgba(255,255,255,.45); }
.wp-page-content .frm-aside-text{ font-size:14px; color:rgba(255,255,255,.85); line-height:1.6; margin:0; text-shadow:0 0 14px rgba(255,255,255,.25); }
.wp-page-content .frm-aside-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.wp-page-content .frm-aside-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; font-weight:600; color:#fff; line-height:1.5; text-shadow:0 0 14px rgba(255,255,255,.25); }
.wp-page-content .frm-aside-list li svg{ flex:none; margin-top:2px; }
.wp-page-content .frm-aside-divider{ height:1px; background:rgba(255,255,255,.22); }
.wp-page-content .frm-aside-contacts{ display:flex; flex-direction:column; gap:10px; }
.wp-page-content .frm-aside-label{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); text-shadow:0 0 14px rgba(255,255,255,.25); }
.wp-page-content .frm-aside-phone{ font-size:18px; font-weight:800; color:#fff; text-shadow:0 0 14px rgba(255,255,255,.25); }
.wp-page-content .frm-aside-phone:hover{ color:#fff; opacity:.9; }
.wp-page-content .frm-aside-mail{ font-size:14px; font-weight:600; color:rgba(255,255,255,.9); text-shadow:0 0 14px rgba(255,255,255,.25); }
.wp-page-content .frm-aside-mail:hover{ color:#fff; }
.wp-page-content .frm-aside-hours{ font-size:13px; font-weight:600; color:rgba(255,255,255,.7); text-shadow:0 0 14px rgba(255,255,255,.25); }

/* form side */
.wp-page-content .frm-main{ flex:1 1 480px; min-width:320px; padding:36px; box-sizing:border-box; }
.wp-page-content .frm-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.wp-page-content .frm-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px 18px; }
.wp-page-content .frm-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px 18px; }
.wp-page-content .frm-grid-4 + .frm-grid-2,
.wp-page-content .frm-grid-3 + .frm-grid-2{ margin-top:20px; }
/* real <input type="radio"> choice pills (unlike .frm-chip, which is span-based with no actual
   input, for chips a script just relabels a hidden field) — used where the calculator logic
   itself needs to read the checked radio's value directly via the DOM. */
.wp-page-content .frm-radio-row{ display:flex; flex-wrap:wrap; gap:10px; }
.wp-page-content .frm-radio-pill{
  display:inline-flex; align-items:center; gap:8px; padding:0 16px; height:44px; box-sizing:border-box;
  border:1.5px solid var(--wp-border); border-radius:10px; cursor:pointer; font-size:14px; color:var(--wp-text);
  transition:border-color .15s ease, background-color .15s ease;
}
.wp-page-content .frm-radio-pill input{ accent-color:var(--wp-blue); width:16px; height:16px; margin:0; flex:none; }
.wp-page-content .frm-radio-pill:has(input:checked){ border-color:var(--wp-blue); background:rgba(46,127,203,.06); color:var(--wp-ink); font-weight:700; }
/* calculator note box ("Обратите внимание!") + price readout, used on the die-cut-handle-bags
   calculator (custom_virubnaya_ruchka_request.tpl) restyled to match the vpz calc form. */
.wp-page-content .frm-note-box{ background:var(--wp-bg-panel); border-radius:var(--wp-radius); padding:16px 18px; }
.wp-page-content .frm-note-title{ font-weight:700; font-size:14px; color:var(--wp-ink); margin-bottom:8px; }
.wp-page-content .frm-note-box p{ margin:0 0 8px; font-size:13px; color:var(--wp-text-muted); }
.wp-page-content .frm-note-box .list-dots{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--wp-text-muted); }
.wp-page-content .frm-price-tag{ display:flex; align-items:baseline; gap:8px; }
.wp-page-content .frm-price-label{ font-size:14px; color:var(--wp-text-muted); }
.wp-page-content .frm-price-value{ font-size:22px; font-weight:800; color:var(--wp-blue); }
.wp-page-content .frm-price-value:empty::after{ content:"—"; color:var(--wp-text-muted); font-weight:600; }
.wp-page-content .frm-field{ position:relative; }
.wp-page-content .frm-field-full{ margin-top:20px; }
.wp-page-content .frm-field-label{ display:block; font-size:13px; font-weight:700; color:var(--wp-ink); margin-bottom:7px; }
.wp-page-content .frm-req{ color:var(--wp-blue); }
.wp-page-content .form-input{
  width:100%; height:46px; border:1px solid var(--wp-border); border-radius:6px; padding:0 14px;
  font-size:14px; font-family:inherit; font-weight:500; color:var(--wp-ink); box-sizing:border-box; outline:none; background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.wp-page-content textarea.form-input{ width:100%; min-height:100px; padding:12px 14px; resize:vertical; line-height:1.6; }
.wp-page-content .form-input:focus{ border-color:var(--wp-blue); box-shadow:0 0 0 3px rgba(46,127,203,.14); }
.wp-page-content .form-input::placeholder{ color:var(--wp-text-muted); }
.wp-page-content .frm-message.text-alert{ display:none; font-size:12px; color:var(--wp-red); margin-top:4px; }
.wp-page-content .frm-field.inp-valid .frm-message.text-alert{ display:block; }
.wp-page-content .frm-field.inp-valid .form-input{ border-color:var(--wp-red); }

/* "Тип упаковки" chip picker */
.wp-page-content .frm-chip-block{ margin-top:20px; display:flex; flex-direction:column; gap:9px; }
.wp-page-content .frm-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.wp-page-content .frm-chip{
  padding:9px 16px; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; user-select:none;
  border:1px solid var(--wp-border); background:#fff; color:var(--wp-text-muted);
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.wp-page-content .frm-chip:hover{ border-color:var(--wp-border-hover); }
.wp-page-content .frm-chip.active{ border-color:var(--wp-blue); background:rgba(46,127,203,.08); color:var(--wp-blue-dark); }

/* file upload / dropzone */
.wp-page-content .frm-upload-block{ margin-top:20px; display:flex; flex-direction:column; gap:9px; }
.wp-page-content .frm-dropzone{
  display:flex; align-items:center; gap:14px; padding:16px; border:1.5px dashed var(--wp-border-hover);
  border-radius:6px; background:var(--wp-bg-panel); cursor:pointer; transition:border-color .2s ease, background-color .2s ease;
}
.wp-page-content .frm-dropzone:hover,
.wp-page-content .frm-dropzone.hover{ border-color:var(--wp-blue); background:rgba(46,127,203,.06); }
.wp-page-content .frm-dropzone-icon{
  flex:none; width:40px; height:40px; border-radius:6px; background:rgba(46,127,203,.1);
  display:flex; align-items:center; justify-content:center;
}
.wp-page-content .frm-dropzone-text{ display:flex; flex-direction:column; gap:3px; text-align:left; }
.wp-page-content .frm-dropzone-title{ font-size:14px; font-weight:700; color:var(--wp-ink); }
.wp-page-content .frm-dropzone-sub{ font-size:13px; font-weight:500; color:var(--wp-text-muted); }
.wp-page-content .frm-upload-progress{ display:none; }
.wp-page-content .frm-upload-progress:has(#uploadForm_Status:not(:empty)){ display:block; }
.wp-page-content .files-wrap .file-wrap{ margin-top:8px; }
.wp-page-content .frm-file-attachment{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--wp-ink); background:var(--wp-bg-panel); border-radius:6px; padding:8px 12px;
}
.wp-page-content .frm-upload-block .desc-wrap{ font-size:12px; color:var(--wp-text-muted); line-height:1.5; margin:0; }

.wp-page-content .frm-divider{ height:1px; background:var(--wp-border); margin-top:24px; }

/* submit row */
.wp-page-content .frm-submit-row{ margin-top:22px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.wp-page-content .field-submit .btn.frm-submit-btn{
  display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 32px; border:none; border-radius:10px;
  background:linear-gradient(135deg,var(--wp-btn-grad-a),var(--wp-btn-grad-b)); color:#fff; font-weight:700; font-size:15px; cursor:pointer;
}
.wp-page-content .field-submit .btn.frm-submit-btn:hover{ filter:brightness(1.12) saturate(1.1); color:#fff; }
.wp-page-content .frm-agree{ display:flex; align-items:center; gap:10px; cursor:pointer; max-width:380px; }
.wp-page-content .frm-agree-checkbox{ position:absolute; opacity:0; width:1px; height:1px; }
.wp-page-content .frm-agree-box{
  flex:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--wp-border-hover); background:#fff;
  display:flex; align-items:center; justify-content:center; transition:background-color .2s ease, border-color .2s ease;
}
.wp-page-content .frm-agree-box svg{ opacity:0; transition:opacity .2s ease; }
.wp-page-content .frm-agree.is-checked .frm-agree-box{ background:var(--wp-blue); border-color:var(--wp-blue); }
.wp-page-content .frm-agree.is-checked .frm-agree-box svg{ opacity:1; }
.wp-page-content .frm-agree-text{ font-size:13px; font-weight:600; color:var(--wp-text-muted); line-height:1.5; }

@media (max-width:820px){
  .wp-page-content .frm-aside{ flex-basis:100%; }
  .wp-page-content .frm-main{ flex-basis:100%; }
  .wp-page-content .frm-grid-2{ grid-template-columns:1fr; }
  .wp-page-content .frm-grid-4{ grid-template-columns:1fr 1fr; }
  .wp-page-content .frm-grid-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .wp-page-content .frm-grid-4{ grid-template-columns:1fr; }
  .wp-page-content .frm-grid-3{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .wp-page-content .info-contacts-panel-box{ padding:20px; }
  .wp-page-content .items-inner-wrap .items-wrap{ grid-template-columns:repeat(2,1fr); }
  .wp-page-content .tiles-box.items-info-panels .items-wrap{ grid-template-columns:1fr; }
  .wp-page-content .list-rows-3{ grid-template-columns:1fr; }
  .wp-page-content .items-categories .items-wrap{ grid-template-columns:1fr; }
  .wp-page-content .tiles-box.items-about .items-wrap,
  .wp-page-content .tiles-box.items-steps .items-wrap{ grid-template-columns:1fr; }
  .wp-page-content .wp-faq__grid{ grid-template-columns:1fr; }
}