/* OG Zaiqa BYOB v3.0.0 */

.ogzaiqa-byob { width:100%; padding-bottom:60px; }

/* Header */
.byob-header { text-align:center; padding:36px 20px 28px; }
.byob-hero-image { max-width:260px; margin:0 auto 20px; }
.byob-hero-image img { width:100%; border-radius:10px; object-fit:cover; }
.byob-title    { font-size:clamp(22px,4vw,36px); margin:0 0 10px; line-height:1.2; }
.byob-subtitle { font-size:15px; opacity:.7; margin:0 0 20px; line-height:1.6; }

/* Tier badges */
.byob-tier-badges { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.byob-tier-badge  { border:1.5px solid currentColor; border-radius:40px; padding:7px 14px; text-align:center; opacity:.45; transition:opacity .2s; }
.byob-tier-badge.active { opacity:1; }
.tier-qty      { display:block; font-size:18px; font-weight:700; line-height:1; }
.tier-label    { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.1em; margin:2px 0; }
.tier-discount { display:block; font-size:12px; font-weight:600; color:green; }

/* Sticky bar */
.byob-sticky-bar  { position:sticky; top:0; z-index:200; background:#1a1a1a; color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.2); }
.byob-sticky-inner{ max-width:1280px; margin:0 auto; padding:11px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.byob-summary-left  { display:flex; flex-direction:column; gap:2px; }
.byob-summary-right { display:flex; align-items:center; gap:14px; }
.byob-sel-count  { font-size:14px; font-weight:600; }
.byob-unlock-msg { font-size:12px; opacity:.7; min-height:16px; }
.byob-total-price{ font-size:18px; font-weight:700; }
.byob-progress-track { height:3px; background:rgba(255,255,255,.15); }
.byob-progress-fill  { height:3px; background:#fff; opacity:.7; transition:width .4s ease; border-radius:2px; }

/* Notice */
.byob-notice, .byob-notice-bottom { padding:12px 16px; border-radius:6px; font-size:13px; font-weight:500; margin:12px 20px 0; }
.byob-notice-success { background:#e8f5e9; border:1px solid #a5d6a7; color:#2e7d32; }
.byob-notice-error   { background:#fdecea; border:1px solid #ef9a9a; color:#c62828; }
.byob-notice-bottom  { margin:16px 0 0; }

/* Grid */
.byob-grid { max-width:1280px; margin:30px auto 0; padding:0 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:20px; }

/* Card */
.byob-card { background:#fff; border:2px solid transparent; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; position:relative; cursor:pointer; transition:transform .2s,box-shadow .2s,border-color .2s; box-shadow:0 1px 5px rgba(0,0,0,.07); }
.byob-card:hover { transform:translateY(-3px); box-shadow:0 5px 18px rgba(0,0,0,.11); }
.byob-card.byob-selected { border-color:#222; box-shadow:0 0 0 3px rgba(0,0,0,.07),0 5px 18px rgba(0,0,0,.11); }

/* Check icon */
.byob-card-check { position:absolute; top:9px; right:9px; width:28px; height:28px; border-radius:50%; background:#222; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.5); transition:opacity .2s,transform .2s; z-index:2; }
.byob-card-check svg { width:13px; height:13px; stroke:#fff; }
.byob-card.byob-selected .byob-card-check { opacity:1; transform:scale(1); }

/* Image */
.byob-card-img-wrap { width:100%; padding-top:75%; position:relative; background:#f5f5f5; overflow:hidden; }
.byob-card-img-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.byob-card:hover .byob-card-img-wrap img { transform:scale(1.04); }

/* Body */
.byob-card-body  { padding:12px 14px 8px; flex:1; }
.byob-card-name  { font-size:14px; font-weight:600; margin:0 0 5px; line-height:1.3; }
.byob-card-desc  { font-size:12px; opacity:.6; line-height:1.5; margin:0 0 7px; }
.byob-card-price { font-size:14px; font-weight:700; }

/* Variants */
.byob-card-variants { padding:0 14px 8px; display:flex; flex-direction:column; gap:6px; }
.byob-variant-row   { display:flex; flex-direction:column; gap:3px; }
.byob-variant-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; opacity:.5; }
.byob-variant-select{ width:100%; padding:6px 8px; border:1.5px solid #ddd; border-radius:6px; font-size:13px; background:#fff; cursor:pointer; }
.byob-variant-select:focus    { outline:none; border-color:#222; }
.byob-variant-select:disabled { opacity:.55; cursor:default; }

/* Footer */
.byob-card-footer { padding:10px 14px 12px; display:flex; flex-direction:column; gap:7px; border-top:1px solid #f0f0f0; }
.byob-qty-wrap    { display:flex; align-items:center; justify-content:center; border:1.5px solid #ddd; border-radius:50px; overflow:hidden; }
.byob-qty-btn     { background:none; border:none; width:32px; height:32px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .15s; }
.byob-qty-btn:hover { background:#f5f5f5; }
.byob-qty-input   { width:34px; text-align:center; border:none; font-size:14px; font-weight:700; background:transparent; padding:0; outline:none; -moz-appearance:textfield; }
.byob-qty-input::-webkit-outer-spin-button,
.byob-qty-input::-webkit-inner-spin-button { -webkit-appearance:none; }

/* Toggle button */
.byob-toggle-btn  { width:100%; padding:9px 14px; border:1.5px solid #ddd; border-radius:50px; background:transparent; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; text-align:center; }
.byob-toggle-btn:hover { border-color:#222; }
.byob-toggle-btn .lbl-remove { display:none; }
.byob-toggle-btn .lbl-add    { display:inline; }
.byob-card.byob-selected .byob-toggle-btn { background:#222; border-color:#222; color:#fff; }
.byob-card.byob-selected .byob-toggle-btn .lbl-add    { display:none; }
.byob-card.byob-selected .byob-toggle-btn .lbl-remove { display:inline; }

/* CTA button */
.byob-cta-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 22px; border:none; border-radius:50px; font-size:14px; font-weight:600; cursor:pointer; transition:opacity .2s,transform .2s; background:#222; color:#fff; white-space:nowrap; }
.byob-cta-btn:disabled { opacity:.4; cursor:not-allowed; }
.byob-cta-btn:hover:not(:disabled) { opacity:.85; transform:translateY(-1px); }
.byob-cta-large { padding:14px 36px; font-size:15px; width:100%; margin-top:0; }

/* Spinner */
@keyframes byob-spin { to { transform:rotate(360deg); } }
.byob-spinner { display:inline-block; width:13px; height:13px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:byob-spin .6s linear infinite; vertical-align:middle; }

/* Bottom section */
.byob-bottom { max-width:560px; margin:36px auto 0; padding:0 20px; text-align:center; }
.byob-breakdown { border:1px solid #eee; border-radius:10px; padding:16px 20px; margin-bottom:18px; text-align:left; }
.byob-breakdown-row { display:flex; justify-content:space-between; font-size:14px; padding:5px 0; }
.byob-breakdown-row+.byob-breakdown-row { border-top:1px solid #f0f0f0; }
.byob-disc-row  { color:green; }
.byob-total-row { font-size:17px; font-weight:700; border-top:2px solid #ddd !important; padding-top:10px; }

/* Empty */
.byob-empty { text-align:center; padding:60px 20px; opacity:.6; }

/* Bundle tag in cart */
.ogzaiqa-bundle-tag { display:inline-block; background:#222; color:#fff; font-size:10px; font-weight:600; padding:2px 7px; border-radius:20px; vertical-align:middle; margin-left:5px; text-transform:uppercase; }

/* Responsive */
@media(max-width:768px){
  .byob-grid { grid-template-columns:repeat(2,1fr); gap:14px; padding:0 12px; }
  .byob-sticky-inner { padding:9px 14px; }
  .byob-cta-large { padding:13px 24px; }
}
@media(max-width:420px){
  .byob-grid { grid-template-columns:1fr; }
}