/* WC Personalizer — Listing + Gate (CSS variable-driven) */

/* ── Shop loop button ─────────────────────────────────────── */
a.wcp-loop-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:12px 16px;
  background:var(--wcp-btn-bg,#1a1a1a);
  color:var(--wcp-btn-text,#fff) !important;
  font-size:.82rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;text-decoration:none !important;
  border:none;border-radius:8px;cursor:pointer;
  transition:background .18s,transform .12s;
  margin-top:8px;font-family:inherit;
}
a.wcp-loop-btn:hover{background:var(--wcp-btn-hover,#333);transform:translateY(-1px)}
a.wcp-loop-btn:active{transform:translateY(0)}
.wcp-loop-btn-icon{flex-shrink:0;opacity:.85}

/* ── Price badges ─────────────────────────────────────────── */
p.wcp-price-badge{
  display:inline-flex;align-items:center;
  font-size:.82rem;font-weight:600;
  padding:5px 10px;border-radius:20px;
  margin:6px 0 18px !important;line-height:1.3;
}
p.wcp-price-included{
  background:var(--wcp-badge-incl-bg,#f0faf4);
  color:var(--wcp-badge-incl-fg,#1e6e3e);
  border:1px solid color-mix(in srgb,var(--wcp-badge-incl-fg,#1e6e3e) 25%,transparent);
}
p.wcp-price-fee{
  background:var(--wcp-badge-fee-bg,#faf5e4);
  color:var(--wcp-badge-fee-fg,#7a5c00);
  border:1px solid color-mix(in srgb,var(--wcp-badge-fee-fg,#7a5c00) 20%,transparent);
}
p.wcp-price-badge svg{flex-shrink:0}

/* ── Personalize gate card ────────────────────────────────── */
.wcp-personalize-gate{margin:18px 0 0}
.wcp-gate-card{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;
  border:1.5px solid #e0e0e0;border-radius:8px;
  background:#fafafa;
  transition:border-color .2s,box-shadow .2s;
}
.wcp-gate-card:hover{border-color:#c8c8c8;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.wcp-personalize-gate.wcp-open .wcp-gate-card{
  border-color:var(--wcp-focus,#1a1a1a);
  background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.07);
}
.wcp-gate-icon-wrap{
  width:40px;height:40px;
  background:#f0f0f0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .2s;
}
.wcp-personalize-gate.wcp-open .wcp-gate-icon-wrap{
  background:var(--wcp-btn-bg,#1a1a1a);
}
.wcp-personalize-gate.wcp-open .wcp-gate-icon-wrap svg path{
  stroke:var(--wcp-btn-text,#fff);
}
.wcp-gate-copy{flex:1;display:flex;flex-direction:column;gap:2px}
.wcp-gate-copy strong{font-size:.92rem;font-weight:700;color:#1a1a1a;line-height:1.2}
.wcp-gate-copy span{font-size:.78rem;color:#777;line-height:1.3}

/* Gate trigger button */
.wcp-gate-trigger{
  display:flex;align-items:center;gap:6px;
  padding:9px 18px;
  background:var(--wcp-btn-bg,#1a1a1a);
  color:var(--wcp-btn-text,#fff);
  font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  border:none;border-radius:8px;cursor:pointer;
  white-space:nowrap;transition:background .18s;
  font-family:inherit;flex-shrink:0;
}
.wcp-gate-trigger:hover{background:var(--wcp-btn-hover,#333)}
.wcp-chevron{transition:transform .25s;flex-shrink:0}
.wcp-personalize-gate.wcp-open .wcp-chevron{transform:rotate(180deg)}
.wcp-gate-trigger .wcp-btn-label-closed{display:inline}
.wcp-gate-trigger .wcp-btn-label-open{display:none}
.wcp-personalize-gate.wcp-open .wcp-gate-trigger .wcp-btn-label-closed{display:none}
.wcp-personalize-gate.wcp-open .wcp-gate-trigger .wcp-btn-label-open{display:inline}

/* ── Form reveal ──────────────────────────────────────────── */
.wcp-form-reveal{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .3s ease;
  will-change:max-height,opacity;
}
.wcp-form-reveal.wcp-reveal-open{max-height:4000px;opacity:1}
.wcp-form-reveal .wcp-personalizer{border-top:1px solid #ebebeb;padding-top:20px;margin-top:16px}

/* ── Cart fee note ─────────────────────────────────────────── */
.wcp-cart-fee-note{display:block;font-size:.75rem;color:#888;margin-top:3px}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:480px){
  .wcp-gate-card{flex-wrap:wrap;gap:10px}
  .wcp-gate-trigger{width:100%;justify-content:center;padding:11px}
}

/* ── Flatsome loop button compatibility ──────────────────── */
/* Flatsome's .add_to_cart_button gets high-specificity styles.
   These overrides ensure our Personalize button looks correct. */

a.wcp-loop-btn,
a.wcp-loop-btn:link,
a.wcp-loop-btn:visited {
  display: flex !important;
  background: var(--wcp-btn-bg, #1a1a1a) !important;
  color: var(--wcp-btn-text, #fff) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 12px 16px !important;
}

a.wcp-loop-btn:hover {
  background: var(--wcp-btn-hover, #333) !important;
  color: var(--wcp-btn-text, #fff) !important;
}

/* ── One-click consolidation (v4) ─────────────────────────────
   The gate's "Personalize" button now opens the popup directly, so the
   inner "Personalize This Item" button and the expand chevron are no longer
   needed. The reveal stays collapsed; form.cart still lives in the DOM so the
   popup's submit can copy the nonce / quantity / variation inputs. */
.wcp-open-modal-btn { display: none !important; }
.wcp-gate-trigger .wcp-chevron { display: none; }


/* ── Mobile product page (v39) ───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Make it yours — larger */
  .wcp-gate-copy strong {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
  }
  /* Subtitle — hidden (not relevant per product) */
  .wcp-gate-copy span { display: none !important; }

  /* Personalize button — larger text */
  .wcp-gate-trigger {
    font-size: 1rem !important;
    padding: 14px 22px !important;
  }
  /* Gate card — comfortable padding */
  .wcp-gate-card {
    padding: 16px 14px !important;
  }
}