/* ========================================
   ZKS Product Blocks - Frontend Styles
   Compatible with Organic Stax / WordPress FSE

   Architecture:
   • Block wrapper receives color/spacing/border/typography from WordPress
     block supports as inline styles and CSS classes automatically.
   • Child elements use CSS custom properties (CSS vars) to inherit those values.
   • Custom per-block CSS vars (--zkspg-*) are injected via render.php from
     the block's own color-picker attributes (Card Style / Filter Button Style panels).
   • All hardcoded colors are defined as :root vars so they're easy to override.
   ======================================== */

/* ── Design tokens (matching hifi_product_s6k.html) ───────────────────────── */
:root {
    /* Card */
    --zkspg-card-bg:           #ffffff;
    --zkspg-card-border:       #E5E5E5;
    --zkspg-card-radius:       14px;
    --zkspg-card-shadow:       0 1px 2px rgba(12,12,12,.04), 0 1px 3px rgba(12,12,12,.06);
    --zkspg-card-shadow-hover: 0 4px 8px rgba(12,12,12,.05), 0 2px 4px rgba(12,12,12,.06);

    /* Card "View Details" link-button */
    --zkspg-btn-bg:            #171717;
    --zkspg-btn-color:         #98EEFF;
    --zkspg-btn-radius:        10px;
    --zkspg-btn-font-size:     0.8125rem;
    --zkspg-btn-font-weight:   600;
    --zkspg-btn-text-decor:    none;

    /* Filter chip pills */
    --zkspg-filter-btn-bg:       #F5F5F5;
    --zkspg-filter-btn-color:    #3a3a3a;
    --zkspg-filter-btn-border:   transparent;
    --zkspg-filter-active-bg:    #171717;
    --zkspg-filter-active-color: #98EEFF;

    /* Filter Bar - Label typography */
    --zkspg-label-font-size:     11px;
    --zkspg-label-font-weight:   700;
    --zkspg-label-letter-spacing: 0.6px;
    --zkspg-label-text-transform: uppercase;
    --zkspg-label-text-color:     #7A7A7A;

    /* Filter Bar - Button typography */
    --zkspg-btn-font-size:       12px;
    --zkspg-btn-font-weight:     500;
    --zkspg-btn-letter-spacing:  0;
    --zkspg-btn-text-color:      #3a3a3a;
    --zkspg-btn-padding:         7px 14px;
    --zkspg-btn-border-radius:   999px;
    --zkspg-btn-gap:             6px;

    /* Typography */
    --zkspg-title-color:       #0C0C0C;
    --zkspg-meta-color:        #7A7A7A;
    --zkspg-link-color:        #0C0C0C;
    --zkspg-ink-2:             #2A2A2A;
    --zkspg-ink-3:             #555;
    --zkspg-muted:             #7A7A7A;
    --zkspg-muted-2:           #A8A8A8;

    --zks-trust:               #1B4A8C;
    --zks-trust-2:             #0F2E5C;
    --zks-trust-3:             #3A6FB5;

    /* Industry badge */
    --zkspg-badge-bg:          #E8F8FF;
    --zkspg-badge-color:       #0a6b8a;

    /* Spacing */
    --zkspg-sp-1: 0.5rem;
    --zkspg-sp-2: 1rem;
    --zkspg-sp-3: 1.5rem;
    --zkspg-sp-4: 2rem;
    --zkspg-sp-5: 3rem;

    /* Border radius */
    --zkspg-r-sm: 6px;
    --zkspg-r-md: 10px;
    --zkspg-r-lg: 14px;
    --zkspg-r-xl: 20px;
}

/* ── FSE Native Block Hover Effects ─────────────────────────────────────── */
/* Enable hover animations for WordPress native Group blocks.
   Usage: Add CSS class in block editor → Advanced → Additional CSS class(es)

   Available classes:
   - zksproduct-hover-card: Basic card hover (translateY + shadow)
   - zksproduct-hover-lift: Enhanced lift effect (-4px)
   - zksproduct-hover-glow: Glow shadow effect
   - zksproduct-hover-zoom: Image zoom inside container
   - zksproduct-hover-composite: Full composite card with child animations
   ======================================== */

/* Basic card hover: translateY + shadow + border */
.zksproduct-hover-card {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.zksproduct-hover-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--zkspg-card-shadow-hover);
}

/* Enhanced lift effect */
.zksproduct-hover-lift {
    transition:
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease;
}

.zksproduct-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(12,12,12,.08), 0 4px 8px rgba(12,12,12,.06);
}

