/*
  Product detail.

  Apple's product hierarchy applied to a handmade piece: the photograph is the largest thing on the
  page, the purchase-critical facts sit immediately beside it in a sticky column, and everything else
  is prose below. Nothing that matters to a buying decision is behind an animation or an accordion.
*/

.product-detail {
    padding-block: var(--space-lg) var(--section-gap);
}

.breadcrumbs { padding-block: var(--space-md) var(--space-lg); }

.breadcrumbs__link {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    transition: color var(--transition-fast);
}

.breadcrumbs__link:hover { color: var(--color-accent); }

/* ---- Two-column head ------------------------------------------------------ */
.product-detail__layout {
    display: grid;
    gap: var(--space-xl);
    align-items: start;
}

@media (min-width: 62rem) {
    .product-detail__layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: var(--space-3xl);
    }

    .product-detail__info {
        position: sticky;
        top: calc(var(--header-height) + var(--space-lg));
    }
}

.product-detail__info {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    align-content: start;
}

.product-detail__kind {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    font-weight: var(--weight-semibold);
    color: var(--color-ink-muted);
}

.product-detail__title {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.product-detail__short {
    font-size: var(--text-lg);
    color: var(--color-ink-muted);
    max-inline-size: var(--measure);
    margin: 0;
}

.product-detail__price .price__current { font-size: var(--text-2xl); }

/* Availability badge — every state is styled, including the ones the old sheet forgot. */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-ink-strong);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin: 0;
}

.badge--availablenow,
.badge--availabledigitally { background: var(--cg-red); color: var(--cg-white); }
.badge--lowstock { background: var(--cg-red-deep); color: var(--cg-white); }
.badge--madetoorder { background: var(--cg-black); color: var(--cg-paper); }
.badge--reserved { background: var(--cg-black); color: var(--cg-paper); }
.badge--soldout,
.badge--unavailable,
.badge--draftorhidden { background: var(--color-surface-muted); color: var(--color-ink-muted); }
.badge--external { background: transparent; color: var(--color-ink-strong); box-shadow: inset 0 0 0 1.5px var(--cg-black); }

/* ---- Made-to-order lead time ----------------------------------------------- */
.product-detail__lead {
    display: grid;
    gap: var(--space-2xs);
    padding-inline-start: var(--space-md);
    border-inline-start: 3px solid var(--color-accent);
}

.product-detail__lead-title {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin: 0;
}

.product-detail__lead p { margin: 0; font-size: var(--text-sm); }
.product-detail__note { color: var(--color-ink-muted); }

/* ---- Purchase block --------------------------------------------------------- */
.purchase {
    display: grid;
    gap: var(--space-sm);
    justify-items: start;
    inline-size: 100%;
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--color-border);
}

.add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-md);
    inline-size: 100%;
}

.add-to-cart__button { flex: 1 1 14rem; }

.add-to-cart__feedback {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    min-block-size: 1.25rem;
}

/* Sold out is stated plainly, in the brand's own voice, with no disabled-looking cart control. */
.purchase__sold {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--color-accent);
    margin: 0;
}

/* Reserved: held by a checkout in progress, stated plainly with when it may come back. */
.purchase__reserved {
    display: grid;
    gap: var(--space-3xs);
    margin: 0;
}

.purchase__reserved strong {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: var(--text-lg);
    font-weight: inherit;
    color: var(--color-ink-strong);
}

.purchase__reserved span {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.purchase__note,
.purchase__external-note,
.purchase__external-unavailable {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin: 0;
}

/* The Hotmart boundary is a first-class part of the layout, not fine print. */
.purchase__external-disclosure {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    padding-inline-start: var(--space-md);
    border-inline-start: 3px solid var(--color-accent);
    margin: 0;
    max-inline-size: var(--measure);
}

.purchase__external-unavailable {
    padding: var(--space-sm) var(--space-lg);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-pill);
}

/* ---- Fulfilment facts ------------------------------------------------------- */
.product-detail__fulfilment {
    list-style: none;
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.product-detail__fulfilment li {
    position: relative;
    padding-inline-start: var(--space-md);
}

.product-detail__fulfilment li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.62em;
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
}

/* ---- Prose sections ---------------------------------------------------------- */
.product-detail__section {
    padding-block-start: var(--space-xl);
    margin-block-start: var(--space-xl);
    border-block-start: 1px solid var(--color-border);
}

