/* TilkiT — gift certificate component.
   One design, every product. Nothing here knows about a specific treatment.

   All type and spacing INSIDE .cert is expressed in `cqw` (percent of the certificate's
   own width), so the exact same markup renders correctly at 320px in a grid and at
   900px on the success screen. Never put a px font-size inside .cert.

   The reverse also matters: `cqw` only works INSIDE the container. Anything positioned
   outside .cert (the pick badge, the CTA strip) must use px, or it silently resolves
   against the viewport instead — which is how the tick badge once rendered at 119px. */

.cert{
  container-type:inline-size;
  position:relative;
  display:grid;
  grid-template-columns:1fr;    /* one cell; the spacer and the body share it */
  background:linear-gradient(155deg,#101014 0%,#08080b 55%,#0d0d12 100%);
  border-radius:2px;
  overflow:hidden;
  isolation:isolate;
  color:var(--text);
}

/* 16:9 is a FLOOR, not a cage.
   The body used to be position:absolute, so long copy — Ukrainian runs noticeably
   longer than English — could not push the card taller and simply spilled through the
   bottom rule, taking the price with it. This spacer sets the 16:9 minimum while the
   body stays in flow, so a wordy translation makes the card a few pixels taller
   instead of losing content. */
.cert-ratio{grid-area:1/1;width:100%;padding-top:56.25%;pointer-events:none}

/* subtle sheen so the black is not flat */
.cert::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 80% at 78% 8%,rgba(212,175,55,.09),transparent 60%),
    radial-gradient(90% 70% at 8% 95%,rgba(212,175,55,.06),transparent 60%);
}

/* ---------- frame ---------- */
.cert-frame{position:absolute;inset:0;z-index:3;pointer-events:none}
.cert-rule{
  position:absolute;inset:2.6cqw;
  border:0.28cqw solid rgba(212,175,55,.55);
}
.cert-rule.inner{
  inset:3.9cqw;
  border-width:0.12cqw;
  border-color:rgba(212,175,55,.32);
}
.cert-corner{position:absolute;width:11cqw;height:11cqw;opacity:.95}
.cert-corner.tl{top:1.6cqw;left:1.6cqw}
.cert-corner.tr{top:1.6cqw;right:1.6cqw;transform:scaleX(-1)}
.cert-corner.bl{bottom:1.6cqw;left:1.6cqw;transform:scaleY(-1)}
.cert-corner.br{bottom:1.6cqw;right:1.6cqw;transform:scale(-1,-1)}

/* ---------- layout ---------- */
.cert-body{
  grid-area:1/1;position:relative;z-index:2;
  display:grid;grid-template-columns:36cqw 1fr;
  gap:4cqw;align-items:center;align-content:center;
  padding:5.4cqw;
}

/* ---------- photo slot (this is the DB image) ---------- */
.cert-photo{
  position:relative;aspect-ratio:1/1;width:100%;
  border:0.42cqw solid rgba(212,175,55,.75);
  background:#15151c;overflow:visible;
}
.cert-photo>.shot{
  position:absolute;inset:0;overflow:hidden;
  background:#15151c;
}
.cert-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* drawn when no photo has been supplied yet — a quiet, monogrammed slot rather
   than a loud placeholder, so an un-photographed card still reads as premium */
.cert-ph{
  position:absolute;inset:0;display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 40%,rgba(212,175,55,.12),transparent 64%),
    linear-gradient(150deg,#1c1c25,#0f0f14);
}
/* faint diamond watermark echoing the brand mark */
.cert-ph::before{
  content:"";position:absolute;width:29cqw;height:29cqw;transform:rotate(45deg);
  border:0.3cqw solid rgba(212,175,55,.15);border-radius:2.2cqw;
}
.cert-ph i{font-size:10cqw;color:rgba(212,175,55,.42);position:relative}
.cert-ph span{
  position:absolute;bottom:6%;left:0;right:0;text-align:center;
  font-size:1.5cqw;letter-spacing:.5cqw;text-transform:uppercase;color:rgba(240,230,190,.22);
}

/* ---------- bow ---------- */
.cert-bow{
  position:absolute;z-index:4;
  width:21cqw;height:17cqw;
  top:-5.4cqw;left:-6cqw;
  filter:drop-shadow(0 .55cqw .9cqw rgba(0,0,0,.45));
  pointer-events:none;
}

