/* Shared bag photo + flavor tint for every place a coffee is suggested (home, quiz, brew matcher, learn pages, also-like).
   Same look as the cards on /coffee. Needs js/bag-art.js. */
.sc-tinted.sc-tinted{--tone:190,112,52;position:relative;isolation:isolate;
  background:linear-gradient(180deg,color-mix(in srgb,rgb(var(--tone)) 3.5%,var(--sc-base,var(--bg))) 0,var(--sc-base,var(--bg)) 200px);
  transition:background 0.3s,box-shadow 0.3s;}
.sc-tinted.sc-tinted::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,rgb(var(--tone)),rgba(var(--tone),0)) 0 0/100% 100% no-repeat;
  transition:height 0.3s,background-size 0.45s cubic-bezier(.2,.8,.2,1);pointer-events:none;}
.sc-tinted.sc-tinted:hover::before{height:6px;background-size:420% 100%;}
.sc-tinted.sc-tinted:hover{background:linear-gradient(180deg,color-mix(in srgb,rgb(var(--tone)) 4.5%,var(--sc-base,var(--bg))) 0,var(--sc-base,var(--bg)) 200px);
  box-shadow:0 14px 30px -22px rgba(0,0,0,0.28);z-index:1;}

.sc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.sc-head-text{flex:1;min-width:0;}
.sc-bag{--bag-h:138px;position:relative;flex:0 0 calc(var(--bag-h) * 0.81);height:calc(var(--bag-h) + 12px);
  display:flex;align-items:flex-end;justify-content:center;margin-right:-4px;}
.sc-bag::before{content:"";position:absolute;left:50%;bottom:8px;width:calc(var(--bag-h) * 0.96);height:calc(var(--bag-h) * 0.96);
  transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(var(--tone),0.26) 0,rgba(var(--tone),0) 68%);
  opacity:0.85;transition:transform 0.4s,opacity 0.4s;}
.sc-bag::after{content:"";position:absolute;left:50%;bottom:2px;width:calc(var(--bag-h) * 0.54);height:10px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(ellipse,rgba(30,20,10,0.12),transparent 70%);}
.sc-bag img{position:relative;z-index:1;display:block;height:var(--bag-h);width:auto;filter:drop-shadow(0 5px 5px rgba(30,20,10,0.14));
  transform:rotate(-3deg);transform-origin:50% 100%;transition:transform 0.4s cubic-bezier(.2,.8,.2,1);}
.sc-tinted:hover .sc-bag img{transform:rotate(2deg) translateY(-6px) scale(1.05);}
.sc-tinted:hover .sc-bag::before{transform:translateX(-50%) scale(1.15);opacity:1;}
/* static cards: bag sits in the top-right corner, header lines keep clear of it */
.sc-corner{position:absolute;right:14px;top:14px;margin:0;}
.sc-has-corner{overflow:hidden;}
.sc-has-corner .pc-eyebrow,.sc-has-corner .pc-name,.sc-has-corner .pc-origin,.sc-has-corner .pc-hex-row,
.sc-has-corner .ex-product-label,.sc-has-corner .ex-hex-row{padding-right:calc(var(--bag-h,110px) * 0.81 + 10px);}
@media(prefers-reduced-motion:reduce){.sc-bag img,.sc-bag::before,.sc-tinted.sc-tinted,.sc-tinted.sc-tinted::before{transition:none;}.sc-tinted:hover .sc-bag img{transform:rotate(-3deg);}}