/* =========================================================
   /assets/css/foods.css
   foods/detail 専用
   - base.css を土台に使用
   - fd- プレフィックスで独立
   ========================================================= */

.wrapper{
  padding-bottom:96px;
}

@media (min-width:768px){
  .wrapper{
    max-width:760px;
    padding-bottom:112px;
  }
}

.fd-section{
  margin-top:16px;
  padding:0 4px;
}

/* =========================
   Hero
   ========================= */

.fd-hero{
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:14px;
  box-shadow:0 1px 3px rgba(15,23,42,0.04);
}

.fd-hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.fd-brandline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}

.fd-brand{
  font-size:13px;
  font-weight:800;
  color:var(--accent-main-deep);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.fd-country{
  font-size:12px;
  color:var(--text-muted);
}

.fd-title{
  margin:0 0 10px;
  font-size:26px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-0.01em;
}

.fd-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

.fd-tag{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:6px;
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  font-size:10px;
  line-height:1.4;
  color:var(--text-main);
}

.fd-tag--process{
  background:var(--accent-soft);
  border-color:var(--accent-border);
  color:var(--accent-main-deep);
}

.fd-desc{
  margin:0;
  font-size:14px;
  line-height:1.9;
  color:var(--text-muted);
}

.fd-image-card{
  background:linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border:0;
  border-radius:12px;
  padding:14px;
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.fd-product-image{
  width:220px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 14px 28px rgba(15,23,42,0.14));
}

.fd-image-fallback{
  width:180px;
  aspect-ratio:1 / 1.2;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:#f3f4f6;
  color:var(--text-soft);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}

/* =========================
   Stats
   ========================= */

.fd-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.fd-stat{
  background:#fcfcfd;
  border:none;
  border-radius:8px;
  padding:10px 8px;
  text-align:center;
}

.fd-stat-label{
  display:block;
  margin-bottom:4px;
  font-size:11px;
  line-height:1.4;
  color:var(--text-soft);
}

.fd-stat-value{
  display:block;
  font-size:15px;
  line-height:1.3;
  font-weight:800;
  color:var(--text-main);
}

.fd-stat-value.is-muted{
  color:#9ca3af;
  font-weight:600;
}

/* =========================
   Cards / Graph
   ========================= */

.fd-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:16px;
  box-shadow:0 1px 3px rgba(15,23,42,0.04);
}

.fd-bar-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.fd-bar-row{
  display:grid;
  grid-template-columns:74px 1fr 48px;
  gap:10px;
  align-items:center;
}

.fd-bar-label{
  font-size:12px;
  color:var(--text-main);
  font-weight:700;
}

.fd-bar-track{
  height:10px;
  border-radius:999px;
  background:#f3f4f6;
  overflow:hidden;
}

.fd-bar-fill{
  height:100%;
  border-radius:999px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,0.25);
}