.product-detail__section-title {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-block-end: var(--space-md);
}

.product-detail__description {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    max-inline-size: var(--measure-wide);
}

/* ---- Piece facts (unique / handmade / care) ---------------------------------- */
.product-facts {
    display: grid;
    gap: var(--space-xl);
}

@media (min-width: 48rem) {
    .product-facts { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

.product-facts__item {
    display: grid;
    gap: var(--space-2xs);
    align-content: start;
    padding-block-start: var(--space-sm);
    border-block-start: 2px solid var(--color-ink-strong);
}

.product-facts__title { font-size: var(--text-base); margin: 0; }
.product-facts__body { color: var(--color-ink-muted); font-size: var(--text-sm); margin: 0; }

/* ---- Specs ------------------------------------------------------------------- */
.spec-list {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: var(--space-xs) var(--space-lg);
    margin: 0;
    max-inline-size: 34rem;
}

.spec-list dt {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    font-weight: var(--weight-semibold);
}

.spec-list dd { margin: 0; font-size: var(--text-sm); }

/* ---- Bundle contents ---------------------------------------------------------- */
.bundle-contents {
    list-style: none;
    display: grid;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.bundle-contents__item { display: grid; gap: var(--space-sm); }

.bundle-contents__image {
    inline-size: 100%;
    aspect-ratio: var(--ratio-piece);
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.bundle-contents__body { display: grid; gap: 2px; }

.bundle-contents__qty {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.bundle-contents__name { font-weight: var(--weight-semibold); color: var(--color-ink-strong); }
.bundle-contents__name:hover { color: var(--color-accent); }
.bundle-contents__kind { font-size: var(--text-xs); color: var(--color-ink-muted); }

/* ---- Collections --------------------------------------------------------------- */
.product-detail__collections {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
}

.product-detail__collections li {
    padding: var(--space-2xs) var(--space-md);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
}

/* ---- Product detail content ------------------------------------------------
   Ordered blocks owned by the product: course modules, what is included, guarantees, access terms.
   One shape, styled by what the block means rather than by where it happens to sit. */
.detail-items {
    display: grid;
    gap: var(--space-sm);
    margin: var(--space-sm) 0 0;
    padding-inline-start: 1.2rem;
}

.detail-items[role="list"] { list-style: none; padding-inline-start: 0; }

.detail-item { display: grid; gap: 0.15rem; }
.detail-item__title { font-weight: var(--weight-medium); }
.detail-item__body { color: var(--color-ink-muted); font-size: var(--text-sm); }

/* An unordered list still needs a marker, and the red rule is the site's punctuation. */
.detail-items[role="list"] .detail-item {
    padding-inline-start: var(--space-sm);
    border-inline-start: 2px solid var(--cg-red);
}

/* A commitment — guarantee, refund window, access terms — is set apart because it is a promise. */
.product-detail__section--commitment {
    background: var(--color-surface-muted);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
}

.product-detail__section-body { color: var(--color-ink-muted); }

/* A piece whose drop has not opened. Styled like the sold-out note rather than like a disabled
   button: there is nothing to press yet, and a greyed-out button invites the click anyway. */
.purchase__scheduled {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    background: var(--color-surface-muted);
}

.on-ink .purchase__scheduled {
    border-color: var(--color-on-deep-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-on-deep-muted);
}

/* Which drop, and the exact moment it opens. A notice to read, not a warning to fear. */
.purchase__release {
    margin: var(--space-sm) 0 0;
    padding: var(--space-md) var(--space-lg);
    border-inline-start: 3px solid var(--cg-red);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-surface-muted);
    color: var(--color-ink-strong);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.on-ink .purchase__release {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-on-deep);
}

/* =========================================================================
   REDESIGN LAYER — the piece's own spec sheet
   The purchase column becomes a card that stays beside the photograph; the sections below are
   numbered like the Tha3D layers, with the title in its own column on a wide screen; the facts
   read as three tiles with a heat line; the FAQ opens as an animated accordion (components.js).
   ========================================================================= */
.product-detail__title {
    font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
    font-stretch: 110%;
    line-height: 1;
}

@media (min-width: 62rem) {
    .product-detail__info {
        padding: var(--space-xl);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        background:
            radial-gradient(120% 60% at 100% 0%, var(--kiln-glow-soft), transparent 60%),
            var(--color-surface);
        box-shadow: 0 30px 70px -50px rgb(20 14 12 / 0.45);
    }
}

.product-detail__price .price__current {
    font-family: var(--font-display);
    font-stretch: var(--stretch-display);
    font-weight: var(--weight-black);
    letter-spacing: -0.02em;
}

.purchase .button--primary { min-inline-size: 14rem; }

/* Numbered sections, title beside the body on a wide screen. */
.product-detail { counter-reset: pd-section; }
.product-detail__section { counter-increment: pd-section; }

.product-detail__section-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    font-weight: var(--weight-bold);
    font-stretch: var(--stretch-label);
    color: var(--color-ink-strong);
}

.product-detail__section-title::before {
    content: counter(pd-section, decimal-leading-zero);
    font-family: var(--font-display);
    font-stretch: var(--stretch-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-black);
    letter-spacing: -0.02em;
    color: var(--color-accent);
}

@media (min-width: 62rem) {
    .product-detail__section {
        display: grid;
        grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr);
        column-gap: var(--space-2xl);
        align-items: start;
    }

    .product-detail__section > .product-detail__section-title { grid-column: 1; grid-row: 1 / span 20; margin: 0; }
    .product-detail__section > :not(.product-detail__section-title) { grid-column: 2; }
}

/* The three facts as tiles with a heat line on top. */
.product-facts__item {
    position: relative;
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.product-facts__item::before {
    content: "";
    position: absolute;
    inset-inline: var(--space-lg);
    inset-block-start: -1px;
    block-size: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--heat-gradient);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .product-facts__item:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -34px rgb(20 14 12 / 0.5); }
}

/* Specs as read-outs. */
.spec-list {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--cg-black);
    color: var(--color-on-deep);
}

