/* ============================================================
   CCI — .prod card variants
   ------------------------------------------------------------
   WHY THIS FILE EXISTS

   chos-kitchen.css and shin-shin.css both declare the product card with bare
   single-class selectors — .prod, .prod__frame, .prod__media, .prod__pack,
   .prod__body, .prod__tag, .prod__name, .prod__cta and the rest — and give
   them completely different values. Gold on a white ground for Cho's Kitchen,
   blue on a tinted ground for ShinShin, with different card heights too.

   On the front end that is harmless: a page loads one brand stylesheet, so its
   rules are the only ones present. In Elementor's editor it is not, because
   the canvas loads EVERY registered widget's CSS so that any widget can be
   dragged in. Both brands' rules then land on the same page at identical
   (0,1,0) specificity, and whichever stylesheet was registered last silently
   wins — which is why the Cho's Kitchen products carousel rendered blue, and
   at ShinShin's card height, while the published page looked correct.

   The fix needs no markup change: the two sections already have different
   wrappers, .products2 and .ssprods. Re-hanging each brand's rules under its
   own wrapper makes them (0,2,0), so each beats BOTH bare declarations and the
   right brand wins regardless of load order.

   GENERATED, NOT HAND-WRITTEN. Every rule below was extracted verbatim from
   the stylesheet named in its heading and re-prefixed. When either brand
   stylesheet changes, regenerate rather than patching by hand:

       php tools/build-prod-variants.php
   ============================================================ */

/* ---- Cho's Kitchen — from chos-kitchen.css ---- */
.products2 .prod { flex:0 0 clamp(300px,60%,620px);display:flex }
.products2 .prod__frame { position:relative;width:100%;background:#FBEEC6;border:0; border-radius:22px;padding:148px 30px 34px; display:flex;flex-direction:column;align-items:center;text-align:center; transition:box-shadow .3s ease,transform .3s ease }
.products2 .prod:hover .prod__frame { box-shadow:var(--ck-shadow);transform:translateY(-4px) }
.products2 .prod__media { position:relative;width:100%;height:400px; margin-top:-494px;margin-bottom:8px; display:flex;align-items:flex-end;justify-content:center }
.products2 .prod__media img { object-fit:contain;object-position:center bottom; filter:drop-shadow(0 26px 34px rgba(46,33,18,.28)) drop-shadow(0 8px 14px rgba(46,33,18,.16)); transition:transform .5s ease }
.products2 .prod__pack { width:74%;height:auto;max-height:400px;position:relative;z-index:1 }
.products2 .prod--single .prod__pack { width:90% }
.products2 .prod__bowl { height:255px;max-width:56%;margin-left:-112px;position:relative;z-index:2 }
.products2 .prod:hover .prod__pack { transform:translateY(-6px) scale(1.03) }
.products2 .prod:hover .prod__bowl { transform:translateY(-6px) rotate(-2deg) }
.products2 .prod--placeholder .prod__media { height:400px }
.products2 .prod__body { display:flex;flex-direction:column;align-items:center;gap:8px }
.products2 .prod__tag { font-family:var(--font-head);font-weight:500;font-size:11px; letter-spacing:.24em;text-transform:uppercase;color:var(--ck-gold); padding:6px 14px;border:1px solid var(--ck-gold-line);border-radius:999px }
.products2 .prod__name { font-family:var(--font-head);font-weight:500;font-size:28px; color:var(--ck-brown-deep);margin:0;letter-spacing:-.005em }
.products2 .prod__sub { font-size:13px;color:var(--ck-brown-mid);margin:0 0 8px;letter-spacing:.02em }
.products2 .prod__cta { margin-top:14px;background:var(--ck-gold-bright);color:var(--ck-brown-deep); border-radius:999px;padding:14px 28px;border:1px solid var(--ck-gold-bright); box-shadow:0 10px 24px -8px rgba(46,33,18,.28) }
.products2 .prod__cta:hover { background:var(--ck-brown-deep);color:#fff;border-color:var(--ck-brown-deep) }

@media (max-width:720px) {
  .products2 .prod__frame { padding:131px 22px 30px }
  .products2 .prod__media { position:absolute;top:0;left:0;right:0;height:131px;margin:0; display:flex;align-items:flex-end;justify-content:center }
  .products2 .prod__pack { max-height:330px }
  .products2 .prod__bowl { height:216px;margin-left:-91px }
}

/* ---- ShinShin — from shin-shin.css ---- */
.ssprods .prod { flex:0 0 clamp(300px,60%,620px);display:flex }
.ssprods .prod__frame { position:relative;width:100%;background:var(--ss-blue-50); border:1px solid var(--ss-line-blue);border-radius:22px;padding:148px 30px 34px; display:flex;flex-direction:column;align-items:center;text-align:center; transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease }
.ssprods .prod:hover .prod__frame { box-shadow:var(--ss-shadow);transform:translateY(-4px);border-color:var(--ss-blue) }
.ssprods .prod__media { position:relative;width:100%;height:400px; margin-top:-494px;margin-bottom:8px; display:flex;align-items:flex-end;justify-content:center }
.ssprods .prod__media img { object-fit:contain;object-position:center bottom; filter:drop-shadow(0 26px 34px rgba(31,26,110,.24)) drop-shadow(0 8px 14px rgba(31,26,110,.14)); transition:transform .5s ease }
.ssprods .prod__pack { width:74%;aspect-ratio:1180/920;height:auto;max-height:none; position:relative;z-index:1 }
.ssprods .prod__pack--tall { width:45%;aspect-ratio:920/1180 }
.ssprods .prod__bowl { width:60%;aspect-ratio:900/680;height:auto;max-width:none; margin-left:-20%;position:relative;z-index:2 }
.ssprods .prod:hover .prod__pack { transform:translateY(-6px) scale(1.03) }
.ssprods .prod:hover .prod__bowl { transform:translateY(-6px) rotate(-2deg) }
.ssprods .prod__body { display:flex;flex-direction:column;align-items:center;gap:8px }
.ssprods .prod__tag { font-family:"DM Sans",sans-serif;font-weight:600;font-size:11px; letter-spacing:.2em;text-transform:uppercase;color:var(--ss-blue); padding:6px 14px;border:1px solid var(--ss-line-blue);border-radius:999px }
.ssprods .prod__name { font-family:"DM Sans",sans-serif;font-weight:700;font-size:28px; color:var(--ss-navy);margin:0;letter-spacing:-.02em }
.ssprods .prod__sub { font-size:13px;color:var(--ink-soft);margin:0 0 8px;letter-spacing:.01em }
.ssprods .prod__cta { margin-top:14px;background:var(--ss-navy);color:#fff; border-radius:999px;padding:14px 28px;border:2px solid var(--ss-navy); box-shadow:0 10px 24px -8px rgba(31,26,110,.3);font-size:15px }
.ssprods .prod__cta:hover { background:var(--ss-blue);border-color:var(--ss-blue);transform:translateY(-2px) }

@media (max-width:720px) {
  .ssprods .prod__frame { padding:131px 22px 30px }
  .ssprods .prod__media { position:absolute;top:0;left:0;right:0;height:131px;margin:0; display:flex;align-items:flex-end;justify-content:center }
  .ssprods .prod__bowl { margin-left:-27.5% }
  .ssprods .prod__name { font-size:24px }
  .ssprods .prod__sub { min-height:42px }
}