/* ============================================================================
   bm_comparison — compare buttons, sticky bar, toast, comparison table.
   Brand-neutral tokens so it drops cleanly into any PS 9 theme.
   ========================================================================== */
:root{
  --bmc-ink:#1f2a44;          /* deep navy accent (CTA / active) */
  --bmc-ink-2:#16213b;
  --bmc-line:#e7e7e7;
  --bmc-muted:#7b8190;
  --bmc-radius:14px;
}

/* ── The "Add to comparison" button ──────────────────────────────────────── */
.bm-compare-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--bmc-line);background:#fff;color:var(--bmc-ink);
  cursor:pointer;font:inherit;line-height:1;transition:background .15s,color .15s,border-color .15s;
}
.bm-compare-btn__icon{width:18px;height:18px;flex:0 0 auto;}
.bm-compare-btn.is-active{background:var(--bmc-ink);border-color:var(--bmc-ink);color:#fff;}

/* card variant — compact icon button that sits with the card actions */
.bm-compare-btn--card{
  width:38px;height:38px;justify-content:center;border-radius:50%;padding:0;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.bm-compare-btn--card .bm-compare-btn__label{display:none;}
.bm-compare-btn--card:hover{border-color:var(--bmc-ink);}

/* pdp variant — inline text link next to "Add to favourites" */
.bm-compare-btn--pdp{
  border:0;background:transparent;padding:0;color:var(--bmc-ink);
  font-size:.95rem;font-weight:500;
}
.bm-compare-btn--pdp:hover{color:var(--bmc-ink-2);text-decoration:underline;}
.bm-compare-btn--pdp.is-active{background:transparent;color:var(--bmc-ink);}
.bm-compare-btn--pdp.is-active .bm-compare-btn__icon{color:#1a8a4a;}

/* ── Sticky bottom-left bar ───────────────────────────────────────────────── */
.bm-compare-bar{
  position:fixed;left:18px;bottom:18px;z-index:1000000;
  width:min(330px,calc(100vw - 36px));
  background:#fff;border:1px solid var(--bmc-line);border-radius:var(--bmc-radius);
  box-shadow:0 12px 34px rgba(0,0,0,.18);
  padding:12px 12px 14px;
}
.bm-compare-bar[hidden]{display:none;}
.bm-compare-bar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.bm-compare-bar__title{font-weight:700;font-size:.95rem;color:var(--bmc-ink);}
.bm-compare-bar__clear{
  border:0;background:transparent;color:var(--bmc-muted);font:inherit;font-size:.82rem;
  cursor:pointer;padding:2px 4px;text-decoration:underline;
}
.bm-compare-bar__clear:hover{color:var(--bmc-ink);}

.bm-compare-bar__items{display:flex;gap:8px;margin-bottom:12px;}
.bm-compare-bar__item{position:relative;width:60px;height:60px;flex:0 0 auto;}
.bm-compare-bar__thumb{display:block;width:100%;height:100%;border:1px solid var(--bmc-line);border-radius:10px;overflow:hidden;background:#fff;}
.bm-compare-bar__thumb img{width:100%;height:100%;object-fit:contain;display:block;}
.bm-compare-bar__noimg{display:block;width:100%;height:100%;background:#f3f3f3;}
.bm-compare-bar__remove{
  position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;
  border:0;background:var(--bmc-ink);color:#fff;font-size:14px;line-height:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.bm-compare-bar__remove:hover{background:#c0392b;}
.bm-compare-bar__item--empty{border:1px dashed #d9d9d9;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.bm-compare-bar__slot{color:#cfcfcf;font-size:.9rem;font-weight:700;}

.bm-compare-bar__cta{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--bmc-ink);color:#fff;border-radius:10px;padding:11px 14px;
  font-weight:700;font-size:.95rem;text-decoration:none;transition:background .15s;
}
.bm-compare-bar__cta:hover{background:var(--bmc-ink-2);color:#fff;}
.bm-compare-bar__count{background:rgba(255,255,255,.22);border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:.82rem;padding:0 6px;}
.bm-compare-bar__cta.is-disabled{background:#c9ccd4;cursor:not-allowed;}
.bm-compare-bar__cta.is-disabled:hover{background:#c9ccd4;}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.bm-compare-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--bmc-ink-2);color:#fff;padding:10px 18px;border-radius:999px;
  font-size:.9rem;font-weight:500;z-index:1300;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.bm-compare-toast.is-shown{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── Comparison table page ────────────────────────────────────────────────── */
.bm-compare-page{max-width:1280px;margin:0 auto;padding:4px 0 64px;}

.bm-compare-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:18px;}
.bm-compare-toolbar__count{font-weight:600;color:var(--bmc-ink);}
.bm-compare-toolbar__actions{display:flex;align-items:center;gap:1rem;}
.bm-compare-toolbar__continue{color:var(--bmc-ink);text-decoration:underline;font-size:.92rem;}
.bm-compare-toolbar__clear{border:0;background:transparent;color:var(--bmc-muted);font:inherit;font-size:.92rem;cursor:pointer;text-decoration:underline;}
.bm-compare-toolbar__clear:hover{color:#c0392b;}

.bm-compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bmc-line);border-radius:var(--bmc-radius);}
/* table-layout:fixed makes every product column exactly the same width
   (auto layout sizes them by content, so columns came out lopsided). */
.bm-compare-table{
  width:100%;table-layout:fixed;border-collapse:collapse;background:#fff;
  min-width:calc(220px + var(--cmp-cols,3) * 230px);
}
.bm-compare-table th,.bm-compare-table td{border-bottom:1px solid var(--bmc-line);}

/* sticky label column — fixed width so it lines up across every row */
.bm-compare-table__rowhead{
  position:sticky;left:0;z-index:2;background:#faf9f7;text-align:left;
  font-weight:600;color:var(--bmc-ink);padding:14px 16px;
  width:220px;line-height:1.4;word-break:break-word;
}
.bm-compare-table__row:nth-child(even) .bm-compare-table__rowhead{background:#f4f2ef;}
.bm-compare-table__row:hover .bm-compare-table__rowhead{background:#eef0f4;}

/* product header cells */
.bm-compare-table__head .bm-compare-col,
.bm-compare-table__head .bm-compare-table__rowhead{
  position:sticky;top:0;z-index:3;background:#fff;
}
.bm-compare-table__head .bm-compare-table__rowhead{z-index:4;background:#faf9f7;}
.bm-compare-col{
  position:relative;text-align:center;vertical-align:top;padding:18px 16px 20px;
  width:calc((100% - 220px)/var(--cmp-cols,3));
}
.bm-compare-col__remove{
  position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--bmc-line);background:#fff;color:var(--bmc-muted);
  cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.bm-compare-col__remove:hover{color:#fff;background:#c0392b;border-color:#c0392b;}
.bm-compare-col__media{display:flex;align-items:center;justify-content:center;height:150px;margin:0 auto 12px;}
.bm-compare-col__img{max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain;margin:0 auto;display:block;}
.bm-compare-col__noimg{display:block;width:100%;height:150px;background:#f3f3f3;border-radius:8px;}
/* clamp to 2 lines so the price/CTA below line up across all columns */
.bm-compare-col__name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--bmc-ink);font-weight:600;line-height:1.3;margin:0 auto 10px;
  text-decoration:none;font-size:.95rem;min-height:2.6em;
}
.bm-compare-col__name:hover{text-decoration:underline;}
.bm-compare-col__price{margin-bottom:12px;min-height:1.6em;}
.bm-compare-col__price-now{font-size:1.15rem;font-weight:800;color:var(--bmc-ink);}
.bm-compare-col__price-now--sale{color:#c0392b;}
.bm-compare-col__price-old{margin-left:6px;color:var(--bmc-muted);text-decoration:line-through;font-size:.9rem;}
/* Add-to-cart / view-product buttons — PILL shape. The "buy" pill colour is
   configurable in the BO (Configuration BM_COMPARISON_CART_COLOR), exposed to
   CSS as --bmc-cart on .bm-compare-page; defaults to the HOB PDP green. */
.bm-compare-col__cart{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  width:100%;border:1px solid transparent;border-radius:999px;
  padding:11px 16px;font-weight:700;font-size:.95rem;line-height:1.1;
  text-decoration:none;cursor:pointer;transition:filter .15s,background .15s,color .15s,border-color .15s;
}
.bm-compare-col__cart-icon{width:18px;height:18px;flex:0 0 auto;}
.bm-compare-col__cart--buy{
  background:var(--bmc-cart,#16A34A);border-color:var(--bmc-cart,#16A34A);color:#fff;
}
.bm-compare-col__cart--buy:hover{filter:brightness(.93);color:#fff;}
.bm-compare-col__cart--view{
  background:#fff;border-color:var(--bmc-line);color:var(--bmc-ink);
}
.bm-compare-col__cart--view:hover{background:#f4f2ef;color:var(--bmc-ink);}

/* Page title — centred + theme heading font (the generic page title was
   inheriting "Bricolage Grotesque"). Scoped to the compare page only. */
body#module-bm_comparison-compare .page-header{text-align:center;}
body#module-bm_comparison-compare .page-title-section,
body#module-bm_comparison-compare .page-title-section .page-title{
  text-align:center;
  font-family:var(--hob-font-head,Georgia,"Times New Roman",serif);
  font-weight:600;
  letter-spacing:normal;
}

/* body cells — equal width, wrap long values, vertically centred */
.bm-compare-table__cell{
  width:calc((100% - 220px)/var(--cmp-cols,3));
  text-align:center;padding:13px 16px;color:#333;font-size:.92rem;
  vertical-align:middle;line-height:1.45;word-break:break-word;
}
.bm-compare-table__row:nth-child(even) .bm-compare-table__cell{background:#fbfaf9;}
.bm-compare-table__row:hover .bm-compare-table__cell{background:#f6f5f3;}
.bm-compare-table__empty{color:#cfcfcf;}
.bm-compare-table__nofeatures{text-align:center;color:var(--bmc-muted);font-style:italic;padding:22px 16px;}
.bm-compare-table__section .bm-compare-table__rowhead{
  background:var(--bmc-ink);color:#fff;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;
  position:static;width:auto;
}

/* empty state */
.bm-compare-empty{text-align:center;padding:60px 20px;color:var(--bmc-muted);}
.bm-compare-empty__icon{width:54px;height:54px;color:#cfcfcf;margin-bottom:14px;}
.bm-compare-empty__text{font-size:1.05rem;margin-bottom:20px;}

/* ── Automatic comparison on the product page ───────────────────────────── */
.bm-auto-compare{
  width:100%;margin:38px 0 24px;padding:0;color:#252a31;
}
.bm-auto-compare__header{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:16px;
}
.bm-auto-compare__title{margin:0;font-size:clamp(24px,2.2vw,30px);line-height:1.12;letter-spacing:-.02em;}
.bm-auto-compare__intro{max-width:520px;margin:6px 0 0;color:#6c737c;font-size:13px;line-height:1.45;}
.bm-auto-compare__full-link{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:7px 0;
  border-bottom:1px solid #252a31;color:#252a31;font-size:13px;font-weight:650;
  text-decoration:none;
}
.bm-auto-compare__full-link:hover{color:#243a58;border-color:#243a58;}
.bm-auto-compare__scroll{
  overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;
  border:1px solid #d8dde2;border-radius:10px;background:#fff;
}
.bm-auto-compare__scroll:focus-visible{outline:3px solid rgba(36,58,88,.16);outline-offset:3px;}
.bm-auto-compare__table{
  width:100%;min-width:calc(104px + var(--auto-cmp-cols,4) * 170px);
  table-layout:fixed;border-collapse:separate;border-spacing:0;
}
.bm-auto-compare__table th,.bm-auto-compare__table td{border-bottom:1px solid #e5e8eb;}
.bm-auto-compare__table tr:last-child th,.bm-auto-compare__table tr:last-child td{border-bottom:0;}
.bm-auto-compare__label-head,.bm-auto-compare__row-label{
  position:sticky;left:0;z-index:3;width:104px;background:#f7f7f6;
}
.bm-auto-compare__label-head{z-index:4;}
.bm-auto-compare__product{
  position:relative;width:calc((100% - 104px)/var(--auto-cmp-cols,4));
  padding:14px 10px 12px;text-align:left;vertical-align:top;background:#fff;
  border-left:1px solid #eef0f2;
}
.bm-auto-compare__product.is-current{box-shadow:inset 0 3px 0 #243a58;background:#fafbfd;}
.bm-auto-compare__current{
  position:absolute;top:8px;left:8px;z-index:1;padding:4px 7px;border-radius:999px;
  background:#243a58;color:#fff;font-size:9px;font-weight:700;letter-spacing:.02em;
}
.bm-auto-compare__media{
  display:flex;align-items:center;justify-content:center;height:108px;margin:0 0 9px;
  background:#f4f3f1;overflow:hidden;
}
.bm-auto-compare__media img{display:block;width:100%;height:100%;object-fit:contain;}
.bm-auto-compare__name{
  display:-webkit-box;min-height:2.7em;margin-bottom:7px;overflow:hidden;
  color:#1f2328;font-size:13px;font-weight:700;line-height:1.35;text-decoration:none;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;
}
.bm-auto-compare__name:hover{text-decoration:underline;}
.bm-auto-compare__price{display:flex;align-items:baseline;gap:6px;min-height:22px;margin-bottom:9px;font-size:15px;font-weight:750;}
.bm-auto-compare__price .is-sale{color:#b42318;}
.bm-auto-compare__price del{color:#828890;font-size:11px;font-weight:500;}
.bm-auto-compare__product-link{
  display:inline-flex;align-items:center;justify-content:center;min-height:36px;width:100%;
  border:1px solid #243a58;border-radius:7px;color:#243a58;font-size:12px;font-weight:700;
  text-decoration:none;transition:background-color .15s,color .15s;
}
.bm-auto-compare__product-link:hover{background:#243a58;color:#fff;}
.bm-auto-compare__row-label{
  padding:10px 9px;color:#3f454c;font-size:11px;font-weight:700;line-height:1.3;text-align:left;
}
.bm-auto-compare__table td{
  width:calc((100% - 104px)/var(--auto-cmp-cols,4));padding:10px;
  color:#4f565e;font-size:12px;line-height:1.35;vertical-align:middle;border-left:1px solid #eef0f2;
}
.bm-auto-compare__table tbody tr:nth-child(even) td{background:#fbfbfa;}
.bm-auto-compare__table tbody tr:hover td{background:#f6f8fa;}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width:575px){
  /* Sticky compare bar — compact & tidy on phones (was a tall, bulky card). */
  .bm-compare-bar{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,1.55fr);
    column-gap:10px;row-gap:8px;
    left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));width:auto;
    max-height:calc(100dvh - 16px);overflow:hidden;
    padding:10px 12px 12px;border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
  }
  .bm-compare-bar__header{grid-column:1/-1;min-height:26px;margin:0;}
  .bm-compare-bar__title{font-size:16px;line-height:1.25;}
  .bm-compare-bar__clear{font-size:.8rem;}
  .bm-compare-bar__items{
    grid-column:1;min-width:0;min-height:48px;gap:9px;margin:0;padding:1px 6px 1px 0;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  }
  .bm-compare-bar__item{width:46px;height:46px;}
  /* Hide the "add more" placeholder slots on phones — they just waste space. */
  .bm-compare-bar__item--empty{display:none;}
  .bm-compare-bar__thumb{border-radius:8px;}
  .bm-compare-bar__remove{width:18px;height:18px;top:-6px;right:-6px;font-size:12px;line-height:16px;}
  .bm-compare-bar__cta{grid-column:2;min-height:48px;padding:10px 12px;font-size:.9rem;line-height:1.2;}

  /* Comparison table — horizontal-scroll with a pinned label column; compact
     product columns (~1.7 visible so it's clearly swipeable) and trimmed
     image / name / price / pill so rows aren't bulky on a phone. */
  .bm-compare-page{padding:2px 0 40px;}
  .bm-compare-toolbar{flex-direction:column;align-items:flex-start;gap:.45rem;margin-bottom:12px;}
  .bm-compare-toolbar__actions{gap:.85rem;}

  .bm-compare-table{min-width:calc(96px + var(--cmp-cols,3) * 147px);}
  .bm-compare-table__rowhead{width:96px;padding:10px 9px;font-size:.78rem;line-height:1.35;}
  .bm-compare-col,.bm-compare-table__cell{width:calc((100% - 96px)/var(--cmp-cols,3));}

  .bm-compare-col{padding:12px 8px 14px;}
  .bm-compare-col__remove{top:5px;right:5px;width:20px;height:20px;font-size:14px;}
  .bm-compare-col__media{height:92px;margin-bottom:8px;}
  .bm-compare-col__img,.bm-compare-col__noimg{max-height:92px;height:auto;}
  .bm-compare-col__noimg{height:92px;}
  .bm-compare-col__name{font-size:.8rem;margin-bottom:6px;min-height:2.4em;}
  .bm-compare-col__price{margin-bottom:8px;}
  .bm-compare-col__price-now{font-size:.95rem;}
  .bm-compare-col__price-old{font-size:.78rem;margin-left:4px;}
  .bm-compare-col__cart{padding:9px 8px;font-size:.8rem;gap:.3rem;}
  .bm-compare-col__cart-icon{width:15px;height:15px;}

  .bm-compare-table__cell{padding:10px 8px;font-size:.82rem;}
  .bm-compare-table__section .bm-compare-table__rowhead{font-size:.78rem;}

  .bm-auto-compare{margin:28px 0 24px;padding:0;}
  .bm-auto-compare__header{display:block;margin-bottom:18px;}
  .bm-auto-compare__title{font-size:24px;}
  .bm-auto-compare__intro{font-size:12px;}
  .bm-auto-compare__full-link{margin-top:8px;font-size:12px;}
  .bm-auto-compare__table{min-width:calc(82px + var(--auto-cmp-cols,4) * 154px);}
  .bm-auto-compare__label-head,.bm-auto-compare__row-label{width:82px;}
  .bm-auto-compare__product,.bm-auto-compare__table td{width:calc((100% - 82px)/var(--auto-cmp-cols,4));}
  .bm-auto-compare__product{padding:13px 8px 11px;}
  .bm-auto-compare__current{top:8px;left:8px;padding:4px 7px;font-size:10px;}
  .bm-auto-compare__media{height:96px;margin-bottom:8px;}
  .bm-auto-compare__name{font-size:13px;min-height:2.6em;margin-bottom:7px;}
  .bm-auto-compare__price{font-size:15px;margin-bottom:10px;}
  .bm-auto-compare__price del{font-size:11px;}
  .bm-auto-compare__product-link{min-height:38px;font-size:12px;}
  .bm-auto-compare__row-label{padding:10px 9px;font-size:11px;line-height:1.3;}
  .bm-auto-compare__table td{padding:10px;font-size:12px;}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}