/* ============================================================
   The product customizer: draggable text, font library, colours,
   similar items, and a layout that works with a thumb.
   ============================================================ */

/* ---------- the words on the product ---------- */
.customizer-stage .design-text{
  left:0;top:0;transform:translate(-50%,-50%);
  max-width:none;white-space:nowrap;text-align:center;
  font-weight:400;line-height:1.1;letter-spacing:.01em;
  padding:10px 14px;border-radius:10px;z-index:4;
  pointer-events:auto;cursor:grab;touch-action:none;
  user-select:none;-webkit-user-select:none;
  transition:box-shadow .15s ease;
}
.customizer-stage .design-text[hidden]{display:none}
.customizer-stage .design-text:hover{box-shadow:0 0 0 1.5px rgba(196,145,47,.85)}
.customizer-stage .design-text:focus-visible{outline:2px dashed #c49a2a;outline-offset:2px}
.customizer-stage.is-dragging .design-text,
.customizer-stage.is-dragging .preview-layer{cursor:grabbing}
.customizer-stage.is-dragging .design-text{box-shadow:0 0 0 2px #d4af37,0 8px 24px rgba(0,0,0,.25)}

/* artwork can be dragged too */
.customizer-stage .preview-layer{
  left:0;top:0;
  pointer-events:auto;cursor:grab;touch-action:none;
  transition:width .22s ease,opacity .22s ease;
  -webkit-user-drag:none;user-select:none;
}

/* guides that appear while dragging */
.cz-guides{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:3}
.cz-guides i{position:absolute;display:block}
.cz-box{
  left:var(--gx,0);top:var(--gy,0);width:var(--gw,0);height:var(--gh,0);
  border:1.5px dashed rgba(196,145,47,.75);border-radius:12px;
}
.cz-v{left:calc(var(--gx,0px) + var(--gw,0px) / 2);top:var(--gy,0);height:var(--gh,0);border-left:1.5px dashed rgba(196,145,47,.45)}
.cz-h{top:calc(var(--gy,0px) + var(--gh,0px) / 2);left:var(--gx,0);width:var(--gw,0);border-top:1.5px dashed rgba(196,145,47,.45)}
.customizer-stage.is-dragging .cz-guides{opacity:1}
.customizer-stage.snap-x .cz-v{border-left:2px solid #6d2cff;filter:drop-shadow(0 0 4px rgba(109,44,255,.7))}
.customizer-stage.snap-y .cz-h{border-top:2px solid #6d2cff;filter:drop-shadow(0 0 4px rgba(109,44,255,.7))}

.cz-stage-hint{
  position:absolute;left:12px;bottom:12px;margin:0;z-index:5;pointer-events:none;
  padding:6px 12px;border-radius:999px;font-size:11.5px;line-height:1.3;
  background:var(--glass-bg-strong,rgba(255,253,248,.82));color:var(--ink,#24221e);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--glass-border,rgba(255,255,255,.8));
  transition:opacity .2s ease;
}
html:not([data-theme="light"]) .cz-stage-hint{color:#e9eaf0}
.customizer-stage.is-dragging .cz-stage-hint{opacity:0}

/* ---------- the panel ---------- */
.cz-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline,rgba(128,128,128,.2))}
.cz-title{margin:0 0 12px;font:700 14px Orbitron,sans-serif;letter-spacing:.06em}
.cz-hint{margin:6px 0 10px;font-size:12.5px;line-height:1.5;color:var(--muted,#8a8f9e)}
.cz-hint b{color:var(--gold-ink,#d4af37)}
html:not([data-theme="light"]) .cz-hint b{color:#d4af37}
.cz-current{margin-left:4px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--gold-ink,#7a5a14)}
html:not([data-theme="light"]) .cz-current{color:#d4af37}
.cz-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cz-sliders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:6px}
.cz-sliders input[type=range]{width:100%;accent-color:#c49a2a}
.preview-adjustments{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- font picker ---------- */
.cz-fonts{
  padding:10px;border-radius:14px;
  border:1px solid var(--glass-edge,rgba(128,91,23,.3));
  background:var(--glass-field,rgba(255,255,255,.6));
}
.cz-fonts .input{min-height:42px;margin-bottom:8px}
.cz-cats{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cz-chip{
  flex:none;min-height:36px;padding:0 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--glass-edge,rgba(128,91,23,.3));background:transparent;color:inherit;
  font:600 12px Inter,system-ui,sans-serif;white-space:nowrap;
}
.cz-chip.active{background:linear-gradient(135deg,#e9c95e,#c49a2a);color:#1a1400;border-color:transparent}
.cz-fontlist{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
  max-height:264px;overflow-y:auto;overscroll-behavior:contain;padding:2px;
  -webkit-overflow-scrolling:touch;
}
.cz-font{
  min-height:48px;padding:6px 12px;border-radius:10px;cursor:pointer;
  border:1px solid transparent;background:rgba(128,128,128,.09);color:inherit;
  font-size:20px;line-height:1.15;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .15s,background .15s;
}
.cz-font:hover{border-color:#c49a2a}
.cz-font.active{border-color:#d4af37;background:rgba(212,175,55,.2);box-shadow:0 0 0 2px rgba(212,175,55,.22)}
.cz-font:focus-visible,.cz-chip:focus-visible,.cz-swatch:focus-visible{outline:2px solid #c49a2a;outline-offset:2px}

/* ---------- colours ---------- */
.cz-colours{margin:4px 0 12px}
.cz-label{display:block;margin-bottom:6px;font:700 11px Orbitron,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#8a8f9e)}
.cz-label b{margin-left:4px;color:var(--ink,#24221e);letter-spacing:.04em}
html:not([data-theme="light"]) .cz-label b{color:#fff}
.cz-swatches,.cz-tones{display:flex;flex-wrap:wrap;gap:10px}
.cz-swatch{
  width:44px;height:44px;padding:5px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;background:transparent;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.cz-swatch i{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),inset 0 -3px 5px rgba(0,0,0,.25)}
.cz-swatch:hover{transform:translateY(-2px)}
.cz-swatch.active{border-color:#c49a2a;box-shadow:0 0 0 3px rgba(212,175,55,.28)}

/* ---------- similar items ---------- */
.similar-section{padding-top:8px}
#similarGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}

/* ---------- the bar that follows you on a phone ---------- */
.cz-sticky{display:none}

@media (max-width:900px){
  /* The picture stays in view while the controls scroll past, so every
     change to the font, colour or position can be seen as it is made. */
  .customizer-layout{display:block}
  .customizer-visuals{
    position:sticky;top:0;z-index:15;
    margin:0 -12px 14px;padding:8px 12px 10px;
    background:var(--glass-bg-strong,rgba(255,253,248,.9));
    -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
    border-bottom:1px solid var(--glass-border,rgba(128,128,128,.25));
    box-shadow:0 10px 24px rgba(0,0,0,.12);
  }
  html:not([data-theme="light"]) .customizer-visuals{background:rgba(13,14,20,.88)}
  .customizer-stage{min-height:0!important;height:min(42vh,380px)}
  .product-view-strip{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:2px}
  .product-view-button,.product-view-button img{flex:none;width:58px;min-height:46px!important;height:46px!important}
  .product-view-button span{display:none}
  .cz-stage-hint{font-size:11px;padding:5px 10px}

  .cz-sticky{
    display:flex;align-items:center;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--glass-bg-strong,rgba(255,253,248,.95));
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--glass-edge,rgba(128,91,23,.3));
    box-shadow:0 -8px 30px rgba(0,0,0,.18);
  }
  html:not([data-theme="light"]) .cz-sticky{background:rgba(13,13,13,.94)}
  .cz-sticky-price{flex:1;min-width:0;line-height:1.25}
  .cz-sticky-price span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink,#7a5a14)}
  html:not([data-theme="light"]) .cz-sticky-price span{color:#d4af37}
  .cz-sticky-price b{font:700 18px Orbitron,sans-serif}
  .cz-sticky .btn{flex:none;min-height:48px;padding:0 22px;white-space:nowrap}
  body:has(.cz-sticky){padding-bottom:84px}
  body:has(.cz-sticky) .chat{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .customizer-panel #add{display:none}
}
@media (max-width:900px) and (max-height:520px){
  .customizer-visuals{position:static;box-shadow:none}
  .customizer-stage{height:300px}
}
@media (max-width:620px){
  .cz-sliders,.preview-adjustments{grid-template-columns:minmax(0,1fr)}
  .cz-fontlist{max-height:230px}
  .cz-font{font-size:18px}
  #similarGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #similarGrid .product-card .btn{font-size:12px;padding-inline:8px}
  #similarGrid .product-info h3{font-size:14px}
}
@media (pointer:coarse){
  .cz-sliders input[type=range],.preview-adjustments input[type=range]{min-height:34px}
  .cz-actions .btn{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .cz-guides,.cz-swatch,.cz-font,.customizer-stage .design-text{transition:none}
}

/* A black swatch has to be seen on a dark page too. */
html:not([data-theme="light"]) .cz-swatch i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.32),inset 0 -3px 5px rgba(0,0,0,.25)}