.fd-bar-fill.protein{
  background:linear-gradient(90deg, #8FB7E3 0%, #A5CFCB 85%);
}
.fd-bar-fill.fat{
  background:linear-gradient(90deg, var(--pette-teal), #8dc8c2);
}
.fd-bar-fill.fiber{
  background:linear-gradient(90deg, var(--pette-green), #95d9c0);
}
.fd-bar-fill.ash{
  background:linear-gradient(90deg, var(--pette-yellow), #eed9a6);
}
.fd-bar-fill.moisture{
  background:linear-gradient(90deg, var(--pette-orange), #efb58f);
}

.fd-bar-value{
  text-align:right;
  font-size:12px;
  color:var(--text-muted);
  font-weight:700;
}

.fd-mini-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:10px;
  font-size:12px;
  color:var(--text-muted);
}

.fd-graph-card{
  overflow:hidden;
}

.fd-graph-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.fd-graph-title{
  margin:0;
  font-size:15px;
  font-weight:800;
}

.fd-graph-sub{
  margin:4px 0 0;
  font-size:12px;
  color:var(--text-muted);
}

.fd-graph-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  font-size:11px;
  color:var(--text-muted);
}

.fd-graph-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.fd-graph-legend i{
  width:10px;
  height:10px;
  border-radius:999px;
  display:block;
}

.fd-graph-legend i.protein{ background:var(--pette-blue); }
.fd-graph-legend i.fat{ background:var(--pette-teal); }
.fd-graph-legend i.fiber{ background:var(--pette-green); }
.fd-graph-legend i.ash{ background:var(--pette-yellow); }
.fd-graph-legend i.moisture{ background:var(--pette-orange); }

.fd-chart-wrap{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:16px;
  align-items:center;
}

.fd-donut{
  width:120px;
  height:120px;
  margin:0 auto;
  border-radius:50%;
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4);
}

.fd-donut-center{
  position:absolute;
  inset:18px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:900;
  color:var(--text-main);
  box-shadow:0 1px 2px rgba(15,23,42,0.03);
}

@media (max-width:640px){
  .fd-chart-wrap{
    grid-template-columns:1fr;
  }

  .fd-graph-legend{
    justify-content:flex-start;
  }
}
/* =========================
   Ingredients
   ========================= */

.fd-split{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.fd-subhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.fd-subtitle{
  margin:0;
  font-size:15px;
  font-weight:800;
}

.fd-raw-wrap,
.fd-groups-wrap{
  overflow:hidden;
  transition:max-height .35s ease;
}

.fd-raw-wrap.is-collapsed{
  max-height:7.2em;
  position:relative;
}

.fd-groups-wrap.is-collapsed{
  max-height:13.5em;
  position:relative;
}

.fd-raw-wrap.is-collapsed::after,
.fd-groups-wrap.is-collapsed::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2.8em;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events:none;
}

.fd-raw-wrap.is-expanded,
.fd-groups-wrap.is-expanded{
  max-height:999em;
}

.fd-raw-text{
  margin:0;
  font-size:13px;
  line-height:1.9;
  color:#6b7280;
  word-break:break-word;
}

.fd-toggle{
  margin-top:8px;
  background:none;
  border:none;
  color:var(--accent-main-deep);
  font-size:13px;
  cursor:pointer;
  padding:0;
}

.fd-groups{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.fd-group{
  padding:10px 12px;
  border-radius:10px;
  background:#fafafa;
  border:1px solid #eef1f4;
}

.fd-group-title{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
  font-size:12px;
  font-weight:700;
  color:var(--text-main);
}

.fd-group-title::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--pette-blue);
  flex:0 0 auto;
}

.fd-group:nth-child(2) .fd-group-title::before{ background:var(--pette-yellow); }
.fd-group:nth-child(3) .fd-group-title::before{ background:var(--pette-green); }
.fd-group:nth-child(4) .fd-group-title::before{ background:var(--pette-orange); }
.fd-group:nth-child(5) .fd-group-title::before{ background:var(--pette-teal); }

.fd-group-list{
  font-size:13px;
  line-height:1.8;
  color:var(--text-muted);
}

.fd-empty-note{
  margin:0;
  font-size:13px;
  color:var(--text-muted);
  line-height:1.8;
}

/* =========================
   PETTE tip
   ========================= */

.fd-tip{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:14px;
}

.fd-tip-icon{
  width:48px;
  height:48px;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}

.fd-tip-balloon{
  position:relative;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:10px 14px;
  font-size:13px;
  line-height:1.7;
  color:#374151;
  flex:1;
  box-shadow:0 2px 10px rgba(15,23,42,0.05);
}

.fd-tip-balloon::before{
  content:"";
  position:absolute;
  left:-8px;
  top:16px;
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-right:8px solid #e5e7eb;
}

.fd-tip-balloon::after{
  content:"";
  position:absolute;
  left:-7px;
  top:16px;
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-right:8px solid #f9fafb;
}

.fd-tip-title{
  margin:0 0 4px;
  font-size:13px;
  font-weight:800;
  color:var(--text-main);
}

.fd-tip-text{
  margin:0;
  font-size:12.5px;
  color:#4b5563;
}

/* =========================
   APR
   ========================= */

.fd-apr-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:14px;
  box-shadow:0 1px 3px rgba(15,23,42,0.04);
}

