/* ======================================================
INGREDIENTS GRID
====================================================== */
.ingredients-group-title{
margin:20px 0;
font-size:20px;
font-weight:700;
}

.recipe-equipment-section .heading-title{
    margin: 30px 0;
    
}

.ingredients-grid{
display:flex;
flex-wrap:wrap;
gap:14px;
overflow:visible;
}

/* card */

.ingredient-card{
flex:0 0 calc(25% - 10.5px);
background:#f7f9f8;
padding:20px;
border-radius:18px;
text-decoration:none;
color:inherit;
transition:.2s;
display:flex;
flex-direction:column;
position:relative;
z-index:1;
overflow:visible;   /* IMPORTANT */
}

.ingredient-card:hover,
.ingredient-note-wrapper.note-open{
z-index:20;
}

.ingredient-card:hover{
transform:translateY(-4px);
background:#eef7f2;
}

.ingredient-image img{
width:100%;
border-radius:8px;
}

.ingredient-amount{
  margin-top:6px;
font-size:15px;
color:#444;
}

.ingredient-name{
margin-top:12px;
font-size:17px;
font-weight:700;
}

/* ======================================================
INGREDIENT NOTE TOOLTIP
====================================================== */

.ingredient-note-wrapper{
position:absolute;
top:12px;
right:12px;
z-index:5;
}

.ingredient-note-icon{
font-size:20px;
cursor:pointer;
color:#666;
opacity:.8;
transition:.2s;
}

.ingredient-note-icon:hover{
opacity:1;
color:#49ae60;
transform:scale(1.15);
}

.ingredient-note-text{
position:absolute;
top:38px;

left:50%;
transform:translateX(-50%) translateY(6px);

background:#fff;
border:1px solid #ddd;
padding:10px 12px;
border-radius:10px;
font-size:13px;
color:#555;

width:max-content;          /* 🔥 auto width */
max-width:240px;            /* 🔥 safe limit */

box-shadow:0 12px 30px rgba(0,0,0,.15);

opacity:0;
pointer-events:none;

transition:.2s;

z-index:999;
}

/* =========================================
EDGE SAFE TOOLTIP (INGREDIENTS)
========================================= */

/* LEFT EDGE */
.ingredient-card:first-child .ingredient-note-text{
  left:0;
  transform:translateY(6px);
}

/* RIGHT EDGE */
.ingredient-card:last-child .ingredient-note-text{
  left:auto;
  right:0;
  transform:translateY(6px);
}

.ingredient-note-wrapper:hover .ingredient-note-text,
.ingredient-note-wrapper.note-open .ingredient-note-text{
opacity:1;
transform:translateY(0);
}

/* ======================================================
LIST VIEW
====================================================== */

.ingredients-list-view .ingredients-grid{
display:block;
}

.ingredients-list-view .ingredient-card{
flex:none;
display:flex;
flex-direction:row;
align-items:center;
gap:15px;
margin-bottom:10px;
padding:12px;
border-radius:10px;
}

.ingredients-list-view .ingredient-image{
width:60px;
flex-shrink:0;
}

.ingredients-list-view .ingredient-amount{
margin-top:0;
}

/* ======================================================
RECIPE STEPS – CLEAN COMMENT STYLE (IMPROVED UX)
====================================================== */

.recipe-step{
  position:relative;
  padding:18px 0;
  border-bottom:1px solid #eee;
}

/* HEADER ROW */

.step-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}

/* STEP TITLE */

.step-title{
  font-size:20px;
  font-weight:600;
}

/* TEXT */

.step-text{
  font-size:inherit;
  line-height:1.6;
  color:#333;
}

/* IMAGE */

.step-image{
  margin-top:10px;
}

.step-image img{
  max-width:260px;
  border-radius:12px;
  cursor:pointer;
  transition:.2s;
}

.step-image img:hover{
  transform:scale(1.03);
}

/* =========================================
STEP ACTION (TOP RIGHT LIKE REACTIONS)
========================================= */

.step-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:30px;
  height:30px;

  border-radius:50%;
  border:1px solid #ddd;

  background:#fff;
  color:#aaa;

  cursor:pointer;
  transition:.2s;
}

/* hover */

.step-action:hover{
  background:#f3f5f4;
}

/* completed */

.recipe-step.completed .step-action{
  background:#49ae60;
  border-color:#49ae60;
  color:#fff;
}

/* completed text */

.recipe-step.completed .step-body{
  opacity:.6;
}

