.foods {
--foods-lime:     #90CD1D;
--foods-lime-dim: rgba(144,205,29,.15);
--foods-lime-25:  rgba(144,205,29,.25);
--foods-bg:       #5a8900;
--foods-card-bg:  rgba(255,255,255,.10);
--foods-card-bd:  rgba(255,255,255,.30);
--foods-dna-bg:   transparent;
--foods-text:     #ffffff;
--foods-sub:      rgba(255,255,255,.80);
--foods-muted:    rgba(255,255,255,.50);
--foods-pill-bd:  rgba(255,255,255,.30);
} .foods {
background: var(--foods-bg);
color: var(--foods-text);
padding: 36px 0 20px;
border-radius: var(--radius-card, 20px);
overflow: hidden;
position: relative;
} #trip-archive.height_medium {
padding-top: 24px !important;
min-height: 0 !important;
} .foods .container {
padding-left: 36px;
padding-right: 36px;
} .foods-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 0;
}
.foods-title {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.foods-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
background: var(--foods-lime);
color: #3a5400;
padding: 4px 12px;
border-radius: 999px;
line-height: 1.4;
white-space: nowrap;
}
.foods-title-main {
font-size: 27px;
font-weight: 800;
color: #fff;
letter-spacing: -.02em;
line-height: 1.1;
}
.foods-title-c {
font-weight: 400;
font-size: .6em;
color: var(--foods-sub);
letter-spacing: 0;
} .foods-logo {
height: 32px;
width: auto;
display: block;
opacity: .9;
flex-shrink: 0;
}
.foods-subtitle {
font-size: 15px;
color: var(--foods-sub);
margin: 10px 0 28px;
line-height: 1.55;
} .foods-layout {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 20px;
align-items: stretch;
}
.foods-main {
min-width: 0;
overflow: hidden;
} .foods-track {
display: flex;
gap: 20px;
transition: transform .5s cubic-bezier(.25,.46,.45,.94);
will-change: transform;
} .foods-card {
background: var(--foods-card-bg);
border: 1px solid var(--foods-card-bd);
border-radius: var(--radius-card, 18px);
overflow: hidden;
flex: 0 0 calc(33.333% - 14px);
min-width: 0;
display: flex;
flex-direction: column;
color: var(--foods-text);
transition: transform .22s ease, border-color .22s ease;
}
.foods-card:hover {
transform: translateY(-3px);
border-color: var(--foods-lime-25);
} .foods-card-media {
padding: 14px 14px 0;
flex-shrink: 0;
position: relative;
} .foods-card-img {
position: relative;
width: 100%;
aspect-ratio: 1;
overflow: hidden;
border-radius: 14px;
background: rgba(0,0,0,.25);
transition: opacity .35s ease;
}
.foods-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.foods-card-img-credit {
position: absolute;
bottom: 5px;
right: 7px;
font-size: 9px;
color: rgba(255,255,255,.55);
text-decoration: none;
pointer-events: auto;
z-index: 2;
letter-spacing: .01em;
}
.foods-card-img-credit:hover { color: rgba(255,255,255,.85); }
.foods-card-img-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
} .foods-card-dna-canvas {
position: absolute;
inset: 14px 14px 0;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.55);
opacity: 0;
pointer-events: none;
transition: opacity .35s ease;
}
.foods-card-dna-canvas svg { width: 78%; height: 78%; } .foods-card-dna-canvas .foods-dna-label {
font-size: 13px;
font-weight: 700;
fill: rgba(255,255,255,.75);
text-transform: uppercase;
letter-spacing: .03em;
} .js-foods-layout.is-dna-mode .foods-card-img          { opacity: 0; pointer-events: none; }
.js-foods-layout.is-dna-mode .foods-card-dna-canvas   { opacity: 1; pointer-events: auto; } .foods-card-dna-canvas .foods-dna-polygon { fill: var(--foods-lime-dim); stroke: var(--foods-lime); stroke-width: 1.5; }
.foods-card-dna-canvas .foods-dna-grid    { fill: none; stroke: rgba(255,255,255,.08); stroke-width: .8; }
.foods-card-dna-canvas .foods-dna-axis    { stroke: rgba(255,255,255,.15); stroke-width: .8; } .foods-card-pills {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 8px 14px 0;
padding: 0;
} .foods-card-course {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
background: #ffffff;
color: #3a5400;
border: none;
white-space: nowrap;
} .foods-card-type {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
letter-spacing: .01em;
white-space: nowrap;
border: none;
}
.foods-card-type--meat         { background: #d41212; color: #fff; }
.foods-card-type--vegetarian   { background: #f2e12f; color: #1a6600; }
.foods-card-type--vegan        { background: #2e9b00; color: #f2e12f; }
.foods-card-type--fish_seafood { background: #00c4e8; color: #06266d; } .foods-card-name {
font-size: 18px;
font-weight: 700;
color: #ffffff !important;
margin: 0 14px 0;
line-height: 1.25;
}
.foods-card-local {
font-size: 15px;
font-weight: 400;
color: rgba(255,255,255,.75);
margin: 6px 14px 0;
line-height: 1.35;
letter-spacing: .02em;
}
.foods-card-sub {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin: 5px 14px 0;
}
.foods-card-phonetic {
font-size: 12px;
font-style: italic;
color: var(--foods-sub);
}
.foods-card-sub-sep {
font-size: 11px;
color: var(--foods-sub);
opacity: .5;
}
.foods-card-name-en {
font-size: 12px;
font-style: italic;
color: var(--foods-sub);
opacity: .85;
}
.foods-card-desc {
font-size: 13px;
color: var(--foods-sub);
line-height: 1.5;
margin: 3px 14px 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
} .foods-card-spacer {
flex: 1;
min-height: 28px;
} .foods-card-open {
margin: 0 14px 14px;
padding: 0;
height: 46px;
box-sizing: border-box;
border-radius: 100px;
background: rgba(255,255,255,.10);
color: rgba(255,255,255,.85);
border: 2px solid rgba(255,255,255,.55);
font-size: 24px;
font-weight: 700;
letter-spacing: .05em;
cursor: pointer;
width: calc(100% - 28px);
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s ease, border-color .15s ease;
}
.foods-card-open:hover {
background: rgba(255,255,255,.18);
border-color: rgba(255,255,255,.85);
} .foods-dna-sidebar {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-height: 0;
} .foods-dna-card {
display: contents;
}  .foods-dna-anim {
flex: 1 1 0;
min-height: 0;
width: auto;
max-width: 100%;
aspect-ratio: 1;
align-self: center;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.50);
border-radius: 18px;
padding: 10px;
box-sizing: border-box;
}
.foods-dna-anim svg { width: 210px; height: 210px; overflow: visible; flex-shrink: 0; } .foods-dna-anim .foods-dna-polygon { fill: var(--foods-lime-dim); stroke: var(--foods-lime); stroke-width: 1.5; }
.foods-dna-anim .foods-dna-grid    { fill: none; stroke: rgba(255,255,255,.08); stroke-width: .8; }
.foods-dna-anim .foods-dna-axis    { stroke: rgba(255,255,255,.15); stroke-width: .8; }
.foods-dna-anim .foods-dna-label   {
font-size: 12px;
font-weight: 700;
fill: rgba(255,255,255,.75);
font-family: inherit;
text-transform: uppercase;
letter-spacing: .04em;
} .foods-dna-sidebar-body {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
flex: 0 0 auto;
padding: 0 14px;
text-align: center;
} .foods-switch-title {
font-size: 16px;
font-weight: 700;
color: #fff;
line-height: 1.2;
text-align: center;
margin: 36px 0 12px;
width: 100%;
} .foods-switch-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
user-select: none;
width: 100%;
margin-bottom: 16px;
}
.foods-switch {
flex-shrink: 0;
position: relative;
width: 40px;
height: 22px;
}
.foods-switch-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.foods-switch-track {
display: block;
width: 40px;
height: 22px;
border-radius: 11px;
background: rgba(255,255,255,.2);
transition: background .2s ease;
position: relative;
}
.foods-switch-input:checked ~ .foods-switch-track {
background: var(--foods-lime);
}
.foods-switch-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
transition: transform .2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.foods-switch-input:checked ~ .foods-switch-track .foods-switch-thumb {
transform: translateX(18px);
} .foods-dna-desc {
font-size: 12px;
color: var(--foods-sub);
line-height: 1.65;
margin: 0 0 20px;
text-align: center;
flex: 1;
} .foods-more-btn {
margin-top: auto;
padding: 0 20px;
height: 46px;
box-sizing: border-box;
border-radius: 100px;
background: rgba(255,255,255,.10);
color: rgba(255,255,255,.85);
border: 2px solid rgba(255,255,255,.55);
font-size: 14px;
font-weight: 700;
cursor: pointer;
width: 100%;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s ease, border-color .15s ease;
margin-bottom: 14px;
}
.foods-more-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.85); }
.foods-more-btn.is-scrolling { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.5); } .foods-expand {
--foods-lime:     #90CD1D;
--foods-lime-dim: rgba(144,205,29,.15);
--foods-lime-25:  rgba(144,205,29,.25);
--foods-dna-bg:   transparent;
--foods-text:     #ffffff;
--foods-sub:      rgba(255,255,255,.80);
--foods-muted:    rgba(255,255,255,.50);
display: none;
background: #3a5400;
color: #ffffff;
border-radius: var(--radius-card, 20px);
margin-top: 8px;
overflow: hidden;
scroll-margin-top: 90px;
}
.foods { scroll-margin-top: 90px; }
.foods-main { scroll-margin-top: 90px; }
.foods-expand.is-open { display: block; position: relative; }
.foods-expand-header {
position: absolute;
top: 0;
right: 0;
z-index: 10;
padding: 20px 28px 0;
}
.foods-expand-title {
display: none;
}
.foods-expand-close {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 20px;
border-radius: 100px;
background: rgba(255,255,255,.10);
border: 1.5px solid rgba(255,255,255,.40);
color: #ffffff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background .18s, border-color .18s;
flex-shrink: 0;
white-space: nowrap;
}
.foods-expand-close:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.7); }
.foods-expand-body {
padding: 28px 28px 40px;
} .foods-modal-2col {
display: flex;
align-items: flex-start;
}
.foods-modal-left {
flex: 0 0 33.333%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.foods-modal-right {
flex: 1;
min-width: 0;
padding: 4px 0 28px 28px;
} .foods-modal-hero {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 10px;
display: block;
flex-shrink: 0;
}
.foods-modal-hero-placeholder {
width: 100%;
aspect-ratio: 1;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
background: rgba(0,0,0,.25);
flex-shrink: 0;
} .foods-modal-left-body {
padding: 14px 10px 24px;
display: flex;
flex-direction: column;
gap: 14px;
}
.foods-modal-left-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
} .foods-modal-left-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #3a5400;
background: #ffffff;
padding: 3px 10px;
border-radius: 100px;
display: inline-block;
margin-bottom: 8px;
} .foods-modal-dna-box {
background: var(--foods-dna-bg);
border-radius: 12px;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
width: 80%;
margin: 12px auto;
}
.foods-modal-dna-box svg { overflow: visible; }
.foods-expand .foods-dna-polygon { fill: rgba(144,205,29,.22); stroke: #90CD1D; stroke-width: 1.5; }
.foods-expand .foods-dna-grid    { fill: none; stroke: rgba(255,255,255,.10); stroke-width: .8; }
.foods-expand .foods-dna-axis    { stroke: rgba(255,255,255,.18); stroke-width: .8; }
.foods-expand .foods-dna-label   { font-size: 13px; font-weight: 700; fill: rgba(255,255,255,.80); font-family: inherit; } .foods-nutrition {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.foods-nutrition-cell {
background: rgba(0,0,0,.2);
border-radius: 10px;
padding: 12px 4px;
text-align: center;
}
.foods-nutrition-icon {
display: block;
font-size: 1rem;
line-height: 1;
margin: 0 auto 4px;
}
.foods-nutrition-value { display: block; font-size: .88rem; font-weight: 700; color: #fff; line-height: 1.1; }
.foods-nutrition-label { display: block; font-size: 9px; color: var(--foods-muted); margin-top: 2px; }
.foods-nutrition-note {
font-size: 10.5px;
color: var(--foods-muted);
margin: 6px 0 0;
font-style: italic;
} .foods-allergen-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.foods-allergen-chip {
font-size: 11px;
padding: 4px 10px;
border-radius: 10px;
background: #91c402;
color: #ffffff;
font-weight: 600;
} .foods-modal-name {
color: #ffffff !important;
font-size: 1.45rem;
font-weight: 700;
margin: 0 0 16px;
line-height: 1.2;
padding-top: 4px;
} .foods-modal-say-row {
display: flex;
gap: 12px;
align-items: stretch;
margin-bottom: 18px;
} .foods-modal-pronounce {
flex: 3;
min-width: 0;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.18);
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 0;
}
.foods-modal-pronounce-head {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .8px;
color: #3a5400;
background: #ffffff;
margin-bottom: 10px;
padding: 3px 10px;
border: none;
border-radius: 100px;
display: inline-block;
}
.foods-modal-pronounce-row {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .875rem;
color: var(--foods-sub);
margin-top: 6px;
flex-wrap: wrap;
}
.foods-modal-pronounce-label {
font-size: 10px;
font-weight: 700;
color: var(--foods-lime);
min-width: 54px;
text-transform: uppercase;
letter-spacing: .5px;
flex-shrink: 0;
padding-top: 2px;
}
.foods-tts-btn {
width: 96px;
height: 96px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.55);
background: rgba(255,255,255,.10);
color: #ffffff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .18s, border-color .18s, transform .1s;
flex-shrink: 0;
padding: 0;
position: relative;
}
.foods-tts-btn svg { width: 38px; height: 38px; }
.foods-tts-btn:hover    { background: #90CD1D; border-color: transparent; color: #2d4200; transform: scale(1.06); }
.foods-tts-btn.speaking { background: #ffffff; border-color: transparent; color: #3a5400; } .foods-modal-tts-box {
flex: 0 0 160px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.18);
border-radius: 12px;
padding: 18px 12px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 0;
}
.foods-modal-tts-inner {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin-top: 12px;
} .foods-modal-section {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.08);
}
.foods-modal-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #3a5400;
background: #ffffff;
margin-bottom: 10px;
padding: 3px 12px;
border: none;
border-radius: 100px;
display: inline-block;
}
.foods-modal-text {
color: var(--foods-sub);
font-size: .9rem;
line-height: 1.65;
margin: 8px 0 0;
}
.foods-modal-text-box {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.15);
border-radius: 10px;
padding: 16px 18px;
margin-top: 8px;
} .foods-modal-recipe {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 12px;
}
.foods-recipe-col-title {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .8px;
color: #3a5400;
background: #ffffff;
padding: 3px 12px;
border-radius: 100px;
display: inline-block;
margin-bottom: 12px;
}
.foods-ingredients {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.foods-ingredient {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: .85rem;
color: var(--foods-sub);
line-height: 1.4;
}
.foods-ingredient-emoji  { font-size: .95rem; flex-shrink: 0; width: 20px; text-align: center; }
.foods-ingredient-amount { font-weight: 600; color: #fff; margin-right: 4px; }
.foods-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.foods-step {
display: flex;
gap: 10px;
font-size: .85rem;
color: var(--foods-sub);
line-height: 1.55;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
padding: 13px 14px;
}
.foods-step-num {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: #91c402;
color: #ffffff;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
} .foods-card-tts-hover {
position: absolute;
inset: 0;
border-radius: 14px;
background: rgba(0,0,0,.32);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity .22s ease;
}
.foods-card-img:hover .foods-card-tts-hover {
opacity: 1;
pointer-events: auto;
} .is-dna-mode .foods-card-tts-hover { display: none; } @media (max-width: 960px) {
.foods-layout { grid-template-columns: 1fr; }
.foods-dna-sidebar { order: -1; flex-direction: column; align-items: center; text-align: center; }
.foods-dna-anim { flex: 0 0 auto; width: calc(50% - 8px); height: auto; aspect-ratio: 1; max-width: none; max-height: none; margin: 0 auto 20px; }
.foods-dna-sidebar-body { width: 100%; max-width: none; flex-direction: column; align-items: center; padding: 0 24px; gap: 10px; }
.foods-switch-title { margin: 0 0 6px; }
.foods-switch-wrap { margin-bottom: 10px; }
.foods-more-btn { width: auto; min-width: 160px; margin: 0 auto; }
.foods-card { flex: 0 0 calc(50% - 8px); }
.foods-modal-2col { flex-direction: column; }
.foods-modal-left { flex: none; width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }
.foods-modal-say-row { flex-direction: column; }
.foods-modal-tts-box { flex: none; width: 100%; }
.foods-expand-header { padding: 14px 18px 0; }
.foods-expand-body { padding: 16px 18px 32px; }
}
@media (max-width: 600px) {
.foods { padding: 16px 0 20px; }
.foods .container { padding-left: 14px; padding-right: 14px; }
.foods-card { flex: 0 0 78vw; }
.foods-dna-anim { flex: 0 0 auto; width: 78vw; height: auto; aspect-ratio: 1; max-height: none; }
.foods-logo { height: 22px; }
.foods-head { gap: 10px; }
.foods-eyebrow { font-size: 9.5px; letter-spacing: .04em; padding: 3px 9px; }
.foods-modal-recipe { grid-template-columns: 1fr; }
.foods-nutrition { grid-template-columns: repeat(3, 1fr); }
.foods-modal-right { padding: 16px 18px 28px; }
.foods-title-main { font-size: 1.5rem; }
}