/* Smoother certificate variant — loaded AFTER certificate.css (e.g. on index2.html).
   Goal: fewer nested rectangles and softer edges, so the card reads as one
   flowing object instead of boxes-inside-boxes.
   - rounds the card and the photo slot
   - collapses the ornate double frame + 4 corner flourishes to one soft hairline
   - makes the photo borderless so it blends into the card (soft gold hairline + vignette)
   - drops the twin diamond watermarks in the empty photo slot
   - eases hover/selection for a more fluid feel
   Overrides win by loading later with matching selectors; index.html is unaffected. */

/* rounded card instead of near-square 2px corners */
.cert{border-radius:18px}
.certwrap{border-radius:18px}
.certwrap .cert{box-shadow:0 14px 40px rgba(0,0,0,.5)}

/* one delicate rounded hairline, not a double frame with corner scrollwork */
.cert-frame .cert-rule{inset:3cqw;border-radius:12px;border-width:0.12cqw;border-color:rgba(212,175,55,.24)}
.cert-frame .cert-rule.inner{display:none}
.cert-frame .cert-corner{display:none}

/* photo slot: rounded + borderless. Keep overflow VISIBLE so the gift bow — which
   drapes past the top-left corner — is never clipped; the inner .shot clips the
   image itself with matching rounded corners. */
.cert-photo{border:none;border-radius:14px;overflow:visible}
.cert-photo>.shot{border-radius:14px}
.cert-ph{border-radius:14px}
/* the soft gold spotlight + icon carry the empty slot — no nested diamonds */
.cert-ph::before,.cert-ph::after{display:none}

/* flowing hover + a rounded glow on selection instead of a hard outline */
.certwrap{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.certwrap:hover{transform:translateY(-5px)}
.certwrap:hover .cert{box-shadow:0 26px 56px rgba(0,0,0,.62)}
.certcard.on .cert{
  outline-color:transparent;
  box-shadow:0 0 0 1.5px var(--gold),0 20px 50px rgba(0,0,0,.62),0 0 30px rgba(212,175,55,.14);
}

/* ---- CEO brief (phones): 2 per row, the image is most of the tile, less text.
   Scoped to #catGrid so the checkout/success certificates stay full-detail. ---- */
@media(max-width:600px){
  #catGrid .cert{border-radius:16px}
  #catGrid .cert-ratio{display:none}                     /* no 16:9 floor; height follows content */
  #catGrid .cert-frame{display:none}                     /* clean, image-first tile */
  /* the ribbon still marks a picked tile on mobile — sit it inside the full-bleed
     image (there's no body padding to drape into here); it's shown only when the
     card is selected via the .certcard.on rule in certificate.css. */
  #catGrid .cert-bow{top:2cqw;left:0cqw;width:17cqw;height:14cqw}
  #catGrid .cert-body{grid-template-columns:1fr;gap:0;padding:0;align-content:start;justify-items:stretch}
  #catGrid .cert-photo{width:100%;aspect-ratio:1/1;border-radius:0}  /* the image dominates */
  #catGrid .cert-photo>.shot,#catGrid .cert-ph{border-radius:0}
  #catGrid .cert-text{padding:3.6cqw 4cqw 4.6cqw;text-align:center}
  /* fewer lines: keep brand name, title and price only */
  #catGrid .cert-tag,#catGrid .cert-desc,#catGrid .cert-min,
  #catGrid .cert-brand .bs,#catGrid .cert-brand .mark{display:none}
  #catGrid .cert-brand{margin-bottom:.8cqw}
  #catGrid .cert-brand .bn{font-size:4.4cqw;letter-spacing:.3cqw}
  #catGrid .cert-title,#catGrid .cert-title.long,#catGrid .cert-title.xlong{
    font-size:5.6cqw;margin-bottom:.6cqw;-webkit-line-clamp:2}
  #catGrid .cert-foot{margin-top:1.2cqw;gap:1.2cqw}
  #catGrid .cert-price{font-size:6.6cqw}
  /* stack the CTA strip: on a 2-up tile the "Selected" label + inline stepper are
     wider than the tile, which shoved the "+" off-screen. Put the label on top and
     center a full-width stepper beneath it so every control stays tappable. */
  #catGrid .cert-cta{flex-direction:column;align-items:stretch;gap:6px;min-height:0;padding:8px 6px 2px;text-align:center}
  #catGrid .cert-cta .qty{margin:0 auto}
}