/*
 * DICHANA v2.2.56 — Mobile and tablet quality layer
 *
 * Final, shared responsive contract for Public, Admin, authentication and
 * state pages. Loaded last so legacy generated templates keep their behavior
 * while unsafe spacing, clipping and crop rules are normalized consistently.
 */

:root {
  --dcn-responsive-gutter: clamp(18px, 4vw, 48px);
  --dcn-responsive-gap: clamp(18px, 3vw, 32px);
  --dcn-responsive-section-space: clamp(56px, 8vw, 104px);
  --dcn-responsive-target: 44px;
}

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

body,
button,
input,
select,
textarea {
  font-family: "Prompt", sans-serif;
}

body {
  min-width: 320px;
}

img,
picture,
svg,
video,
canvas,
iframe {
  max-inline-size: 100%;
}

img,
picture,
canvas {
  block-size: auto;
}

:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend, summary, button, a) {
  overflow-wrap: break-word;
}

:where(h1, h2, h3) {
  text-wrap: balance;
}

:where(p, li, dt, dd) {
  text-wrap: pretty;
}

:where(.container, .admin-content, .form-wrap, .message-card, .box),
:where(.grid, [class*="-grid"], [class*="-layout"], [class*="-shell"]) > * {
  min-width: 0;
}

/* Public image integrity: product, evidence, editorial and category artwork
   must be visible in full. Background cinema/video remains intentionally
   edge-to-edge and is not part of this content-image contract. */
body:not(.admin-v1300) :where(
  .batch2-hero-visual,
  .batch3-hero-visual,
  .batch4-hero-visual,
  .product-library-hero-visual,
  .category-hero-visual-v8577
) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: hidden;
}

body:not(.admin-v1300) :where(
  .batch2-hero-visual,
  .batch3-hero-visual,
  .batch4-hero-visual,
  .product-library-hero-visual,
  .category-hero-visual-v8577
) > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