.fd-apr-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.fd-apr-title{
  margin:0;
  font-size:15px;
  font-weight:800;
}

.fd-apr-note{
  margin:4px 0 0;
  font-size:12px;
  color:var(--text-muted);
}

.fd-apr-value{
  font-size:14px;
  font-weight:900;
  color:var(--text-main);
  white-space:nowrap;
}

.fd-apr-bar-wrap{
  background:var(--bg-soft);
  border-radius:999px;
  height:12px;
  overflow:hidden;
  border:1px solid rgba(226,232,240,0.9);
}

.fd-apr-bar-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--pette-red), var(--pette-orange));
}

.fd-apr-card.is-private .fd-apr-value{
  color:var(--text-muted);
}

.fd-apr-bar-empty{
  height:100%;
  width:100%;
  background:linear-gradient(90deg, rgba(17,24,39,0.06), rgba(17,24,39,0.03));
}

.fd-apr-footnote{
  margin-top:8px;
  font-size:11px;
  line-height:1.6;
  color:var(--text-muted);
}

/* =========================
   Memo / Meta / Report
   ========================= */

.fd-memo-box{
  background:#f9fafb;
  border-radius:10px;
  padding:12px;
  font-size:13px;
  line-height:1.8;
  color:#4b5563;
}

.fd-meta-card{
  background:var(--bg-soft);
  border-radius:12px;
  padding:10px 12px;
  font-size:12px;
  color:var(--text-muted);
  border:1px dashed var(--border-soft);
}

.fd-meta-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.fd-meta-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.fd-report-row{
  text-align:center;
  margin-top:8px;
}

.fd-report-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--text-soft);
}

/* =========================
   Purchase bar
   ========================= */

.fd-purchase-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:8px 12px;
  background:rgba(247,247,245,0.97);
  border-top:1px solid var(--border-soft);
  backdrop-filter:blur(8px);
  z-index:50;
}

.fd-purchase-inner{
  max-width:760px;
  margin:0 auto;
  display:flex;
  gap:8px;
}

.fd-purchase-btn{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:11px 12px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
  color:#fff;
  box-shadow:0 2px 6px rgba(15,23,42,0.14);
}

.fd-purchase-btn--amazon{
  background:#ff9900;
}

.fd-purchase-btn--rakuten{
  background:#b72a2a;
}

.fd-purchase-btn:hover{
  filter:brightness(1.03);
}

/* =========================
   Tooltip
   ========================= */

.fd-tooltip{
  position:relative;
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
}

.fd-tooltip-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:2px;
  padding:0;
  border:none;
  background:none;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  color:#9ca3af;
  cursor:pointer;
  vertical-align:middle;
}

.fd-tooltip-content{
  position:absolute;
  bottom:160%;
  left:50%;
  transform:translateX(-50%);
  background:#111827;
  color:#fff;
  font-size:12px;
  font-weight:400;
  line-height:1.6;
  padding:10px 12px;
  border-radius:8px;
  white-space:normal;
  width:max-content;
  max-width:min(280px, calc(100vw - 32px));
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
  z-index:50;
}

.fd-tooltip:hover .fd-tooltip-content,
.fd-tooltip.is-open .fd-tooltip-content{
  opacity:1;
  pointer-events:auto;
}

.fd-tooltip:hover .fd-tooltip-content{
  transform:translateX(-50%) translateY(-2px);
}

.fd-tooltip-content::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#111827;
}

/* =========================
   Responsive
   ========================= */

@media (min-width:768px){
  .fd-hero{
    padding:16px;
  }

  .fd-hero-grid{
    grid-template-columns:1fr 220px;
    align-items:start;
  }

  .fd-stats{
    grid-template-columns:repeat(4,1fr);
  }

  .fd-split{
    grid-template-columns:1.02fr .98fr;
  }
}

