/* Shared product / Hardware mobile — Mobile ver1 Offer + highlights + cards.
   Wired on POS, Kiosk, Pecan Mobile, Payments, Rear, Gift, Payroll, Reports, Hardware. */
@media (max-width: 992px) {
  /* —— Product Offer heroes —— */
  .v2--pos .v2-hero,
  .v2--kiosk .v2-hero,
  .v2--mobile .v2-hero,
  .v2--payments .v2-hero,
  .v2--rear .v2-hero,
  .v2--gift .v2-hero,
  .v2--payroll .v2-hero,
  .v2--reporting .v2-hero,
  .v2--hardware .v2-hero {
    min-height: 0;
    align-items: stretch;
    padding: 32px 0 24px;
  }

  .v2--pos .v2-hero__inner,
  .v2--kiosk .v2-hero__inner,
  .v2--mobile .v2-hero__inner,
  .v2--payments .v2-hero__inner,
  .v2--rear .v2-hero__inner,
  .v2--gift .v2-hero__inner,
  .v2--payroll .v2-hero__inner,
  .v2--reporting .v2-hero__inner,
  .v2--hardware .v2-hero__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px;
    justify-items: stretch;
  }

  .v2--pos .v2-hero__copy,
  .v2--kiosk .v2-hero__copy,
  .v2--mobile .v2-hero__copy,
  .v2--payments .v2-hero__copy,
  .v2--rear .v2-hero__copy,
  .v2--gift .v2-hero__copy,
  .v2--payroll .v2-hero__copy,
  .v2--reporting .v2-hero__copy,
  .v2--hardware .v2-hero__copy {
    gap: 16px;
    width: 100%;
    max-width: 358px;
    margin: 0 auto;
    order: 1;
  }

  .v2--pos .v2-hero__device,
  .v2--kiosk .v2-hero__device,
  .v2--mobile .v2-hero__device,
  .v2--payments .v2-hero__device,
  .v2--rear .v2-hero__device,
  .v2--gift .v2-hero__device,
  .v2--payroll .v2-hero__device,
  .v2--reporting .v2-hero__device,
  .v2--hardware .v2-hero__device,
  .v2--mobile .v2-hero__media,
  .v2--kiosk .v2-hero__media,
  .v2--rear .v2-hero__media {
    order: 2;
    width: 100%;
    max-width: 358px;
    height: auto;
    margin: 0 auto;
    aspect-ratio: auto;
  }

  .v2--pos .v2-hero__device img,
  .v2--kiosk .v2-hero__device img,
  .v2--mobile .v2-hero__device img,
  .v2--payments .v2-hero__device img,
  .v2--rear .v2-hero__device img,
  .v2--gift .v2-hero__device img,
  .v2--payroll .v2-hero__device img,
  .v2--reporting .v2-hero__device img,
  .v2--hardware .v2-hero__device img,
  .v2--mobile .v2-hero__media img,
  .v2--kiosk .v2-hero__media img,
  .v2--rear .v2-hero__media img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .v2--pos .v2-hero h1,
  .v2--kiosk .v2-hero h1,
  .v2--mobile .v2-hero h1,
  .v2--payments .v2-hero h1,
  .v2--rear .v2-hero h1,
  .v2--gift .v2-hero h1,
  .v2--payroll .v2-hero h1,
  .v2--reporting .v2-hero h1,
  .v2--hardware .v2-hero h1 {
    font-size: 32px;
    max-width: none;
  }

  .v2--pos .v2-hero__lead,
  .v2--kiosk .v2-hero__lead,
  .v2--mobile .v2-hero__lead,
  .v2--payments .v2-hero__lead,
  .v2--rear .v2-hero__lead,
  .v2--gift .v2-hero__lead,
  .v2--payroll .v2-hero__lead,
  .v2--reporting .v2-hero__lead,
  .v2--hardware .v2-hero__lead {
    font-size: 14px;
    max-width: none;
  }

  .v2--pos .v2-hero__ctas,
  .v2--kiosk .v2-hero__ctas,
  .v2--mobile .v2-hero__ctas,
  .v2--payments .v2-hero__ctas,
  .v2--rear .v2-hero__ctas,
  .v2--gift .v2-hero__ctas,
  .v2--payroll .v2-hero__ctas,
  .v2--reporting .v2-hero__ctas,
  .v2--hardware .v2-hero__ctas {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .v2--pos .v2-hero__ctas .v2-btn,
  .v2--kiosk .v2-hero__ctas .v2-btn,
  .v2--mobile .v2-hero__ctas .v2-btn,
  .v2--payments .v2-hero__ctas .v2-btn,
  .v2--rear .v2-hero__ctas .v2-btn,
  .v2--gift .v2-hero__ctas .v2-btn,
  .v2--payroll .v2-hero__ctas .v2-btn,
  .v2--reporting .v2-hero__ctas .v2-btn,
  .v2--hardware .v2-hero__ctas .v2-btn {
    width: 100%;
    justify-content: center;
    min-height: 40px;
  }

  /* POS: title/CTAs → device → stats (stats live inside copy; hoist with contents) */
  .v2--pos .v2-hero__inner {
    display: flex;
    flex-direction: column;
  }

  .v2--pos .v2-hero__copy {
    display: contents;
  }

  .v2--pos .v2-hero__intro {
    order: 1;
  }

  .v2--pos .v2-hero__ctas {
    order: 2;
  }

  .v2--pos .v2-hero__device--pos {
    order: 3;
  }

  /* POS stats: 3-up icon-above (override v2.css column stack) */
  .v2--pos .v2-pos-stats {
    order: 4;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    max-width: 358px;
    margin: 0 auto;
    width: 100%;
  }

  .v2--pos .v2-pos-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 0;
  }

  .v2--pos .v2-pos-stat__icon {
    width: 48px;
    height: 48px;
  }

  .v2--pos .v2-pos-stat__text {
    gap: 4px;
  }

  .v2--pos .v2-pos-stat__text strong {
    font: 600 14px/1.2 var(--v2-font);
  }

  .v2--pos .v2-pos-stat__text span {
    font: 400 12px/1.2 var(--v2-font);
  }

  /* —— Highlights / tabs carousel chrome —— */
  .v2-pos-highlights,
  .v2-section:has(.v2-pos-tabs) {
    padding: 32px 0;
  }

  .v2-pos-highlights__head {
    gap: 12px;
    margin-bottom: 24px;
  }

  .v2-pos-highlights__head .v2-h2 {
    font-size: 20px;
  }

  .v2-pos-tabs {
    gap: 24px;
  }

  .v2-pos-tabs__nav {
    display: none;
  }

  .v2-pos-tabs__mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }

  /* Figma Component 12 chrome: 44 circle, stroke 2, shaft arrow 16×14
     Enabled #7ab9de (--v2-blue-200); disabled #d8dde5 (--v2-gray-200). */
  .v2-pos-tabs__prev,
  .v2-pos-tabs__next {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--v2-blue-200);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
  }

  .v2-pos-tabs__prev:disabled,
  .v2-pos-tabs__next:disabled {
    border-color: var(--v2-gray-200);
    background: transparent;
    cursor: default;
    pointer-events: none;
  }

  .v2-pos-tabs__arrow {
    display: flex;
    width: 16px;
    height: 14px;
    color: var(--v2-blue-200);
  }

  .v2-pos-tabs__arrow-svg {
    display: block;
    width: 16px;
    height: 14px;
  }

  .v2-pos-tabs__prev:disabled .v2-pos-tabs__arrow,
  .v2-pos-tabs__next:disabled .v2-pos-tabs__arrow {
    color: var(--v2-gray-200);
  }

  /* SVG points right; flip for Previous */
  .v2-pos-tabs__prev .v2-pos-tabs__arrow {
    transform: scaleX(-1);
  }

  /* Figma Component 12: SMART_ANIMATE 0.3s LINEAR on CHANGE_TO */
  /* Figma chrome label: 16 Medium — num #4097cb, title #3f454e */
  .v2-pos-tabs__label {
    flex: 1 1 auto;
    position: relative;
    min-height: 36px;
    padding: 8px 12px;
    font: 500 16px/1.2 var(--v2-font);
    color: var(--v2-gray-800);
    text-align: center;
  }

  .v2-pos-tabs__label-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    transition: opacity 0.3s linear;
  }

  .v2-pos-tabs__label-layer.is-active {
    opacity: 1;
  }

  .v2-pos-tabs__label-layer.is-snap {
    transition: none;
  }

  .v2-pos-tabs__label-num {
    color: var(--v2-blue-400);
    font-weight: 500;
  }

  /* Keep the same layout for active + inactive so opacity crossfade
     isn't killed by display/grid↔flex snaps (autoplay & prev/next). */
  .v2-pos-panel.is-active,
  .v2-pos-tabs--animated .v2-pos-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    text-align: center;
  }

  /*
    Figma Component 12: SMART_ANIMATE 0.3s LINEAR —
    full-card opacity dissolve (same idea as the heading layers) + height.
    Panels stay absolute; JS owns shell height — no relative↔absolute flip.
  */
  .v2-pos-tabs--animated .v2-pos-tabs__panels {
    position: relative;
    display: block;
  }

  .v2-pos-tabs--animated .v2-pos-tabs__panels.is-dissolving {
    overflow: hidden;
    transition: height 0.3s linear;
  }

  .v2-pos-tabs--animated .v2-pos-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
    transition:
      opacity 0.3s linear,
      visibility 0s linear 0.3s;
  }

  .v2-pos-tabs--animated .v2-pos-panel.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 0.3s linear,
      visibility 0s linear 0s;
  }

  .v2-pos-tabs--animated .v2-pos-panel.is-snap {
    transition: none;
  }

  .v2-pos-panel__copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    flex: 0 0 auto;
    width: 100%;
  }

  .v2-pos-panel__copy h3 {
    font: 600 20px/1.2 var(--v2-font);
    color: var(--v2-blue-500);
    margin: 0;
  }

  .v2-pos-panel__copy p {
    font: 400 14px/1.2 var(--v2-font);
    color: var(--v2-gray-600);
    margin: 0;
  }

  .v2-pos-panel__media {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 310 / 205;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .v2-pos-panel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /*
   * Rear Display highlights: assets are full screen+stand (~882×800).
   * Shared 310/205 + cover cropped the pedestal (esp. Custom Branding).
   */
  .v2--rear .v2-pos-panel__media {
    aspect-ratio: 882 / 800;
    background: transparent;
  }

  .v2--rear .v2-pos-panel__media img {
    object-fit: contain;
    object-position: center;
  }

  @media (prefers-reduced-motion: reduce) {
    .v2-pos-tabs--animated .v2-pos-tabs__panels.is-dissolving,
    .v2-pos-tabs--animated .v2-pos-panel {
      transition: none;
    }
  }

  /* —— Section headings (Mobile ver1 ~20) —— */
  .v2--pos .v2-section .v2-h2,
  .v2--kiosk .v2-section .v2-h2,
  .v2--mobile .v2-section .v2-h2,
  .v2--payments .v2-section .v2-h2,
  .v2--rear .v2-section .v2-h2,
  .v2--gift .v2-section .v2-h2,
  .v2--payroll .v2-section .v2-h2,
  .v2--reporting .v2-section .v2-h2,
  .v2--hardware .v2-section .v2-h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  /* —— Advantage / feature cards: 1-col on mobile (match POS) —— */
  .v2--pos .v2-cards,
  .v2--pos .v2-cards--4,
  .v2--pos .v2-cards--2,
  .v2--kiosk .v2-cards,
  .v2--kiosk .v2-cards--4,
  .v2--mobile .v2-cards,
  .v2--mobile .v2-cards--4,
  .v2--payments .v2-cards,
  .v2--payments .v2-cards--4,
  .v2--rear .v2-cards,
  .v2--rear .v2-cards--4,
  .v2--rear .v2-rd-numbers__grid,
  .v2--gift .v2-cards,
  .v2--gift .v2-cards--4,
  .v2--payroll .v2-cards,
  .v2--payroll .v2-cards--4,
  .v2--reporting .v2-cards,
  .v2--reporting .v2-cards--4,
  .v2--hardware .v2-cards,
  .v2--hardware .v2-cards--4 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .v2-pos-advantage,
  .v2--pos .v2-section.v2-pos-advantage {
    padding: 40px 0;
  }

  .v2-pos-advantage__head {
    text-align: center;
    gap: 12px;
  }

  .v2-pos-advantage__head .v2-h2 {
    font-size: 20px;
  }

  .v2-pos-advantage__lead {
    font-size: 14px;
  }

  /* Payroll advantages: stack 1-col (match POS) */
  .v2--payroll .v2-payroll-advantage > .v2-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .v2--payroll .v2-payroll-advantage__head {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 8px;
  }

  .v2--payroll .v2-payroll-advantage__top,
  .v2--payroll .v2-payroll-advantage__bottom {
    display: contents;
  }

  .v2--payroll .v2-payroll-advantage__bottom .v2-card:last-child {
    grid-column: auto;
  }

  .v2--payroll .v2-payroll-advantage .v2-card {
    min-width: 0;
    padding: 16px;
  }

  .v2--payroll .v2-payroll-advantage .v2-card h3 {
    font-size: 12px;
    line-height: 1.2;
  }

  .v2--payroll .v2-payroll-advantage .v2-card p {
    font-size: 11px;
    line-height: 1.3;
  }

  /* Payments certified devices: 2×2 */
  .v2--payments .v2-pay-terminals__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .v2--payments .v2-pay-device-card {
    min-width: 0;
    padding: 16px;
  }

  .v2--payments .v2-pay-device-card__media {
    height: 120px;
    width: 100%;
  }

  .v2--payments .v2-pay-device-card__media--idtech,
  .v2--payments .v2-pay-device-card__media--sunmi,
  .v2--payments .v2-pay-device-card__media--pax {
    width: 100%;
  }

  /* Steps: show every step’s content (no desktop active-only) */
  .v2--mobile .v2-steps,
  .v2--rear .v2-steps {
    flex-direction: column;
    gap: 12px;
  }

  .v2--mobile .v2-step,
  .v2--mobile .v2-step.is-active,
  .v2--rear .v2-step,
  .v2--rear .v2-step.is-active {
    flex: 1 1 auto;
    flex-grow: 1;
    flex-basis: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    align-items: stretch;
    min-width: 0;
    gap: 16px;
    overflow: visible;
  }

  .v2--mobile .v2-step__top,
  .v2--rear .v2-step__top {
    flex: 0 0 auto;
    justify-content: space-between;
  }

  .v2--mobile .v2-step__num,
  .v2--rear .v2-step__num {
    font-size: 32px;
    color: var(--v2-blue-300);
  }

  /* Expand-all on mobile: step-arrow is accordion chrome — hide it */
  .v2--mobile .v2-step__icon,
  .v2--mobile .v2-step.is-active .v2-step__icon,
  .v2--rear .v2-step__icon,
  .v2--rear .v2-step.is-active .v2-step__icon {
    display: none;
  }

  .v2--mobile .v2-step__body,
  .v2--mobile .v2-step.is-active .v2-step__body,
  .v2--rear .v2-step__body,
  .v2--rear .v2-step.is-active .v2-step__body {
    display: flex;
    max-height: none;
    opacity: 1;
    overflow: visible;
    transform: none;
  }

  /* Reporting App QR (mobile): store buttons + listing cards; hide QR */
  .v2--reporting .v2-app-qr {
    padding: 32px 0;
  }

  .v2--reporting .v2-app-qr__card {
    width: 100%;
    max-width: 342px;
    margin: 0 auto;
    padding: 48px 32px;
    gap: 32px;
    box-sizing: border-box;
  }

  .v2--reporting .v2-app-qr__copy {
    gap: 12px;
    max-width: none;
  }

  .v2--reporting .v2-app-qr__title {
    font-size: 20px;
  }

  .v2--reporting .v2-app-qr__lead {
    font-size: 14px;
    line-height: 1.4;
  }

  .v2--reporting .v2-app-qr__stores {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 28px;
    width: 100%;
  }

  .v2--reporting .v2-app-qr__store {
    flex: 0 0 auto;
    width: 100%;
    max-width: 280px;
    gap: 16px;
  }

  .v2--reporting .v2-app-qr__badge-link {
    display: block;
    line-height: 0;
  }

  .v2--reporting .v2-app-qr__code {
    display: none;
  }

  .v2--reporting .v2-app-qr__listing {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 11px;
    object-fit: contain;
  }

  .v2--reporting .v2-app-qr__store:last-child .v2-app-qr__listing {
    border-radius: 9px;
  }

  /* Hardware ecosystem: horizontal strip + peek.
     Kill scroll-reveal on strip cards — same as Home types / reviews (no fade). */
  .v2--hardware .v2-hw-eco .v2-hw-card[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .v2-hw-eco__track {
    display: contents;
  }

  .v2--hardware .v2-hw-eco > .v2-container {
    padding-right: 0;
  }

  .v2--hardware .v2-hw-eco__head {
    padding-right: 16px;
    text-align: center;
  }

  .v2--hardware .v2-hw-eco__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 4px;
    scroll-snap-type: x mandatory;
  }

  .v2--hardware .v2-hw-eco__top,
  .v2--hardware .v2-hw-eco__bottom {
    display: contents;
  }

  .v2--hardware .v2-hw-card,
  .v2--hardware .v2-hw-card--wide {
    flex: 0 0 282px;
    width: 282px;
    max-width: 282px;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    scroll-snap-align: start;
  }

  .v2--hardware .v2-hw-card--wide .v2-hw-card__media {
    width: 100%;
    height: 180px;
  }

  .v2--hardware .v2-hw-card__media {
    height: 180px;
  }

  .v2--hardware .v2-hw-eco .v2-snap-dots {
    display: flex;
    margin-top: 20px;
    padding-right: 16px;
  }

  .v2--hardware .v2-hw-card__body {
    padding: 16px;
    gap: 8px;
  }

  .v2--hardware .v2-hw-card__body h3 {
    font-size: 16px;
  }

  .v2--hardware .v2-hw-eco__head .v2-h2,
  .v2--hardware .v2-hw-data__head .v2-h2,
  .v2--hardware .v2-hw-benefits__head .v2-h2 {
    font-size: 20px;
  }

  .v2--hardware .v2-hw-data__head {
    text-align: center;
  }

  .v2--hardware .v2-hw-data__grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /*
    Kiosk Hardware Options (Built to match any layout):
    Desktop collapses media to 240px and expands on hover (408px).
    Mobile has no hover — keep media expanded so the full photo is visible.
  */
  .v2--kiosk .v2-kiosk-hw-card__media,
  .v2--kiosk .v2-kiosk-hw-card:hover .v2-kiosk-hw-card__media,
  .v2--kiosk .v2-kiosk-hw-card:focus-within .v2-kiosk-hw-card__media {
    height: auto;
    transition: none;
  }

  .v2--kiosk .v2-kiosk-hw-card__media img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}