/**
 * Design overrides — Design Principles (4px grid, single accent, depth, typography).
 * Loads after webman-agency.webflow.shared.*.css. Safe to remove to restore original.
 */

/* ---------------------------------------------------------------------------
   Design tokens: single accent, contrast hierarchy, depth
   --------------------------------------------------------------------------- */
:root {
  --design-fg: #111111;
  --design-secondary: #333333;
  --design-muted: #515157;
  --design-faint: #919197;
  --design-border: rgba(0, 0, 0, 0.08);
  --design-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Decorative banner gradient — restored rainbow (from Webflow shared CSS) */
/* Override removed so .gradient-overlay-color keeps:
   linear-gradient(-100deg, #ff0061f7, #ffc527f7 40%, #34e678f7 70%, #2e00cbfc) */
/* To use single tint again, uncomment:
.gradient-overlay-color,
.gradient-overlay-color._100-color {
  background-image: linear-gradient(180deg, rgba(255, 0, 97, 0.12) 0%, transparent 50%);
}
*/

/* ---------------------------------------------------------------------------
   4px grid: section padding
   --------------------------------------------------------------------------- */
.section {
  padding: 144px 32px;
}

.section.less-padding {
  padding-top: 72px;
  padding-bottom: 72px;
}

.section.less-padding.down {
  padding-bottom: 64px;
}

.section.less-padding.down.make-white {
  padding-top: 160px;
}

.section.gray.insta {
  padding-top: 80px;
  padding-bottom: 80px;
}

.section.gray.with-bottom-image {
  padding-top: 96px;
}

.section.more-top {
  padding-top: 168px;
}

.section.more-bottom-second {
  padding-top: 192px;
}

.section.simple {
  padding-top: 64px;
  padding-bottom: 64px;
}

.section.color {
  padding-top: 32px;
  padding-bottom: 32px;
}

.section.top-half {
  padding-top: 72px;
  padding-bottom: 120px;
}

.section.for-works {
  padding-top: 72px;
  padding-bottom: 64px;
}

.section.more-top-padding {
  padding-top: 248px;
  padding-bottom: 248px;
}

/* ---------------------------------------------------------------------------
   4px grid + symmetrical padding: nav, buttons
   --------------------------------------------------------------------------- */
.nav-link {
  margin-right: 8px;
  padding: 16px 12px;
  font-size: 13px;
}

.nav-link.dark.single {
  padding: 12px 24px;
  border-radius: 8px;
  margin-left: 8px;
  font-size: 12px;
}

/* Buttons: 4px grid, symmetrical padding, single radius scale */
.button {
  padding: 16px 24px;
  border-radius: 8px;
  font-size: 14px;
}

.button.submit {
  border-radius: 8px;
  padding-left: 48px;
  margin-left: 16px;
}

.button.quick-view-button {
  padding-top: 12px;
  padding-bottom: 12px;
}

.button.quick-view-button.circle {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.button.quick-view-button.margin-himself {
  margin-top: 24px;
}

/* Webflow default button (forms etc.) */
.w-button {
  padding: 8px 16px;
}

/* ---------------------------------------------------------------------------
   Border radius: single scale (4, 6, 8px); no 20px on controls
   --------------------------------------------------------------------------- */
.info-wrapper {
  border-radius: 8px;
}

.work-image {
  border-radius: 8px;
}

.pricing-wrapper {
  border-radius: 8px;
  padding: 32px;
}

.sale {
  border-radius: 8px;
  padding: 6px 16px 4px;
}

.layout-title {
  border-radius: 4px;
  padding: 8px 20px 6px;
}

/* ---------------------------------------------------------------------------
   Top title margins (4px grid)
   --------------------------------------------------------------------------- */
.top-title {
  margin-bottom: 80px;
}

.top-title.half {
  margin-bottom: 40px;
}

.top-title.half.centers {
  margin-bottom: 8px;
}

.top-title.flex.less-margin {
  margin-bottom: 40px;
}

.top-title.flex.in-small-section.add-margin {
  margin-bottom: 80px;
}

.top-title.flex.half-margin {
  margin-bottom: 40px;
}

.top-title.half-left.no-margin {
  margin-bottom: 16px;
}

.top-title.half-left.in-faq {
  margin-bottom: 40px;
}

.top-title.blog-part {
  margin-bottom: 16px;
}

.top-title.zero-margin {
  margin-bottom: -64px;
}

/* ---------------------------------------------------------------------------
   Typography: scale 11–14–16–18–24–32, headline letter-spacing
   --------------------------------------------------------------------------- */
.top-title-text.no-margin.with-background,
.top-title-text.biggest,
.title-banner-1 {
  letter-spacing: -0.02em;
}

.sub-logo-text {
  font-size: 16px;
}

.no-item-found {
  font-size: 14px;
}

.button {
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
   Depth: consistent single shadow for nav; cards keep border
   --------------------------------------------------------------------------- */
.navigation.second {
  box-shadow: var(--design-shadow);
}

/* ---------------------------------------------------------------------------
   Form fields: 4px grid spacing
   --------------------------------------------------------------------------- */
.text-field.full {
  margin-bottom: 16px;
}

.text-field.area {
  margin-bottom: 16px;
  padding-bottom: 80px;
}

/* ---------------------------------------------------------------------------
   Features / process: 4px grid
   --------------------------------------------------------------------------- */
.features-wrapper-third {
  margin-bottom: 32px;
}

.features-circle-icon {
  margin-right: 16px;
}

.brand-logo.in-footer {
  margin-bottom: 16px;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

/* ---------------------------------------------------------------------------
   Project card title: use design token instead of inline style
   --------------------------------------------------------------------------- */
.project-title {
  color: var(--design-fg) !important;
}

/* ---------------------------------------------------------------------------
   Screen-reader only utility (a11y)
   --------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Animation: respect reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gradient-overlay-color,
  .gradient-overlay-color._100-color,
  .navigation.second,
  .button,
  .nav-link {
    transition-duration: 0.01ms;
  }
}

/* ---------------------------------------------------------------------------
   Project page (project.html): cards always in hover state, hide "Цветы и Мед"
   --------------------------------------------------------------------------- */
html[data-wf-page="60a0d53a9dd86f8dfb2e1d30"] .works-content .product-circle-wrapper,
html[data-wf-page="60a0d53a9dd86f8dfb2e1d30"] .works-content .project-title.white {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0) !important;
  -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0) !important;
}

/* Hide default title so only overlay (white) title is visible on all cards */
html[data-wf-page="60a0d53a9dd86f8dfb2e1d30"] .works-wrapper > .project-title:not(.white) {
  display: none !important;
}

/* Hide the "Цветы и Мед" card entirely */
html[data-wf-page="60a0d53a9dd86f8dfb2e1d30"] .works-item:has(a[href*="cvety-i-med"]) {
  display: none !important;
}