/* FINJANX_COFFEE_PREMIUM_UI_FINAL_20260602 */

:root{
  --cf-ink:#111827;
  --cf-muted:#64748b;
  --cf-coffee:#7c2d12;
  --cf-coffee2:#9a3412;
  --cf-gold:#f59e0b;
  --cf-green:#16a34a;
  --cf-line:rgba(120,53,15,.15);
  --cf-soft:#fff7ed;
  --cf-card:#ffffff;
  --cf-shadow:0 28px 80px rgba(120,53,15,.13);
}

body{
  background:
    radial-gradient(circle at 8% 0%, rgba(245,158,11,.18), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(34,197,94,.12), transparent 32%),
    linear-gradient(180deg,#fff7ed 0%,#f8fafc 45%,#ffffff 100%) !important;
}

.fx-wrap{
  max-width:1240px !important;
  padding:18px 14px 38px !important;
}

.fx-topbar{
  border-radius:28px !important;
  border:1px solid var(--cf-line) !important;
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(16px);
  box-shadow:0 18px 45px rgba(120,53,15,.08) !important;
  margin-bottom:18px !important;
}

.fx-brand{
  color:var(--cf-coffee) !important;
  font-weight:900 !important;
}

.fx-pill-btn{
  border-radius:999px !important;
  border:1px solid rgba(120,53,15,.14) !important;
  background:#fff !important;
  color:var(--cf-ink) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.05) !important;
}

