/*
 * Cathy Florist — PRODUCT detail (DESIGN-PORT §9.1). World `shop` (kraft field). Values are
 * --s-* tokens. Desktop: the photo 7/12 in a 4:5 frame, the words 5/12 on a kraft panel.
 * Phone: the photo first, full width; the panel overlaps its lower edge.
 */
.cf-product {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); gap: var(--s-grid-gap);
    max-width: var(--s-max); margin-inline: auto; padding: var(--s-space-xl) var(--s-gutter-wide) var(--s-space-l);
    align-items: start;
}
.cf-product > * { min-width: 0; }
.cf-product__photo { grid-column: 1 / span 7; position: relative; aspect-ratio: var(--s-ratio-photo); overflow: hidden; background: var(--s-kraft-shade); }
.cf-product__photo picture, .cf-product__photo .cf-photo--none { position: absolute; inset: 0; }
.cf-product__photo .cf-photo--none { aspect-ratio: auto; }
.cf-product__panel {
    grid-column: 8 / -1; position: sticky; top: calc(var(--s-nav-h) + var(--s-space-s));
    display: grid; gap: var(--s-space-s); justify-items: start;
}
.cf-product__name { max-width: none; }
.cf-product__botanical { margin-top: calc(var(--s-space-s) * -1); font-size: var(--s-size-small); color: var(--s-kraft-ink); }
/* A borrowed catalogue photo: same frame, with its credit on a tissue strip (attribution is required). */
.cf-product__figure { position: absolute; inset: 0; margin: 0; }
.cf-product__figure picture { position: absolute; inset: 0; }
.cf-product__credit {
    position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
    padding: var(--s-space-3xs) var(--s-space-s);
    font-size: var(--s-size-small); color: var(--s-ink); background: var(--s-tissue);
}
.cf-product__credit a { color: inherit; }
.cf-product__line { color: var(--s-kraft-ink); }
.cf-product__stock { font-weight: var(--s-w-semi); color: var(--s-kraft-ink); }
.cf-product__stock.is-in { color: var(--s-leaf-deep); }
.cf-product__add { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-space-s) var(--s-space-l); }
.cf-product .cf-qty label { color: var(--s-kraft-ink); }
.cf-product .cf-qty input { background: var(--s-tissue); border: var(--s-rule-w) solid var(--s-kraft-shade); }
.cf-product .cf-qty .cf-tag { color: var(--s-madder); }
.cf-product .cf-qty .cf-tag::before { background-color: var(--s-tissue); }
.cf-product__save { display: contents; }
.cf-save { gap: var(--s-space-2xs); border: 0; background: none; cursor: pointer; color: var(--s-madder); }
.cf-save[aria-pressed="true"] .cf-icon { fill: var(--s-madder); }
.cf-product__note { color: var(--s-kraft-ink); }
.cf-product__cta { margin-top: var(--s-space-2xs); }
@media (max-width: 63.99rem) {
    .cf-product { padding: 0 0 var(--s-space-xl); row-gap: 0; }
    .cf-product__photo { grid-column: 1 / -1; }
    /* the kraft panel overlaps the photo's foot here: the credit moves to the top so it is always seen */
    .cf-product__credit { top: 0; bottom: auto; }
    .cf-product__panel {
        grid-column: 1 / -1; position: relative; top: auto; z-index: 1;
        margin: calc(var(--s-hero-overlap-phone) * -1) var(--s-gutter) 0;
    }
}

/* ---- Description + reviews ------------------------------------------------------------ */
/* Top padding is one step tighter than the bottom: the hero row above already ends on its own padding. */
.cf-pdetail { padding: var(--s-space-xl) var(--s-gutter-wide) var(--s-space-2xl); background: var(--s-page); }
.cf-pdetail__inner {
    max-width: var(--s-max); margin-inline: auto;
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); gap: var(--s-space-xl) var(--s-grid-gap);
}
.cf-pdetail__inner > * { min-width: 0; }
.cf-pdetail__about { grid-column: 1 / span 6; display: grid; gap: var(--s-space-s); align-content: start; }
.cf-reviews { grid-column: 8 / -1; display: grid; gap: var(--s-space-m); align-content: start; }
/* No separate description (it would only repeat the summary line): reviews take the left column. */
.cf-pdetail__inner > .cf-reviews:first-child { grid-column: 1 / span 7; }
.cf-reviews__sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-xs); }
.cf-reviews__list { display: grid; gap: var(--s-space-l); }
.cf-review { display: grid; gap: var(--s-space-2xs); padding-top: var(--s-space-s); box-shadow: 0 calc(var(--s-rule-w) * -1) 0 var(--s-rule); }
.cf-review__words { overflow-wrap: anywhere; }
.cf-review__by { font-size: var(--s-size-small); color: var(--s-text-muted); }
/* The rating: five small tag-holes, filled madder up to the score (no stars, no hearts). */
.cf-review-form { display: grid; gap: var(--s-space-s); }
.cf-review-form::before { background-color: var(--s-tissue-deep); }
.cf-review-form__stars { border: 0; margin: 0; padding: 0; }
.cf-review-form__stars legend { padding: 0; margin-bottom: var(--s-space-2xs); }
@media (max-width: 63.99rem) {
    .cf-pdetail__about, .cf-reviews, .cf-pdetail__inner > .cf-reviews:first-child { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) { .cf-pdetail { padding-inline: var(--s-gutter); } }

/* The related rail sits on the page ground, without the bench's display title. */
.cf-related { padding-top: var(--s-space-xl); }
/* Same header as the shop bench and home's buckets: title left, arrows at the right content edge. */
.cf-related .cf-bench__head .cf-related__ctrl { grid-column: 7 / -1; justify-self: end; }
@media (max-width: 63.99rem) { .cf-related .cf-bench__head .cf-related__ctrl { grid-column: 1 / -1; } }
.cf-orderbar--product .cf-tag { justify-content: center; }