.p-forShops { --fs-page: #fcfcfd; --fs-paper: #fff; --fs-subtle: #f7f7f8; --fs-subtle-cool: #f8f7fa; --fs-ink: #34363a; --fs-muted: #5e6268; --fs-border: #e3e4e7; --fs-icon: #70747a; --fs-brand: var(--accent); color: var(--fs-ink); background: var(--fs-page); padding-top: 50px; overflow: hidden; }
.p-forShops__container { width: min(100% - 32px, 1120px); margin-inline: auto; }
.p-forShops h1, .p-forShops h2, .p-forShops h3 { font-family: var(--kb-heading-font); letter-spacing: .03em; }
.p-forShops h1 { margin: 0; font-size: clamp(30px, 8.5vw, 58px); line-height: 1.25; }
.p-forShops h2 { margin: 0; font-size: clamp(25px, 6vw, 42px); line-height: 1.4; }
.p-forShops h3 { margin: 0; font-size: 20px; line-height: 1.45; }
.p-forShops p { color: var(--fs-muted); font-size: 15px; line-height: 1.9; }
.p-forShops__label { margin: 0 0 10px; color: var(--accent); font-size: 12px !important; font-weight: 800; letter-spacing: .16em; }
.p-forShopsHero { padding: 48px 0 66px; background: var(--fs-paper); }
.p-forShopsHero__grid, .p-forShopsFinal__grid { display: grid; gap: 26px; align-items: center; }
.p-forShopsHero__grid > *, .p-forShopsFinal__grid > *, .p-forShopsSplit > *, .p-forShopsOption > * { min-width: 0; }
.p-forShopsHero__visual { width: 100%; }
.p-forShopsHero__visual img { display: block; width: 100%; height: auto; border: 1px solid var(--fs-border); border-radius: 3px; }
.p-forShopsHero__visual p { margin: 7px 0 0; color: var(--fs-muted); font-size: 11px; line-height: 1.5; }
.p-forShopsHero__copy { margin: 18px 0 0; color: var(--fs-brand); font-size: clamp(19px, 4.5vw, 27px); font-weight: 700; line-height: 1.6; }
.p-forShopsHero__body > p:not(.p-forShops__label):not(.p-forShopsHero__copy):not(.p-forShopsHero__note) { margin: 16px 0 0; max-width: 600px; }
.p-forShopsButton { display: inline-flex; gap: 10px; align-items: center; justify-content: center; min-height: 50px; margin-top: 21px; padding: 12px 22px; border: 1px solid var(--btn-primary); border-radius: 2px; background: var(--btn-primary); color: #fff; font-weight: 800; }
.p-forShopsButton:hover { background: var(--btn-primary-hover); }
.p-forShopsHero__note, .p-forShopsCaption, .p-forShopsLegend { font-size: 12px !important; }
.p-forShopsSection { padding: 66px 0; }
.p-forShopsSection--products, .p-forShopsSection--instagram, .p-forShopsSection--options { background: var(--fs-paper); }
.p-forShopsSplit { display: grid; gap: 28px; align-items: center; }
.p-forShopsSplit p:not(.p-forShops__label) { margin: 16px 0 0; }
.p-forShopsPlaceholder { display: grid; min-height: 220px; margin: 0; place-content: center; gap: 12px; padding: 24px; border: 1px dashed #cdd0d5; background: var(--fs-subtle); color: var(--fs-muted); text-align: center; }
.p-forShopsPlaceholder__mark { font-size: 31px; opacity: .7; }
.p-forShopsPlaceholder figcaption { display: grid; gap: 4px; font-size: 12px; line-height: 1.55; }
.p-forShopsPlaceholder figcaption strong { font-size: 10px; letter-spacing: .12em; }
.p-forShopsPlaceholder--hero, .p-forShopsPlaceholder--final { min-height: 340px; }
.p-forShopsPlaceholder--screen { min-height: 245px; }
.p-forShopsScreen { width: 100%; margin: 0; }
.p-forShopsScreen img { display: block; width: 100%; height: auto; border: 1px solid var(--fs-border); border-radius: 3px; }
.p-forShopsPlaceholder--post { min-height: 300px; max-width: 390px; }
.p-forShopsSection__intro { max-width: 650px; margin: 14px 0 0; }
.p-forShopsFlow { --p-forShops-flow-image: none; position: relative; display: grid; gap: 16px; margin-top: 28px; padding: 20px; background-color: var(--fs-subtle); background-image: var(--p-forShops-flow-image); background-position: center; background-size: cover; overflow: hidden; }
.p-forShopsFlow::before { position: absolute; inset: 0; background: rgba(255, 255, 255, .62); content: ""; }
.p-forShopsFlow__step { position: relative; z-index: 1; min-height: 188px; padding: 21px 20px 19px; border: 1px solid var(--fs-border); background: rgba(255, 255, 255, .94); box-shadow: 0 5px 15px rgba(52, 54, 58, .05); }
.p-forShopsFlow__number { display: block; color: var(--fs-brand); font-size: 16px; font-weight: 800; letter-spacing: .12em; }
.p-forShopsFlow__step > i { display: block; margin: 17px 0 12px; color: var(--fs-icon); font-size: 22px; }
.p-forShopsFlow__step p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; }
.p-forShopsExample { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; align-items: center; }
.p-forShopsExample .p-forShopsPlaceholder--featured { grid-column: 1 / -1; min-height: 300px; }
.p-forShopsDefinition { display: grid; gap: 1px; margin: 20px 0 0; background: var(--fs-border); }
.p-forShopsDefinition div { display: grid; grid-template-columns: 74px 1fr; background: var(--fs-paper); }
.p-forShopsDefinition dt, .p-forShopsDefinition dd { margin: 0; padding: 11px 13px; font-size: 14px; }
.p-forShopsDefinition dt { font-weight: 800; }
.p-forShopsFree__lead, .p-forShopsFinal__free { color: var(--fs-brand) !important; font-size: 21px !important; font-weight: 800; }
.p-forShopsFree__intro { max-width: 760px; margin: 12px 0 0; }
.p-forShopsFree__list { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--fs-border); border-left: 1px solid var(--fs-border); }
.p-forShopsFree__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 11px; padding: 20px 17px; border-right: 1px solid var(--fs-border); border-bottom: 1px solid var(--fs-border); background: var(--fs-paper); }
.p-forShopsFree__list i { padding-top: 4px; color: var(--fs-brand); font-size: 16px; }
.p-forShopsFree__list h3 { font-size: 16px; }
.p-forShopsFree__list strong { display: block; margin-top: 5px; color: var(--fs-ink); font-size: 14px; line-height: 1.5; }
.p-forShopsFree__list p { margin: 5px 0 0; font-size: 13px; line-height: 1.75; }
.p-forShopsFree__external { display: flex; gap: 9px; align-items: flex-start; margin: 18px 0 0; color: var(--fs-muted); font-size: 13px !important; line-height: 1.7 !important; }
.p-forShopsFree__external i { padding-top: 4px; color: var(--fs-brand); }
.p-forShopsFree__message { margin: 28px 0 0; color: var(--fs-brand) !important; font-size: clamp(19px, 5vw, 28px) !important; font-weight: 800; }
.p-forShopsPlans__hint { display: none; }
.p-forShopsPlans { max-width: 100%; min-width: 0; margin-top: 24px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--fs-border); background: var(--fs-paper); }
.p-forShopsPlans table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; text-align: center; }
.p-forShopsPlans th, .p-forShopsPlans td { padding: 14px 10px; border-bottom: 1px solid var(--fs-border); border-right: 1px solid var(--fs-border); }
.p-forShopsPlans th:first-child { width: 142px; min-width: 142px; text-align: left; white-space: normal; }
.p-forShopsPlans thead th { background: var(--fs-subtle); font-family: var(--kb-heading-font); font-size: 15px; }
.p-forShopsOption { display: grid; gap: 25px; padding: 38px 0; border-bottom: 1px solid var(--fs-border); }
.p-forShopsOption__number { margin: 0 0 8px; color: var(--accent) !important; font-size: 12px !important; font-weight: 800; letter-spacing: .13em; }
.p-forShopsOption__price { color: var(--fs-brand) !important; font-weight: 800; }
.p-forShopsOption__support { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fs-border); }
.p-forShopsOption__support > i { padding-top: 3px; color: var(--fs-brand); font-size: 16px; }
.p-forShopsOption__support h4, .p-forShopsOrderFeatures h4 { margin: 0; color: var(--fs-ink); font-size: 14px; line-height: 1.5; }
.p-forShopsOption__support p { margin: 4px 0 0; font-size: 13px; line-height: 1.75; }
.p-forShopsOrderRates { display: grid; gap: 1px; margin: 16px 0 0; border: 1px solid var(--fs-border); background: var(--fs-border); }
.p-forShopsOrderRates > div { padding: 12px 14px; background: var(--fs-paper); }
.p-forShopsOrderRates span { color: var(--fs-brand); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.p-forShopsOrderRates p { margin: 4px 0 0; color: var(--fs-muted); font-size: 12px; line-height: 1.55; }
.p-forShopsOrderRates strong { display: block; margin-top: 2px; color: var(--fs-ink); font-size: 15px; line-height: 1.5; }
.p-forShopsOrderRates small { display: block; margin-top: 4px; color: var(--fs-muted); font-size: 11px; line-height: 1.5; }
.p-forShopsOrderRates__note { margin: 8px 0 0 !important; font-size: 11px !important; line-height: 1.6 !important; }
.p-forShopsOrderFeatures__title { margin: 22px 0 0; color: var(--fs-ink); font-size: 17px; line-height: 1.5; }
.p-forShopsOrderFeatures { display: grid; gap: 1px; margin-top: 18px; border-top: 1px solid var(--fs-border); border-left: 1px solid var(--fs-border); }
.p-forShopsOrderFeatures li { display: grid; grid-template-columns: 21px minmax(0, 1fr); gap: 8px; padding: 13px 11px; border-right: 1px solid var(--fs-border); border-bottom: 1px solid var(--fs-border); }
.p-forShopsOrderFeatures i { padding-top: 3px; color: var(--fs-brand); font-size: 14px; }
.p-forShopsOrderFeatures p { margin: 3px 0 0; font-size: 12px; line-height: 1.65; }
.p-forShopsTextLink { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; border-bottom: 1px solid currentColor; color: var(--fs-brand); font-size: 14px; font-weight: 800; line-height: 1.6; }
.p-forShopsSamples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.p-forShopsSamples__item { margin: 0; }
.p-forShopsSamples__item img { display: block; width: 100%; height: auto; border: 1px solid var(--fs-border); border-radius: 3px; }
.p-forShopsSamples__item figcaption { padding-top: 6px; color: var(--fs-muted); font-size: 11px; line-height: 1.4; text-align: center; }
.p-forShopsEntry__sub { margin: 10px 0 0; color: var(--fs-brand) !important; font-size: 20px !important; font-weight: 800; }
.p-forShopsEntry__flowTitle { margin: 30px 0 0; color: var(--fs-ink); font-size: 17px !important; font-weight: 800; }
.p-forShopsEntry__flowTitle + .p-forShopsFlow { margin-top: 12px; }
.p-forShopsEntry__note { margin-top: 24px; padding: 22px; border: 1px solid var(--fs-border); background: var(--fs-paper); }
.p-forShopsEntry__body { min-width: 0; }
.p-forShopsEntry__note h3 { font-size: 19px; }
.p-forShopsEntry__detail { margin: 10px 0 0 !important; color: var(--fs-ink) !important; font-size: 15px !important; font-weight: 800; }
.p-forShopsEntry__body > p:not(.p-forShopsEntry__selfLead) { margin: 5px 0 0; font-size: 13px; }
.p-forShopsEntry__button { margin-top: 16px; }
.p-forShopsEntry__selfLead { margin: 22px 0 0 !important; color: var(--fs-muted) !important; font-size: 13px !important; font-weight: 800; }
.p-forShopsEntry__selfLinks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.p-forShopsEntry__selfLinks .p-forShopsTextLink { margin-top: 7px; }
.p-forShopsEntry__visual { display: none; margin: 0; }
.p-forShopsEntry__visual img { display: block; width: 100%; height: auto; }
.p-forShopsFinal { padding: 66px 0; background: var(--fs-subtle-cool); }
.p-forShopsFinal__visual { width: 100%; margin: 0; }
.p-forShopsFinal__visual img { display: block; width: 100%; height: auto; border-radius: 3px; }
.p-forShopsFinal p:not(.p-forShops__label):not(.p-forShopsFinal__free) { margin: 16px 0 0; }
@media (max-width: 759px) { .p-forShopsFlow { gap: 18px; padding: 16px; } .p-forShopsFlow__step { min-height: 0; padding: 19px 18px; } .p-forShopsFlow__step:not(:last-child)::after { position: absolute; left: 27px; bottom: -18px; z-index: 2; width: 1px; height: 18px; background: #a0a4aa; content: ""; } .p-forShopsFlow__step:not(:last-child)::before { position: absolute; left: 24px; bottom: -19px; z-index: 2; width: 7px; height: 7px; border-right: 1px solid #a0a4aa; border-bottom: 1px solid #a0a4aa; content: ""; transform: rotate(45deg); } .p-forShopsFlow__step > i { display: inline-block; margin: 12px 9px 0 0; vertical-align: middle; } .p-forShopsFlow__step h3 { display: inline-block; margin-top: 12px; vertical-align: middle; } }
@media (max-width: 759px) { .p-forShopsPlans__hint { display: block; margin: 16px 0 -12px; color: var(--fs-muted); font-size: 12px; line-height: 1.6; text-align: right; } }
@media (max-width: 759px) { .p-forShopsPlans th:first-child { position: sticky; left: 0; z-index: 2; width: 118px; min-width: 118px; background: var(--fs-paper); box-shadow: 1px 0 0 var(--fs-border); } .p-forShopsPlans thead th:first-child { z-index: 3; background: var(--fs-subtle); } }
@media (min-width: 540px) and (max-width: 759px) { .p-forShopsFree__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .p-forShops { padding-top: 50px; } .p-forShopsHero { padding: 82px 0; } .p-forShopsHero__grid, .p-forShopsFinal__grid { grid-template-columns: minmax(0, .95fr) minmax(390px, 1.05fr); gap: 60px; } .p-forShopsSplit { grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: 58px; } .p-forShopsSection { padding: 100px 0; } .p-forShopsSection--instagram .p-forShopsSplit { grid-template-columns: minmax(300px, .7fr) minmax(0, 1fr); } .p-forShopsFlow { grid-template-columns: repeat(4, 1fr); gap: 22px; min-height: 322px; padding: 40px 30px; } .p-forShopsFlow--entry { grid-template-columns: repeat(5, 1fr); min-height: 286px; padding-inline: 24px; } .p-forShopsFlow__step { min-height: 205px; } .p-forShopsFlow__step:nth-child(odd) { transform: translateY(0); } .p-forShopsFlow__step:nth-child(even) { transform: translateY(30px); } .p-forShopsFlow--entry .p-forShopsFlow__step { min-height: 190px; padding: 18px 16px; } .p-forShopsFlow--entry .p-forShopsFlow__step:nth-child(2), .p-forShopsFlow--entry .p-forShopsFlow__step:nth-child(4) { transform: translateY(24px); } .p-forShopsFlow--entry .p-forShopsFlow__step:nth-child(3) { transform: translateY(10px); } .p-forShopsExample { grid-template-columns: .72fr 1.45fr .72fr; gap: 20px; } .p-forShopsExample .p-forShopsPlaceholder--featured { grid-column: auto; min-height: 420px; } .p-forShopsFree__lead { font-size: 27px !important; } .p-forShopsFree__intro { font-size: 16px !important; line-height: 1.9; } .p-forShopsFree__list { grid-template-columns: repeat(3, 1fr); } .p-forShopsFree__list li { grid-template-columns: 25px minmax(0, 1fr); } .p-forShopsOption { grid-template-columns: 1fr 1.15fr; align-items: center; gap: 70px; padding: 58px 0; } .p-forShopsOrderFeatures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p-forShopsOption--reverse > :first-child { order: 2; } .p-forShopsOption--reverse > :last-child { order: 1; } .p-forShopsSamples { grid-template-columns: repeat(4, 1fr); } .p-forShopsEntry__note { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 34px; align-items: center; } .p-forShopsEntry__visual { display: block; width: min(100%, 420px); justify-self: end; } }