/* TANKZONE_MOBILE_FIT_AND_ADMIN_V31 */

:root {
  --tz31-red: #d71920;
  --tz31-black: #090909;
  --tz31-paper: #f1f1ed;
  --tz31-line: #deded8;
  --tz31-mobile-gutter: clamp(12px, 3.8vw, 18px);
  --tz31-mobile-radius: 16px;
  --tz31-mobile-shadow: 0 12px 34px rgba(10, 10, 10, .08);
}

html,
body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
video,
canvas,
iframe {
  max-width: 100%;
}

pre,
code {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* The Admin presentation layer is deliberately isolated from business data. */
.admin-body,
.admin-body .admin-shell,
.admin-body .admin-main,
.admin-body .admin-content,
.admin-body .admin-content > *,
.admin-auth-body,
.admin-auth-body .admin-login-page {
  min-width: 0;
  max-width: 100%;
}

.admin-body img,
.admin-auth-body img {
  height: auto;
}

.admin-body input,
.admin-body select,
.admin-body textarea,
.admin-body button,
.admin-auth-body input,
.admin-auth-body select,
.admin-auth-body textarea,
.admin-auth-body button {
  max-width: 100%;
}

.admin-menu-backdrop.tz31-admin-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .68);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.admin-menu-backdrop.tz31-admin-menu-backdrop[hidden] {
  display: none !important;
}

.tz31-menu-close {
  display: none;
}

