/* Country page bouquet grid (sections/country-layouts/_cy-bouquets.twig, 9 Nov 2026; 10 Nov: price colour).
   Same look as the town page A bouquet card (css/d2f26/bouquet-card.css): white card, 16px corners, 4:5 photo,
   "From €x" in a navy pill on the photo, the name, a secondary button. 3 across from 768px, 2 on phones.
   First 5 rows while .is-short (set by the page's script, so without JS every card shows).
   New file name instead of a ?v= cache buster: if this changes, copy it to a new name and update the twig. */
.cpg__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
@media (min-width: 768px) { .cpg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; } }
.cpg.is-short .cpg-card:nth-child(n+11) { display: none; }
@media (min-width: 768px) { .cpg.is-short .cpg-card:nth-child(n+11) { display: flex; } .cpg.is-short .cpg-card:nth-child(n+16) { display: none; } }

.cpg-card { display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; margin: 0; padding: 8px 8px 12px; border: 1px solid #e8e6e1; border-radius: 16px; background: #fff; }
.cpg-card__img { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 10px; background: #f4f2ee; }
.cpg-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.cpg-card__img:hover img { transform: scale(1.03); }
.cpg-card__price { position: absolute; left: 10px; bottom: 10px; padding: 5px 12px; border-radius: 8px; background: #23233d; color: #fff; font-size: 15px; line-height: 22px; white-space: nowrap; }
.cpg-card__price strong { font-weight: 700; color: inherit; } /* 10 Nov: the global b,strong colour (--brand) made the price grey on the navy pill */
.cpg-card__price i { font-style: normal; }
.cpg-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 12px 4px 0; }
.cpg-card__name { margin: 0 !important; font-size: 17px !important; line-height: 1.3 !important; font-weight: 600 !important; }
.cpg-card__name a { color: #23233d; text-decoration: none; }
.cpg-card__name a:hover { text-decoration: underline; }
.cpg-card__quick, .cpg__morebtn { margin-top: auto; align-self: flex-start; min-height: 44px; padding: 0 16px; border: 1px solid #c2c2ca; border-radius: 8px; background: #fff; color: #23233d; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.cpg-card__quick:hover, .cpg__morebtn:hover { border-color: #23233d; box-shadow: inset 0 0 0 1px #23233d; }
.cpg-card__quick:focus-visible, .cpg__morebtn:focus-visible, .cpg-card a:focus-visible, .cpg-dlg a:focus-visible, .cpg-dlg button:focus-visible { outline: 3px solid #23233d; outline-offset: 3px; }
.cpg__more { display: flex; justify-content: center; margin: 24px 0 0; }
.cpg__more[hidden] { display: none; }
.cpg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) {
  .cpg-card { padding: 6px 6px 10px; border-radius: 12px; }
  .cpg-card__price { left: 6px; bottom: 6px; padding: 3px 9px; font-size: 14px; }
  .cpg-card__name { font-size: 15px !important; }
  .cpg-card__quick { align-self: stretch; padding: 0 8px; font-size: 14px; }
}

/* Quick view pop-up */
.cpg-dlg { width: min(860px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 16px; color: #23233d; }
.cpg-dlg::backdrop { background: rgba(20, 20, 35, .55); }
.cpg-dlg__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cpg-dlg__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cpg-dlg__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 767px) { .cpg-dlg__img { aspect-ratio: 1 / 1; } }
.cpg-dlg__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.cpg-dlg__name { margin: 0 40px 0 0 !important; font-size: 24px !important; line-height: 1.25 !important; }
.cpg-dlg__price { margin: 0; font-size: 18px; }
.cpg-dlg__price i { font-style: normal; }
.cpg-dlg__desc { margin: 0; font-size: 16px; line-height: 1.5; }
.cpg-dlg__go { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 8px; background: var(--d2f-yellow, #ffd400); color: #23233d; font-weight: 700; text-decoration: none; }
.cpg-dlg__go:hover { filter: brightness(.96); }
.cpg-dlg__note { margin: 0; font-size: 14px; color: #5b5b6e; }
.cpg-dlg__x { position: absolute; top: 10px; right: 10px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #23233d; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(20, 20, 35, .16); }
@media (prefers-reduced-motion: reduce) { .cpg-card__img img { transition: none; } }

/* "Find a florist in X" under the grid (9 Nov): the occasion pages' "Shop all" button (templates/occasion-2026.twig .occ26-cta) */
.cpg-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 32px 0 0; text-align: center; }
.cpg-cta__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 999px; background: #4d6458; color: #fff !important; font-size: 17px; font-weight: 600; text-decoration: none !important; transition: background .15s ease; }
.cpg-cta__btn:hover { background: #3c4f45; }
.cpg-cta__btn:focus-visible { outline: 3px solid #23233d; outline-offset: 3px; }
.cpg-cta__note { font-size: 15px; color: #5c5d70; }
@media (max-width: 767px) { .cpg-cta__btn { width: 100%; } }