@media (max-width:640px){
  .fd-title{
    font-size:22px;
  }

  .fd-purchase-inner{
    gap:6px;
  }

  .fd-purchase-btn{
    font-size:12px;
    padding:10px 8px;
  }

  .fd-tooltip-content{
    position:fixed;
    left:16px;
    right:16px;
    top:72px;
    bottom:auto;
    transform:none;
    width:auto;
    max-width:none;
  }

  .fd-tooltip:hover .fd-tooltip-content,
  .fd-tooltip.is-open .fd-tooltip-content{
    transform:none;
  }

  .fd-tooltip-content::after{
    display:none;
  }
}

/* PCでは折りたたみ解除 */
@media (min-width:768px){

  .fd-raw-wrap,
  .fd-groups-wrap{
    max-height:none !important;
    overflow:visible;
  }

  .fd-raw-wrap::after,
  .fd-groups-wrap::after{
    display:none;
  }

  .fd-toggle{
    display:none;
  }

}


/* =========================
   Feeding calculator
   ========================= */

.fd-feeding-card {
  padding: 22px;
}

.fd-feeding-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.fd-feeding-title {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
}

.fd-feeding-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
}

.fd-feeding-kcal {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f3f6fa;
  font-size: 13px;
  font-weight: 800;
  color: var(--pette-blue);
}

.fd-slider-area {
  margin-top: 4px;
}

.fd-weight-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-sub);
}

.fd-weight-row strong {
  font-size: 24px;
  color: var(--text-main);
}

.fd-range-wrap {
  position: relative;
  padding: 8px 0 4px;
}

.fd-weight-range {
  width: 100%;
  appearance: none;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--pette-blue) 0%,
    var(--pette-blue) var(--range-progress, 8%),
    #e5eaf0 var(--range-progress, 8%),
    #e5eaf0 100%
  );
  outline: none;
  cursor: pointer;
}

.fd-weight-range::-webkit-slider-thumb {
  appearance: none;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--pette-blue);
  box-shadow: 0 5px 14px rgba(30, 42, 68, 0.22);
  cursor: pointer;
}

.fd-weight-range::-moz-range-thumb {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--pette-blue);
  box-shadow: 0 5px 14px rgba(30, 42, 68, 0.22);
  cursor: pointer;
}

.fd-range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-sub);
}

.fd-feeding-result {
  margin-top: 22px;
  padding: 17px;
  border-radius: 18px;
  background: #f8f3ea;
}

.fd-feeding-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(30, 42, 68, 0.12);
}

.fd-feeding-main span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
}

.fd-feeding-main strong {
  font-size: 30px;
  color: var(--pette-blue);
  white-space: nowrap;
}

.fd-feeding-list {
  display: grid;
  gap: 9px;
}

.fd-feeding-list div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
}

.fd-feeding-list span {
  color: var(--text-sub);
}

.fd-feeding-list strong {
  color: var(--text-main);
  white-space: nowrap;
}

.fd-feeding-caution {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-sub);
}

.fd-feeding-more {
  margin-top: 14px;
  text-align: right;
}

.fd-feeding-more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pette-blue);
  text-decoration: none;
}

.fd-feeding-more-link:hover {
  text-decoration: underline;
}

.fd-feeding-more-link .material-symbols-rounded {
  font-size: 18px;
}

@media (max-width: 640px) {
  .fd-feeding-card {
    padding: 18px;
  }

  .fd-feeding-head {
    display: block;
  }

  .fd-feeding-kcal {
    display: inline-flex;
    margin-top: 10px;
  }

  .fd-weight-row strong {
    font-size: 22px;
  }

  .fd-feeding-main {
    display: block;
  }

  .fd-feeding-main strong {
    display: block;
    margin-top: 4px;
    font-size: 30px;
  }

  .fd-feeding-more {
    text-align: left;
  }
}

/* 詳細計算ボタン */
.fd-feeding-advanced {
  margin-top: 16px;
  text-align: right;
}

.fd-advanced-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--pette-blue);
  text-decoration: none;
  position: relative;
}

.fd-advanced-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background: var(--pette-blue);
  transition: width 0.25s ease;
}

.fd-advanced-btn:hover::after {
  width: 100%;
}