.fx-main-card{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.cf-product-shell{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
  gap:22px;
  align-items:start;
}

.cf-visual-card{
  position:sticky;
  top:16px;
  min-height:650px;
  border-radius:42px;
  overflow:hidden;
  border:1px solid var(--cf-line);
  background:
    radial-gradient(circle at 50% 42%, rgba(245,158,11,.24), transparent 38%),
    linear-gradient(145deg,#fff7ed,#ffffff 55%,#ecfdf5);
  box-shadow:var(--cf-shadow);
  display:grid;
  place-items:center;
  padding:38px;
}

.cf-visual-card::before{
  content:"";
  position:absolute;
  width:72%;
  aspect-ratio:1;
  border-radius:999px;
  background:rgba(245,158,11,.15);
  filter:blur(3px);
}

.cf-visual-card::after{
  content:"";
  position:absolute;
  left:-12%;
  right:-12%;
  bottom:-44px;
  height:116px;
  opacity:.24;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 44%, #fbbf24 0 18%, transparent 19%),
    radial-gradient(circle at 36% 62%, #fb7185 0 20%, transparent 21%),
    radial-gradient(circle at 62% 36%, #38bdf8 0 22%, transparent 23%),
    radial-gradient(circle at 86% 58%, #34d399 0 20%, transparent 21%),
    linear-gradient(90deg,#92400e,#f59e0b,#ec4899,#0ea5e9,#10b981);
  clip-path:polygon(0 42%,10% 54%,20% 34%,30% 58%,40% 36%,50% 60%,60% 38%,70% 54%,80% 34%,90% 50%,100% 40%,100% 100%,0 100%);
}

.cf-visual-card .fx-product-img{
  position:relative;
  z-index:2;
  width:min(100%,540px) !important;
  max-height:560px !important;
  object-fit:contain !important;
  border-radius:36px !important;
  background:#fff !important;
  filter:drop-shadow(0 32px 48px rgba(120,53,15,.20)) !important;
}

.fx-status-ribbon{
  z-index:4;
  top:22px !important;
  inset-inline-start:22px !important;
  border-radius:999px !important;
  padding:.62rem 1rem !important;
  font-weight:900 !important;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}

.cf-control-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cf-card{
  border-radius:30px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--cf-line);
  box-shadow:0 18px 45px rgba(120,53,15,.08);
}

.cf-hero-card{
  padding:24px;
  background:
    radial-gradient(circle at top right,rgba(245,158,11,.16),transparent 34%),
    #fff;
}

.fx-category{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  width:max-content !important;
  max-width:100% !important;
  padding:.58rem .95rem !important;
  border-radius:999px !important;
  color:var(--cf-coffee) !important;
  background:#fff7ed !important;
  border:1px solid rgba(245,158,11,.24) !important;
}

.fx-title{
  margin:14px 0 0 !important;
  color:var(--cf-ink) !important;
  font-size:clamp(34px,4vw,56px) !important;
  line-height:1.08 !important;
  font-weight:900 !important;
}

.fx-desc{
  margin-top:12px !important;
  color:var(--cf-muted) !important;
  font-size:1.05rem !important;
  line-height:1.9 !important;
}

.fx-stock-note{
  margin-top:16px;
  border-radius:22px !important;
  border:1px solid rgba(34,197,94,.22) !important;
  background:linear-gradient(135deg,#ecfdf5,#ffffff) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.045);
}

.fx-stock-note.bad{
  border-color:rgba(239,68,68,.22) !important;
  background:linear-gradient(135deg,#fef2f2,#ffffff) !important;
}

.fx-mini-stock{
  margin-top:10px !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}

.fx-mini-stock span{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:.38rem .65rem !important;
  border-radius:999px !important;
  background:#fff !important;
  border:1px solid rgba(148,163,184,.22) !important;
}

.cf-section-card{
  padding:18px;
}

.fx-section{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}

.fx-section-title{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding-bottom:12px !important;
  margin-bottom:14px !important;
  border-bottom:1px solid rgba(148,163,184,.18);
}

.fx-icon-box{
  background:#fff7ed !important;
  color:var(--cf-coffee) !important;
  border:1px solid rgba(245,158,11,.22);
}

.fx-size-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
}

.fx-size-option{
  border-radius:22px !important;
  background:#fff !important;
  border:1px solid rgba(148,163,184,.24) !important;
  min-height:96px !important;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}

.fx-size-option:hover{
  transform:translateY(-2px);
  border-color:rgba(245,158,11,.40) !important;
}

.fx-size-option:has(input:checked){
  border-color:rgba(245,158,11,.75) !important;
  background:#fffbeb !important;
  box-shadow:0 14px 32px rgba(245,158,11,.14) !important;
}

.fx-size-price{
  color:var(--cf-coffee) !important;
}

.cf-addon-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-bottom:10px;
  text-align:start;
}

html[dir="rtl"] .cf-addon-head,
body[dir="rtl"] .cf-addon-head{
  align-items:flex-start;
  text-align:right;
}

.cf-addon-head strong{
  font-size:1.05rem;
  color:var(--cf-ink);
}

.cf-addon-head small{
  width:max-content;
  max-width:100%;
  border-radius:999px;
  padding:.34rem .65rem;
  background:#fff7ed;
  border:1px solid rgba(245,158,11,.25);
  color:var(--cf-coffee);
  font-weight:900;
}

.fx-addon-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}

.fx-addon{
  min-height:58px !important;
  border-radius:18px !important;
  padding:.75rem .85rem !important;
  background:#fff !important;
  border:1px solid rgba(148,163,184,.24) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.035);
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
}

html[dir="rtl"] .fx-addon,
body[dir="rtl"] .fx-addon{
  flex-direction:row !important;
  text-align:right !important;
}

.fx-addon input{
  width:20px !important;
  height:20px !important;
  flex:0 0 auto !important;
  margin:0 !important;
}

.fx-addon:hover{
  transform:translateY(-2px);
  border-color:rgba(245,158,11,.40) !important;
}

.fx-addon:has(input:checked){
  color:#166534 !important;
  border-color:rgba(34,197,94,.45) !important;
  background:#ecfdf5 !important;
  box-shadow:0 14px 30px rgba(34,197,94,.10) !important;
}

.fx-qty-box{
  border-radius:22px !important;
  border:1px solid rgba(148,163,184,.24) !important;
  background:#fff !important;
  padding:10px !important;
  box-shadow:0 12px 26px rgba(15,23,42,.045);
}

.fx-qty-box button{
  width:48px !important;
  height:48px !important;
  border-radius:16px !important;
}

.fx-qty-box input{
  color:var(--cf-ink) !important;
}

.cf-summary-card{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:
    radial-gradient(circle at top right,rgba(245,158,11,.14),transparent 36%),
    #fff;
}

.fx-total{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  width:100% !important;
  margin:0 !important;
  padding:10px 12px !important;
  border-radius:18px !important;
  background:#f8fafc !important;
  border:1px solid rgba(148,163,184,.22) !important;
  color:var(--cf-coffee) !important;
  font-size:1rem !important;
  font-weight:900 !important;
  line-height:1.35 !important;
  text-align:center !important;
}

.fx-price-pair{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  gap:6px !important;
  direction:ltr !important;
  unicode-bidi:isolate !important;
  white-space:nowrap !important;
}

.fx-price-pair #total{
  order:1 !important;
  direction:ltr !important;
  unicode-bidi:isolate !important;
  font-size:1.35rem !important;
  color:var(--cf-coffee) !important;
  font-weight:900 !important;
}

.fx-price-pair .cf-currency{
  order:2 !important;
  direction:rtl !important;
  unicode-bidi:isolate !important;
  color:var(--cf-coffee) !important;
  font-weight:900 !important;
}

.fx-add-btn{
  width:100% !important;
  min-height:56px !important;
  border:0 !important;
  border-radius:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  background:linear-gradient(135deg,#16a34a,#22c55e,#84cc16) !important;
  box-shadow:0 16px 32px rgba(34,197,94,.20) !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

.fx-add-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 42px rgba(34,197,94,.26) !important;
}

@media (max-width: 992px){
  .cf-product-shell{
    grid-template-columns:1fr;
  }

  .cf-visual-card{
    position:relative;
    top:auto;
    min-height:auto;
    padding:26px;
  }

  .cf-visual-card .fx-product-img{
    max-height:360px !important;
  }
}

@media (max-width: 680px){
  .fx-wrap{
    padding:10px !important;
  }

  .fx-topbar{
    border-radius:22px !important;
  }

  .fx-brand span{
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .cf-visual-card,
  .cf-hero-card,
  .cf-section-card,
  .cf-summary-card{
    border-radius:24px;
  }

  .cf-hero-card,
  .cf-section-card,
  .cf-summary-card{
    padding:14px;
  }

  .fx-title{
    font-size:34px !important;
  }

  .fx-size-grid,
  .fx-addon-grid{
    grid-template-columns:1fr !important;
  }

  .fx-price-pair #total{
    font-size:1.25rem !important;
  }

  .fx-add-btn{
    min-height:52px !important;
    white-space:normal !important;
  }
}

/* FINJANX_COFFEE_FINAL_PRICE_DISPLAY_20260602 */
.fx-total{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  font-size:1.08rem !important;
  line-height:1.4 !important;
}

.fx-total > i{
  font-size:1.25rem !important;
  color:#92400e !important;
}

.fx-total > span:not(.fx-price-final){
  font-size:1.02rem !important;
  font-weight:900 !important;
  color:#7c2d12 !important;
}

.fx-price-final{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  justify-content:center !important;
  gap:6px !important;
  direction:ltr !important;
  unicode-bidi:isolate !important;
  white-space:nowrap !important;
  padding:8px 14px !important;
  border-radius:16px !important;
  background:#fff !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 8px 18px rgba(15,23,42,.04) !important;
}

.fx-price-final #total{
  display:inline-block !important;
  direction:ltr !important;
  unicode-bidi:isolate !important;
  order:1 !important;
  font-size:1.45rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#92400e !important;
  margin:0 !important;
}

.fx-price-final .fx-currency-final{
  display:inline-block !important;
  direction:rtl !important;
  unicode-bidi:isolate !important;
  order:2 !important;
  font-size:1.02rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#92400e !important;
  margin:0 !important;
}

@media (max-width:680px){
  .fx-total{
    gap:8px !important;
    font-size:1rem !important;
  }

  .fx-price-final{
    padding:7px 12px !important;
  }

  .fx-price-final #total{
    font-size:1.28rem !important;
  }

  .fx-price-final .fx-currency-final{
    font-size:.95rem !important;
  }
}