@media (max-width: 900px) {
  /* Avoid iPhone focus zoom while keeping every field readable. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  button,
  a,
  input,
  select,
  textarea,
  summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  body:not(.admin-body):not(.admin-auth-body) .shell {
    width: min(1240px, calc(100% - 24px)) !important;
    max-width: calc(100% - 24px) !important;
    margin-inline: auto !important;
  }

  body:not(.admin-body):not(.admin-auth-body) main,
  body:not(.admin-body):not(.admin-auth-body) section,
  body:not(.admin-body):not(.admin-auth-body) header,
  body:not(.admin-body):not(.admin-auth-body) footer,
  body:not(.admin-body):not(.admin-auth-body) form,
  body:not(.admin-body):not(.admin-auth-body) .product-card,
  body:not(.admin-body):not(.admin-auth-body) .cart-item,
  body:not(.admin-body):not(.admin-auth-body) .checkout-panel,
  body:not(.admin-body):not(.admin-auth-body) .order-summary {
    min-width: 0;
    max-width: 100%;
  }

  .announcement-inner,
  .site-header .header-inner,
  .mobile-nav,
  .site-footer .shell {
    min-width: 0;
    max-width: 100%;
  }

  .announcement-inner span,
  .product-card h3,
  .product-card-copy,
  .cart-item-copy,
  .checkout-panel {
    overflow-wrap: anywhere;
  }

  /* Admin frame */
  .admin-body {
    width: 100%;
    min-height: 100dvh;
    background: var(--tz31-paper);
  }

  .admin-body .admin-shell {
    display: block !important;
    width: 100% !important;
    min-height: 100dvh;
  }

  .admin-body .admin-main {
    width: 100% !important;
    margin: 0 !important;
  }

  .admin-body .admin-topbar {
    position: sticky;
    top: 0;
    z-index: 1200;
    width: 100%;
    min-height: 72px;
    padding: max(11px, env(safe-area-inset-top)) var(--tz31-mobile-gutter) 11px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--tz31-line);
    box-shadow: 0 7px 24px rgba(0, 0, 0, .06);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .admin-body .admin-menu-toggle {
    display: grid !important;
    place-items: center;
    width: 46px;
    min-width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--tz31-black);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
  }

  .admin-body .admin-topbar > div:not(.admin-user) {
    min-width: 0;
  }

  .admin-body .admin-topbar small {
    display: block;
    overflow: hidden;
    color: #8a8a85;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-body .admin-topbar h1 {
    display: -webkit-box;
    margin: 3px 0 0;
    overflow: hidden;
    font-size: clamp(16px, 4.6vw, 20px);
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .admin-body .admin-user {
    min-width: 0;
    margin: 0;
    gap: 0;
  }

  .admin-body .admin-user > span {
    display: none !important;
  }

  .admin-body .admin-user a {
    min-width: 42px;
    min-height: 42px;
    padding: 0 9px !important;
    display: grid;
    place-items: center;
    border: 1px solid #d8d8d2 !important;
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    white-space: nowrap;
  }

  .admin-body .admin-content {
    width: 100%;
    padding: 16px var(--tz31-mobile-gutter) calc(84px + env(safe-area-inset-bottom)) !important;
    margin: 0 auto;
  }

  .admin-body .admin-alert {
    width: auto;
    margin: 12px var(--tz31-mobile-gutter) 0 !important;
    padding: 13px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  /* Off-canvas Admin navigation */
  .admin-body .admin-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1302 !important;
    width: min(320px, 88vw) !important;
    height: var(--tz31-viewport-height, 100dvh) !important;
    max-height: var(--tz31-viewport-height, 100dvh) !important;
    padding: calc(24px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-105%) !important;
    transition: transform .24s ease, visibility 0s linear .24s;
    box-shadow: 22px 0 60px rgba(0, 0, 0, .34);
  }

  html[dir="rtl"] .admin-body .admin-sidebar {
    left: auto !important;
    right: 0 !important;
    transform: translateX(105%) !important;
    box-shadow: -22px 0 60px rgba(0, 0, 0, .34);
  }

  .admin-body .admin-sidebar.open,
  html[dir="rtl"] .admin-body .admin-sidebar.open {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) !important;
    transition: transform .24s ease, visibility 0s;
  }

  .admin-body.admin-menu-open {
    overflow: hidden !important;
  }

  .admin-body .tz31-menu-close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    inset-inline-end: 12px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #303030;
    border-radius: 11px;
    background: #171717;
    color: #fff;
    font-size: 25px;
    line-height: 1;
  }

  .admin-body .admin-brand {
    min-height: 55px;
    padding-inline-end: 50px;
  }

  .admin-body .admin-nav {
    gap: 6px;
  }

  .admin-body .admin-nav a {
    min-height: 50px;
    padding: 12px 13px;
    border-radius: 11px;
    font-size: 13px;
  }

  .admin-body .admin-sidebar-bottom a,
  .admin-body .admin-sidebar-bottom button {
    min-height: 42px;
    display: flex;
    align-items: center;
    font-size: 12px;
  }

  /* Panels, metrics and content groups */
  .admin-body .admin-panel {
    width: 100%;
    min-width: 0;
    padding: 16px 13px !important;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--tz31-line);
    border-radius: var(--tz31-mobile-radius);
    box-shadow: var(--tz31-mobile-shadow);
  }

  .admin-body .admin-panel-head {
    min-width: 0;
    margin-bottom: 14px;
    padding-bottom: 13px;
    gap: 8px 12px;
  }

  .admin-body .admin-panel-head h2,
  .admin-body .admin-panel-head > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .admin-body .admin-page-actions {
    width: 100%;
    margin-bottom: 13px;
    padding: 1px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr));
    gap: 8px;
    overflow: visible;
  }

  .admin-body .admin-page-actions .button,
  .admin-body .admin-page-actions a,
  .admin-body .admin-page-actions button {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 13px;
    text-align: center;
    white-space: normal;
  }

  .admin-body .admin-metric-grid,
  .admin-body .report-metric-grid,
  .admin-body .review-admin-stats {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px;
    margin-bottom: 14px;
  }

  .admin-body .admin-metric-grid article,
  .admin-body .report-metric-grid article,
  .admin-body .review-admin-stats article {
    min-width: 0;
    min-height: 126px;
    padding: 15px 13px;
    overflow: hidden;
    border-radius: 14px;
  }

  .admin-body .admin-metric-grid article > p,
  .admin-body .report-metric-grid article > span {
    margin-top: 18px;
    overflow-wrap: anywhere;
  }

  .admin-body .admin-metric-grid article > strong,
  .admin-body .report-metric-grid article > strong,
  .admin-body .review-admin-stats article > strong {
    max-width: 100%;
    font-size: clamp(20px, 6vw, 29px) !important;
    overflow-wrap: anywhere;
  }

  .admin-body .admin-two-column,
  .admin-body .report-columns,
  .admin-body .admin-order-grid,
  .admin-body .admin-form-grid,
  .admin-body .variant-fields,
  .admin-body .new-variant-fields,
  .admin-body .expense-create-form,
  .admin-body .coupon-create-form,
  .admin-body .hero-image-admin,
  .admin-body .referral-admin-hero,
  .admin-body .referral-profile-hero,
  .admin-body .review-admin-cards,
  .admin-body .review-threshold-panel,
  .admin-body .review-admin-launch-panel,
  .admin-body .analytics-exclusion-panel,
  .admin-body .analytics-exclusion-manager__hero,
  .admin-body .cancelled-stock-alert-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-body .admin-form-grid .wide,
  .admin-body .customer-detail-grid .wide,
  .admin-body .verified-review-form .wide {
    grid-column: auto !important;
  }

  .admin-body .admin-filter-bar {
    width: 100%;
    padding: 13px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 9px;
    border-radius: 13px;
  }

  .admin-body .admin-filter-bar > *,
  .admin-body .admin-filter-bar label,
  .admin-body .admin-filter-bar input,
  .admin-body .admin-filter-bar select,
  .admin-body .admin-filter-bar button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
  }

  .admin-body .admin-form-grid input,
  .admin-body .admin-form-grid select,
  .admin-body .admin-form-grid textarea,
  .admin-body .variant-fields input,
  .admin-body .admin-update-form input,
  .admin-body .admin-update-form select,
  .admin-body .admin-update-form textarea,
  .admin-body .referral-note-label textarea {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: 10px;
  }

  .admin-body .admin-form-grid textarea,
  .admin-body .admin-update-form textarea,
  .admin-body .referral-note-label textarea {
    min-height: 112px;
  }

  .admin-body .button,
  .admin-body button:not(.admin-menu-backdrop):not(.tz31-menu-close),
  .admin-auth-body .button,
  .admin-auth-body button {
    min-height: 44px;
    font-size: 13px;
  }

  .admin-body .admin-checkboxes,
  .admin-body .variant-title,
  .admin-body .review-admin-card header,
  .admin-body .review-admin-card footer,
  .admin-body .hero-image-reset-form,
  .admin-body .analytics-exclusion-auto-note {
    min-width: 0;
    flex-wrap: wrap;
  }

  .admin-body .order-detail-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .admin-body .order-detail-overview > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--tz31-line) !important;
    border-radius: 11px;
    overflow-wrap: anywhere;
  }

  .admin-body .top-product-list > div {
    min-width: 0;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    gap: 9px;
  }

  .admin-body .top-product-list strong,
  .admin-body .top-product-list small {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .admin-body .sticky-save,
  .admin-body .tz-order-save,
  .admin-body .tzx-savebar {
    bottom: max(8px, env(safe-area-inset-bottom));
    width: 100%;
    max-width: 100%;
    margin-inline: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 13px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
  }

  .admin-body .sticky-save .button,
  .admin-body .tz-order-save .button,
  .admin-body .tzx-savebar button {
    width: 100%;
    min-height: 49px;
  }

  .admin-body canvas,
  .admin-body svg:not(.admin-brand svg) {
    max-width: 100% !important;
  }

  .admin-body .hero-image-admin-preview,
  .admin-body .hero-image-admin-controls,
  .admin-body .referral-admin-hero,
  .admin-body .referral-profile-hero,
  .admin-body .review-admin-launch-panel,
  .admin-body .review-threshold-panel,
  .admin-body .cancelled-stock-alert-manager__head,
  .admin-body .cancelled-stock-alert-row,
  .admin-body .analytics-exclusion-manager__hero,
  .admin-body .analytics-exclusion-list-head {
    min-width: 0;
    padding: 18px 15px !important;
  }

  .admin-body .referral-rule-card,
  .admin-body .referral-profile-offer,
  .admin-body .review-public-state {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .admin-body .review-threshold-panel form,
  .admin-body .review-invitation-link,
  .admin-body .cancelled-stock-alert-row__actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .admin-body .review-threshold-panel form > *,
  .admin-body .review-invitation-link > *,
  .admin-body .cancelled-stock-alert-row__actions > *,
  .admin-body .cancelled-stock-alert-row__actions .button {
    width: 100% !important;
    max-width: 100% !important;
  }

  .admin-body #edit-order-details.tzx-order-editor {
    width: 100%;
    max-width: 100%;
    margin-top: 14px;
    overflow: hidden;
  }

  .admin-body #edit-order-details .tzx-order-editor__hero,
  .admin-body #edit-order-details .tzx-order-form,
  .admin-body #edit-order-details .tzx-card,
  .admin-body #edit-order-details .tzx-item {
    min-width: 0;
    max-width: 100%;
  }

  /* Admin login */
  .admin-auth-body .admin-login-page {
    width: 100%;
    min-height: 100dvh;
    display: block !important;
    background: linear-gradient(160deg, #f7f7f4 0, #fff 55%, #eee 100%);
  }

  .admin-auth-body .admin-login-brand {
    display: none !important;
  }

  .admin-auth-body .admin-login-form-wrap {
    width: 100%;
    min-height: 100dvh;
    padding: calc(28px + env(safe-area-inset-top)) var(--tz31-mobile-gutter) calc(28px + env(safe-area-inset-bottom)) !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .admin-auth-body .admin-login-form {
    width: min(100%, 430px);
    max-width: 100%;
    padding: clamp(21px, 6vw, 34px);
    border: 1px solid var(--tz31-line);
    border-top: 4px solid var(--tz31-red);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 65px rgba(0, 0, 0, .12);
  }

  .admin-auth-body .admin-login-form h2 {
    margin-bottom: 27px;
    font-size: clamp(28px, 8vw, 38px);
  }

  .admin-auth-body .admin-login-form input {
    width: 100%;
    min-width: 0;
    height: 52px;
    border-radius: 10px;
  }
}

@media (max-width: 760px) {
  /* Wide Admin tables become mobile cards. No row or form is removed. */
  .admin-body .admin-table-wrap:has(> .admin-table.tz31-card-table) {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
  }

  .admin-body .admin-table.tz31-card-table,
  .admin-body .admin-table.tz31-card-table tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    white-space: normal !important;
  }

  .admin-body .admin-table.tz31-card-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .admin-body .admin-table.tz31-card-table tbody {
    display: grid;
    gap: 11px;
  }

  .admin-body .admin-table.tz31-card-table tbody tr {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid #dcdcd6;
    border-inline-start: 4px solid #161616;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(0, 0, 0, .055);
  }

  .admin-body .admin-table.tz31-card-table tbody tr:hover {
    background: #fff;
  }

  .admin-body .admin-table.tz31-card-table td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 46px;
    padding: 11px 12px !important;
    display: grid !important;
    grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 0 !important;
    border-bottom: 1px solid #ecece7 !important;
    white-space: normal !important;
    text-align: start;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  .admin-body .admin-table.tz31-card-table td:last-child {
    border-bottom: 0 !important;
  }

  .admin-body .admin-table.tz31-card-table td::before {
    content: attr(data-label);
    min-width: 0;
    color: #81817b;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.45;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  .admin-body .admin-table.tz31-card-table td.tz31-empty-cell {
    display: block !important;
    padding: 25px 14px !important;
    color: #777;
    text-align: center;
  }

  .admin-body .admin-table.tz31-card-table td.tz31-empty-cell::before {
    display: none;
  }

  .admin-body .admin-table.tz31-card-table td > *,
  .admin-body .admin-table.tz31-card-table td form,
  .admin-body .admin-table.tz31-card-table td div {
    min-width: 0;
    max-width: 100%;
  }

  .admin-body .admin-table.tz31-card-table td > small,
  .admin-body .admin-table.tz31-card-table td strong + small {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .admin-body .admin-table.tz31-card-table td [style*="display:flex"],
  .admin-body .admin-table.tz31-card-table td [style*="display: flex"] {
    flex-wrap: wrap;
    white-space: normal !important;
  }

  .admin-body .admin-table.tz31-card-table .admin-product-cell {
    align-items: center;
    gap: 9px;
  }

  .admin-body .admin-table.tz31-card-table .admin-product-cell img {
    flex: 0 0 44px;
    width: 44px;
    height: 54px;
    border-radius: 8px;
  }

  .admin-body .admin-table.tz31-card-table .admin-product-cell strong,
  .admin-body .admin-table.tz31-card-table .admin-product-cell span {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .admin-body .admin-table.tz31-card-table .table-action,
  .admin-body .admin-table.tz31-card-table .tz-edit-product {
    min-height: 42px;
    padding: 9px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8d8d2;
    border-radius: 9px;
    white-space: normal;
  }

  .admin-body .tz-order-table {
    min-width: 0 !important;
  }

  .admin-body .tz-order-table [data-reorder-row] {
    border-inline-start-color: var(--tz31-red) !important;
  }

  .admin-body .admin-table.tz31-card-table td.tz-order-tools {
    grid-template-columns: minmax(72px, 1fr) 34px 38px 38px !important;
    gap: 7px;
  }

  .admin-body .tz-order-tools .tz-grip {
    display: none !important;
  }

  .admin-body .tz-order-tools b,
  .admin-body .tz-order-tools button {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .admin-body .tz-order-save {
    position: sticky;
    display: grid !important;
    gap: 8px;
  }

  .admin-body .tz-order-save span {
    font-size: 11px;
    line-height: 1.6;
  }
}

@media (max-width: 380px) {
  :root {
    --tz31-mobile-gutter: 10px;
  }

  .admin-body .admin-topbar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .admin-body .admin-menu-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .admin-body .admin-user a {
    min-width: 38px;
    padding-inline: 6px !important;
    font-size: 11px;
  }

  .admin-body .admin-metric-grid,
  .admin-body .report-metric-grid,
  .admin-body .review-admin-stats,
  .admin-body .order-detail-overview {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-body .admin-table.tz31-card-table td {
    grid-template-columns: minmax(72px, 31%) minmax(0, 1fr);
    padding-inline: 10px !important;
  }

  .admin-body .admin-table.tz31-card-table td.tz-order-tools {
    grid-template-columns: minmax(62px, 1fr) 32px 36px 36px !important;
  }
}

@media (min-width: 901px) {
  .admin-menu-backdrop.tz31-admin-menu-backdrop,
  .tz31-menu-close {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-body .admin-sidebar {
    transition-duration: .01ms !important;
  }
}