/* Glow shadow effect */
.zksproduct-hover-glow {
    transition:
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.zksproduct-hover-glow:hover {
    box-shadow: 0 0 0 3px rgba(152, 238, 255, 0.3), var(--zkspg-card-shadow-hover);
    border-color: var(--zkspg-accent, #98EEFF);
}

/* Image zoom on hover (apply to image container) */
.zksproduct-hover-zoom {
    overflow: hidden;
}

.zksproduct-hover-zoom img,
.zksproduct-hover-zoom .wp-block-image img {
    transition: transform 0.3s ease;
}

.zksproduct-hover-zoom:hover img,
.zksproduct-hover-zoom:hover .wp-block-image img {
    transform: scale(1.05);
}

/* Composite card: parent hover triggers child animations */
.zksproduct-hover-composite {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.zksproduct-hover-composite:hover {
    transform: translateY(-3px);
    box-shadow: var(--zkspg-card-shadow-hover);
    border-color: var(--zkspg-title-color, #0C0C0C);
}

/* Child: Icon rotation */
.zksproduct-hover-composite:hover .wp-block-image,
.zksproduct-hover-composite:hover .zksproduct-icon {
    transform: rotate(5deg) scale(1.1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Child: Heading color change */
.zksproduct-hover-composite:hover .wp-block-heading,
.zksproduct-hover-composite:hover h1,
.zksproduct-hover-composite:hover h2,
.zksproduct-hover-composite:hover h3,
.zksproduct-hover-composite:hover h4 {
    color: var(--zkspg-accent, #98EEFF);
    transition: color 0.2s ease;
}

/* Child: Button slide-in */
.zksproduct-hover-composite .wp-block-buttons {
    transform: translateY(10px);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.zksproduct-hover-composite:hover .wp-block-buttons {
    transform: translateY(0);
    opacity: 1;
}

/* Child: Background gradient overlay */
.zksproduct-hover-composite::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(152, 238, 255, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.zksproduct-hover-composite:hover::before {
    opacity: 1;
}

/* Ensure child elements are above overlay */
.zksproduct-hover-composite > * {
    position: relative;
    z-index: 1;
}

/* ── Product Grid Block ───────────────────────────────────────────────────── */
.zksproduct-grid-block {
    /* No padding or max-width hardcoded here — block spacing supports handle it.
       Fallback for pages without spacing support: */
    padding: var(--wp--style--block-gap, 0);
}

/* Inner Blocks slot */
.zksproduct-inner-blocks-output {
    margin-bottom: 24px;
}
.zksproduct-inner-blocks {
    min-height: 24px;
}

/* Grid */
.zksproduct-grid {
    display: grid;
    gap: 24px;
}
.zksproduct-columns-1 { grid-template-columns: repeat(1, 1fr); }
.zksproduct-columns-2 { grid-template-columns: repeat(2, 1fr); }
.zksproduct-columns-3 { grid-template-columns: repeat(3, 1fr); }
.zksproduct-columns-4 { grid-template-columns: repeat(4, 1fr); }
.zksproduct-columns-5 { grid-template-columns: repeat(5, 1fr); }
.zksproduct-columns-6 { grid-template-columns: repeat(6, 1fr); }

/* ── Product Card ─────────────────────────────────────────────────────────── */
/* Card background and border are driven by CSS vars → editable from editor */
.zksproduct-card {
    background:    var(--zkspg-card-bg);
    border:        1px solid var(--zkspg-card-border);
    border-radius: var(--zkspg-card-radius);
    box-shadow:    var(--zkspg-card-shadow);
    overflow:      hidden;
    transition:    box-shadow 0.2s ease, transform 0.2s ease;
    display:       flex;
    flex-direction: column;
}

.zksproduct-card:hover {
    box-shadow: var(--zkspg-card-shadow-hover);
    transform:  translateY(-2px);
}

.zksproduct-card__image {
    aspect-ratio: 4 / 3;
    overflow:     hidden;
    background:   #fcfcfc;
}

.zksproduct-card__image a {
    display: block;
    height:  100%;
}

.zksproduct-card__img {
/*    width:      100%;*/
    height:     100%;
    object-fit: contain;
    transition: transform 0.3s ease;
    display:    block;
}

.zksproduct-card:hover .zksproduct-card__img {
    transform: scale(1.04);
}

.zksproduct-card__body {
    padding:        20px;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            8px; /* Slightly increased gap for better visual hierarchy */
}

/* Row 2: Category (dot-separated) - wireframe style */
.zksproduct-card__category {
    font-size:      10.5px;
    font-weight:    500;
    color:          var(--zkspg-meta-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin:         0;
    line-height:    1.4;
}

.zksproduct-card__category a {
    color:           var(--zkspg-meta-color);
    text-decoration: none;
    transition:      color 0.15s ease;
}

.zksproduct-card__category a:hover {
    color: var(--zkspg-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.zksproduct-card__title {
    font-size:   17px; /* Match wireframe h4 size */
    font-weight: 600;
    margin:      0;
    line-height: 1.25;
    color:       inherit;
}

.zksproduct-card__title a {
    color:           var(--zkspg-title-color);
    text-decoration: none;
}

.zksproduct-card__title a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.zksproduct-card__excerpt {
    font-size:   12.5px; /* Match wireframe */
    line-height: 1.5;
    color:       #666;
    margin:      0;
    flex:        1;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* Row 5: Tags/Specs (pill badges) - wireframe style */
.zksproduct-card__tags {
    display:        flex;
    flex-wrap:      wrap;
    gap:            6px;
    margin-top:     4px;
}

.zksproduct-card__tag {
    display:        inline-block;
    font-size:      10.5px;
    background:     #f3f3f3;
    color:          var(--zkspg-title-color);
    padding:        3px 8px;
    border-radius:  4px;
    font-weight:    500;
    letter-spacing: 0.2px;
    line-height:    1.4;
}

/* Industry badges container (horizontal layout like tags) */
.zksproduct-card__industries {
    display:        flex;
    flex-wrap:      wrap;
    gap:            6px;
    margin-top:     4px;
}

.zksproduct-card__meta a {
    color:           var(--zkspg-meta-color);
    text-decoration: none;
}

.zksproduct-card__meta a:hover {
    color: var(--zkspg-link-color);
}

.zksproduct-card__industry {
    display:        inline-block;
    font-size:      10.5px;
    background:     var(--zkspg-badge-bg);
    color:          var(--zkspg-badge-color);
    padding:        3px 8px;
    border-radius:  4px;
    font-weight:    600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    line-height:    1.4;
}

.zksproduct-card__actions {
    margin-top:  auto; /* Push to bottom */
    padding-top: 10px;
    border-top:  none; /* Remove border to match wireframe */
}

/* ── Card "View Details" link ─────────────────────────────────────────────── */
/* Wireframe shows a text link with arrow, not a solid button block.
 *
 * STYLE CONTROL (via Card Style panel in editor):
 * - Button font size: --zkspg-btn-font-size (default: 13px)
 * - Button font weight: --zkspg-btn-font-weight (default: 600)
 * - Button text decoration: --zkspg-btn-text-decor (default: none)
 * - To add underline: set text decoration to "underline"
 */
.zksproduct-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    font-size:       var(--zkspg-btn-font-size, 13px);
    font-weight:     var(--zkspg-btn-font-weight, 600);
    text-decoration: var(--zkspg-btn-text-decor, none);
    cursor:          pointer;
    transition:      all 0.15s ease;
    letter-spacing:  0.2px;
}

.zksproduct-btn--primary {
    /* Defaults to a pill style; override via Card Style panel */
    background:    var(--zkspg-btn-bg);
    color:         var(--zkspg-btn-color);
    padding:       7px 14px;
    border-radius: var(--zkspg-btn-radius);
    border:        none;
}

.zksproduct-btn--primary:hover {
    opacity: 0.82;
    color:   var(--zkspg-btn-color);
}

.zksproduct-btn--link {
    /* Wire-frame "View product →" style: plain text link */
    background:      transparent;
    color:           var(--zkspg-link-color);
    padding:         0;
    border-radius:   0;
    font-size:       var(--zkspg-btn-font-size);
    font-weight:     var(--zkspg-btn-font-weight);
    text-decoration: var(--zkspg-btn-text-decor);
}

.zksproduct-btn--link:hover {
    opacity: 0.7;
}

.zksproduct-btn--secondary {
    background: transparent;
    color:      var(--zkspg-title-color);
    border:     1px solid var(--zkspg-card-border);
    padding:    7px 14px;
    border-radius: var(--zkspg-btn-radius);
}

.zksproduct-btn--secondary:hover {
    border-color: var(--zkspg-title-color);
}

.zksproduct-btn__icon {
    font-size:    15px;
    line-height:  1;
    margin-left:  1px;
}

/* ─ Product Filters ──────────────────────────────────────────────────────── */
/* Wireframe 02: chip pills, two rows (Category then Industry) */
.zksproduct-filters {
    margin-bottom: 36px;
    display:       grid;
    grid-template-columns: auto 1fr;
    align-items:   center;
    gap:           12px 10px;
}

/* Default: label left of buttons (grid with subgrid) */
.zksproduct-filter-group {
    display:     contents;
}

.zksproduct-filter-label {
    font-size:      var(--zkspg-label-font-size, 11px);
    font-weight:    var(--zkspg-label-font-weight, 700);
    color:          var(--zkspg-label-text-color, var(--zkspg-meta-color));
    text-transform: var(--zkspg-label-text-transform, uppercase);
    letter-spacing: var(--zkspg-label-letter-spacing, 0.6px);
    white-space:    nowrap;
    text-align:     left;
}

.zksproduct-filter-buttons {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--zkspg-btn-gap, 6px);
}

/* Label-above variant */
.zksproduct-filter-group--above {
    flex-direction: column;
    align-items:    flex-start;
    gap:            6px;
}

.zksproduct-filter-group--above .zksproduct-filter-label {
    min-width: unset;
}

/* Filter chip pill — wireframe style
 *
 * STYLE CONTROL (via Filter Button Style panel in editor):
 * - Button background: --zkspg-filter-btn-bg (default: #F5F5F5)
 * - Button text color: --zkspg-btn-text-color (default: #3a3a3a)
 * - Active/hover background: --zkspg-filter-active-bg (default: #0C0C0D)
 * - Border radius: --zkspg-btn-border-radius (default: 999px)
 * - Padding: --zkspg-btn-padding (default: 7px 14px)
 */
.zksproduct-filter-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       var(--zkspg-btn-padding, 7px 14px);
    border:        1px solid transparent;
    border-radius: var(--zkspg-btn-border-radius, 999px);
    font-size:     var(--zkspg-btn-font-size, 12px);
    font-weight:   var(--zkspg-btn-font-weight, 500);
    color:         var(--zkspg-btn-text-color, var(--zkspg-filter-btn-color));
    background:    var(--zkspg-filter-btn-bg, #F5F5F5);
    cursor:        pointer;
    transition:    background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font-family:   inherit;
    line-height:   1.4;
    white-space:   nowrap;
    letter-spacing: var(--zkspg-btn-letter-spacing, 0);
}

.zksproduct-filter-btn:hover {
    background:   var(--zkspg-filter-active-bg, var(--zkspg-filter-active-bg));
    color:        var(--zkspg-filter-active-color, #fff);
    border-color: var(--zkspg-filter-active-bg, var(--zkspg-filter-active-bg));
}

.zksproduct-filter-btn.is-active {
    background:   var(--zkspg-filter-active-bg, var(--zkspg-filter-active-bg));
    color:        var(--zkspg-filter-active-color, #fff);
    border-color: var(--zkspg-filter-active-bg, var(--zkspg-filter-active-bg));
    font-weight:  600;
}

.zksproduct-filter-count {
    font-size: 10px;
    opacity:   0.6;
}

.zksproduct-filter-btn.is-active .zksproduct-filter-count {
    opacity: 0.75;
}

/* Grid content loading state */
.zksproduct-grid-content {
    position:   relative;
    transition: opacity 0.2s ease;
    min-height: 120px;
}

.zksproduct-grid-content.is-loading {
    opacity:        0.4;
    pointer-events: none;
}

.zksproduct-grid-content.is-loading::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: transparent;
    cursor:     wait;
}

/* Inline layout: all groups in one row */
.zksproduct-filters--inline {
    flex-direction: row;
    flex-wrap:      wrap;
    align-items:    center;
    gap:            24px;
}

.zksproduct-filters--inline .zksproduct-filter-group {
    flex-shrink: 0;
}

/* ── Filter Bar Block ─────────────────────────────────────────────────────── */
/* The wrapper receives block-support classes/styles from WordPress.
   Typography, color, spacing, border panels in the editor all affect this element.
   We cascade those values down to labels and buttons via inherit. */
.zksproduct-filter-bar-block {
    color: inherit;
}

.zksproduct-filter-bar-block:where(:not([style*="padding"])) {
    padding: 0;
}

/* Typography cascade: CSS var (custom panel) → :root defaults */
.zksproduct-filter-bar-block .zksproduct-filter-label {
    font-size:      var(--zkspg-label-font-size);
    font-weight:    var(--zkspg-label-font-weight);
    letter-spacing: var(--zkspg-label-letter-spacing);
    text-transform: var(--zkspg-label-text-transform);
    line-height:    1.4;
    color:          var(--zkspg-label-text-color);
}

.zksproduct-filter-bar-block .zksproduct-filter-btn {
    font-size:      var(--zkspg-btn-font-size);
    font-weight:    var(--zkspg-btn-font-weight);
    letter-spacing: var(--zkspg-btn-letter-spacing);
    line-height:    1.4;
    color:          var(--zkspg-btn-text-color);
    /* Button appearance */
    background:     var(--zkspg-filter-btn-bg, #F5F5F5);
    border-radius:  var(--zkspg-btn-border-radius);
    padding:        var(--zkspg-btn-padding);
}

/* Active / hover state for Filter Bar block */
.zksproduct-filter-bar-block .zksproduct-filter-btn.is-active,
.zksproduct-filter-bar-block .zksproduct-filter-btn:hover {
    background:   var(--zkspg-filter-active-bg);
    color:        var(--zkspg-filter-active-color);
    border-color: var(--zkspg-filter-active-bg);
    font-weight:  600;
}

/* Gap between buttons */
.zksproduct-filter-bar-block .zksproduct-filter-buttons {
    gap: var(--zkspg-btn-gap);
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.zksproduct-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--zkspg-card-border);
}

.zksproduct-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--zkspg-card-border);
    border-radius: 8px;
    font-size: 13px;
    color: #2a2a2a;
    text-decoration: none;
    transition: all 0.2s ease;
}

.zksproduct-pagination .page-numbers.current,
.zksproduct-pagination .page-numbers:hover {
    background: var(--zkspg-btn-bg);
    color: var(--zkspg-btn-color);
    border-color: var(--zkspg-btn-bg);
}

/* ── Product Detail ───────────────────────────────────────────────────────── */
.zksproduct-detail__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.zksproduct-detail__featured {
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}

.zksproduct-detail__img {
    width: 100%;
    height: auto;
    display: block;
}

.zksproduct-detail__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.zksproduct-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.zksproduct-thumb.is-active,
.zksproduct-thumb:hover {
    border-color: var(--zkspg-btn-bg);
}

.zksproduct-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zksproduct-detail__title {
    font-size: 32px;
    line-height: 1.2;
    color: inherit;
    margin: 0 0 16px;
    font-weight: 700;
}

.zksproduct-detail__desc {
    font-size: 14px;
    line-height: 1.6;
    color: inherit;
    margin-bottom: 20px;
}

.zksproduct-detail__desc p {
    margin: 0 0 8px;
}

.zksproduct-detail__meta {
    padding: 16px 0;
    border-top: 1px solid var(--zkspg-card-border);
    border-bottom: 1px solid var(--zkspg-card-border);
    margin-bottom: 24px;
}

.zksproduct-meta-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
}

.zksproduct-meta-label {
    font-weight: 600;
    color: var(--zkspg-meta-color);
    min-width: 80px;
    flex-shrink: 0;
}

.zksproduct-meta-item a {
    color: var(--zkspg-link-color);
    text-decoration: none;
}

.zksproduct-meta-item a:hover {
    text-decoration: underline;
}

.zksproduct-detail__inquiry {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
}

.zksproduct-inquiry-title {
    font-size: 18px;
    color: inherit;
    margin: 0 0 8px;
}

.zksproduct-inquiry-desc {
    font-size: 13px;
    color: #555;
    margin: 0 0 16px;
}

.zksproduct-detail__content {
    padding-top: 48px;
    border-top: 1px solid var(--zkspg-card-border);
}

.zksproduct-detail__content h2 {
    font-size: 24px;
    color: inherit;
    margin: 0 0 24px;
}

.zksproduct-detail__body {
    font-size: 14px;
    line-height: 1.7;
}

.zksproduct-related {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid var(--zkspg-card-border);
}

.zksproduct-related__title {
    font-size: 22px;
    color: inherit;
    margin: 0 0 24px;
    font-weight: 700;
}

/* ── Enhanced Product Detail (Custom Template) ──────────────────────────── */
/* These styles provide additional customization options for the enhanced
   product detail template. Override these variables in your theme or
   modify the values directly to customize the appearance. */

/* Organic Stax / FSE Theme Compatibility */
:root {
    --zkspg-detail-gap: 48px;
    --zkspg-detail-gallery-width: 50%;
    --zkspg-detail-title-size: 32px;
    --zkspg-detail-desc-size: 14px;
    --zkspg-detail-meta-bg: transparent;
    --zkspg-detail-inquiry-bg: #f9f9f9;
    --zkspg-detail-content-padding: 48px 0;
}

.zksproduct-detail--enhanced {
    /* Allow full-width content in Organic Stax */
    max-width: 100%;
    padding: 0 var(--wp--style--block-gap, 24px);
}

.zksproduct-detail--enhanced .zksproduct-detail__main {
    gap: var(--zkspg-detail-gap);
    max-width: 1400px;
    margin: 0 auto;
}

/* Responsive layout for enhanced detail */
@media (max-width: 1024px) {
    .zksproduct-detail--enhanced .zksproduct-detail__main {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .zksproduct-detail--enhanced .zksproduct-detail__gallery {
        order: 1;
    }

    .zksproduct-detail--enhanced .zksproduct-detail__summary {
        order: 2;
    }
}

@media (max-width: 768px) {
    .zksproduct-detail--enhanced {
        padding: 0 16px;
    }

    .zksproduct-detail--enhanced .zksproduct-detail__title {
        font-size: 24px;
    }

    .zksproduct-detail--enhanced .zksproduct-detail__thumbs {
        gap: 6px;
    }

    .zksproduct-detail--enhanced .zksproduct-thumb {
        width: 56px;
        height: 56px;
    }
}

/* Custom meta styling */
.zksproduct-detail--enhanced .zksproduct-detail__meta {
    background: var(--zkspg-detail-meta-bg);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--zkspg-card-border);
}

/* Enhanced inquiry section */
.zksproduct-detail--enhanced .zksproduct-detail__inquiry {
    background: var(--zkspg-detail-inquiry-bg);
    border: 2px solid var(--zkspg-btn-bg);
    text-align: center;
}

.zksproduct-detail--enhanced .zksproduct-detail__inquiry .zksproduct-btn {
    margin-top: 16px;
    display: inline-block;
}

/* Content section enhancements */
.zksproduct-detail--enhanced .zksproduct-detail__content {
    padding: var(--zkspg-detail-content-padding);
    max-width: 1400px;
    margin: 0 auto;
}

.zksproduct-detail--enhanced .zksproduct-detail__content h2 {
    position: relative;
    padding-bottom: 16px;
}

.zksproduct-detail--enhanced .zksproduct-detail__content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--zkspg-btn-bg);
}

/* ── Product Categories Grid ──────────────────────────────────────────────── */
.zksproduct-categories-grid {
    display: grid;
    gap: 20px;
}

/* The category card inherits color from the block wrapper (block supports) */
.zksproduct-category-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--zkspg-card-border);
    border-radius: var(--zkspg-card-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    background: var(--zkspg-card-bg);
}

.zksproduct-category-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.zksproduct-category-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f5f5f5;
}

.zksproduct-category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zksproduct-category-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 36px;
    font-weight: 700;
}

.zksproduct-category-card__info {
    padding: 16px;
}

.zksproduct-category-card__title {
    font-size: 15px;
    font-weight: 600;
    color: inherit;
    margin: 0 0 4px;
}

.zksproduct-category-card__count {
    font-size: 12px;
    color: var(--zkspg-meta-color);
}

/* ── Inquiry Button Block ─────────────────────────────────────────────────── */
/* The wrapper gets block-supports styles. The inner <a> inherits them. */
.zksproduct-inquiry-block {
    display: inline-block;
}

.zksproduct-inquiry-block .zksproduct-btn {
    /* Override button colors from the Inquiry Button block's own
       color supports (set in right panel → Color → Background / Text) */
    background: var(--wp--custom--button-bg, var(--zkspg-btn-bg));
    color: var(--wp--custom--button-color, var(--zkspg-btn-color));
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.zksproduct-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--zkspg-meta-color);
}

.zksproduct-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: #856404;
}

.zksproduct-archive__title {
    font-size: 42px;
    line-height: 1.1;
    color: inherit;
    margin: 0 0 12px;
    font-weight: 700;
}

.zksproduct-archive__desc {
    font-size: 15px;
    color: #555;
    margin: 0 0 32px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .zksproduct-columns-3,
    .zksproduct-columns-4,
    .zksproduct-columns-5,
    .zksproduct-columns-6 { grid-template-columns: repeat(2, 1fr); }
    .zksproduct-detail__main { grid-template-columns: 1fr; gap: 32px; }
    .zksproduct-detail__title { font-size: 26px; }
}

@media (max-width: 600px) {
    .zksproduct-columns-2,
    .zksproduct-columns-3,
    .zksproduct-columns-4,
    .zksproduct-columns-5,
    .zksproduct-columns-6 { grid-template-columns: 1fr; }
    .zksproduct-detail__title { font-size: 22px; }
    .zksproduct-thumb { width: 48px; height: 48px; }
    .zksproduct-filter-buttons { gap: 6px; }
    .zksproduct-filter-btn { padding: 5px 10px; font-size: 11px; }
    .zksproduct-categories-grid { grid-template-columns: 1fr !important; }
}

/* ── Wireframe product detail (wireframe_product_detail.html) ───────────── */
:root {
    --zks-pdp-gutter: var(--wp--style--block-gap, 24px);

    /* Design tokens matching hifi_product_s6k.html */
    --zks-pdp-ink: #0C0C0C;
    --zks-pdp-ink-2: #2A2A2A;
    --zks-pdp-ink-3: #555;
    --zks-pdp-muted: #7A7A7A;
    --zks-pdp-muted-2: #A8A8A8;

    --zks-pdp-line: #E5E5E5;
    --zks-pdp-line-2: #F0F0F0;

    --zks-pdp-paper: #FFFFFF;
    --zks-pdp-paper-2: #FAFAFA;
    --zks-pdp-paper-3: #F5F5F5;

    --zks-pdp-accent: #98EEFF;
    --zks-pdp-accent-2: #C9F4FF;
    --zks-pdp-accent-3: #5BC9E5;
    --zks-pdp-button: #171717;

    --zks-pdp-sh-1: 0 1px 2px rgba(12,12,12,.04), 0 1px 3px rgba(12,12,12,.06);
    --zks-pdp-sh-2: 0 4px 8px rgba(12,12,12,.05), 0 2px 4px rgba(12,12,12,.06);
    --zks-pdp-sh-3: 0 12px 24px rgba(12,12,12,.06), 0 4px 8px rgba(12,12,12,.04);

    --zks-pdp-sp-1: 0.5rem;
    --zks-pdp-sp-2: 1rem;
    --zks-pdp-sp-3: 1.5rem;
    --zks-pdp-sp-4: 2rem;
    --zks-pdp-sp-5: 3rem;
    --zks-pdp-sp-6: 4rem;
    --zks-pdp-sp-7: 6rem;
    --zks-pdp-sp-8: 8rem;

    --zks-pdp-r-sm: 6px;
    --zks-pdp-r-md: 10px;
    --zks-pdp-r-lg: 14px;
    --zks-pdp-r-xl: 20px;
}

/* Product single: match Organic Stax theme content column width */
body.single-naibb2pr_products {
    --zks-pdp-content-width: var(--wp--style--global--content-size, var(--wp--custom--layout--content-size, 1200px));
    --zks-pdp-wide-width: var(--wp--style--global--wide-size, var(--zks-pdp-content-width, 1200px));
}

/* FSE constrained layout defaults to ~650px — widen PDP body on all languages */
body.single-naibb2pr_products .zksproduct-single-page.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)),
body.single-naibb2pr_products .zksproduct-pdp-editable-zone.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)),
body.single-naibb2pr_products .zksproduct-pdp-editable-zone .wp-block-post-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
    max-width: var(--zks-pdp-wide-width);
}