/* ---------- text column (never baked into the image) ---------- */
.cert-text{min-width:0;text-align:center;padding-inline-end:.5cqw}
.cert-brand{
  display:flex;flex-direction:column;align-items:center;
  gap:.4cqw;margin-bottom:1.9cqw;
}
.cert-brand .mark{width:3.5cqw;height:3.5cqw;display:block}
.cert-brand .bn{
  font-family:var(--f-head);font-weight:700;font-size:3.7cqw;line-height:1;
  letter-spacing:.38cqw;
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
}
.cert-brand .bs{
  font-size:1.55cqw;letter-spacing:.85cqw;text-indent:.85cqw;
  color:rgba(212,175,55,.75);text-transform:uppercase;line-height:1;
}
.cert-title{
  font-family:var(--f-head);font-weight:700;
  font-size:4.8cqw;line-height:1.08;text-transform:uppercase;
  letter-spacing:.06cqw;margin-bottom:1cqw;
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
  overflow-wrap:break-word;hyphens:auto;
}
.cert-title.long{font-size:4.1cqw}
.cert-title.xlong{font-size:3.6cqw}
.cert-tag{
  font-family:var(--f-head);font-style:italic;font-weight:400;
  font-size:2.6cqw;line-height:1.25;color:var(--gold-light);opacity:.92;margin-bottom:1.4cqw;
}
.cert-desc{
  font-size:1.95cqw;line-height:1.45;color:#cfcfd8;
  max-width:94%;margin:0 auto 1cqw;
  /* a runaway description should not stretch one card past its neighbours */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.cert-valid{font-size:1.95cqw;color:#a8a8b4}
.cert-foot{
  display:flex;align-items:baseline;justify-content:center;gap:1.6cqw;
  margin-top:1.4cqw;flex-wrap:wrap;
}
.cert-price{
  font-family:var(--f-head);font-size:3.9cqw;line-height:1;
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
}
.cert-min{font-size:1.9cqw;color:#8b8b98}
.cert-serial{
  margin-top:1.5cqw;font-size:1.95cqw;letter-spacing:.3cqw;color:var(--gold-light);
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
}
.cert-serial small{
  display:block;font-size:1.45cqw;letter-spacing:.28cqw;color:#7d7d8a;
  text-transform:uppercase;font-family:var(--f-body);margin-bottom:.4cqw;
}

/* "most gifted" flag */
.cert-flag{
  position:absolute;z-index:5;top:5.4cqw;right:5.4cqw;
  font-size:1.6cqw;letter-spacing:.26cqw;text-transform:uppercase;
  color:#0b0b0e;background:var(--gold-gradient);
  padding:.7cqw 1.7cqw;border-radius:99cqw;font-weight:800;
}

/* ---------- selectable card (catalog) ---------- */
.certcard{display:block}
.certwrap{
  position:relative;display:block;width:100%;cursor:pointer;
  border-radius:4px;transition:transform .22s,box-shadow .22s;
}
.certwrap .cert{
  outline:2px solid transparent;outline-offset:3px;
  transition:outline-color .2s,box-shadow .22s;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.certwrap:hover{transform:translateY(-4px)}
.certwrap:hover .cert{box-shadow:0 20px 46px rgba(0,0,0,.6)}
.certcard.on .cert{outline-color:var(--gold);box-shadow:0 0 0 1px rgba(212,175,55,.4),0 18px 44px rgba(0,0,0,.6)}
.certwrap:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* px, not cqw: this badge is a child of .certwrap, which is OUTSIDE the .cert
   container, so cqw here resolves against the viewport, not the card. */
.cert-pick{
  position:absolute;z-index:6;top:-10px;left:-10px;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:#14141a;border:1.5px solid rgba(212,175,55,.45);
  color:transparent;font-size:13px;transition:.2s;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.certcard.on .cert-pick{background:var(--gold-gradient);border-color:transparent;color:#0b0b0e}

/* the strip under a catalog certificate */
.cert-cta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 4px 0;min-height:44px;
}
.cert-cta .lbl{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.3px}
.certcard.on .cert-cta .lbl{color:var(--gold-light)}
.cert-cta .cat{font-size:11.5px;color:#6f6f7c;text-transform:uppercase;letter-spacing:1px}

/* ---------- quantity stepper (catalog strip + checkout line) ---------- */
.qty{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  border:1px solid var(--line);border-radius:999px;padding:3px;
  background:rgba(212,175,55,.07);
}
.qty .qb{
  width:30px;height:30px;border-radius:50%;border:0;background:transparent;
  color:var(--gold-light);font-size:11.5px;cursor:pointer;
  display:grid;place-items:center;transition:.16s;line-height:1;
}
.qty .qb:hover:not([disabled]){background:rgba(212,175,55,.2)}
.qty .qb[disabled]{opacity:.3;cursor:not-allowed}
.qty .qn{
  min-width:24px;text-align:center;font-family:var(--f-head);
  font-size:15px;color:var(--gold-light);font-weight:700;
}

/* ---------- narrow screens: stack, and let height follow content ---------- */
@media(max-width:600px){
  .cert-ratio{display:none}          /* no 16:9 floor once the columns stack */
  .cert-body{
    grid-template-columns:1fr;gap:5cqw;
    padding:8cqw 7cqw;justify-items:center;
  }
  .cert-photo{width:56cqw}
  .cert-bow{width:28cqw;height:22cqw;top:-8cqw;left:-8cqw}
  .cert-title{font-size:7.2cqw}
  .cert-title.long{font-size:6.2cqw}
  .cert-title.xlong{font-size:5.4cqw}
  .cert-tag{font-size:3.9cqw}
  .cert-desc{font-size:3cqw;-webkit-line-clamp:4}
  .cert-valid{font-size:2.9cqw}
  .cert-price{font-size:5.8cqw}
  .cert-min{font-size:2.7cqw}
  .cert-brand .bn{font-size:5.4cqw}
  .cert-brand .bs{font-size:2.3cqw}
  .cert-brand .mark{width:5.4cqw;height:5.4cqw}
  .cert-flag{font-size:2.3cqw;top:4cqw;right:4cqw}
  .cert-ph i{font-size:15cqw}
  .cert-ph span{font-size:2.5cqw}
  .cert-serial{font-size:2.9cqw}
  .cert-serial small{font-size:2.3cqw}
}