body:not(.admin-v1300) :where(
  .product-concept-visual,
  .product-detail-visual-frame,
  .tester-selected-product,
  .home-product-modal-image-frame-v8583,
  .home-tester-selected-v8583,
  .formula-panel-media,
  .product-visual,
  .article-hero-image,
  .article-inline-figure-v2230,
  .blog-card-visual,
  .story-album-set figure,
  .dichana-category-start-visual-v2236,
  .category-cta-orbit-v8577
) {
  background: linear-gradient(145deg, #fff7fb, #f1fbff);
}

body:not(.admin-v1300) :where(
  .product-concept-visual img,
  .batch2-image,
  .product-detail-visual-frame img,
  .tester-selected-product img,
  .home-product-modal-image-frame-v8583 img,
  .home-tester-selected-v8583 img,
  .formula-panel-image,
  .product-mockup-image,
  .cta-product-stack-image,
  .portfolio-visual-v2242 img,
  .article-hero-image img,
  .article-inline-figure-v2230 img,
  .blog-card-visual img,
  .related-product-card img,
  .story-album-set img,
  .dichana-category-detail-v2236,
  .dichana-category-cta-v2236,
  .public-cta-art-image-v2242
) {
  object-fit: contain !important;
  object-position: center !important;
}

body.product-library-page :where(
  .product-concept-visual img,
  .product-detail-visual-frame img,
  .tester-selected-product img
) {
  padding: clamp(10px, 1.8vw, 20px);
}

body.factory-evidence-page .fe-hero-visual {
  min-height: 0 !important;
  aspect-ratio: 4 / 3;
}

body.factory-evidence-page .fe-hero-visual > .fe-hero-photo[data-site-media-target] {
  position: absolute !important;
  inset: clamp(10px, 1.5vw, 16px) !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  background: linear-gradient(145deg, #f7fbff, #fff7fb);
}

body.factory-evidence-page .fe-hero-photo > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

body :where(.dichana-category-detail-v2236, .dichana-category-cta-v2236) {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3;
  object-fit: contain !important;
}

/* Long Thai labels and live CMS content must remain complete. */
body.product-library-ux-v8559 :where(
  .product-selection-status .product-taxonomy-breadcrumb,
  .product-results-header-compact h2,
  .product-nav-category-copy small
) {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

body.product-library-ux-v8559 .product-selection-status .product-taxonomy-breadcrumb {
  flex-wrap: wrap;
}

/* Shared table and rich-content containment. Horizontal scrolling stays local
   to the data surface instead of widening the document. */
:where(
  .table-wrap,
  .table-scroll,
  .admin-table-shell,
  .ops-table-wrap,
  .dichana-rich-table,
  .ql-table-container
) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:where(.dichana-rich-text, .article-body, .admin-content) :where(img, table, pre, code) {
  max-width: 100%;
}

:where(.dichana-rich-text, .article-body, .admin-content) pre {
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Dialogs use the dynamic viewport and retain breathing room around every
   edge, including notches and browser chrome. */
:where(
  .product-detail-modal,
  .tester-modal,
  .home-product-detail-modal-v8583,
  .home-tester-modal-v8583,
  .cookie-consent-modal-v8591
) {
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left)) !important;
}

:where(
  .product-detail-modal-dialog,
  .tester-modal-dialog,
  .home-product-modal-dialog-v8583,
  .cookie-consent-dialog-v8591
) {
  width: min(100%, 1120px);
  max-width: 100%;
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
  overflow: auto;
  overscroll-behavior: contain;
}

:where(
  .product-detail-modal-close,
  .tester-modal-close,
  .home-product-modal-close-v8583,
  .cookie-consent-close-v8591
) {
  width: var(--dcn-responsive-target) !important;
  height: var(--dcn-responsive-target) !important;
  min-width: var(--dcn-responsive-target);
  min-height: var(--dcn-responsive-target);
}

/* Fixed consent controls must not touch the viewport or device safe area. */
.cookie-banner.cookie-banner-v8591 {
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(620px, calc(100vw - max(36px, env(safe-area-inset-left) + env(safe-area-inset-right) + 24px)));
  max-height: calc(100dvh - max(36px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 24px));
  overflow: auto;
}

.cookie-settings-trigger-fixed-v8591 {
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  min-height: var(--dcn-responsive-target);
}

/* Admin shell: preserve full-width workspace at tablet sizes and keep every
   control, action group and popup inside the visual viewport. */
body.admin-v1300 :where(.admin-layout, .admin-workspace, .admin-main, .admin-content) {
  min-width: 0;
  max-width: 100%;
}

body.admin-v1300 .admin-sidebar {
  max-width: calc(100vw - 44px);
  padding-left: env(safe-area-inset-left);
}

body.admin-v1300 :where(
  .admin-icon-button,
  .admin-nav-group > summary,
  .admin-sidebar-footer a,
  .admin-user-trigger,
  .admin-user-dropdown a,
  .admin-user-dropdown button,
  .admin-content .pager a,
  .admin-content .pager span,
  .admin-content .admin-list-pages button,
  .admin-content .tabs a
) {
  min-height: var(--dcn-responsive-target);
}

body.admin-v1300 :where(
  .admin-content .quick,
  .admin-content .admin-actions,
  .admin-content .admin-action-row,
  .admin-content .bw-actions,
  .admin-content .tb-actions,
  .admin-content .ops-actions
) {
  max-width: 100%;
  flex-wrap: wrap;
}

body.admin-v1300 :where(.admin-user-dropdown, [class*="-modal"], [class*="-dialog"]) {
  max-width: calc(100vw - 24px);
}

/* Authentication and state pages share the same safe-area and no-zoom rules. */
:where(.auth-page, .brand-panel, .brand-content, .form-panel) {
  min-height: 100dvh;
}

.form-panel,
body:has(> .message-card),
body:has(> main.box) {
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

.message-card,
main.box {
  max-width: 100%;
}

main.box > a,
.message-card a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1024px) {
  :root {
    --dcn-responsive-gutter: clamp(20px, 4vw, 36px);
    --dcn-responsive-section-space: clamp(52px, 8vw, 82px);
  }

  body:not(.admin-v1300) :where(
    main > section > .container,
    main > article > section > .container,
    .site-managed-footer-grid,
    .site-managed-footer-bottom,
    .growth-public-head,
    .growth-public-foot
  ) {
    width: min(calc(100% - var(--dcn-responsive-gutter) - var(--dcn-responsive-gutter)), 1240px) !important;
    margin-inline: auto;
  }

  /* The full-screen homepage hero has several older high-specificity width
     rules. Explicit margins keep the actual container box away from both
     viewport edges on every audited mobile/tablet size. */
  body:not(.admin-v1300).home-page.mobile-design-consistency-v8540 .hero-fullscreen-content {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin-left: var(--dcn-responsive-gutter) !important;
    margin-right: var(--dcn-responsive-gutter) !important;
  }

  /* Release-gate r7: preserve full category and Product Library artwork
     against higher-specificity legacy crop and hover rules. */
  body:not(.admin-v1300) .category-hero-visual-v8577 > img.batch2-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  body:not(.admin-v1300).product-library-hero-compact-v8560
    .product-library-hero-visual {
    height: auto !important;
    max-height: none !important;
  }

  body:not(.admin-v1300).product-library-hero-compact-v8560
    .product-library-hero-visual > img {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  body:not(.admin-v1300).product-library-card-detail-v8557
    .product-concept-visual > img {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  /* The closed Public drawer is translated off-canvas by the base theme.
     Visibility also needs to follow the drawer state so hidden controls are
     neither focusable nor reported as viewport overflow. */
  body:not(.admin-v1300) .mobile-drawer {
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .26s;
  }

  body:not(.admin-v1300).drawer-open .mobile-drawer {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* Legacy showcase motion scales the absolute media layer beyond its
     overflow-hidden panel. Preserve the complete artwork on tablet while
     leaving the approved desktop motion untouched. */
  body:not(.admin-v1300) :where(
    .formula-panel-media,
    .formula-panel.is-active .formula-panel-media,
    .formula-panel:hover .formula-panel-media,
    .formula-panel:focus-within .formula-panel-media
  ) {
    inset: 0 !important;
    transform: none !important;
  }

  body:not(.admin-v1300) .formula-panel-image {
    display: block !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: none !important;
  }

  body:not(.admin-v1300) :where(
    .batch2-hero-grid,
    .batch3-hero-grid,
    .batch4-hero-grid,
    .product-library-hero-grid,
    .contact-hero-grid-v8564,
    .article-hero-grid,
    .fe-hero-grid
  ) {
    gap: var(--dcn-responsive-gap) !important;
  }

  body:not(.admin-v1300) :where(input, select, textarea),
  body.admin-v1300 :where(
    .admin-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .admin-content select,
    .admin-content textarea
  ),
  .control-wrap input {
    font-size: 16px !important;
  }

  body.product-library-ux-v8559 .product-taxonomy-search-control input {
    min-height: 48px;
    font-size: 16px !important;
  }

  body.admin-v1300 :where(
    button:not(.admin-backdrop),
    summary,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    a.btn,
    .admin-nav-link,
    .tabs a
  ) {
    box-sizing: border-box;
    min-width: var(--dcn-responsive-target) !important;
    min-height: var(--dcn-responsive-target) !important;
  }

  /* The base shell moves the closed drawer off-canvas with transform. Hide it
     from hit-testing and visual audits as well; otherwise its still-visible
     links remain focusable and appear outside every tablet viewport. */
  body.admin-v1300 .admin-sidebar {
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s linear .22s;
  }

  body.admin-v1300.admin-sidebar-open .admin-sidebar {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* Preserve every table column on tablet. Inline overflow:hidden from older
     list views must not clip the right-hand columns without a local scroller. */
  body.admin-v1300 .admin-content .card:has(> table) {
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.product-library-ux-v8559 :where(.product-group-tab, .product-type-tab) {
    min-height: var(--dcn-responsive-target) !important;
  }

  body:not(.admin-v1300) :where(
    .btn,
    button,
    summary,
    [role="button"],
    .mobile-toggle,
    .drawer-close,
    .showcase-nav,
    .mobile-quick-toggle
  ) {
    min-height: var(--dcn-responsive-target);
    min-width: var(--dcn-responsive-target);
  }

  body.admin-v1300 .admin-topbar {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  body.admin-v1300 .admin-main {
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    padding-left: max(18px, env(safe-area-inset-left));
  }

  body.admin-v1300 .admin-content :where(
    .field-row,
    .mini-grid,
    .note-grid,
    .row2,
    .cols,
    .form-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .auth-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-panel {
    display: none;
  }

  .form-panel {
    align-items: flex-start;
  }

  .mobile-brand {
    display: inline-flex;
  }
}

@media (max-width: 820px) {
  :root {
    --dcn-responsive-gutter: clamp(16px, 4.5vw, 28px);
  }

  body:not(.admin-v1300) :where(
    .batch2-hero-grid,
    .batch3-hero-grid,
    .batch4-hero-grid,
    .product-library-hero-grid,
    .contact-hero-grid-v8564,
    .article-hero-grid,
    .fe-hero-grid,
    .product-detail-modal-grid,
    .tester-modal-layout,
    .home-product-modal-grid-v8583,
    .home-tester-layout-v8583,
    .site-managed-footer-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:not(.admin-v1300) :where(.hero-ctas, .contact-hero-actions-v8564, [class*="modal-actions"]) {
    gap: 12px !important;
    flex-wrap: wrap;
  }

  body:not(.admin-v1300) :where(.product-library-sidebar, .product-choice-panel, .card, .form-card) {
    max-width: 100%;
  }

  body.admin-v1300 .admin-topbar-title {
    white-space: normal;
    text-overflow: clip;
  }
}

@media (max-width: 620px) {
  :root {
    --dcn-responsive-gutter: clamp(16px, 5vw, 22px);
    --dcn-responsive-gap: 18px;
  }

  body:not(.admin-v1300) .site-header {
    width: calc(100vw - (var(--dcn-responsive-gutter) * 2)) !important;
    max-width: none !important;
  }

  body:not(.admin-v1300) :where(.hero-ctas, .contact-hero-actions-v8564, [class*="modal-actions"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }

  body:not(.admin-v1300) :where(.hero-ctas, .contact-hero-actions-v8564, [class*="modal-actions"]) > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .cookie-banner.cookie-banner-v8591 {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(82px, env(safe-area-inset-bottom) + 70px);
    width: auto;
    border-radius: 20px;
  }

  body.admin-v1300 .admin-main {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  body.admin-v1300 :where(
    .admin-content .quick,
    .admin-content .admin-actions,
    .admin-content .admin-action-row,
    .admin-content .bw-actions,
    .admin-content .tb-actions,
    .admin-content .ops-actions
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.admin-v1300 :where(
    .admin-content .quick,
    .admin-content .admin-actions,
    .admin-content .admin-action-row,
    .admin-content .bw-actions,
    .admin-content .tb-actions,
    .admin-content .ops-actions
  ) > :where(.btn, button, a) {
    width: 100%;
    min-width: 0;
  }

  .form-panel,
  body:has(> .message-card),
  body:has(> main.box) {
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .form-head h1 {
    font-size: clamp(28px, 9vw, 34px);
  }

  .mobile-brand {
    margin-bottom: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* v2.3.3: the desktop Hero was flush against the viewport despite its capped width. */
@media (min-width: 1101px) {
  body:not(.admin-v1300).home-page.mobile-design-consistency-v8540 .hero-fullscreen-content {
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: calc(100% - var(--dcn-responsive-gutter) - var(--dcn-responsive-gutter)) !important;
  }
}
.home-page .hero-video-toggle[hidden] { display: none !important; }