/* ==========================================================================
   JoRoBee's Desserts & Catering — component + layout styles
   Ported from the Claude Design system (design/source: kit.css + component JSX
   inline styles) into reusable CSS classes for use on Elementor sections/widgets.
   Prefix: .jdc-  (avoids collisions with Hello Elementor / Elementor output).
   Tokens come from assets/tokens/*.css.
   ========================================================================== */

/* ----- Layout: bands, container, grids (from kit.css) ----- */
.jdc-wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.jdc-band{padding:var(--section-y) 0}
.jdc-band--cream{background:var(--surface-section)}
.jdc-band--dark{background:var(--surface-dark);color:var(--text-on-dark)}
.jdc-band--tight{padding:var(--sp-8) 0}
.jdc-band--dark h1,.jdc-band--dark h2,.jdc-band--dark h3{color:var(--text-on-dark)}

.jdc-grid{display:grid;gap:var(--grid-gap);grid-template-columns:1fr}
.jdc-split{display:grid;gap:var(--sp-6);grid-template-columns:1fr}
@media(min-width:640px){
  .jdc-g2,.jdc-g3,.jdc-g4{grid-template-columns:repeat(2,1fr)}
  .jdc-split{grid-template-columns:1fr 1fr;align-items:center;gap:var(--sp-8)}
}
@media(min-width:900px){
  .jdc-wrap{padding:0 var(--gutter-lg)}
  .jdc-band{padding:var(--section-y-lg) 0}
  .jdc-g3,.jdc-g4{grid-template-columns:repeat(3,1fr)}
  .jdc-grid{gap:var(--grid-gap-lg)}
}
@media(min-width:1200px){.jdc-g4{grid-template-columns:repeat(4,1fr)}}

/* piping-swoosh divider accents */
.jdc-hair-gold{width:56px;height:3px;background:var(--tart-gold);border-radius:2px}

/* ----- Eyebrow (script + tracked variants) ----- */
.jdc-eyebrow{font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-accent-small);display:block}
.jdc-eyebrow--on-dark{color:var(--tart-gold)}
.jdc-script{font-family:var(--font-script);font-style:italic;font-size:26px;line-height:1.15;letter-spacing:-.01em;color:var(--strawberry);display:block}

/* ----- Buttons (from core/Button.jsx) ----- */
.jdc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-body);font-weight:var(--fw-bold);letter-spacing:var(--ls-button);
  border:var(--bw-strong) solid transparent;border-radius:var(--r-pill);cursor:pointer;
  text-decoration:none;line-height:1;white-space:nowrap;
  font-size:var(--fs-body);padding:13px 24px;min-height:var(--tap-min);
  background:var(--btn-primary-bg);color:var(--btn-primary-fg);box-shadow:var(--sh-2);
  transition:background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.jdc-btn:hover{background:var(--btn-primary-bg-hover);box-shadow:var(--sh-3);color:var(--btn-primary-fg)}
.jdc-btn:active{transform:scale(var(--scale-press));box-shadow:var(--sh-press)}
.jdc-btn--lg{font-size:var(--fs-body-lg);padding:17px 32px;min-height:56px}
.jdc-btn--sm{font-size:var(--fs-small);padding:10px 16px;min-height:36px}
.jdc-btn--secondary{background:transparent;color:var(--btn-secondary-fg);border-color:var(--btn-secondary-border);box-shadow:none}
.jdc-btn--secondary:hover{background:var(--btn-secondary-bg-hover);color:var(--btn-secondary-fg)}
.jdc-btn--on-dark{background:var(--warm-white);color:var(--berry-deep);box-shadow:none}
.jdc-btn--on-dark:hover{background:var(--cream);color:var(--berry-deep)}
.jdc-btn--ghost{background:transparent;color:var(--text-body);box-shadow:none}
.jdc-btn--ghost:hover{background:var(--surface-muted)}
.jdc-btn[disabled],.jdc-btn.is-disabled{background:var(--surface-muted);color:var(--cocoa-40);border-color:transparent;box-shadow:none;cursor:not-allowed}

/* ----- Badges (from core/Badge.jsx) ----- */
.jdc-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);
  letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
  background:var(--surface-muted);color:var(--text-body)}
.jdc-badge--bestseller{background:var(--strawberry);color:#fff}
.jdc-badge--fresh{background:var(--status-instock-bg);color:#3F6B27}
.jdc-badge--lead{background:var(--status-lead-bg);color:#8A5A17}
.jdc-badge--soldout{background:var(--status-oos-bg);color:var(--cocoa-60)}
.jdc-badge--on-image{background:var(--warm-white);color:var(--text-accent-small)}

/* ----- Card (from commerce/ProductCard.jsx + content cards) ----- */
.jdc-card{display:flex;flex-direction:column;background:var(--surface-card);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);overflow:hidden;
  transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.jdc-card:hover{box-shadow:var(--sh-3);transform:translateY(var(--lift-hover))}
.jdc-card__body{padding:var(--sp-4);display:flex;flex-direction:column;gap:8px;flex:1}

/* ----- Fixed-ratio image frame (from content/ImageFrame.jsx) ----- */
.jdc-frame{position:relative;width:100%;overflow:hidden;border-radius:var(--r-image);background:var(--gold-tint);aspect-ratio:1/1}
.jdc-frame > img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-out)}
.jdc-frame--ratio-product{aspect-ratio:var(--ratio-product)}
.jdc-frame--ratio-card{aspect-ratio:var(--ratio-card)}
.jdc-frame--ratio-hero{aspect-ratio:var(--ratio-hero)}
.jdc-frame--ratio-hero-lg{aspect-ratio:var(--ratio-hero-lg)}
.jdc-frame--ratio-wide{aspect-ratio:var(--ratio-wide)}
.jdc-frame--zoom:hover > img{transform:scale(var(--img-zoom-hover))}
.jdc-frame__scrim{position:absolute;inset:0;background:var(--surface-scrim)}

/* ----- Price (from commerce/PriceTag.jsx) ----- */
.jdc-price{display:inline-flex;align-items:baseline;gap:8px}
.jdc-price__amt{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h5);color:var(--text-price);line-height:1.1}
.jdc-price--lg .jdc-price__amt{font-size:var(--fs-h3)}
.jdc-price__unit{font-size:var(--fs-caption);color:var(--text-muted)}

/* ----- Section heading helper ----- */
.jdc-section-heading{max-width:620px;margin-bottom:var(--sp-6)}
.jdc-section-heading h2{margin:0}
.jdc-section-heading p{margin:12px 0 0;font-size:var(--fs-body-lg);line-height:var(--lh-snug);color:var(--text-muted)}

/* ----- A11y: keep global smooth-scroll on html, reduced-motion respected in base.css ----- */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]{scroll-margin-top:calc(var(--header-h-lg) + 16px)}