/* ======================================================
STEP IMAGE
====================================================== */

.step-image{
margin-top:14px;
}

.step-image img{
width:260px;
max-width:100%;
border-radius:10px;
cursor:pointer;
transition:.2s;
}

.step-image img:hover{
transform:scale(1.03);
}

/* ======================================================
LIGHTBOX
====================================================== */

.recipe-lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.85);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
cursor:pointer;
}

.recipe-lightbox img{
max-width:90%;
max-height:90%;
border-radius:12px;
box-shadow:0 20px 50px rgba(0,0,0,.4);
}

/* ======================================================
RECIPE CONTROLS
====================================================== */

.recipe-controls{

display:flex;
flex-direction:column;
gap:12px;

margin:10px 0;

}

/* first row */

.recipe-controls-row{

display:flex;
gap:10px;

}

/* second row */

.toggle-row{

justify-content:flex-end;

}

/* ======================================================
BUTTONS
====================================================== */

.recipe-btn{

flex:1;

display:flex;
align-items:center;
justify-content:center;

height:56px;

background:#f7f9f8;
border:1px solid #e3e7e5;

border-radius:10px;

border:none;

cursor:pointer;

transition:.2s;

}

.recipe-btn:hover{
background:#eef2f1;

}

/* icons */

.recipe-btn i{

font-size:20px;
color:#333;

}

/* ======================================================
MOBILE
====================================================== */

@media (max-width:768px){

.recipe-btn{
height:48px;
}

.recipe-btn i{
font-size:18px;
}

}


/* ======================================================
RESPONSIVE
====================================================== */

@media (max-width:1024px){

.ingredient-card{
flex:0 0 calc(33.333% - 14px);
}

}

@media (max-width:768px){

.ingredient-card{
flex:0 0 calc(50% - 10px);
}

}

/* ======================================================
SERVINGS CONTROL – YELLOW BUTTON
====================================================== */

.servings-control{
display:flex;
align-items:center;
justify-content:center;

background:#f3c623;          /* base yellow */
border-radius:14px;

padding:6px 10px;
min-width:120px;

gap:10px;

transition:background .15s ease;
}

/* darker yellow on hover */

.servings-control:hover{
background:#e2b51e;
}

/* left side */

.servings-left{
display:flex;
align-items:center;
gap:6px;
}

/* icon */

.servings-icon{
font-size:14px;
color:#111;
}

/* number */

.recipe-meta-servings-number{
font-size:16px;
font-weight:700;
color:#111;

min-width:16px;
text-align:center;
}

/* buttons group */

.servings-buttons{
display:flex;
gap:4px;
}

/* +/- buttons */

.servings-buttons button{
width:22px;
height:22px;

display:flex;
align-items:center;
justify-content:center;

border:none;
border-radius:6px;

background:rgba(255,255,255,0.45);
cursor:pointer;

font-size:11px;
color:#111;

transition:all .15s ease;
}

.servings-buttons button:hover{
background:rgba(255,255,255,0.7);
}

/* ======================================================
INGREDIENT HEADER
====================================================== */

.ingredients-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:20px;
}

/* toggle */

/* ======================================================
INGREDIENT VIEW TOGGLE – GREY STYLE
====================================================== */

.ingredient-view-toggle{
display:flex;
align-items:center;
gap:4px;

background:#e6e6e6;
border-radius:12px;

padding:4px;
}

/* buttons */

.ingredient-view-toggle button{
width:34px;
height:34px;

display:flex;
align-items:center;
justify-content:center;

border:none;
border-radius:8px;

background:transparent;

cursor:pointer;

font-size:14px;
color:#444;

transition:all .15s ease;
}

/* active */

.ingredient-view-toggle button.active{
background:#fff;
color:#49ae60;
box-shadow:0 1px 4px rgba(0,0,0,0.08);
}

/* hover */

.ingredient-view-toggle button:hover{
background:#dcdcdc;
}

/* ======================================================
PRINT RECIPE ONLY
====================================================== */

@media print {

/* hide everything except the recipe area */

header,
footer,
.sidebar,
.recipe-controls,
.ingredient-view-toggle,
.copy-ingredients,
.wake-lock-toggle,
.print-recipe,
nav,
.ads,
.site-header,
.site-footer{
display:none !important;
}

/* ensure main content uses full width */

.site-content,
.content-area,
.entry-content{
width:100% !important;
max-width:100% !important;
}

/* printable grid */

.recipe-print-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}

