/* DPC mobile experience
   Progressive enhancement only: desktop layout starts at 981px and is untouched. */

:root {
  --dpc-mobile-header: 72px;
  --dpc-mobile-dock: 72px;
}

html {
  scroll-padding-top: calc(var(--dpc-mobile-header) + 16px);
}

[id] {
  scroll-margin-top: calc(var(--dpc-mobile-header) + 16px);
}

#dpc-mobile-dock,
#dpc-filter-toolbar,
#dpc-filter-apply,
.dpc-mobile-start {
  display: none;
}

.dpc-responsive-details > summary {
  display: none;
}

@media (max-width: 980px) {
  :root {
    --dpc-mobile-header: calc(68px + env(safe-area-inset-top, 0px));
  }

  html {
    scroll-padding-top: calc(var(--dpc-mobile-header) + 12px);
  }

  body.dpc-nav-open,
  body.dpc-cart-open,
  body.dpc-checkout-open,
  body.dpc-constructor-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* One mobile header/menu system, including the 821–980px tablet gap. */
  #dpc-newhdr {
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(5, 8, 13, .96) !important;
  }

  #dpc-newhdr .nh-bar {
    min-height: 68px;
    padding: 7px 12px !important;
  }

  #dpc-newhdr .nh-logo {
    min-width: 52px;
    min-height: 44px;
  }

  #dpc-newhdr .nh-logo img {
    height: 48px !important;
  }

  #dpc-newhdr .nh-right {
    gap: 4px !important;
  }

  #dpc-newhdr .nh-mobile {
    height: calc(100dvh - var(--dpc-mobile-header));
    max-height: none !important;
    padding: 6px 14px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    background: #070b12;
    overscroll-behavior: contain;
  }

  #dpc-newhdr .nh-macc,
  #dpc-newhdr .nh-msub a {
    min-height: 48px;
  }

  #dpc-newhdr .nh-macc {
    padding: 13px 6px !important;
    font-size: 15px !important;
  }

  #dpc-newhdr .nh-msub a {
    display: flex !important;
    align-items: center;
    padding: 10px 14px !important;
  }

  #dpc-newhdr .nh-macc span {
    transition: transform .2s ease;
  }

  #dpc-newhdr .nh-macc[aria-expanded="true"] span {
    transform: rotate(45deg);
  }

  /* Retire all competing legacy floating widgets when the new layer is ready. */
  body.dpc-mobile-enhanced #dpc-mfab,
  body.dpc-mobile-enhanced #dpc-cart-fab,
  body.dpc-mobile-enhanced #podbor-sticky,
  body.dpc-mobile-enhanced #fab-wrap,
  body.dpc-mobile-enhanced #pp-sticky {
    display: none !important;
  }

  body.dpc-has-mobile-dock {
    padding-bottom: calc(var(--dpc-mobile-dock) + env(safe-area-inset-bottom, 0px)) !important;
  }

  #dpc-mobile-dock {
    position: fixed;
    z-index: 118;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: var(--dpc-mobile-dock);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    background: rgba(7, 11, 18, .96);
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 -12px 36px rgba(0, 0, 0, .36);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateY(0);
    transition: transform .22s ease, opacity .22s ease;
  }

  body.dpc-dock-suppressed #dpc-mobile-dock,
  body.dpc-cookie-open #dpc-mobile-dock,
  body.dpc-cart-open #dpc-mobile-dock,
  body.dpc-checkout-open #dpc-mobile-dock,
  body.dpc-constructor-modal-open #dpc-mobile-dock {
    opacity: 0;
    pointer-events: none;
    transform: translateY(110%);
  }

  body.dpc-filter-open #dpc-mobile-dock {
    opacity: 0;
    pointer-events: none;
    transform: translateY(110%);
    visibility: hidden;
  }

  #dpc-mobile-dock a,
  #dpc-mobile-dock button {
    min-height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    font: 800 14px/1.1 inherit;
    text-decoration: none;
    cursor: pointer;
  }

  #dpc-mobile-dock .dpc-dock-primary {
    background: #22d3ee;
    color: #050609;
  }

  #dpc-mobile-dock .dpc-dock-secondary {
    min-width: 104px;
    padding: 0 14px;
    color: #e6edf5;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
  }

  #dpc-mobile-dock.dpc-product-dock {
    grid-template-columns: minmax(0, .78fr) minmax(148px, 1fr);
  }

  #dpc-mobile-dock .dpc-dock-price {
    min-width: 0;
    padding-left: 4px;
  }

  #dpc-mobile-dock .dpc-dock-price small,
  #dpc-mobile-dock .dpc-dock-price strong {
    display: block;
  }

  #dpc-mobile-dock .dpc-dock-price small {
    color: #7f8a99;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  #dpc-mobile-dock .dpc-dock-price strong {
    overflow: hidden;
    color: #fff;
    font-size: clamp(16px, 5vw, 20px);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Forms: no iOS focus zoom and no controls under the software keyboard. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  #dpc-cart-drawer {
    width: min(100%, 430px) !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    padding-top: env(safe-area-inset-top, 0px);
  }

  #dpc-cart-foot {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #dpc-cart-foot input,
  #dpc-cart-send {
    min-height: 48px;
  }

  #dpc-co {
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top, 0px))) !important;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px 22px 0 0 !important;
    background: #0a0f18 !important;
    transform: translateY(105%) !important;
  }

  #dpc-co.open {
    transform: none !important;
  }

  #dpc-co-x {
    top: 8px !important;
    right: 8px !important;
    width: 44px;
    height: 44px;
  }

  #dpc-co .seg button,
  #dpc-co-pay {
    min-height: 48px;
  }

  /* Cookie consent becomes a compact, safe-area-aware sheet. */
  #dpc-cookie-banner {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #dpc-cookie-banner > div {
    align-items: stretch !important;
    gap: 12px !important;
  }

  #dpc-cookie-banner > div > div:first-child {
    min-width: 0 !important;
  }

  #dpc-cookie-banner button {
    min-height: 46px;
    flex: 1;
  }

  /* Shared spacing, readable line length and touch targets. */
  main.spa-page,
  main[id^="page-"] {
    max-width: 100vw;
  }

  footer {
    padding-top: 36px !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }

  footer > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  footer a.text-ink-600,
  footer a[href^="/legal/"] {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .faq-question,
  .faq-cat-btn,
  button[onclick^="toggleReviewText"] {
    min-height: 48px;
  }

  button[onclick^="toggleReviewText"] {
    padding: 8px 10px !important;
  }

  /* Homepage: one primary CTA, two compact secondary actions, one-line proof. */
  body.dpc-route-home #page-home section:first-of-type .w-full > .flex.flex-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }

  body.dpc-route-home #page-home section:first-of-type .w-full > .flex.flex-col > a {
    width: 100% !important;
    min-width: 0;
    min-height: 48px;
    padding: 12px 10px !important;
    font-size: 12px !important;
    line-height: 1.2;
    letter-spacing: .03em !important;
    text-align: center;
  }

  body.dpc-route-home #page-home section:first-of-type a[data-funnel-placement="hero_primary"] {
    grid-column: 1 / -1;
    min-height: 52px;
    font-size: 14px !important;
  }

  body.dpc-route-home #page-home section:first-of-type .flex.flex-wrap.sm\:flex-nowrap {
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  body.dpc-route-home #page-home section:first-of-type .flex.flex-wrap.sm\:flex-nowrap::-webkit-scrollbar {
    display: none;
  }

  /* Catalog: compact toolbar; full filters remain one tap away. */
  body.dpc-route-catalog #page-catalog > div > .text-center {
    margin-bottom: 26px !important;
  }

  body.dpc-route-catalog #page-catalog h1 {
    margin-bottom: 10px !important;
    font-size: clamp(34px, 10vw, 46px) !important;
  }

  #dpc-filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
  }

  #dpc-filter-toggle {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(34, 211, 238, .32);
    border-radius: 11px;
    color: #eafcff;
    background: rgba(34, 211, 238, .08);
    font: 800 13px/1 inherit;
  }

  #dpc-filter-summary {
    min-width: 0;
    overflow: hidden;
    color: #8f9aaa;
    font-size: 12px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.dpc-mobile-ready #dpc-catalog-filters {
    display: none;
  }

  body.dpc-mobile-ready #dpc-catalog-filters.open {
    display: block;
    margin-bottom: 16px !important;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    background: #0a0f18;
  }

  #dpc-catalog-filters .dpc-filter-group {
    justify-content: flex-start !important;
    margin-bottom: 12px;
  }

  #dpc-catalog-filters .dpc-filter-group > span:first-child {
    width: 100%;
    margin: 0 0 2px !important;
  }

  #dpc-filter-apply {
    width: 100%;
    min-height: 48px;
    margin-top: 2px;
    border: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #050609;
    background: #22d3ee;
    font: 800 14px/1 inherit;
  }

  /* Native details are used for secondary long-form content. */
  .dpc-responsive-details > summary {
    min-height: 48px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    color: #f4f7fb;
    background: rgba(255, 255, 255, .035);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
  }

  .dpc-responsive-details > summary::-webkit-details-marker {
    display: none;
  }

  .dpc-responsive-details > summary::after {
    content: '+';
    color: #22d3ee;
    font-size: 22px;
    font-weight: 400;
    transition: transform .2s ease;
  }

  .dpc-responsive-details[open] > summary::after {
    transform: rotate(45deg);
  }

  .dpc-responsive-details > .dpc-details-body {
    padding-top: 16px;
  }

  body.dpc-route-product #page-product {
    padding-bottom: 24px !important;
  }

  body.dpc-route-product .dpc-seo-content {
    padding: 22px 0 8px !important;
  }

  body.dpc-route-product .dpc-seo-content > .dpc-responsive-details {
    margin: 0;
  }

  body.dpc-route-landing main > section:first-child {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  body.dpc-route-landing main > section:first-child h1 {
    margin-bottom: 16px !important;
    font-size: clamp(32px, 9.5vw, 44px) !important;
  }

  body.dpc-route-landing main > section:first-child .prose {
    font-size: 15px !important;
    line-height: 1.62 !important;
  }

  body.dpc-route-landing main > section:first-child .dpc-responsive-details {
    margin-top: 16px;
  }

  body.dpc-route-landing main > section:first-child .flex.flex-wrap {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px !important;
    margin-top: 20px !important;
  }

  body.dpc-route-landing main > section:first-child .dpc-mobile-primary {
    order: -1;
    color: #050609 !important;
    background: #22d3ee !important;
    border-color: #22d3ee !important;
  }

  body.dpc-route-landing main > section:first-child .flex.flex-wrap > a[href="/catalog"] {
    color: #f4f7fb !important;
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    box-shadow: none !important;
  }

  /* FAQ categories remain compact and swipeable. */
  body.dpc-route-faq .dpc-faq-categories {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  body.dpc-route-faq .dpc-faq-categories::-webkit-scrollbar {
    display: none;
  }

  body.dpc-route-faq .faq-cat-btn {
    flex: 0 0 auto;
  }

  body.dpc-route-reviews main > section,
  body.dpc-route-reviews main > section + section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.dpc-route-reviews main h1 {
    font-size: 31px !important;
    line-height: 1.08;
  }
}

@media (max-width: 768px) {
  /* Constructor: controls first; decorative scene second; summary collapsible. */
  body.dpc-route-constructor .hero {
    padding: 28px 16px 24px !important;
  }

  body.dpc-route-constructor .hero-badge {
    margin-bottom: 14px !important;
    padding: 7px 12px !important;
    font-size: 10px !important;
  }

  body.dpc-route-constructor .hero h1 {
    margin-bottom: 12px !important;
    font-size: clamp(31px, 10vw, 42px) !important;
  }

  body.dpc-route-constructor .hero p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  body.dpc-route-constructor .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
    margin-top: 20px !important;
  }

  body.dpc-route-constructor .hero-stat {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    text-align: left !important;
    background: rgba(255, 255, 255, .025);
  }

  body.dpc-route-constructor .hero-stat-value {
    font-size: 20px !important;
  }

  body.dpc-route-constructor .hero-stat-label {
    margin-top: 2px !important;
    font-size: 9px !important;
  }

  .dpc-mobile-start {
    width: 100%;
    min-height: 50px;
    margin-top: 16px;
    border: 0;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #050609;
    background: #22d3ee;
    font: 800 14px/1 inherit;
  }

  body.dpc-route-constructor .constructor {
    padding-top: 12px !important;
  }

  body.dpc-route-constructor .constructor .left {
    order: 1 !important;
  }

  body.dpc-route-constructor .constructor .center {
    order: 2 !important;
  }

  body.dpc-route-constructor .constructor .right {
    order: 3 !important;
  }

  body.dpc-route-constructor .cat-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  body.dpc-route-constructor .cat {
    min-width: 0;
    min-height: 78px;
    padding: 10px !important;
    gap: 8px !important;
  }

  body.dpc-route-constructor .cat-icon {
    display: none !important;
  }

  body.dpc-route-constructor .cat-name,
  body.dpc-route-constructor .cat-sub {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.dpc-route-constructor .cat-name {
    font-size: 12px !important;
  }

  body.dpc-route-constructor .cat-sub {
    display: -webkit-box;
    font-size: 10px !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.dpc-route-constructor .stage {
    min-height: 370px !important;
    padding-top: 50px !important;
  }

  body.dpc-route-constructor .picker-close,
  body.dpc-route-constructor .modal-close {
    min-width: 44px;
    min-height: 44px;
  }

  body.dpc-route-constructor .summary-items {
    margin: 0 !important;
  }

  body.dpc-route-constructor .dpc-constructor-summary > summary {
    margin-bottom: 12px;
  }

  body.dpc-route-constructor .modal {
    align-items: flex-end !important;
    padding: max(10px, env(safe-area-inset-top, 0px)) 0 0 !important;
  }

  body.dpc-route-constructor .modal-card {
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top, 0px)));
    overflow-y: auto;
    padding: 24px 18px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px 22px 0 0 !important;
  }

  body.dpc-route-constructor .toggle-contact button,
  body.dpc-route-constructor .cta-order,
  body.dpc-route-constructor .cta-secondary {
    min-height: 48px;
  }

  /* Quiz controls and restart actions remain easy to tap. */
  body.dpc-route-podbor button,
  body.dpc-route-podbor a[role="button"] {
    min-height: 44px;
  }
}

@media (max-width: 360px) {
  #dpc-newhdr .nh-bar {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #dpc-newhdr .nh-logo img {
    height: 44px !important;
  }

  #dpc-mobile-dock {
    padding-left: 8px;
    padding-right: 8px;
  }

  #dpc-mobile-dock .dpc-dock-secondary {
    min-width: 94px;
    padding: 0 10px;
  }

  #dpc-mobile-dock a,
  #dpc-mobile-dock button {
    font-size: 13px;
  }

  body.dpc-route-constructor .cat-list {
    grid-template-columns: 1fr;
  }

  body.dpc-route-constructor .cat {
    min-height: 64px;
  }
}

@media (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  #dpc-newhdr .nh-mobile {
    height: calc(100dvh - var(--dpc-mobile-header));
  }

  #dpc-co,
  body.dpc-route-constructor .modal-card {
    max-height: calc(100dvh - 6px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #dpc-mobile-dock,
  #dpc-newhdr .nh-macc span,
  .dpc-responsive-details > summary::after {
    transition: none !important;
  }
}