/* Al-Attar — ingredient library */
.ing-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--green-dk),#235f39);color:#fff}
.ing-hero:before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:rgba(168,132,44,.16);inset-inline-end:-120px;top:-150px}
.ing-hero:after{content:"🌿";position:absolute;font-size:180px;opacity:.055;inset-inline-start:5%;bottom:-80px;transform:rotate(-18deg)}
.ing-hero-in{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:68px 24px 58px;text-align:center}
.ing-kicker{color:#d7bd72;font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:10px}
.ing-hero h1{font-size:46px;line-height:1.15;margin:0 0 12px;color:#fff}
.ing-hero p{max-width:650px;margin:0 auto;color:#d9e3db;font-size:15.5px;line-height:1.9}
.ing-search-wrap{max-width:610px;margin:28px auto 0;position:relative}
.ing-search-wrap input{width:100%;border:none;background:#fff;border-radius:999px;padding:16px 48px 16px 20px;font-family:inherit;font-size:14px;color:var(--ink);box-shadow:0 14px 35px rgba(0,0,0,.18);outline:none}
html[dir="ltr"] .ing-search-wrap input{padding:16px 20px 16px 48px}
.ing-search-wrap input:focus{box-shadow:0 0 0 3px rgba(215,189,114,.45),0 14px 35px rgba(0,0,0,.18)}
.ing-search-icon{position:absolute;inset-inline-start:20px;top:50%;transform:translateY(-50%);color:var(--green);font-size:21px;z-index:2}

.ing-wrap{max-width:1180px;margin:0 auto;padding:42px 24px 70px}
.ing-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.ing-toolbar h2{font-size:28px;color:var(--green-dk);margin:0 0 2px}
.ing-count{margin:0;color:var(--muted);font-size:13px}
.ing-sort{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 13px;font-family:inherit;color:var(--ink);outline:none}

.ingredient-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ing-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;min-height:390px;box-shadow:0 7px 24px rgba(20,61,36,.055);transition:transform .25s,box-shadow .25s,border-color .25s}
.ing-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(20,61,36,.12);border-color:#d7ccb8}
.ing-card-media{height:190px;background:linear-gradient(145deg,#f2eee4,#e7efe8);display:grid;place-items:center;overflow:hidden;position:relative}
.ing-card-media:after{content:"";position:absolute;inset:12px;border:1px solid rgba(29,86,50,.08);border-radius:14px}
.ing-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.ing-card-placeholder{font-size:62px;filter:saturate(.75)}
.ing-card-body{display:flex;flex-direction:column;flex:1;padding:20px}
.ing-card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:4px}
.ing-card h3{font-size:23px;color:var(--green-dk);margin:0;line-height:1.25}
.ing-scientific{font-family:Georgia,serif;font-style:italic;color:var(--brass-dk);font-size:12.5px;min-height:18px;margin-bottom:12px}
.ing-card-desc{color:#5f564a;font-size:13.5px;line-height:1.8;margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ing-benefit-pill{display:inline-flex;align-items:center;width:max-content;max-width:100%;gap:6px;padding:6px 10px;border-radius:999px;background:#eef5ef;color:var(--green);font-weight:700;font-size:11.5px;margin-top:auto;margin-bottom:14px}
.ing-benefit-pill:before{content:"✦";color:var(--brass)}
.ing-card-link{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;font-size:13px;font-weight:700;color:var(--green)}
.ing-card-link span:last-child{transition:transform .2s}
.ing-card:hover .ing-card-link span:last-child{transform:translateX(-4px)}
html[dir="ltr"] .ing-card:hover .ing-card-link span:last-child{transform:translateX(4px)}
.ing-loading,.ing-empty,.ing-error{grid-column:1/-1;text-align:center;padding:70px 20px;border:1px dashed var(--line);border-radius:16px;color:var(--muted);background:#fff}
.ing-error{color:var(--rust)}

/* Detail */
.ingredient-detail-root{min-height:60vh}
.ing-detail-loading{max-width:1100px;margin:50px auto;padding:70px 24px;text-align:center;color:var(--muted)}
.ing-detail-hero{background:linear-gradient(145deg,#eef3ed,#f9f5ea);border-bottom:1px solid var(--line)}
.ing-detail-hero-in{max-width:1120px;margin:0 auto;padding:48px 24px;display:grid;grid-template-columns:380px 1fr;gap:48px;align-items:center}
.ing-detail-image{height:380px;border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(20,61,36,.1);display:grid;place-items:center}
.ing-detail-image img{width:100%;height:100%;object-fit:cover}
.ing-detail-placeholder{font-size:105px}
.ing-breadcrumb{font-size:12px;color:var(--muted);margin-bottom:15px}
.ing-breadcrumb a{color:var(--green);font-weight:700}
.ing-detail-copy h1{font-size:44px;color:var(--green-dk);margin:0 0 4px}
.ing-detail-en{font-size:18px;color:#4f6756;margin-bottom:6px}
.ing-detail-sci{font-family:Georgia,serif;font-style:italic;color:var(--brass-dk);font-size:15px;margin-bottom:20px}
.ing-detail-desc{font-size:15px;line-height:1.95;color:#40392f;margin:0}
.ing-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin-top:22px}
.ing-meta{padding:12px 14px;background:rgba(255,255,255,.7);border:1px solid rgba(231,222,208,.9);border-radius:12px}
.ing-meta span{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}
.ing-meta b{font-size:13px;color:var(--ink)}

.ing-detail-body{max-width:1120px;margin:0 auto;padding:44px 24px 72px}
.ing-detail-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;margin-bottom:40px}
.ing-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.ing-panel h2{font-size:23px;color:var(--green-dk);margin:0 0 16px}
.ing-benefit-list{display:flex;flex-wrap:wrap;gap:9px}
.ing-benefit{padding:9px 12px;border-radius:10px;background:#f1f6f2;color:var(--green);font-size:13px;font-weight:600}
.ing-primary{background:#fff8e5;border:1px solid #ead7a1;color:#775e18}
.ing-caution{background:#fff8ef;border:1px solid #efd9b5;border-radius:14px;padding:15px 16px;font-size:13px;line-height:1.8;color:#6c5133}
.ing-caution strong{display:block;color:#8b5d22;margin-bottom:4px}
.ing-related-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.ing-related-title h2{font-size:27px;color:var(--green-dk);margin:0}
.ing-related-title a{font-size:12.5px;font-weight:700;color:var(--green)}
.ing-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ing-product{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.ing-product:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,61,36,.1)}
.ing-product-img{height:180px;background:#f4efe5;display:grid;place-items:center;overflow:hidden}
.ing-product-img img{width:100%;height:100%;object-fit:contain;padding:10px}
.ing-product-placeholder{font-size:45px}
.ing-product-body{padding:15px}
.ing-product-name{font-family:'Amiri',serif;font-weight:700;color:var(--green-dk);font-size:18px;margin-bottom:5px}
.ing-product-price{font-size:13px;color:var(--brass-dk);font-weight:700}
.ing-not-found{max-width:700px;margin:80px auto;text-align:center;padding:40px 24px}
.ing-not-found h1{color:var(--green-dk);font-size:34px}

@media(max-width:920px){
  .ingredient-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ing-detail-hero-in{grid-template-columns:300px 1fr;gap:28px}
  .ing-detail-image{height:310px}
  .ing-products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .ing-hero-in{padding:48px 18px 42px}
  .ing-hero h1{font-size:35px}
  .ing-wrap{padding:30px 16px 55px}
  .ing-toolbar{align-items:flex-start;flex-direction:column}
  .ingredient-grid{grid-template-columns:1fr}
  .ing-card{min-height:0}
  .ing-detail-hero-in{grid-template-columns:1fr;padding:28px 16px 34px;gap:24px}
  .ing-detail-image{height:290px}
  .ing-detail-copy h1{font-size:35px}
  .ing-meta-grid{grid-template-columns:1fr}
  .ing-detail-body{padding:30px 16px 55px}
  .ing-detail-grid{grid-template-columns:1fr}
  .ing-products{grid-template-columns:1fr 1fr}
}
@media(max-width:440px){.ing-products{grid-template-columns:1fr}}