/* ingredient cards become simple list */

.recipe-print-ingredients .ingredient-card{
display:block;
padding:0;
margin-bottom:4px;
background:none;
}

/* remove interactive UI */

.ingredient-note-wrapper,
.step-marker{
display:none !important;
}

/* steps simplified */

.recipe-step{
margin-bottom:10px;
}

.step-body{
background:none;
padding:0;
}

/* prevent elements from breaking across pages */

.recipe-step,
.ingredients-group-title{
break-inside:avoid;
page-break-inside:avoid;
}

}

.author-box-modern {
    background: #f6f7f6;
    border-radius: 16px;
        padding: 28px;
    transition: all 0.2s ease;
}

.author-box-modern:hover {
    background: #f2f3f2;
}

.entry-sec:before{
    background: none;
}

/* ======================================================
RECIPE NUTRITION – FINAL (MATCHES STEPS PERFECTLY)
====================================================== */

.recipe-nutrition-advanced{
  padding: 0;
  padding-bottom: 18px;
  border-bottom:1px solid #eee;
}

/* RESET any previous heading styles */
.recipe-nutrition-advanced .nutrition-header h3{
  all:unset;
}

/* HEADER (MATCH STEP TITLE) */

.nutrition-title{
  font-size:20px;
  font-weight:600;
  display:block;
  margin-bottom:6px;
}

.nutrition-title span{
  font-size:13px;
  color:#888;
  margin-left:6px;
}

/* GRID (DESKTOP) */

.recipe-nutrition-advanced .nutrition-grid{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

/* ITEM */

.recipe-nutrition-advanced .nutrition-item{
  flex:1;
  min-width:120px;

  text-align:left;
  padding:6px 0;
}

/* NUMBER */

.recipe-nutrition-advanced .nutrition-number{
  font-size:20px;
  font-weight:700;
  color:#49ae60;
}

/* LABEL */

.recipe-nutrition-advanced .nutrition-label{
  font-size:12px;
  letter-spacing:.04em;
  color:#777;
  margin-top:2px;
}

/* DISCLAIMER */

.recipe-nutrition-advanced .nutrition-disclaimer{
  font-size:14px;
  color:#555;
  line-height:1.6;

  margin-top:14px;
  padding-top:14px;

  border-top:1px solid #eee;
}

/* ======================================================
TABLET
====================================================== */

@media (max-width:1024px){

  .recipe-nutrition-advanced .nutrition-item{
    flex:0 0 calc(50% - 8px);
  }

}

/* ======================================================
MOBILE (FIXED)
====================================================== */

@media (max-width:767px){

  .recipe-nutrition-advanced{
    padding: 0;
    padding-bottom: 18px;
  }

  .recipe-nutrition-advanced .nutrition-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 12px;
  }

  .recipe-nutrition-advanced .nutrition-item{
    flex:none;
    min-width:unset;
  }

}

/* ======================================================
COMMENTS
====================================================== */

.comment-list {
    border-top: 1px solid #eee;
    border-bottom: 0!important;
    list-style: none;
    margin: 0;
    padding: 0;
}

.my-comment {
    padding: 18px 0;
    border-bottom: 1px solid #eee;
}

.my-comment-card {
    display: flex;
    gap: 12px;
}

/* avatar */
.my-comment-avatar img {
    width: 42px;
    height: 42px;
    border-radius:50% !important; /* 🔥 force circle */
    object-fit: cover;
}

/* content */
.my-comment-content {
    flex: 1;
    max-width: 720px;
}

/* header */
.my-comment-header {
    display: flex;
    gap: 10px;
    align-items: center;
}

