/*
 * Product information accordion (template-parts/product/single/description.php).
 *
 * The chrome only: rows, separators, the uppercase title and the plus/minus
 * icon. The panel CONTENT is styled by the long-description rules already in
 * single-product.css — every panel carries .casablanca-product-description, so the
 * headings, lists, tables, images and alignments a merchant types keep the
 * styling the description always had. This file only neutralises that rule's
 * own separator and top margin, which belong to the standalone block it used
 * to be.
 *
 * No cards, no shadows, no hover effect, no borders other than the separators.
 * Runtime state is the aria-expanded attribute and the `hidden` attribute —
 * never a JS-toggled class, which a "remove unused CSS" pass would strip.
 *
 * Loaded on product pages that actually have a panel to show
 * (page_context()['product_info']).
 */

.casablanca-product-info {
    /* The separator the product page's own section blocks use. */
    --pi-border: #e5e7eb;
    /* 12px: the spacing scale's sm + xs. The row's height comes from this
       plus one line of --casablanca-fluid-body, floored at --pi-row-min. */
    --pi-row-space: calc(var(--casablanca-space-sm) + var(--casablanca-space-xs));
    --pi-row-min: 44px;
    --pi-icon: var(--casablanca-icon-size-xs);

    width: 100%;
    margin-top: var(--casablanca-space-lg);
    border-bottom: 1px solid var(--pi-border);
    box-sizing: border-box;
    clear: both;
}

.casablanca-pi-item {
    border-top: 1px solid var(--pi-border);
}

.casablanca-pi-heading {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* The whole row is the target: full width, generously tall on touch. */
.casablanca-pi-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--casablanca-space-md);
    width: 100%;
    /* Floor, not a fixed height: the row stays a comfortable touch target
       while the padding above decides how tall it actually is. */
    min-height: var(--pi-row-min);
    margin: 0;
    padding: var(--pi-row-space) 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--casablanca-text-primary, #111827);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.casablanca-pi-title {
    /* The theme's own fluid body curve (12px → 14px), the same scale the rest
       of the product page runs on. Uppercase at 700 reads heavier than
       anything else in this column, so 600. */
    font-size: var(--casablanca-fluid-body);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    min-width: 0;
}

.casablanca-pi-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--casablanca-icon-size-xs);
    height: var(--casablanca-icon-size-xs);
    color: currentColor;
}

.casablanca-pi-icon .casablanca-pi-icon-plus,
.casablanca-pi-icon .casablanca-pi-icon-minus {
    display: flex;
}

.casablanca-pi-icon svg {
    width: var(--casablanca-icon-size-xs);
    height: var(--casablanca-icon-size-xs);
    display: block;
}

/*
 * Closed = plus, open = minus. The state lives on the button, as an attribute.
 * Both selectors below are deliberately two classes deep: the `display: flex`
 * above is what makes the wrappers shrink-wrap their SVG, and a bare
 * `.casablanca-pi-icon-minus` would lose to it and leave BOTH glyphs on screen.
 */
.casablanca-pi-icon .casablanca-pi-icon-minus,
.casablanca-pi-toggle[aria-expanded="true"] .casablanca-pi-icon-plus {
    display: none;
}

.casablanca-pi-toggle[aria-expanded="true"] .casablanca-pi-icon-minus {
    display: flex;
}

.casablanca-pi-toggle:focus-visible {
    outline: 2px solid var(--casablanca-brand, #531628);
    outline-offset: 2px;
}

/*
 * The panel. product-info.js animates the inline height between 0 and the
 * content height; `overflow: hidden` is what keeps the content clipped while
 * it does. A closed panel is `hidden`, so the collapsed state costs no layout.
 */
.casablanca-pi-panel {
    overflow: hidden;
}

.casablanca-pi-panel[hidden] {
    display: none;
}

.casablanca-pi-content {
    /* Reading space under an open panel — deliberately looser than the row
       padding, which is chrome. */
    padding-bottom: var(--casablanca-space-md);
}

/*
 * .casablanca-product-description is the long description's own block styling: it
 * carries a top border and top padding because it used to stand alone under
 * the summary. Inside a panel the separator is the row's, not its.
 */
.casablanca-product-info .casablanca-product-description {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Phones: the same step down the page's own rules take at this width. */
@media (max-width: 767px) {
    .casablanca-product-info {
        --pi-row-space: var(--casablanca-space-sm);
        --pi-row-min: 42px;
        --pi-icon: 13px;

        margin-top: var(--casablanca-space-md);
    }

    .casablanca-pi-toggle {
        gap: var(--casablanca-space-sm);
    }

    .casablanca-pi-content {
        padding-bottom: calc(var(--casablanca-space-sm) + var(--casablanca-space-xs));
    }
}