.spec-list dt { color: var(--color-on-deep-muted); }
.spec-list dd { color: var(--color-on-deep-strong); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* The FAQ, as an accordion. */
.faq-list { display: grid; gap: var(--space-sm); }

.faq-list .faq {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.faq-list .faq[open] { box-shadow: 0 20px 50px -36px rgb(20 14 12 / 0.45); }

.faq-list .faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-block-size: 3.6rem;
    padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-lg);
    cursor: pointer;
    list-style: none;
    font-weight: var(--weight-bold);
    font-stretch: var(--stretch-label);
    color: var(--color-ink-strong);
}

.faq-list .faq__question::-webkit-details-marker { display: none; }
.faq-list .faq__question:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-lg); }

/* A plus that turns into a red cross. */
.faq__icon {
    position: relative;
    flex: none;
    inline-size: 2.2rem;
    block-size: 2.2rem;
    border-radius: 50%;
    background: var(--color-surface-muted);
    transition: transform var(--transition-base), background-color var(--transition-base);
}

.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inline-size: 0.8rem;
    block-size: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq[open]:not(.is-closing) .faq__icon { transform: rotate(45deg); background: var(--cg-red); color: var(--cg-white); }

.faq-list .faq__answer {
    margin: 0;
    padding: 0 var(--space-lg) var(--space-lg);
    color: var(--color-ink-muted);
    max-inline-size: var(--measure);
}

/* The formatted description (owner, 02/10/2026): paragraphs with air between them, bold, the brand
   highlight and lists. <mark> is the only "colour" the owner can apply, so it is drawn here, once. */
.product-detail__description > * { margin: 0; }
.product-detail__description > * + * { margin-block-start: var(--space-sm); }
.product-detail__description strong { font-weight: var(--weight-bold); color: var(--color-ink-strong); }
.product-detail__description mark {
    padding: 0 0.15em;
    border-radius: 3px;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent-strong, var(--color-accent));
    font-weight: var(--weight-bold);
}
.product-detail__description ul, .product-detail__description ol { padding-inline-start: 1.25em; }
.product-detail__description li + li { margin-block-start: 0.35em; }

/* The description band: no number, no side label, the text from the left edge (owner, 02/10/2026).
   It does not count in the numbering, so the next band is still "01". */
.product-detail__section--about { counter-increment: none; }
@media (min-width: 62rem) {
    .product-detail__section.product-detail__section--about { display: block; }
}
.product-detail__section--about .product-detail__description { max-inline-size: 72ch; }