.my-comment-author {
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

.my-comment-date {
    font-size: 13px;
    color: #888;
}

/* text */
.my-comment-text {
    margin-top: 6px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* images */
.my-comment-text img {
    margin-top: 10px;
    border-radius: 12px;
    max-width: 240px;
}

/* actions */
.my-comment-actions {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* reply */
.my-reply-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: #eef2ef;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #2f3a33;
    cursor: pointer;
}

.my-reply-btn:hover {
    background: #e3e8e4;
}

/* reactions */
.my-comment-reactions {
    display: flex;
    gap: 18px;
    font-size: 16px;
    color: #444;
}

/* ======================================================
COMMENT FORM
====================================================== */

.my-comment-form {
    margin-top: 20px;
}

.comment-notes {
    display: none;
}

/* textarea */
.my-comment-form textarea {
    width: 100%;
    min-height: 110px;
    padding: 14px 16px;
    border: 1px solid #e3e7e5;
    border-radius: 12px;
    font-size: 16px;
    transition: .2s;
}

.my-comment-form textarea:focus {
    outline: none;
    border-color: #49ae60;
    background: #f9fdfb;
}

/* upload */
.my-comment-image-upload {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* hide native input */
.my-comment-image-upload input[type="file"] {
    display: none;
}

/* upload button (MATCH submit height) */
.upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    height: 48px; /* 🔥 MATCHED */
    padding: 0 16px;

    background: #f7f9f8;
    border: 1px solid #e3e7e5;
    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
    transition: .2s;
}

.upload-btn i {
    color: #49ae60;        /* brand green */
    font-size: 16px;
    transition: .2s;
}

/* subtle interaction */
.upload-btn:hover i {
    transform: scale(1.1);
}

.upload-btn:hover {
    background: #eef2f1;
}

/* helper text */
.upload-info {
    font-size: 13px;
    color: #777;
}

/* inputs */
.comment-form-author,
.comment-form-email {
    margin-top: 10px;
}

.comment-form-url {
    display: none;
}

.my-comment-form input[type="text"],
.my-comment-form input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e3e7e5;
    border-radius: 10px;
    font-size: 14px;
}

.my-comment-form input:focus {
    outline: none;
    border-color: #49ae60;
    background: #f9fdfb;
}
/* ======================================================
NAME + EMAIL (FINAL SOLUTION)
====================================================== */

.fields-row {
    display: flex;
}

.fields-row .comment-form-author,
.fields-row .comment-form-email {
    flex: 1;
}

/* mobile fallback */
@media (max-width: 767px) {
    .fields-row {
        flex-direction: column;
    }
}

/* inline name/email */
@media (min-width: 768px) {
    .comment-form-author,
    .comment-form-email {
        display: inline-block;
        width: calc(50% - 6px);
    }

    .comment-form-author {
        margin-right: 12px;
    }
}

/* checkbox */
.comment-form-cookies-consent {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    font-size: 14px;
}

/* submit */
.my-comment-submit {
    margin-top: 14px;

    height: 48px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #f7f9f8;
    border: 1px solid #e3e7e5;
    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.my-comment-submit:hover {
    background: #eef2f1;
}

/* when form is moved under a comment */
.comment .my-comment-form {
    margin-top: 12px;
    margin-bottom: 0;
}

/* remove extra spacing from respond wrapper */
#respond {
    margin-bottom: 0 !important;
}

/* tighten spacing above submit */
.my-comment-submit {
    margin-bottom: 0;
}

/* when reply is active */
.comment #respond {
    border-top: 1px solid #eee;
    margin-top: 16px;
    padding-top: 16px;
     margin-left: 54px;
}

#respond {
    transition: all .2s ease;
}

/* hide title ONLY inside replies */
.comment #respond .comment-form-title {
    display: none;
}

.logged-in-as {
    margin-bottom: 16px;
    font-size: 14px;
    color: #555;
}

.my-comment-reactions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* button */
.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;

    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;

    font-size: 15px;
    font-weight: 500;

    color: #666;
    cursor: pointer;

    transition: all .2s ease;
}

/* hover */
.reaction-btn:hover {
    background: #f3f5f4;
}

/* icon */
.reaction-btn i {
    font-size: 16px;
    transition: .2s;
}

/* LIKE ACTIVE */
.reaction-btn[data-type="like"].active {
    color: #4CAF50;
    background: #eef7f0;
}

/* LOVE ACTIVE */
.reaction-btn[data-type="love"].active {
    color: #e74c3c;
    background: #fdeeee;
}

/* subtle pop */
.reaction-btn.active i {
    transform: scale(1.2);
}

.ci-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 9999;
    cursor: zoom-out;
}

.ci-lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
}

.recipe-taxonomies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.recipe-tax {
    display: inline-block;

    background: #111;
    color: #fff;

    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;

    padding: 6px 10px;
    border-radius: 4px;

    letter-spacing: .4px;
}

/* ======================================================
AUTHOR BOX – FINAL (CLEAN + TOOLTIP + MOBILE FIX)
====================================================== */

.recipe-author-box{
  display:flex;
  align-items:center;
  padding:12px 0;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}

/* ======================================================
LEFT SIDE
====================================================== */

.recipe-author-box .author-left{
  display:flex;
  align-items:center;
  gap:14px;
}

