.ingredient-grid *{box-sizing:border-box}.ingredient-count-2{display:grid;grid-template-columns:50% 50%;height:400px}.ingredient-count-3{display:grid;grid-template-areas:"first second" "first third";grid-template-columns:50% 50%;grid-template-rows:50% 50%;height:500px}.ingredient-count-3 .ingredient-tile:nth-child(1){grid-area:first;height:100%}.ingredient-count-3 .ingredient-tile:nth-child(2){grid-area:second}.ingredient-count-3 .ingredient-tile:nth-child(3){grid-area:third}.ingredient-count-4{display:grid;grid-template-columns:50% 50%;grid-template-rows:50% 50%;height:500px}.ingredient-count-5{display:grid;grid-template-areas:"first first" "second third" "fourth fifth";grid-template-columns:50% 50%;grid-template-rows:33.33% 33.33% 33.33%;height:600px}.ingredient-count-5 .ingredient-tile:nth-child(1){grid-area:first}.ingredient-count-5 .ingredient-tile:nth-child(2){grid-area:second}.ingredient-count-5 .ingredient-tile:nth-child(3){grid-area:third}.ingredient-count-5 .ingredient-tile:nth-child(4){grid-area:fourth}.ingredient-count-5 .ingredient-tile:nth-child(5){grid-area:fifth}.ingredient-front,.ingredient-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;transition:transform 0.6s ease-in-out}.ingredient-front{transform:rotateY(0deg)}.ingredient-back{transform:rotateY(180deg);background-color:#fff;padding:20px}.ingredient-tile.flipped .ingredient-front{transform:rotateY(180deg)}.ingredient-tile.flipped .ingredient-back{transform:rotateY(0deg)}.ingredient-image::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgb(0 0 0 / .5);z-index:1;opacity:0;transition:opacity 0.3s ease}.ingredient-image.loaded::before{opacity:1}.ingredient-image.lazy-loading .ingredient-loading-placeholder{display:block}.ingredient-image.loaded .ingredient-loading-placeholder{display:none}.ingredient-content{z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;transition:opacity 0.3s ease}.ingredient-image.loaded .ingredient-content{opacity:1!important}.ingredient-name{color:#fff;font-size:26px;font-weight:700;margin-bottom:5px;word-break:break-word;text-align:center}.ingredient-brief{color:#fff;font-size:16px;margin-top:0;margin-bottom:10px;text-align:center}.ingredient-expand-btn,.ingredient-collapse-btn{background-color:#000;color:#fff;border:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:10px;z-index:3;transition:background-color 0.2s ease}.ingredient-expand-btn:hover,.ingredient-collapse-btn:hover{background-color:#333}.ingredient-expand-btn .icon,.ingredient-collapse-btn .icon{font-size:24px;line-height:1}.ingredient-back .ingredient-name{color:#A6192E;font-size:14px;text-align:center}.ingredient-detail{height:100%;display:flex;flex-direction:column;overflow-y:auto;justify-content:center;align-items:center}.ingredient-description{flex-grow:0;font-size:14px;line-height:1.4;text-align:center}.ingredient-view-all{text-align:right;margin-top:20px}.view-all-link{text-decoration:underline;font-size:14px;color:#000;transition:color 0.2s ease}.view-all-link:hover{color:#A6192E}.ingredient-image.lazy-loading{position:relative}.ingredient-loading-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#999;font-size:14px;z-index:1}.ingredient-loading-placeholder::after{content:'';display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid #ddd;border-top:2px solid #999;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (max-width:768px){.ingredient-grid{gap:1px}.ingredient-name{font-size:20px;line-height:1.2;text-align:center}.ingredient-back .ingredient-name{font-size:14px;text-align:center}.ingredient-brief{font-size:12px;line-height:1.2;text-align:center}.ingredient-description{font-size:12px;line-height:1.3;max-height:150px;overflow-y:auto;text-align:center}.ingredient-expand-btn,.ingredient-collapse-btn{width:30px;height:30px}.ingredient-expand-btn .icon,.ingredient-collapse-btn .icon{font-size:20px}.ingredient-loading-placeholder{font-size:12px}}@media (max-width:1024px) and (min-width:769px){.ingredient-name{font-size:22px}.ingredient-brief{font-size:14px}}@media (prefers-reduced-motion:reduce){.ingredient-front,.ingredient-back,.ingredient-content,.ingredient-image::before{transition:none}.ingredient-loading-placeholder::after{animation:none}}@media (prefers-contrast:high){.ingredient-image::before{background-color:rgb(0 0 0 / .8)}.ingredient-expand-btn,.ingredient-collapse-btn{border:2px solid #fff}}