/* ============================================================
   Product Accordion Tabs — accordion.css
   Matches the clean, border-separated style in the screenshots
   ============================================================ */

.pat-accordion {
    margin-top: 32px;
    border-top: 1px solid #e0e0e0;
    font-family: inherit;
}

/* ── Each row ── */
.pat-item {
    border-bottom: 1px solid #e0e0e0;
}

/* ── Trigger button ── */
.pat-trigger {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    padding:         16px 0;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    text-align:      left;
    color:           #1a2340;   /* dark navy, like Strathberry */
    font-size:       14px;
    font-weight:     400;
    line-height:     1.4;
    transition:      opacity 0.15s ease;
}

.pat-trigger:hover {
    opacity: 0.6;
    background: transparent !important;
    color: #1a2340 !important;
}

.pat-trigger:focus {
    outline: none;
    background: transparent !important;
}

.pat-trigger:focus-visible {
    outline: 2px solid #1a2340;
    outline-offset: 2px;
}

.pat-trigger__label {
    flex: 1;
}

/* ── Chevron icon ── */
.pat-trigger__icon {
    flex-shrink: 0;
    margin-left: 12px;
    color:       #1a2340;
    transition:  transform 0.25s ease;
    line-height: 0;
}

/* Rotate chevron when open */
.pat-trigger[aria-expanded="true"] .pat-trigger__icon {
    transform: rotate(90deg);
}

/* ── Panel (collapsed by default via `hidden` attribute) ── */
.pat-panel {
    overflow: hidden;
}

/* Animated open state — JS removes `hidden` and adds `.is-open` */
.pat-panel.is-open {
    display: block; /* override `hidden` */
}

.pat-panel__inner {
    padding-bottom: 20px;
    font-size:   14px;
    line-height: 1.7;
    color:       #444;
}

.pat-panel__inner p:first-child { margin-top: 0; }
.pat-panel__inner p:last-child  { margin-bottom: 0; }

/* ── Smooth height animation via JS-set CSS custom property ── */
.pat-panel {
    max-height: 0;
    transition: max-height 0.3s ease;
}

.pat-panel.is-open {
    max-height: var(--pat-panel-height, 9999px);
}