/* ═══════════════════════════════════════════════════════════════════════════
   Boba's Plants — the product card (mu-plugins/bobas-product-card.php)
   The pot-offer landing page's card, in the site's own colours: photo with leaf
   corners, name, price, colour, round photo swatches, Add to basket.
   ═══════════════════════════════════════════════════════════════════════════ */
.bco-card { display: flex; flex-direction: column; min-width: 0; height: 100%; text-align: left; }
.bco-card__img { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 0 22px 0 22px; overflow: hidden; background: #f7f5ee; box-shadow: 0 16px 34px -26px rgba(20,50,35,.55); }
.bco-card__img img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; transition: opacity .25s, transform .4s; aspect-ratio: auto !important; background: none !important; }
.bco-card__img:hover img { transform: scale(1.03); }
.bco-card__flag { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.62); color: #fff; font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 0 8px 0 8px; }
.bco-card__flag[hidden] { display: none; }
.bco-card__tick { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: #8B3F5D; color: #fff; display: none; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); }
.bco-card.has-in .bco-card__tick { display: flex; }
.bco-card__name { margin: 12px 0 2px !important; padding: 0 !important; font-family: var(--ff-body, "Nunito Sans", sans-serif) !important; font-weight: 800 !important; font-size: 1rem !important; line-height: 1.28 !important; color: #143223 !important; text-align: left !important; height: auto !important; min-height: 0 !important; overflow: visible !important; white-space: normal !important; display: block !important; -webkit-line-clamp: unset !important; }
.bco-card__name a { color: inherit !important; text-decoration: none !important; }
.bco-card__name a:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.bco-card__price { font-family: var(--ff-heading, "Bubblegum Sans", cursive); font-size: 1.3rem; line-height: 1.2; color: #143223; }
.bco-card__colour { font-size: .82rem; color: #66706a; line-height: 1.3; margin-top: 2px; min-height: 1.3em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bco-card__sw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bco-csw { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: #fff; cursor: pointer; box-shadow: 0 0 0 1px rgba(20,50,35,.16); transition: box-shadow .2s, opacity .2s; }
.bco-csw img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; margin: 0 !important; border-radius: 0 !important; }
.bco-csw[aria-checked="true"] { box-shadow: 0 0 0 2px #E3E3D8, 0 0 0 4px #8B3F5D; }
.bco-csw:focus-visible { outline: 3px solid #143223; outline-offset: 3px; }
.bco-csw.is-gone { opacity: .28; pointer-events: none; }
.bco-card__gap { flex: 1 0 12px; }
.bco-card__add {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 2px solid #8B3F5D; cursor: pointer;
  background: #8B3F5D; color: #fff; font-family: var(--ff-body, "Nunito Sans", sans-serif); font-weight: 800; font-size: .95rem; line-height: 1.2;
  border-radius: 0 16px 0 16px; transition: background-color .2s, border-color .2s, border-radius .2s, transform .15s;
}
.bco-card__add:hover:not([disabled]) { background: #4a5d23; border-color: #4a5d23; border-radius: 16px 0 16px 0; }
.bco-card__add:active:not([disabled]) { transform: scale(.98); }
.bco-card__add:focus-visible { outline: 3px solid #143223; outline-offset: 3px; }
.bco-card__add[disabled] { cursor: default; }
.bco-card__add.is-in { background: #fff; color: #8B3F5D; }
.bco-card.is-sold .bco-card__img img { filter: grayscale(1); opacity: .55; }
.bco-card.is-sold .bco-card__add { background: transparent; color: #66706a; border-color: rgba(20,50,35,.2); }
.bco-card.is-sold .bco-card__sw { display: none; }
@media (max-width: 420px) {
  .bco-card__name { font-size: .94rem !important; }
  .bco-card__price { font-size: 1.15rem; }
  .bco-csw { width: 34px; height: 34px; }
  .bco-card__add { font-size: .9rem; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .bco-card__img img, .bco-card__add { transition: none; } .bco-card__img:hover img { transform: none; } }

/* in the shop grid: the card sits on the page, not inside the old white box */
html.bco-on ul.products li.product.bco-li {
  background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  overflow: visible !important; transform: none !important; display: block !important;
}
html.bco-on ul.products li.product.bco-li:hover { transform: none !important; box-shadow: none !important; }
html.bco-on ul.products { row-gap: 28px !important; }
/* on product pages, in the "You may also like" rows */
.related-products-wrapper .row > div > .bco-card { height: 100%; }

/* ── the basket bar (shop, categories, product pages) ── */
.bco-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; color: #fff; background: #143223;
  box-shadow: 0 -18px 40px -20px rgba(20,50,35,.7); padding: 10px 16px max(10px, env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.bco-bar.is-on { transform: none; }
.bco-bar__in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.bco-bar__sum { flex: 1; min-width: 0; line-height: 1.3; }
.bco-bar__count { font-weight: 800; font-size: .98rem; }
.bco-bar__save { display: block; font-size: .82rem; color: #d9e8c6; }
.bco-bar__nudge { display: block; font-size: .82rem; color: #f3c6d6; }
.bco-bar__save:empty, .bco-bar__nudge:empty { display: none; }
.bco-bar a { text-decoration: none !important; }
.bco-bar__basket { color: #fff !important; font-weight: 700; font-size: .9rem; text-decoration: underline !important; text-underline-offset: 3px; white-space: nowrap; }
.bco-bar__go { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 10px 18px; background: #8B3F5D; color: #fff !important; font-weight: 800; border-radius: 0 16px 0 16px; white-space: nowrap; }
.bco-bar__go:hover { background: #a14b6d; }
body.bco-has-bar { padding-bottom: var(--bco-bar-h, 0px); }
.bco-ctoast {
  position: fixed; z-index: 1041; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: calc(var(--bco-bar-h, 0px) + 14px); transform: translateY(16px); opacity: 0;
  max-width: min(calc(100% - 24px), 420px); background: #fff; color: #143223; font-weight: 700; font-size: .92rem; line-height: 1.35; padding: 12px 16px;
  border-left: 4px solid #8B3F5D; border-radius: 0 14px 0 14px; box-shadow: 0 18px 40px -16px rgba(20,50,35,.55); transition: opacity .25s, transform .25s; pointer-events: none;
}
.bco-ctoast.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bco-bar, .bco-ctoast { transition: none; } }

.bco-bar__incl { font-weight: 600; color: #d9e8c6; }
@media (max-width: 575.98px) { .bco-bar__incl { display: none; } .bco-bar__basket { font-size: .85rem; } .bco-bar__go { padding: 10px 14px; } }