/* CutPopUp — PDP campaign presentation.
   Each campaign is its own experience: an identity tag + a compact personalise
   panel in the summary, and full-width Build-a-Box + birth-flower story below. */

:root{
  --cpx-c:#E0592C;--cpx-cd:#B8431C;--cpx-gold:#A6781F;--cpx-cream:#FBF5EC;
  --cpx-ink:#2A2722;--cpx-mut:#7C7367;--cpx-line:#ECE4D7;
}

/* 1. Campaign identity tag (summary) */
.cpx-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cpx-cream);border:1px solid var(--cpx-line);border-radius:999px;
  padding:6px 14px 6px 10px;margin:0 0 12px;text-decoration:none;line-height:1.2;
  transition:border-color .12s,background .12s
}
.cpx-tag:hover{border-color:var(--cpx-c);background:#fff}
.cpx-tag-ic{width:16px;height:16px;color:var(--cpx-gold);flex:none;display:inline-flex}
.cpx-tag-ic svg{width:16px;height:16px}
.cpx-tag-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cpx-gold)}
.cpx-tag-label{font-size:13px;font-weight:600;color:var(--cpx-ink)}

/* 2. Personalise panel wrapper (summary, right by Add to cart) */
.cpx-pers-pdp{margin:16px 0}

/* 3. Build-a-Box — builder in the product summary column (uses box-builder.css).
   box-builder.css only collapses to one column via a VIEWPORT media query, which
   never triggers inside a summary column on a wide screen — so we force a compact
   single-column layout here so the card grid never collapses into slivers. */
.cpx-box-full{margin:26px 0 12px}
.cpx-box-full .cpx-box{max-width:none}
.cpx-box-full .cpx-box-head{text-align:left;max-width:none;margin:0 0 16px}
.cpx-box-full .cpx-box-grid{grid-template-columns:1fr;gap:16px}
.cpx-box-full .cpx-box-panel{position:static;box-shadow:none;border-radius:16px}

/* Card carousel: 2 rows, horizontal scroll — 4 cards (2x2) visible, slide for more. */
.cpx-box-full .cpx-box-cardwrap{position:relative}
.cpx-box-full .cpx-box-cards{
  display:grid;grid-template-columns:none!important;grid-auto-flow:column;
  grid-template-rows:repeat(2,auto);grid-auto-columns:calc(50% - 6px);gap:12px;
  overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;padding:2px 2px 8px
}
.cpx-box-full .cpx-box-card{scroll-snap-align:start;min-width:0}
.cpx-box-full .cpx-box-cards::-webkit-scrollbar{height:6px}
.cpx-box-full .cpx-box-cards::-webkit-scrollbar-thumb{background:#E2DACB;border-radius:3px}
.cpx-box-full .cpx-box-cards::-webkit-scrollbar-track{background:transparent}
.cpx-box-full .cpx-box-arrow{
  position:absolute;top:calc(50% - 4px);transform:translateY(-50%);z-index:2;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--cpx-line);background:#fff;
  color:var(--cpx-cd);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(42,39,34,.14)
}
.cpx-box-full .cpx-box-arrow[hidden]{display:none}
.cpx-box-full .cpx-box-arrow:disabled{opacity:.3;cursor:default;box-shadow:none}
.cpx-box-full .cpx-box-prev{left:-8px}
.cpx-box-full .cpx-box-next{right:-8px}

/* 4. Birth-flower story band — full width below the product */
.cpx-flowerband{
  display:flex;align-items:center;gap:18px;max-width:1180px;margin:26px auto;
  background:var(--cpx-cream);border:1px solid var(--cpx-line);border-radius:18px;padding:20px 24px
}
.cpx-flowerband *{box-sizing:border-box}
.cpx-flowerband-ic{width:34px;height:34px;color:var(--cpx-gold);flex:none;display:inline-flex}
.cpx-flowerband-ic svg{width:34px;height:34px}
.cpx-flowerband-txt{flex:1;min-width:0}
.cpx-flowerband-eyebrow{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cpx-gold)}
.cpx-flowerband-h{display:block;font-size:20px;line-height:1.2;margin:3px 0;color:var(--cpx-ink)}
.cpx-flowerband-sub{display:block;font-size:14px;color:var(--cpx-mut)}
.cpx-flowerband-act{display:flex;flex-direction:column;gap:8px;align-items:center;flex:none}
.cpx-flowerband-cta{white-space:nowrap;background:var(--cpx-c);color:#fff;font-family:inherit;font-weight:600;font-size:14px;text-decoration:none;border:none;border-radius:999px;padding:11px 20px;cursor:pointer;transition:background .12s}
.cpx-flowerband-cta:hover{background:var(--cpx-cd);color:#fff}
.cpx-flowerband-link{font-size:12.5px;color:var(--cpx-mut);text-decoration:underline}
.cpx-flowerband-link:hover{color:var(--cpx-cd)}
@media(max-width:600px){.cpx-flowerband{flex-direction:column;align-items:flex-start}.cpx-flowerband-act{align-self:stretch}.cpx-flowerband-cta{text-align:center}}