body.single-naibb2pr_products .zksproduct-pdp-editable-zone .zksproduct-pdp-module:not(.alignfull):not(.alignwide) {
    max-width: var(--zks-pdp-wide-width);
}

/* PDP dynamic modules (01/05/07/11): respect block Align toolbar — do not override with !important */
body.single-naibb2pr_products .zksproduct-pdp-module:not(.alignfull):not(.alignwide) {
    width: 100%;
    max-width: var(--zks-pdp-content-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body.single-naibb2pr_products .zksproduct-pdp-module.alignwide {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, var(--zks-pdp-content-width));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body.single-naibb2pr_products .zksproduct-pdp-module.alignfull {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

body.single-naibb2pr_products .zksproduct-pdp-middle:not(.alignfull):not(.alignwide),
body.single-naibb2pr_products .zksproduct-pdp-editable-zone:not(.alignfull):not(.alignwide) {
    width: 100%;
    max-width: var(--zks-pdp-content-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body.single-naibb2pr_products .zksproduct-pdp-middle.alignwide,
body.single-naibb2pr_products .zksproduct-pdp-editable-zone.alignwide {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, var(--zks-pdp-content-width));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body.single-naibb2pr_products .zksproduct-pdp-middle.alignfull,
body.single-naibb2pr_products .zksproduct-pdp-editable-zone.alignfull {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

body.post-type-archive-naibb2pr_products .site-main.zksproduct-archive-page,
body.post-type-archive-naibb2pr_products .zksproduct-archive-inner,
body.tax-naibb2pr_product_category .site-main.zksproduct-archive-page,
body.tax-naibb2pr_product_category .zksproduct-archive-inner,
body.tax-naibb2pr_product_industry .site-main.zksproduct-archive-page,
body.tax-naibb2pr_product_industry .zksproduct-archive-inner,
body.tax-naibb2pr_product_tag .site-main.zksproduct-archive-page,
body.tax-naibb2pr_product_tag .zksproduct-archive-inner {
    width: 100%;
    box-sizing: border-box;
}

.zksproduct-archive-page,
.zksproduct-archive-inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.zksproduct-archive__title {
    margin: 0 0 12px;
}

.zksproduct-archive__term-desc {
    margin: 0 0 24px;
    color: var(--zks-pdp-muted, #7a7a7a);
}

.zksproduct-pdp-page {
    width: 100%;
    max-width: var(--zks-pdp-content-width, 100%);
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 80px;
    box-sizing: border-box;
}

.zksproduct-detail--wireframe {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    float: none;
    color: inherit;
}

.zksproduct-pdp {
    color: var(--zks-pdp-ink);
    font-family: inherit;
    font-size: var(--zks-pdp-body-size);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Modular PDP blocks (01/05/07/11) */
.zksproduct-pdp-module {
    margin-bottom: var(--zks-pdp-section-gap, 22px);
}

.zksproduct-pdp-module-editor-live .zksproduct-pdp-module {
    margin-bottom: 0;
}

.zksproduct-pdp-module .zksproduct-pdp__section {
    margin-bottom: 0;
}

.zksproduct-pdp-module-preview {
    padding: 14px 16px;
    border: 1px dashed #c3c4c7;
    border-radius: 8px;
    background: #f6f7f7;
    margin-bottom: 8px;
}

.zksproduct-pdp-module-preview strong {
    display: block;
    margin-bottom: 4px;
}

/* Middle slot: product post_content — width follows block Align (default / wide / full) */
.zksproduct-pdp-middle:not(.alignfull):not(.alignwide),
.zksproduct-pdp-editable-zone:not(.alignfull):not(.alignwide) {
    width: 100%;
    max-width: var(--zks-pdp-content-width, 100%);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--zks-pdp-section-gap, 22px);
    box-sizing: border-box;
}

.zksproduct-pdp-middle.alignwide,
.zksproduct-pdp-editable-zone.alignwide {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, var(--zks-pdp-content-width, 100%));
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--zks-pdp-section-gap, 22px);
    box-sizing: border-box;
}

.zksproduct-pdp-middle.alignfull,
.zksproduct-pdp-editable-zone.alignfull {
    width: 100%;
    max-width: none;
    margin-bottom: var(--zks-pdp-section-gap, 22px);
    box-sizing: border-box;
}

.zksproduct-pdp-editable-zone .wp-block-post-content {
    width: 100%;
}

.zksproduct-pdp-editable-zone .zksproduct-pdp-editor-hint {
    color: var(--zks-pdp-muted, #888);
    font-size: 14px;
}

.zksproduct-pdp-editable-zone .zksproduct-pdp__uc-grid.wp-block-columns,
.zksproduct-pdp-editable-zone .zksproduct-pdp__uc-grid.wp-block-group,
.zksproduct-pdp-editable-zone .zksproduct-pdp__cert-grid.wp-block-group,
.zksproduct-pdp-editable-zone .zksproduct-pdp__comp-badges.wp-block-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--zks-pdp-sp-2, 14px);
}

.zksproduct-pdp-editable-zone .zksproduct-pdp__uc-grid.wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
    width: auto !important;
}

.zksproduct-pdp-editable-zone .zksproduct-pdp__uc-card {
    border: 1px solid var(--zks-pdp-line, #e8e8e8);
    border-radius: var(--zks-pdp-r-lg, 12px);
    overflow: hidden;
    height: 100%;
    padding: 0;
}

.zksproduct-pdp-editable-zone .zksproduct-pdp__uc-card .zksproduct-pdp__uc-img {
    margin: 0;
    aspect-ratio: 16 / 9;
    min-height: 0;
    background: linear-gradient(135deg, var(--zks-pdp-ink, #0c0c0c) 0%, #1f2a30 100%);
}

.zksproduct-pdp-editable-zone .zksproduct-pdp__uc-card .zksproduct-pdp__uc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zksproduct-pdp-editable-zone .zksproduct-pdp__uc-card .zksproduct-pdp__uc-body,
.zksproduct-pdp-editable-zone .zksproduct-pdp__uc-card .zksproduct-pdp__uc-tag,
.zksproduct-pdp-editable-zone .zksproduct-pdp__uc-card h3,
.zksproduct-pdp-editable-zone .zksproduct-pdp__uc-card p {
    padding-left: var(--zks-pdp-sp-3, 20px);
    padding-right: var(--zks-pdp-sp-3, 20px);
}

.zksproduct-pdp-editable-zone .zksproduct-pdp__uc-card .zksproduct-pdp__uc-body {
    padding-top: var(--zks-pdp-sp-3, 20px);
    padding-bottom: var(--zks-pdp-sp-3, 20px);
}

.zksproduct-pdp-editable-zone .zksproduct-pdp__uc-card .zksproduct-pdp__uc-tag {
    padding-top: var(--zks-pdp-sp-3, 20px);
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    color: var(--zks-pdp-muted, #888);
    text-transform: uppercase;
}

.zksproduct-pdp-editable-zone .zksproduct-pdp__badge {
    margin: 0;
}

.zksproduct-pdp-editable-zone p.zksproduct-pdp__cert {
    margin: 0;
}

.zksproduct-pdp-editable-zone .zksproduct-pdp-problem .zksproduct-pdp__problem-body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--zks-pdp-ink2, #444);
}

.zksproduct-pdp-section {
    background: var(--zks-pdp-section-bg, #fff);
    border: 1px solid var(--zks-pdp-line, #e2e2e2);
    border-radius: var(--zks-pdp-radius, 14px);
    padding: 28px;
    margin-bottom: var(--zks-pdp-section-gap, 22px);
}

.zksproduct-pdp-section .zksproduct-pdp__subhead {
    font-size: 22px;
    margin: 0 0 18px;
    font-weight: 700;
}

.zksproduct-pdp__section-head {
    margin-bottom: var(--zks-pdp-sp-5, 40px);
}

.zksproduct-pdp__section-eyebrow {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--zks-pdp-muted);
    font-weight: 600;
    margin: 0 0 var(--zks-pdp-sp-2, 16px);
}

.zksproduct-pdp__section-h2 {
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    line-height: 1.15;
    letter-spacing: -0.4px;
    margin: 0;
    font-weight: 600;
    color: inherit;
}

.zksproduct-pdp-ben-grid {
    gap: 14px !important;
}

.zksproduct-pdp-ben-card {
    border: 1px solid var(--zks-pdp-line, #e2e2e2);
    border-radius: 12px;
    padding: 18px;
    background: #fff;
    min-height: 170px;
}

.zksproduct-pdp-ben-ico {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--zks-pdp-ink, #0c0c0c);
    color: var(--zks-pdp-accent, #98eeff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: 0 0 8px !important;
    line-height: 1;
}

.zksproduct-pdp-ben-title {
    margin: 0 0 8px !important;
    font-size: 15px !important;
}

.zksproduct-pdp-ben-card p:not(.zksproduct-pdp-ben-ico) {
    margin: 0;
    font-size: 12.5px;
    color: var(--zks-pdp-muted, #7a7a7a);
    line-height: 1.5;
}

.zksproduct-pdp-flow {
    gap: 14px !important;
}

.zksproduct-pdp-step {
    padding: 16px;
    background: #fff;
    border: 1px solid var(--zks-pdp-line, #e2e2e2);
    border-radius: 12px;
    height: 100%;
}

.zksproduct-pdp-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--zks-pdp-accent, #98eeff);
    color: var(--zks-pdp-ink, #0c0c0c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    margin: 0 0 8px !important;
    line-height: 1;
}

.zksproduct-pdp-step-title {
    margin: 0 0 6px !important;
    font-size: 14px !important;
}

.zksproduct-pdp-step p:not(.zksproduct-pdp-step-num) {
    margin: 0;
    font-size: 12px;
    color: var(--zks-pdp-muted, #7a7a7a);
    line-height: 1.5;
}

.zksproduct-pdp-section .zksproduct-pdp__diagram {
    margin-top: 20px;
    width: 100%;
    height: auto;
}

.zksproduct-pdp__section {
    background: var(--zks-pdp-section-bg);
    border-radius: var(--zks-pdp-radius);
    margin-bottom: var(--zks-pdp-section-gap);
}

.zksproduct-pdp__hero {
    border: none;
    background: transparent;
    padding: 0 0 8px;
    margin-bottom: 0;
}

.zksproduct-pdp__crumb {
    font-size: 12px;
    color: var(--zks-pdp-muted);
    margin-bottom: 14px;
}

.zksproduct-pdp__crumb a {
    color: var(--zks-pdp-muted);
    text-decoration: none;
}

.zksproduct-pdp__crumb a:hover {
    color: var(--zks-pdp-ink);
}

.zksproduct-pdp__crumb-sep {
    margin: 0 6px;
}

.zksproduct-pdp__hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: center;
}

.zksproduct-pdp__eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--zks-trust);
    text-transform: uppercase;
    margin: 0 0 10px;
    font-weight: 600;
}

.zksproduct-pdp__headline {
    font-size: clamp(2.2rem,4.5vw,3.2rem);
    line-height: 1.1;
    margin: 0 0 12px;
    letter-spacing: -0.4px;
    font-weight: 700;
    color: var(--zks-trust) !important;
}

.zksproduct-pdp__subline {
    font-size: 15.5px;
    color: var(--zkspg-ink-3);
    line-height: 1.6;
    margin-bottom: 18px;
}

.zksproduct-pdp__subline p {
    margin: 0;
}

.zksproduct-pdp__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 18px;
}

.zksproduct-pdp__cta-row--blocks .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.zksproduct-pdp__cta-row--blocks .wp-block-button,
.zksproduct-pdp__final .wp-block-buttons .wp-block-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

.zksproduct-pdp__cta-row--blocks .wp-block-button .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    background: var(--zks-pdp-btn, #171717);
    color: var(--zks-pdp-btn-text, #98eeff);
    border: 2px solid var(--zks-pdp-accent, #171717);
    border-radius: var(--zks-pdp-radius, 10px);
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.zksproduct-pdp__cta-row--blocks .wp-block-button .wp-block-button__link:hover {
    opacity: 0.92;
    color: var(--zks-pdp-btn-text, #98eeff);
}

.zksproduct-pdp__cta-row--blocks .wp-block-button.is-style-outline .wp-block-button__link {
    background: #fff;
    color: var(--zks-pdp-btn, #171717);
    border-color: var(--zks-pdp-ink, #0c0c0c);
}

.zksproduct-pdp__cta-row--blocks .wp-block-button.is-style-outline .wp-block-button__link:hover {
    opacity: 0.92;
    color: var(--zks-pdp-btn, #171717);
}

.zksproduct-pdp-hero-editor-canvas .zksproduct-pdp-module {
    display: contents;
}

.zksproduct-pdp-hero-editor-canvas .zksproduct-pdp-module > .zksproduct-pdp-module {
    display: contents;
}

.zksproduct-pdp-inner-head-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #757575;
}

.zksproduct-pdp-inner-head-slot-wrap {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px dashed #c3c4c7;
    border-radius: 8px;
    background: #fff;
}

.zksproduct-pdp-final-editor .zksproduct-pdp-inner-content-slot {
    text-align: center;
}

.zksproduct-pdp-module-editor-live .block-editor-block-list__layout {
    pointer-events: auto;
}

.zksproduct-pdp-module-editor-live .zksproduct-pdp-inner-head-slot-wrap + .zksproduct-pdp-module-preview,
.zksproduct-pdp-module-editor-live .zksproduct-pdp-inner-head-slot-wrap + div > .zksproduct-pdp-module {
    margin-top: 0;
}

.zksproduct-pdp__cta-row--center {
    justify-content: center;
}

.zksproduct-pdp__btn {
    display: inline-block;
    background: var(--zks-pdp-btn);
    color: var(--zks-pdp-btn-text);
    border: 2px solid var(--zks-pdp-accent);
    border-radius: var(--zks-pdp-radius, 10px);
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    text-transform: none;
}

.zksproduct-pdp__btn:hover {
    opacity: 0.9;
    color: var(--zks-pdp-btn-text);
}

.zksproduct-pdp__btn--ghost {
    background: #fff;
    color: var(--zks-pdp-btn);
    border-color: var(--zks-pdp-ink);
}

.zksproduct-pdp__btn--on-dark {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.zksproduct-pdp__spec-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.zksproduct-pdp__spec-cell {
    background: var(--zks-pdp-section-bg);
    border: 1px solid var(--zks-pdp-line);
    border-radius: calc(var(--zks-pdp-radius, 14px) * 0.6);
    padding: 10px 12px;
}

.zksproduct-pdp__spec-k {
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--zks-pdp-muted);
    text-transform: uppercase;
}

.zksproduct-pdp__spec-v {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
}

.zksproduct-pdp__cert-strip {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f0f8f0;
    border: 1px solid #c8e0c8;
    border-radius: calc(var(--zks-pdp-radius, 14px) * 0.7);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.zksproduct-pdp__cert-strip-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #2e7d32;
    font-weight: 700;
}

.zksproduct-pdp__cert-strip-badges {
    font-size: 0.85rem;
    color: #2e7d32;
    font-weight: 600;
}

.zksproduct-pdp__hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.zksproduct-pdp__hero-meta-pill {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 6px 12px;
    border: 1px solid var(--zks-pdp-line);
    border-radius: 999px;
    color: var(--zks-pdp-ink2);
    text-decoration: none;
    background: #fff;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.zksproduct-pdp__hero-meta-pill:hover {
    border-color: var(--zks-pdp-btn);
    color: var(--zks-pdp-ink);
}

.zksproduct-pdp__inquiry-inline {
    margin-top: 20px;
}

.zksproduct-pdp__featured {
    border-radius: 12px;
    overflow: hidden;
    background: #fcfcfc;
    min-height: 280px;
}

.zksproduct-pdp__img {
/*    width: 100%;*/
    height: 500px;
    display: block;
    object-fit: contain;
}

.zksproduct-pdp__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.zksproduct-pdp__thumbs .zksproduct-thumb {
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
}

.zksproduct-pdp__thumbs .zksproduct-thumb.is-active,
.zksproduct-pdp__thumbs .zksproduct-thumb:hover {
    border-color: var(--zks-pdp-btn);
}

.zksproduct-pdp__thumbs .zksproduct-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zksproduct-pdp__subhead {
    font-size: 13px;
    margin: 0 0 18px;
    color: var(--zks-pdp-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.zksproduct-pdp__section-head {
    margin-bottom: var(--zks-pdp-sp-5, 40px);
}

.zksproduct-pdp__section-eyebrow {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--zks-pdp-muted);
    font-weight: 600;
    margin: 0 0 var(--zks-pdp-sp-2, 16px);
}

.zksproduct-pdp__section-h2 {
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    line-height: 1.15;
    letter-spacing: -0.4px;
    margin: 0;
    font-weight: 600;
    color: inherit;
}

.zksproduct-pdp__section--soft {
    background: var(--zks-pdp-paper-2, #f5f5f5);
}

.zksproduct-pdp__section-head--center {
    text-align: center;
}

.zksproduct-pdp__section-head--center .zksproduct-pdp__section-h2 {
    max-width: 42ch;
    margin-left: auto;
    margin-right: auto;
}

/* Site Editor block styles (toolbar → Styles) */
.wp-block-zksproduct-product-detail.is-style-compact .zksproduct-pdp__section {
    padding: 18px 20px;
    margin-bottom: 14px;
}

.wp-block-zksproduct-product-detail.is-style-spacious .zksproduct-pdp__section {
    padding: 36px 32px;
    margin-bottom: 32px;
}

/* Native element styles from block supports */
.wp-block-zksproduct-product-detail .zksproduct-pdp a.wp-element-link {
    color: inherit;
}

.wp-block-zksproduct-product-detail .zksproduct-pdp h1.wp-block-heading,
.wp-block-zksproduct-product-detail .zksproduct-pdp h2.wp-block-heading,
.wp-block-zksproduct-product-detail .zksproduct-pdp h3.wp-block-heading {
    color: inherit;
}

.zksproduct-pdp__problem .zksproduct-pdp__problem-body {
    max-width: 780px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--zks-pdp-ink2);
}

.zksproduct-pdp__ben-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.zksproduct-pdp__ben-card {
    border: 1px solid var(--zks-pdp-line);
    border-radius: 12px;
    padding: 18px;
    background: #fff;
    min-height: 170px;
}

.zksproduct-pdp__ben-ico {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--zks-pdp-ink);
    color: var(--zks-pdp-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 8px;
}

.zksproduct-pdp__ben-title {
    margin: 0 0 8px;
    font-size: 15px;
}

.zksproduct-pdp__ben-card p {
    margin: 0;
    font-size: 12.5px;
    color: var(--zks-pdp-muted);
    line-height: 1.5;
}

.zksproduct-pdp__flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.zksproduct-pdp__step {
    padding: 16px;
    background: #fff;
    border: 1px solid var(--zks-pdp-line);
    border-radius: 12px;
}

.zksproduct-pdp__step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--zks-pdp-accent);
    color: var(--zks-pdp-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 8px;
}

.zksproduct-pdp__step-title {
    margin: 0 0 6px;
    font-size: 14px;
}

.zksproduct-pdp__step p {
    margin: 0;
    font-size: 12px;
    color: var(--zks-pdp-muted);
    line-height: 1.5;
}

.zksproduct-pdp__diagram {
    margin-top: 20px;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.zksproduct-pdp__spec-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: var(--zks-pdp-sp-3);
    flex-wrap: wrap;
}

.zksproduct-pdp__spec-tab {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 8px 16px;
    border: 1px solid var(--zks-pdp-line);
    border-radius: 999px;
    background: var(--zks-pdp-paper);
    color: var(--zks-pdp-ink-2);
    cursor: pointer;
    transition: all 0.15s ease;
}

.zksproduct-pdp__spec-tab:hover {
    border-color: var(--zks-pdp-ink-3);
}

.zksproduct-pdp__spec-tab.is-active {
    background: var(--zks-pdp-ink);
    color: #fff;
    border-color: var(--zks-pdp-ink);
}

.zksproduct-pdp__spec-tbl {
    width: 100%;
    border-collapse: collapse;
    background: var(--zks-pdp-paper);
    border: 1px solid var(--zks-pdp-line);
    border-radius: var(--zks-pdp-r-lg);
    overflow: hidden;
    display: none;
}

.zksproduct-pdp__spec-tbl--unified {
    display: table;
}

.zksproduct-pdp__spec-tbl.is-active {
    display: table;
}

.zksproduct-pdp__spec-row[data-group] {
    display: none;
}

.zksproduct-pdp__spec-row.is-visible {
    display: table-row;
}

.zksproduct-pdp__spec-tbl tr {
    transition: background 0.12s ease;
}

.zksproduct-pdp__spec-tbl tr:hover {
    background: var(--zks-pdp-paper-2);
}

.zksproduct-pdp__spec-tbl th,
.zksproduct-pdp__spec-tbl td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--zks-pdp-line-2);
    font-size: 0.94rem;
    text-align: left;
    line-height: 1.4;
}

.zksproduct-pdp__spec-tbl tr:last-child th,
.zksproduct-pdp__spec-tbl tr:last-child td {
    border-bottom: none;
}

.zksproduct-pdp__spec-tbl th {
    text-transform: capitalize;
    font-weight: 600;
    color: var(--zks-pdp-ink);
    width: 34%;
    background: var(--zks-pdp-paper-2);
    font-size: 0.8125rem;
}

.zksproduct-pdp__spec-tbl td {
    color: var(--zks-pdp-ink-2);
}

.zksproduct-pdp__uc-grid {
    display: grid;
    grid-template-columns: repeat(var(--zks-uc-cols, 3), minmax(0, 1fr));
    gap: var(--zks-pdp-sp-2, 14px);
}

.zksproduct-pdp__uc-card {
    border: 1px solid var(--zks-pdp-line);
    border-radius: var(--zks-pdp-r-lg, 12px);
    overflow: hidden;
    background: var(--zks-pdp-paper, #fff);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    min-width: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.zksproduct-pdp__uc-card:hover {
    border-color: var(--zks-pdp-ink);
    transform: translateY(-3px);
    box-shadow: var(--zks-pdp-sh-3, 0 12px 32px rgba(0, 0, 0, 0.12));
    color: inherit;
}

.zksproduct-pdp__uc-img {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--zks-pdp-ink, #0c0c0c) 0%, #1f2a30 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zksproduct-pdp__uc-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 40% 60%, rgba(152, 238, 255, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.zksproduct-pdp__uc-img img,
.zksproduct-pdp__uc-img .zksproduct-pdp__uc-img-el {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zksproduct-pdp__uc-body {
    padding: var(--zks-pdp-sp-3, 20px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.zksproduct-pdp__uc-tag {
    font-size: 11px;
    letter-spacing: 1.6px;
    color: var(--zks-pdp-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.zksproduct-pdp__uc-body h3 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.zksproduct-pdp__uc-body p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--zks-pdp-ink-3, var(--zks-pdp-ink2));
    line-height: 1.55;
    flex: 1;
}

.zksproduct-pdp__cert-grid {
    display: grid;
    grid-template-columns: repeat(var(--zks-cert-cols, 7), minmax(0, 1fr));
    gap: var(--zks-pdp-sp-1, 10px);
}

.zksproduct-pdp__cert {
    aspect-ratio: 1 / 1;
    background: var(--zks-pdp-paper, #fff);
    border: 1px solid var(--zks-pdp-line);
    border-radius: var(--zks-pdp-r-md, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--zks-pdp-ink-2, var(--zks-pdp-ink2));
    padding: var(--zks-pdp-sp-1, 10px);
    line-height: 1.2;
    min-width: 0;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.zksproduct-pdp__cert:hover {
    border-color: var(--zks-pdp-ink);
    background: var(--zks-pdp-ink);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--zks-pdp-sh-2, 0 8px 24px rgba(0, 0, 0, 0.1));
}

.zksproduct-pdp__comp-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--zks-pdp-sp-1, 10px);
    text-align: center;
}

.zksproduct-pdp__badge {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--zks-pdp-line);
    border-radius: var(--zks-pdp-r-md, 10px);
    padding: var(--zks-pdp-sp-1, 10px);
    background: var(--zks-pdp-paper, #fff);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--zks-pdp-ink-2, var(--zks-pdp-ink2));
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    margin: 0;
    min-width: 0;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.zksproduct-pdp__badge:hover {
    border-color: var(--zks-pdp-ink);
    background: var(--zks-pdp-ink);
    color: #fff;
    transform: translateY(-2px);
}

.zksproduct-pdp__compat {
    display: grid;
    grid-template-columns: repeat(var(--zks-compat-cols, 3), minmax(0, 1fr));
    gap: var(--zks-pdp-sp-2);
}

.zksproduct-pdp__compat-card {
    background: #141C26A6;
    border: 1px solid #FFFFFF1A;
    border-radius: var(--zks-pdp-r-lg);
    padding: var(--zks-pdp-sp-2);
    display: flex;
    align-items: center;
    gap: var(--zks-pdp-sp-2);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.zksproduct-pdp__compat-card:hover {
    border-color: var(--zks-accent);
    transform: translateY(-2px);
}

.zksproduct-pdp__compat-img {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    background: var(--zks-pdp-paper-2);
    border-radius: var(--zks-pdp-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.zksproduct-pdp__compat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zksproduct-pdp__compat-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zksproduct-pdp__compat-card h3 {
    color: #fff;
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.1px;
}

.zksproduct-pdp__compat-card p {
    color: #aaa;
    margin: 0 !important;
    font-size: 0.82rem;
    color: var(--zks-pdp-muted);
    line-height: 1.4;
}

.zksproduct-pdp__compat-lnk {
    margin-left: auto;
    color: var(--zks-accent-3);
    font-size: 1.2rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.zksproduct-pdp__compat-card:hover .zksproduct-pdp__compat-lnk {
    transform: translateX(4px);
}

.zksproduct-pdp__quote {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 24px;
    align-items: center;
    background: var(--zks-pdp-ink);
    color: #fff;
    padding: 28px;
    border-radius: 14px;
}

.zksproduct-pdp__quote-img img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.zksproduct-pdp__quote blockquote {
    font-size: 18px;
    line-height: 1.55;
    margin: 0;
    font-weight: 500;
}

.zksproduct-pdp__quote-author {
    margin-top: 14px;
    font-size: 12px;
    color: #bbb;
}

.zksproduct-pdp__testimonial-wrap {
    padding: 0;
    border: none;
    background: transparent;
}

.zksproduct-pdp__faq-item {
    border-bottom: 1px solid var(--zks-pdp-line);
    padding: 14px 0;
}

.zksproduct-pdp__faq-q {
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.zksproduct-pdp__faq-q::-webkit-details-marker {
    display: none;
}

.zksproduct-pdp__faq-a {
    font-size: 13px;
    color: var(--zks-pdp-ink2);
    line-height: 1.6;
    margin-top: 8px;
}

.zksproduct-pdp__final {
    background: linear-gradient(135deg, #0C0C0C 0%, #1A1F22 100%);
    color: #fff;
    border: none;
    text-align: center;
    padding: var(--zks-pdp-sp-6) var(--zks-pdp-sp-5);
    border-radius: var(--zks-pdp-r-xl);
    position: relative;
    overflow: hidden;
}

.zksproduct-pdp__final::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(152, 238, 255, 0.08) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.zksproduct-pdp__final-title {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 600;
    margin: 0 0 var(--zks-pdp-sp-1);
    letter-spacing: -0.4px;
    color: #fff;
    position: relative;
}

.zksproduct-pdp__final-desc {
    font-size: 0.95rem;
    color: #bbb;
    margin: 0 0 var(--zks-pdp-sp-3);
    position: relative;
}

.zksproduct-pdp__cta-row--center {
    display: flex;
    gap: var(--zks-pdp-sp-2);
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

/* Final CTA — core/button blocks: style the link only (no double wrapper) */
.zksproduct-pdp__final .wp-block-buttons {
    display: flex;
    gap: var(--zks-pdp-sp-2);
    justify-content: center;
    flex-wrap: wrap;
}

.zksproduct-pdp__final .wp-block-button .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--zks-pdp-button, #171717);
    color: var(--zks-pdp-accent, #98eeff);
    border: 2px solid var(--zks-pdp-accent, #98eeff);
    border-radius: var(--zks-pdp-r-md, 10px);
    padding: 14px 24px;
    font-size: var(--zks-pdp-sp-2, 15px);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

.zksproduct-pdp__final .wp-block-button .wp-block-button__link:hover {
    background: var(--zks-pdp-accent, #98eeff);
    color: var(--zks-pdp-button, #171717);
    box-shadow: var(--zks-pdp-sh-2, 0 8px 24px rgba(0, 0, 0, 0.12));
    transform: translateY(-1px);
}

.zksproduct-pdp__final .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.zksproduct-pdp__final .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: #fff;
    color: var(--zks-pdp-ink, #0c0c0c);
    border-color: #fff;
}

.zksproduct-pdp__bulk {
    padding: 0;
}

.zksproduct-pdp__editor-content .zksproduct-pdp__body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--zks-pdp-ink2);
}

@media (max-width: 900px) {
    .zksproduct-pdp__hero-grid,
    .zksproduct-pdp__quote {
        grid-template-columns: 1fr;
    }
    .zksproduct-pdp__ben-grid,
    .zksproduct-pdp__flow,
    .zksproduct-pdp-ben-grid,
    .zksproduct-pdp-flow,
    .zksproduct-pdp__compat {
        grid-template-columns: repeat(2, 1fr);
    }
    .zksproduct-pdp__uc-grid,
    .zksproduct-pdp__cert-grid,
    .zksproduct-pdp__comp-badges {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: var(--zks-pdp-sp-2, 14px);
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .zksproduct-pdp__uc-card {
        flex: 0 0 min(72vw, 320px);
        scroll-snap-align: start;
    }
    .zksproduct-pdp__cert,
    .zksproduct-pdp__badge {
        flex: 0 0 88px;
        scroll-snap-align: start;
    }
    .zksproduct-pdp__spec-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .zksproduct-pdp-ben-grid.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column,
    .zksproduct-pdp-flow.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 50% !important;
    }
}

@media (max-width: 600px) {
    .zksproduct-pdp-page {
        padding-bottom: 48px;
    }

    .zksproduct-pdp-ben-grid.wp-block-columns > .wp-block-column,
    .zksproduct-pdp-flow.wp-block-columns > .wp-block-column {
        flex-basis: 100% !important;
    }
    .zksproduct-pdp__section {
        padding: 20px 16px;
    }
    .zksproduct-pdp__ben-grid,
    .zksproduct-pdp__flow,
    .zksproduct-pdp-ben-grid,
    .zksproduct-pdp-flow,
    .zksproduct-pdp__compat {
        grid-template-columns: 1fr;
    }

    .zksproduct-pdp-section {
        padding: 20px 16px;
    }
}