/*
 * 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); }

/* Trust list under the Add button (owner, 2026-11-13). The panel may never be wider than its column: on live a
   button that did not wrap made every product page 395px on a 390px phone (2026-11-14). */
.cf-product__panel { min-width: 0; }
.cf-trust { list-style: none; margin: var(--s-space-xs) 0 0; padding: var(--s-space-2xs) 0 0; display: grid; gap: var(--s-space-3xs);
    border-top: var(--s-rule-w) solid var(--s-kraft-shade); font-size: var(--s-size-small); color: var(--s-kraft-ink); }
.cf-trust li { position: relative; padding-inline-start: var(--s-space-s); }
.cf-help-wa { display: grid; gap: var(--s-space-3xs); justify-items: start; margin-top: var(--s-space-xs); }
.cf-help-wa__btn { max-width: 100%; white-space: normal; }   /* never wider than the panel */
.cf-help-wa__line { margin: 0; font-size: var(--s-size-small); color: var(--s-kraft-ink); }
/* Share buttons: round icon buttons, thumb-sized; they wrap rather than widen the panel (owner, 2026-11-14). */
.cf-share { margin-top: var(--s-space-s); min-width: 0; }
.cf-share__title { margin: 0 0 var(--s-space-2xs); font-size: var(--s-size-tag); font-weight: var(--s-w-tag); letter-spacing: var(--s-track-tag); text-transform: uppercase; color: var(--s-kraft-ink); }
.cf-share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-space-2xs); }
.cf-share__btn { display: inline-flex; align-items: center; justify-content: center; width: var(--s-tap); height: var(--s-tap);
    border: 0; border-radius: 50%; padding: 0; background: var(--s-madder); color: var(--s-tissue); cursor: pointer; text-decoration: none;
    transition: background-color var(--s-dur-fast) var(--s-ease-out); }
.cf-share__btn:hover { background: var(--s-ink); }
.cf-share__btn:focus-visible { outline: var(--s-line-w) solid var(--s-ink); outline-offset: var(--s-space-3xs); }
.cf-share__btn .cf-icon { width: calc(var(--s-tap) * 0.45); height: calc(var(--s-tap) * 0.45); }
.cf-share__status { margin: var(--s-space-3xs) 0 0; min-height: 1.2em; font-size: var(--s-size-small); color: var(--s-kraft-ink); }
.cf-trust li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.55em; width: var(--s-dot); height: var(--s-dot); border-radius: 50%; background: var(--s-leaf-deep); }
@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; }