.recipe-author-box .author-avatar img{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
}

.recipe-author-box .author-info{
  display:flex;
  flex-direction:column;
  line-height:1.25;
}

.recipe-author-box .author-name{
  font-weight:600;
  color:#222;
}

.recipe-author-box .author-date{
  font-size:0.85em;
  color:#888;
  margin-top:2px;
}

/* ======================================================
RIGHT SIDE
====================================================== */

.recipe-author-box .author-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.recipe-author-box .recipe-meta-inline{
  display:flex;
  align-items:center;
}

/* ======================================================
META ITEMS
====================================================== */

.recipe-author-box .meta-item,
.recipe-author-box .meta-difficulty{
  display:inline-flex;
  align-items:center;
  gap:6px;

  font-size:0.85em;
  font-weight:500;
  color:#444;

  position:relative;

  padding-right:10px;
  margin-right:10px;
  cursor:pointer;
}

/* ======================================================
ICONS
====================================================== */

.recipe-author-box .meta-item::before,
.recipe-author-box .meta-difficulty::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:1.2em;
  margin-right:6px;
  color:#49ae60;
}

.meta-prep::before{ content:"\e51a"; }
.meta-cook::before{ content:"\e4f1"; }
.meta-total::before{ content:"\f017"; font-weight:400; }
/* EASY */
.recipe-author-box .meta-difficulty.difficulty-easy::before{
  content:"\f2ca"; /* thermometer empty */
  color:#49ae60;
}

/* MEDIUM */
.recipe-author-box .meta-difficulty.difficulty-medium::before{
  content:"\f2c9"; /* thermometer half */
  color:#f39c12;
}

/* HARD */
.recipe-author-box .meta-difficulty.difficulty-hard::before{
  content:"\f2c7"; /* skull */
  color:#e74c3c;
}

/* separators */
.recipe-author-box .meta-item:not(:last-child),
.recipe-author-box .meta-difficulty:not(:last-child){
  padding-right:10px;
  margin-right:10px;
}

/* ======================================================
TOOLTIP (FINAL – NO CONFLICT)
====================================================== */

.recipe-author-box .meta-item,
.recipe-author-box .meta-difficulty{
  position:relative;
  cursor:pointer;
}

.recipe-author-box .meta-item::after,
.recipe-author-box .meta-difficulty::after{
  content:attr(data-label);
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(6px);

  background:#222;
  color:#fff;
  font-size:12px;
  padding:6px 10px;
  border-radius:8px;

  white-space:nowrap;   /* 🔥 FIX */
  max-width:none;       /* 🔥 FIX */
  
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
  z-index:100;
}

/* =========================================
EDGE SAFE TOOLTIP
========================================= */

/* FIRST ITEM (left edge) */
.recipe-author-box .meta-item:first-child::after{
  left:0;
  transform:translateY(6px);
  text-align:left;
}

/* LAST ITEM (right edge — difficulty) */
.recipe-author-box .meta-difficulty::after{
  left:auto;
  right:0;
  transform:translateY(6px);
  text-align:right;
}

/* hover (desktop) */
.recipe-author-box .meta-item:hover::after,
.recipe-author-box .meta-difficulty:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* click (mobile) */
.recipe-author-box .meta-item.active::after,
.recipe-author-box .meta-difficulty.active::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ======================================================
DIFFICULTY COLORS
====================================================== */

.recipe-author-box .meta-difficulty.difficulty-easy::before{
  color:#49ae60;
}

.recipe-author-box .meta-difficulty.difficulty-medium::before{
  color:#f39c12;
}

.recipe-author-box .meta-difficulty.difficulty-hard::before{
  color:#e74c3c;
}

/* ======================================================
MOBILE – FINAL CLEAN VERSION
====================================================== */

@media (max-width:767px){

  .recipe-author-box{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .recipe-author-box .author-left{
    gap:10px;
  }

  .recipe-author-box .author-avatar img{
    width:40px;
    height:40px;
  }

  .recipe-author-box .author-name{
    font-size:0.95em;
  }

  .recipe-author-box .author-date{
    font-size:0.8em;
  }

  /* META */
  .recipe-author-box .author-right{
    margin-left:0;
    border-top:1px solid #eee;
    padding-top:12px;

    display:flex;
    justify-content:flex-start; /* 🔥 LEFT ALIGNED */
  }

  /* FLEX = BEST FOR MOBILE */
  .recipe-author-box .recipe-meta-inline{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:12px 16px;
  }

  /* ITEMS */
  .recipe-author-box .meta-item,
  .recipe-author-box .meta-difficulty{
    padding:0;
    margin:0;
    font-size:0.85em;
  }

}

.recipes-heading{
    font-size: 38px;
}

@media (max-width:767px){
.recipes-heading{
    font-size: 32px;
}
}

.sp-fix{
    margin: 20px 0;
}

.comment-list{
    margin-top: 20px!important;
}

.recipe-save-button{
    width: 100%!important;
}

/* allow tap interaction */
.recipe-author-box .meta-item,
.recipe-author-box .meta-difficulty{
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

/* make tooltip clickable-safe */
.recipe-author-box .meta-item::after,
.recipe-author-box .meta-difficulty::after{
  pointer-events:none;
}

@media (max-width:767px){

  .recipe-author-box .meta-item::after,
  .recipe-author-box .meta-difficulty::after{
    bottom:calc(100% + 6px);

    left:0;
    right:auto;
    transform:translateY(6px);

    max-width:120px;
    text-align:left;
  }

  /* LAST ITEM FIX (right side) */
  .recipe-author-box .meta-difficulty::after{
    left:auto;
    right:0;
    text-align:right;
  }

  .recipe-author-box .meta-item.active::after,
  .recipe-author-box .meta-difficulty.active::after{
    opacity:1;
    transform:translateY(0);
  }

}

.my-comment-form .form-submit{
  display:flex;
  justify-content:flex-end;
}

/* =========================================
AUTHOR STATS ICONS
========================================= */

.meta-posts::before{
  content:"\f15c"; /* file/article */
}

.meta-recipes::before{
  content:"\f2e7"; /* utensils */
}

/* ======================================================
INGREDIENT NUTRITION CARD (COMPACT IMPROVED)
====================================================== */

.ingredient-nutrition-card{
background:#f7f9f8;
border-radius:16px;
padding:18px 20px;
margin:20px 0;
}

/* header */

.ingredient-nutrition-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:14px;
padding-bottom:10px;
border-bottom:1px solid #e3e7e5;
}

/* title */

.ingredient-nutrition-kicker{
font-size:15px;               /* ⬆ stronger */
font-weight:700;
letter-spacing:.02em;
color:#111;                   /* ⬅ stronger contrast */
}

/* unit */

.ingredient-nutrition-sub{
font-size:12px;
font-weight:600;
color:#666;
background:#eef2f1;
padding:3px 7px;
border-radius:6px;
}

/* grid */

.ingredient-nutrition-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:10px;                     /* ⬇ tighter */
}

/* card */

.ingredient-nutrition-item{
background:#fff;
border:1px solid #e6ebe8;
border-radius:12px;
padding:12px 14px;           /* ⬇ much tighter */
}

/* number */

.ingredient-nutrition-number{
font-size:20px;              /* ⬇ smaller */
font-weight:700;
color:#49ae60;
margin-bottom:2px;
}

/* label */

.ingredient-nutrition-label{
font-size:11px;
text-transform:uppercase;
letter-spacing:.05em;
color:#777;
}

/* note */

.ingredient-nutrition-note{
margin-top:12px;
padding-top:10px;
border-top:1px solid #e3e7e5;
font-size:12px;
color:#666;
}

/* ======================================================
INGREDIENT NUTRITION CARD — MOBILE
====================================================== */

@media (max-width: 480px){

.ingredient-nutrition-grid{
grid-template-columns:1fr;
}

}

@media (max-width: 767px){

.ingredient-nutrition-card{
padding:16px;
border-radius:14px;
margin:16px 0;
}

.ingredient-nutrition-head{
align-items:flex-start;
gap:8px;
flex-direction:column;
margin-bottom:12px;
padding-bottom:10px;
}

.ingredient-nutrition-title{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px;
}

.ingredient-nutrition-kicker{
font-size:14px;
}

.ingredient-nutrition-sub{
font-size:11px;
padding:3px 6px;
}

.ingredient-nutrition-grid{
grid-template-columns:repeat(2, 1fr);
gap:10px;
}

.ingredient-nutrition-item{
padding:12px;
border-radius:12px;
}

.ingredient-nutrition-number{
font-size:22px;
line-height:1.1;
}

.ingredient-nutrition-label{
font-size:11px;
}

.ingredient-nutrition-note{
margin-top:12px;
padding-top:10px;
font-size:12px;
line-height:1.5;
}

}