/* ============================================================
   EcoFarm Agri — Single product page
   تنسيقات المحتوى فقط.
   الخط والألوان الأساسية من style.css
   ============================================================ */

/* المتغيرات محلية لمحتوى صفحة التفاصيل */
.catalog-page {
    --detail-green: var(--brand-dark);
    --detail-green-deep: var(--brand-deep);
    --detail-green-soft: #eaf5ec;
    --detail-gold: var(--brand);

    --detail-page: var(--body-bg);
    --detail-surface: var(--surface);
    --detail-text: var(--body-text);
    --detail-muted: #64748b;
    --detail-border: var(--border);

    --detail-shadow: 0 18px 48px rgba(23, 58, 34, .07);

    background: var(--detail-page);
    color: var(--detail-text);

    font-family: inherit;
    font-size: 15px;
    line-height: 1.75;

    -webkit-font-smoothing: antialiased;
}

/* إعدادات التمرير */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* الأزرار والروابط داخل محتوى التفاصيل فقط */
.catalog-page button,
.catalog-page input,
.catalog-page select {
    font: inherit;
}

.catalog-page button,
.catalog-page a {
    -webkit-tap-highlight-color: transparent;
}

.catalog-page a {
    color: inherit;
}

/* أيقونات محتوى التفاصيل فقط.
   لا تشمل أيقونات التوبار أو الناف بار أو الفوتر. */
.catalog-page svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.catalog-page img {
    max-width: 100%;
}

/* ============================================================
   DARK MODE
   يرث كلاس .dark من النظام الأصلي للموقع
   ============================================================ */

.dark .catalog-page {
    --detail-page: var(--night-body);
    --detail-surface: #112217;
    --detail-text: var(--night-text);
    --detail-muted: #a1a1aa;
    --detail-border: rgba(255, 255, 255, .08);
    --detail-green-soft: rgba(22, 163, 74, .13);
    --detail-shadow: 0 20px 48px rgba(0, 0, 0, .30);

    background: var(--detail-page);
    color: var(--detail-text);
}

/* ---------- Compact image hero ---------- */
.detail-hero { position:relative; isolation:isolate; display:flex; align-items:center; min-height:322px; padding:45px clamp(22px,8.5vw,140px); overflow:hidden; color:#fff; background:#174d2c url("https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=2200&q=88") center 48%/cover no-repeat; }
.detail-hero::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(100deg,rgba(8,37,21,.92),rgba(14,57,31,.74) 59%,rgba(15,64,33,.40)); }
.detail-hero::after { content:""; position:absolute; z-index:-1; inset-inline-end:-150px; bottom:-260px; width:540px; height:540px; border:1px solid rgba(255,255,255,.17); border-radius:50%; box-shadow:0 0 0 42px rgba(255,255,255,.035),0 0 0 85px rgba(255,255,255,.025); }
.detail-hero-content { position:relative; max-width:730px; animation:detail-hero-rise .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes detail-hero-rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:26px; color:rgba(255,255,255,.72); font-size:10px; font-weight:700; }
.breadcrumbs a { color:rgba(255,255,255,.88); text-decoration:none; transition:color .2s ease; }
.breadcrumbs a:hover { color:#ffe2a2; }
.breadcrumbs > span:last-child { color:#ffe2a2; }
.detail-hero-badge { display:inline-flex; align-items:center; gap:8px; color:#e3efe4; font:800 9px Arial,sans-serif; letter-spacing:2.1px; }
.detail-hero-badge > span { width:7px; height:7px; border-radius:50%; background:var(--detail-gold); box-shadow:0 0 0 4px rgba(244,169,31,.15); }
.detail-hero h1 { margin:9px 0 8px; color:#fff; font-size:clamp(35px,4vw,54px); font-weight:900; line-height:1.25; letter-spacing:-.7px; }
.detail-hero h1 em { color:var(--detail-gold); font-style:normal; }
.detail-hero-content > p { margin:0; color:rgba(255,255,255,.77); font-size:12px; }
.detail-hero-index { position:absolute; inset-inline-end:clamp(25px,8.5vw,140px); bottom:43px; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.78); }
.detail-hero-index strong { color:#fff; font:900 32px/1 Arial,sans-serif; letter-spacing:-2px; }
.detail-hero-index span { padding-inline-start:10px; border-inline-start:1px solid rgba(255,255,255,.3); font:800 8px/1.6 Arial,sans-serif; letter-spacing:1.5px; }

/* ---------- Page intro and split profile card ---------- */
.product-profile-section,.product-information-section,.related-products-section { width:min(100% - 48px,1380px); margin-inline:auto; }
.product-profile-section { padding:48px 0 55px; }
.detail-section-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:17px; }
.back-to-products { display:inline-flex; align-items:center; gap:7px; color:var(--detail-green); font-size:11px; font-weight:900; text-decoration:none; transition:gap .25s ease,color .25s ease; }
.back-to-products svg { width:17px; height:17px; }
.back-to-products:hover { gap:12px; color:var(--detail-gold); }
.product-breadcrumb-note { display:flex; align-items:center; gap:8px; color:var(--detail-muted); font-size:10px; font-weight:800; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#28a65a; box-shadow:0 0 0 4px rgba(40,166,90,.10); }
.demo-tag { padding:3px 8px; border-radius:6px; color:#95651c; background:#fff3d5; font-size:9px; }
.dark .demo-tag { color:#f6cd81; background:rgba(244,169,31,.13); }
.product-profile-card { display:grid; grid-template-columns:minmax(310px,.91fr) minmax(0,1.7fr); gap:0; overflow:hidden; border:1px solid var(--detail-border); border-radius:25px; background:var(--detail-surface); box-shadow:var(--detail-shadow); transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease; }
.product-summary-panel { position:relative; display:flex; flex-direction:column; min-width:0; padding:29px 27px 26px; border-inline-end:1px solid var(--detail-border); background:linear-gradient(180deg,var(--detail-surface),color-mix(in srgb,var(--detail-green-soft) 27%,var(--detail-surface))); }
.product-summary-panel::before { content:""; position:absolute; inset-inline-start:0; top:0; width:4px; height:75px; border-radius:0 0 5px 0; background:linear-gradient(var(--detail-green),var(--detail-gold)); }
.product-summary-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:21px; }
.product-type-pill { display:inline-flex; align-items:center; padding:5px 11px; border-radius:8px; color:var(--detail-green); background:var(--detail-green-soft); font-size:10px; font-weight:900; }
.product-code { color:var(--detail-muted); font:700 9px Arial,sans-serif; letter-spacing:1px; }
.agency-label { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.agency-symbol { display:grid; place-items:center; width:40px; height:40px; flex:0 0 auto; border-radius:13px; color:var(--detail-green); background:var(--detail-green-soft); }
.agency-symbol svg { width:22px; height:22px; }
.agency-label small,.agency-label strong { display:block; }
.agency-label small { color:var(--detail-muted); font-size:9px; font-weight:700; }
.agency-label strong { margin-top:2px; font-size:11px; font-weight:900; }
.product-summary-panel h2 { margin:0 0 8px; font-size:clamp(25px,2.5vw,34px); line-height:1.4; font-weight:900; letter-spacing:-.6px; }
.detail-short-description { margin:0 0 19px; color:var(--detail-muted); font-size:11px; line-height:2; }
.detail-quick-facts { display:grid; grid-template-columns:1fr; gap:0; margin-bottom:19px; border-top:1px solid var(--detail-border); border-bottom:1px solid var(--detail-border); }
.quick-fact { display:flex; align-items:center; gap:10px; padding:11px 0; }
.quick-fact + .quick-fact { border-top:1px dashed var(--detail-border); }
.fact-icon { display:grid; place-items:center; width:33px; height:33px; flex:0 0 auto; border-radius:10px; color:var(--detail-green); background:var(--detail-green-soft); }
.fact-icon svg { width:18px; height:18px; }
.quick-fact small,.quick-fact strong { display:block; }
.quick-fact small { color:var(--detail-muted); font-size:9px; }
.quick-fact strong { margin-top:2px; font-size:11px; font-weight:900; overflow-wrap:anywhere; }
.product-share-block { margin-top:auto; padding-top:1px; }
.share-caption { display:block; margin-bottom:9px; color:var(--detail-text); font-size:10px; font-weight:900; }
.share-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.share-btn { display:grid; place-items:center; width:39px; height:39px; border:1px solid var(--detail-border); border-radius:12px; background:var(--detail-surface); color:var(--detail-muted); cursor:pointer; transition:transform .27s ease,border-color .27s ease,color .27s ease,background .27s ease,box-shadow .27s ease; }
.share-btn svg { width:19px; height:19px; fill:currentColor; stroke:none; }
.share-btn:hover { transform:translateY(-4px); box-shadow:0 9px 18px rgba(0,0,0,.09); }
.whatsapp-share:hover { color:#149447; border-color:#149447; background:#eaf8ee; }
.facebook-share:hover { color:#1877f2; border-color:#1877f2; background:#eff5ff; }
.messenger-share:hover { color:#087eff; border-color:#087eff; background:#edf5ff; }
.copy-share:hover { color:var(--detail-green); border-color:var(--detail-green); background:var(--detail-green-soft); }
.product-contact-actions { display:grid; grid-template-columns:1fr; gap:9px; margin-top:17px; }
.primary-contact-btn,.download-spec-btn { display:flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:10px 13px; border:1px solid transparent; border-radius:12px; font-size:10px; font-weight:900; cursor:pointer; text-decoration:none; transition:transform .28s ease,box-shadow .28s ease,background-color .28s ease,border-color .28s ease; }
.primary-contact-btn { color:#fff; background:#16854a; box-shadow:0 9px 20px rgba(22,133,74,.16); }
.primary-contact-btn:hover { background:#106e3b; transform:translateY(-3px); box-shadow:0 14px 26px rgba(22,133,74,.22); }
.primary-contact-btn svg { width:18px; height:18px; fill:currentColor; stroke:none; }
.download-spec-btn { color:var(--detail-green); border-color:rgba(36,118,66,.20); background:var(--detail-green-soft); }
.download-spec-btn:hover { transform:translateY(-2px); border-color:var(--detail-green); box-shadow:0 9px 20px rgba(36,118,66,.10); }
.download-spec-btn svg { width:18px; height:18px; }
.download-spec-btn span { padding:2px 5px; border-radius:5px; background:rgba(244,169,31,.18); color:#94631a; font-size:8px; }

/* ---------- Gallery ---------- */
.product-gallery-panel { min-width:0; padding:28px 29px 22px; }
.gallery-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; }
.gallery-heading h3 { margin:3px 0 0; font-size:18px; font-weight:900; }
.gallery-count { display:inline-flex; align-items:center; padding:6px 10px; border:1px solid var(--detail-border); border-radius:9px; color:var(--detail-muted); background:var(--detail-page); font:800 10px Arial,sans-serif; letter-spacing:1px; white-space:nowrap; }
.product-gallery-stage { position:relative; isolation:isolate; display:grid; place-items:center; height:440px; overflow:hidden; border:1px solid rgba(26,71,39,.08); border-radius:19px; background:#fff; }

/* Product gallery — full image without cropping */

.product-detail-page #galleryStage > #mainProductImage {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 15px;
    box-sizing: border-box;

    object-fit: contain !important;
    object-position: center center;

    transform: none !important;
    transition: opacity .25s ease;
}

.product-detail-page #galleryStage > #mainProductImage[hidden] {
    display: none !important;
}
.gallery-corner-mark { position:absolute; z-index:1; top:15px; right:15px; width:27px; height:27px; border-top:2px solid rgba(36,118,66,.35); border-right:2px solid rgba(36,118,66,.35); border-radius:0 7px 0 0; pointer-events:none; }
html[dir="ltr"] .gallery-corner-mark { right:auto; left:15px; border-right:0; border-left:2px solid rgba(36,118,66,.35); border-radius:7px 0 0; }
/* ============================================================
   PRODUCT GALLERY — IMAGE FALLBACK
   إظهار الصورة الاحتياطية عند الحاجة فقط
   ============================================================ */

.gallery-image-fallback {
    position: absolute;
    inset: 0;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: var(--detail-green);
    background: #f3f8f2;

    font-size: 12px;
    font-weight: 900;
}

/* مهم: لا تسمح لتنسيق display:flex بإلغاء hidden */

.gallery-image-fallback[hidden] {
    display: none !important;
}

/* إخفاء إطار الفيديو عند عدم تشغيله */

.video-player-wrap[hidden] {
    display: none !important;
}
.gallery-image-fallback svg { width:72px; height:72px; fill:currentColor; stroke:none; opacity:.8; }
.gallery-overlay-badge { position:absolute; z-index:2; top:14px; inset-inline-start:14px; display:flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid rgba(36,118,66,.12); border-radius:9px; color:#246d3b; background:rgba(240,249,239,.94); font-size:9px; font-weight:900; backdrop-filter:blur(6px); }
.gallery-overlay-badge svg { width:16px; height:16px; }
.gallery-arrow { position:absolute; z-index:4; top:50%; display:grid; place-items:center; width:39px; height:39px; padding:0; border:1px solid rgba(36,118,66,.13); border-radius:13px; color:var(--detail-green); background:rgba(255,255,255,.93); box-shadow:0 8px 20px rgba(0,0,0,.08); transform:translateY(-50%); cursor:pointer; transition:transform .25s ease,background .25s ease,color .25s ease,opacity .25s ease; }
.gallery-arrow:hover { color:#fff; background:var(--detail-green); transform:translateY(-50%) scale(1.06); }
.gallery-prev { inset-inline-start:13px; }
.gallery-next { inset-inline-end:13px; }
.gallery-arrow svg { width:19px; height:19px; }
.video-player-wrap { position:absolute; z-index:5; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:#07160c; }
.video-player-wrap[hidden] { display:none!important; }
.video-player-wrap video { width:100%; height:100%; object-fit:contain; background:#07160c; }
.close-video-btn { position:absolute; top:14px; inset-inline-end:14px; display:flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid rgba(255,255,255,.2); border-radius:9px; color:#fff; background:rgba(0,0,0,.66); font-size:9px; font-weight:800; cursor:pointer; }
.close-video-btn svg { width:15px; height:15px; }
.gallery-below-row { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:14px; }
.gallery-thumbnails { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.gallery-thumb { position:relative; display:grid; place-items:center; width:67px; height:63px; padding:3px; overflow:hidden; border:1px solid var(--detail-border); border-radius:11px; background:#fff; cursor:pointer; transition:border-color .23s ease,box-shadow .23s ease,transform .23s ease; }
.gallery-thumb img { display:block; width:100%; height:100%; object-fit:contain; }
.gallery-thumb:hover { transform:translateY(-2px); border-color:var(--detail-green); }
.gallery-thumb.active { border:2px solid var(--detail-green); box-shadow:0 0 0 3px rgba(36,118,66,.10); }
.video-status-wrap { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto; }
.video-status { display:inline-flex; align-items:center; gap:6px; color:var(--detail-muted); font-size:9px; font-weight:800; white-space:nowrap; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#20a45a; }
.video-status.unavailable .status-dot { background:#9aa49b; }
.watch-video-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid rgba(36,118,66,.17); border-radius:8px; color:var(--detail-green); background:var(--detail-green-soft); font-size:9px; font-weight:900; cursor:pointer; transition:background .25s ease,color .25s ease,transform .25s ease; }
.watch-video-btn:hover:not(:disabled) { transform:translateY(-2px); color:#fff; background:var(--detail-green); }
.watch-video-btn:disabled { opacity:.48; cursor:not-allowed; }
.watch-video-btn svg { width:13px; height:13px; fill:currentColor; stroke:none; }
.gallery-source-note { margin:10px 0 0; color:var(--detail-muted); font-size:9px; }

/* ---------- Main information tabs ---------- */
.product-information-section { padding:20px 0 65px; }
.information-section-header,.related-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:25px; }
.information-section-header h2,.related-heading h2 { margin:4px 0 6px; font-size:clamp(27px,3vw,37px); line-height:1.35; font-weight:900; }
.information-section-header h2 em,.related-heading h2 em { color:var(--detail-green); font-style:normal; }
.info-header-emblem { display:grid; place-items:center; width:74px; height:74px; border-radius:24px; color:var(--detail-green); background:var(--detail-green-soft); transform:rotate(-7deg); }
.info-header-emblem svg { width:48px; height:48px; }
.product-tabs-card { overflow:hidden; border:1px solid var(--detail-border); border-radius:22px; background:var(--detail-surface); box-shadow:var(--detail-shadow); transition:background-color .35s ease,border-color .35s ease; }
.product-tabs { display:flex; align-items:stretch; gap:5px; padding:10px 12px 0; border-bottom:1px solid var(--detail-border); background:color-mix(in srgb,var(--detail-green-soft) 30%,var(--detail-surface)); }
.product-tab { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-width:190px; padding:15px 20px; border:0; border-radius:12px 12px 0 0; color:var(--detail-muted); background:transparent; font-size:12px; font-weight:900; cursor:pointer; transition:color .25s ease,background-color .25s ease; }
.product-tab::after { content:""; position:absolute; right:17px; left:17px; bottom:-1px; height:3px; border-radius:5px 5px 0 0; background:transparent; transition:background-color .25s ease; }
html[dir="ltr"] .product-tab::after { right:17px; left:17px; }
.product-tab svg { width:18px; height:18px; }
.product-tab:hover { color:var(--detail-green); }
.product-tab.active { color:var(--detail-green); background:var(--detail-surface); }
.product-tab.active::after { background:var(--detail-green); }
.tab-panel { padding:28px 30px 31px; animation:panel-enter .35s ease both; }
.tab-panel[hidden] { display:none!important; }
@keyframes panel-enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
.overview-intro,.technical-intro { display:flex; align-items:flex-start; gap:13px; margin-bottom:22px; }
.tab-panel-icon { display:grid; place-items:center; width:45px; height:45px; flex:0 0 auto; border-radius:14px; color:var(--detail-green); background:var(--detail-green-soft); }
.tab-panel-icon svg { width:23px; height:23px; }
.overview-intro h3,.technical-intro h3 { margin:0 0 5px; font-size:16px; font-weight:900; }
.overview-intro p,.technical-intro p { margin:0; color:var(--detail-muted); font-size:11px; line-height:1.9; }
.details-data-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.data-cell { min-width:0; padding:15px; border:1px solid var(--detail-border); border-radius:13px; background:var(--detail-page); transition:transform .25s ease,border-color .25s ease,background-color .25s ease; }
.data-cell:hover { transform:translateY(-3px); border-color:rgba(36,118,66,.3); }
.data-cell span,.data-cell strong { display:block; }
.data-cell span { margin-bottom:7px; color:var(--detail-muted); font-size:10px; font-weight:700; }
.data-cell strong { color:var(--detail-text); font-size:12px; font-weight:900; overflow-wrap:anywhere; }
.disclaimer-box { display:flex; align-items:flex-start; gap:10px; margin-top:20px; padding:14px 16px; border:1px solid rgba(201,143,41,.22); border-radius:13px; color:#85601e; background:#fff8e9; }
.dark .disclaimer-box { color:#f1d499; background:rgba(244,169,31,.08); border-color:rgba(244,169,31,.20); }
.disclaimer-box svg { flex:0 0 auto; width:19px; height:19px; margin-top:2px; }
.disclaimer-box p { margin:0; font-size:10px; line-height:1.9; }
.disclaimer-box strong { font-weight:900; }
.technical-placeholder { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:19px; padding:23px; border:1px dashed rgba(36,118,66,.3); border-radius:17px; background:var(--detail-page); }
.technical-document-icon { display:grid; place-items:center; width:70px; height:77px; border-radius:15px; color:var(--detail-green); background:var(--detail-green-soft); }
.technical-document-icon svg { width:43px; height:43px; }
.technical-status { display:inline-block; margin-bottom:4px; color:var(--detail-green); font-size:9px; font-weight:900; }
.technical-placeholder h4 { margin:0 0 5px; font-size:15px; font-weight:900; }
.technical-placeholder p { margin:0; max-width:550px; color:var(--detail-muted); font-size:10px; line-height:1.9; }
.technical-download { white-space:nowrap; }
.technical-disclaimer { display:flex; align-items:center; gap:8px; margin-top:15px; color:var(--detail-muted); font-size:10px; }
.technical-disclaimer svg { width:16px; height:16px; flex:0 0 auto; }

/* ---------- Related products ---------- */
.related-products-section { padding:0 0 90px; }
.related-heading { margin-bottom:26px; }
.all-products-link { display:inline-flex; align-items:center; gap:9px; padding:11px 15px; border:1px solid var(--detail-border); border-radius:11px; color:var(--detail-green); background:var(--detail-surface); font-size:10px; font-weight:900; text-decoration:none; white-space:nowrap; transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.all-products-link svg { width:15px; height:15px; }
.all-products-link:hover { transform:translateY(-2px); border-color:var(--detail-green); background:var(--detail-green-soft); }
.related-products-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }
.related-product-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:10px; overflow:hidden; border:1px solid var(--detail-border); border-radius:18px; background:var(--detail-surface); box-shadow:0 9px 26px rgba(23,58,34,.035); opacity:0; transform:translateY(18px); animation:related-enter .55s cubic-bezier(.22,1,.36,1) forwards; animation-delay:var(--card-delay,0s); transition:transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s ease,border-color .3s ease; }
@keyframes related-enter { to { opacity:1; transform:translateY(0); } }
.related-product-card::before { content:""; position:absolute; z-index:2; top:0; inset-inline-start:0; width:0; height:4px; background:linear-gradient(90deg,var(--detail-green),var(--detail-gold)); transition:width .4s ease; }
.related-product-card:hover { transform:translateY(-8px); border-color:rgba(36,118,66,.35); box-shadow:0 24px 45px -18px rgba(29,91,49,.30); }
.related-product-card:hover::before { width:100%; }
.related-card-image { display:grid; place-items:center; width:100%; height:160px; overflow:hidden; border-radius:12px; background:#fff; }
.related-card-image img { width:100%; height:100%; padding:6px; object-fit:contain; transition:transform .65s cubic-bezier(.22,1,.36,1); }
.related-product-card:hover .related-card-image img { transform:scale(1.07); }
.related-card-content { display:flex; flex-direction:column; flex:1; padding:13px 5px 4px; }
.related-card-agency { margin-bottom:4px; color:var(--detail-muted); font-size:9px; font-weight:800; }
.related-card-content h3 { margin:0 0 7px; font-size:14px; font-weight:900; line-height:1.5; }
.related-card-content h3 a { color:var(--detail-text); text-decoration:none; transition:color .25s ease; }
.related-product-card:hover h3 a { color:var(--detail-green); }
.related-card-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:11px; }
.related-card-tags span { padding:3px 6px; border-radius:6px; color:var(--detail-green); background:var(--detail-green-soft); font-size:8px; font-weight:900; }
.related-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid var(--detail-border); }
.related-card-footer small { min-width:0; overflow:hidden; color:var(--detail-muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.related-card-footer a { display:inline-flex; align-items:center; gap:5px; color:var(--detail-green); font-size:9px; font-weight:900; text-decoration:none; white-space:nowrap; transition:gap .25s ease; }
.related-card-footer a svg { width:13px; height:13px; }
.related-card-footer a:hover { gap:9px; }

/* ---------- Footer and toast ---------- */
.catalog-toast { position:fixed; z-index:100; right:50%; bottom:26px; max-width:min(90vw,470px); padding:12px 18px; border:1px solid rgba(255,255,255,.12); border-radius:13px; color:#fff; background:#153e27; box-shadow:0 12px 35px rgba(0,0,0,.25); font-size:11px; font-weight:800; opacity:0; visibility:hidden; transform:translate(50%,15px); transition:opacity .25s ease,visibility .25s ease,transform .25s ease; }
.catalog-toast.show { opacity:1; visibility:visible; transform:translate(50%,0); }
.dark .product-summary-panel { background:linear-gradient(180deg,#14261a,#162c1c); }
.dark .product-gallery-stage { border-color:rgba(255,255,255,.1); }
/* ============================================================
   DARK MODE — خلفيات معرض المنتج والصور المصغرة
   ============================================================ */

.dark .product-gallery-stage,
.dark .gallery-thumb,
.dark .related-card-image {
    background: #0e2a18;
    border-color: rgba(255, 255, 255, .12);
}
/* .dark .product-gallery-stage,.dark .gallery-thumb,.dark .related-card-image { background:#f7faf7; } */
.dark .gallery-thumb { border-color:#314338; }
.dark .gallery-count { background:#102116; }
.dark .product-tab.active { background:#14261a; }
.dark .technical-placeholder { background:#102116; }
.dark .share-btn { background:#14261a; }
html[dir="ltr"] .detail-section-head,html[dir="ltr"] .gallery-below-row { direction:ltr; }
html[dir="ltr"] .video-status-wrap { align-items:flex-start; }

@media (max-width:1250px) {
    .product-profile-card { grid-template-columns:minmax(290px,.9fr) minmax(0,1.45fr); }
    .product-gallery-stage { height:390px; }
    .product-summary-panel { padding:25px 22px; }
    .product-gallery-panel { padding:25px 23px 20px; }
    .related-products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:960px) {
    .product-profile-card { grid-template-columns:minmax(0,1fr); }
    .product-summary-panel { grid-row:2; border-inline-end:0; border-top:1px solid var(--detail-border); }
    .product-gallery-panel { grid-row:1; }
    .product-summary-panel::before { top:0; width:70px; height:4px; inset-inline-start:0; }
    .detail-quick-facts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; border-bottom:1px solid var(--detail-border); }
    .quick-fact { align-items:flex-start; padding:14px 0; }
    .quick-fact + .quick-fact { border-top:0; }
    .product-summary-panel { padding:28px; }
    .product-contact-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .details-data-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .related-products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:720px) {
    .detail-hero { min-height:275px; padding:32px 23px 54px; background-position:57% center; }
    .detail-hero::before { background:linear-gradient(100deg,rgba(8,37,21,.92),rgba(14,57,31,.83) 70%,rgba(15,64,33,.48)); }
    .breadcrumbs { gap:7px; margin-bottom:22px; font-size:9px; }
    .detail-hero h1 { font-size:38px; }
    .detail-hero-content > p { font-size:11px; }
    .detail-hero-index { display:none; }
    .product-profile-section,.product-information-section,.related-products-section { width:calc(100% - 28px); }
    .product-profile-section { padding:30px 0 40px; }
    .detail-section-head { align-items:flex-start; flex-direction:column; gap:8px; }
    .product-profile-card { border-radius:20px; }
    .product-gallery-panel { padding:18px 15px 17px; }
    .gallery-heading h3 { font-size:16px; }
    .product-gallery-stage { height:330px; border-radius:15px; }
    .product-gallery-stage > img { padding:10px; }
    .gallery-arrow { width:34px; height:34px; border-radius:11px; }
    .gallery-below-row { align-items:flex-start; flex-direction:column; }
    .video-status-wrap { width:100%; flex-direction:row; align-items:center; justify-content:space-between; }
    .gallery-thumb { width:58px; height:55px; }
    .gallery-source-note { font-size:8px; }
    .product-summary-panel { padding:23px 18px 20px; }
    .product-summary-panel h2 { font-size:28px; }
    .detail-short-description { font-size:10px; }
    .detail-quick-facts { grid-template-columns:1fr; gap:0; }
    .quick-fact { align-items:center; padding:10px 0; }
    .quick-fact + .quick-fact { border-top:1px dashed var(--detail-border); }
    .product-contact-actions { grid-template-columns:1fr; }
    .primary-contact-btn,.download-spec-btn { min-height:45px; font-size:10px; }
    .information-section-header,.related-heading { align-items:flex-start; gap:13px; }
    .information-section-header h2,.related-heading h2 { font-size:27px; }
    .info-header-emblem { width:52px; height:52px; border-radius:17px; }
    .info-header-emblem svg { width:35px; height:35px; }
    .product-information-section { padding:10px 0 45px; }
    .product-tabs-card { border-radius:17px; }
    .product-tabs { gap:3px; padding:7px 7px 0; }
    .product-tab { flex:1; min-width:0; padding:12px 8px; gap:6px; font-size:10px; }
    .product-tab svg { width:16px; height:16px; }
    .tab-panel { padding:20px 15px; }
    .overview-intro h3,.technical-intro h3 { font-size:14px; }
    .overview-intro p,.technical-intro p { font-size:10px; }
    .details-data-grid { gap:8px; }
    .data-cell { padding:11px; border-radius:10px; }
    .data-cell span { font-size:9px; }
    .data-cell strong { font-size:10px; }
    .disclaimer-box { padding:12px; }
    .disclaimer-box p { font-size:9px; }
    .technical-placeholder { grid-template-columns:auto minmax(0,1fr); gap:13px; padding:15px; }
    .technical-document-icon { width:54px; height:60px; }
    .technical-document-icon svg { width:34px; height:34px; }
    .technical-placeholder h4 { font-size:13px; }
    .technical-placeholder p { font-size:9px; }
    .technical-download { grid-column:1 / -1; width:100%; }
    .related-products-section { padding-bottom:55px; }
    .related-heading { flex-direction:column; }
    .all-products-link { align-self:flex-start; }
    /* المنتجات ذات الصلة: عمود واحد بعرض مناسب للموبايل */
    .related-products-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        width: 100%;
    }

    .related-product-card {
        width: 100%;
        min-width: 0;
        padding: 12px;
        border-radius: 16px;
    }

    /* ارتفاع متجاوب للصورة حتى لا تبدو البطاقة قصيرة */
    .related-card-image {
        width: 100%;
        height: clamp(210px, 55vw, 300px);
        border-radius: 12px;
    }

    .related-card-image img {
        width: 100%;
        height: 100%;
        padding: 8px;
        object-fit: contain;
    }

    .related-card-content { padding: 14px 4px 4px; }
    .related-card-content h3 { font-size: 14px; line-height: 1.7; }
    .related-card-agency { font-size: 10px; }
    .related-card-tags span { font-size: 9px; }
    .related-card-footer { flex-wrap: wrap; gap: 8px; }
    .related-card-footer small { font-size: 10px; }
    .related-card-footer a { font-size: 10px; }
}
@media (max-width:430px) {
    .detail-hero { min-height:260px; padding-inline:18px; }
    .product-profile-section,.product-information-section,.related-products-section { width:calc(100% - 20px); }
    .product-gallery-stage { height:280px; }
    .gallery-overlay-badge { top:9px; inset-inline-start:9px; padding:5px 8px; font-size:8px; }
    .gallery-arrow { width:31px; height:31px; }
    .gallery-thumb { width:51px; height:49px; }
    .product-summary-topline { margin-bottom:15px; }
    .product-summary-panel h2 { font-size:25px; }
    .share-btn { width:36px; height:36px; }
    .information-section-header h2,.related-heading h2 { font-size:24px; }
    .info-header-emblem { display:none; }
    .product-tab { font-size:9px; }
    .product-tab svg { display:none; }
    .details-data-grid { grid-template-columns:1fr 1fr; }
    /* الهواتف الصغيرة: الاحتفاظ بعمود واحد وكارد مريح للقراءة */
    .related-products-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .related-card-image { height: clamp(190px, 60vw, 250px); }
    .related-product-card { padding: 10px; border-radius: 14px; }
    .related-card-content { padding: 12px 3px 4px; }
    .related-card-content h3 { font-size: 13px; line-height: 1.7; }
    .related-card-tags span { font-size: 8px; }
    .related-card-footer { gap: 7px; }
    .related-card-footer small { font-size: 9px; }
    .related-card-footer a { font-size: 9px; }
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}



/* ==========================================
   EcoFarm — Product Dynamic Text Typography
   ========================================== */

/* اسم الوكالة */
.product-detail-page #detailAgency {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: normal;
}

/* اسم المنتج */
.product-detail-page #detailName {
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.5;
    letter-spacing: normal;
}

/* الوصف القصير */
.product-detail-page #detailDescription {
    font-size: 17px;
    line-height: 2;
    letter-spacing: normal;
}

/* قسم المنتج ومجال الاستخدام */
.product-detail-page #detailActive,
.product-detail-page #detailTarget,
.product-detail-page #detailType {
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: normal;
}

/* محتوى التبويبات المجلوب من قاعدة البيانات */
.product-detail-page #overviewDescription,
.product-detail-page #technicalComposition,
.product-detail-page #productBenefits,
.product-detail-page #productIndications,
.product-detail-page #productWarnings,
.product-detail-page #productDosage {
    font-size: 18px;
    line-height: 2.1;
    letter-spacing: normal;
    white-space: pre-line;
    overflow-wrap: anywhere;
    font-family: inherit;
    font-weight: 500;
}

/* الهواتف */
@media (max-width: 640px) {
    .product-detail-page #detailName {
        font-size: 27px;
    }

    .product-detail-page #detailDescription {
        font-size: 16px;
    }

    .product-detail-page #overviewDescription,
    .product-detail-page #technicalComposition,
    .product-detail-page #productBenefits,
    .product-detail-page #productIndications,
    .product-detail-page #productWarnings,
    .product-detail-page #productDosage {
        font-size: 16px;
        line-height: 2;
    }
}


/* ==========================================
   Product Short Description — Max 3 Lines
   ========================================== */

/* Short description — maximum two lines */
#detailDescription {
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
    letter-spacing: normal;

    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;

    max-height: 3.6em;
    overflow: hidden;
    white-space: normal !important;
    overflow-wrap: break-word;
}

/* Full description inside product details tab */
#overviewDescription {
    font-size: 18px;
    line-height: 2;
    white-space: pre-line;
    overflow-wrap: break-word;
    letter-spacing: normal;
}

.product-description-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #22a45a;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.product-description-more:hover {
    text-decoration: underline;
}

#productDetailsSection {
    scroll-margin-top: 100px;
}
.product-detail-page .share-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.product-detail-page .share-actions .share-btn {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: background .2s ease, transform .2s ease,
                border-color .2s ease;
}

.product-detail-page .share-actions .share-btn svg {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: currentColor;
}

.product-detail-page .share-actions .download-share svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-detail-page .share-actions .share-btn:hover {
    transform: translateY(-2px);
    border-color: #55b879;
    background: rgba(85,184,121,.12);
}

.product-detail-page .share-actions .share-btn:focus-visible {
    outline: 2px solid #55b879;
    outline-offset: 3px;
}
/* زر عرض المزيد من المنتجات */
.product-detail-page #viewAllRelatedProducts {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-width: 0;
    padding: 12px 28px;
    margin-inline: auto;
    text-decoration: none;
    white-space: nowrap;
}

.product-detail-page .detail-hero {
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.catalog-page .product-card-image img {
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
}

/* ==========================================
   EcoFarm — Full Product Image Display
   ========================================== */

/* غلاف الصورة الرئيسية */
.product-detail-page #galleryStage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 440px;
    padding: 18px;

    overflow: hidden;
    border-radius: 19px;
    box-sizing: border-box;
    background: #fff;
}

/* عرض الصورة كاملة دون قص */
.product-detail-page #galleryStage #mainProductImage {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 100% !important;

    min-width: 0;
    padding: 0 !important;
    margin: auto;

    object-fit: contain !important;
    object-position: center !important;

    transform: none !important;
}

/* احترام حالة الإخفاء */
.product-detail-page #galleryStage #mainProductImage[hidden] {
    display: none !important;
}

/* صور المعرض المصغرة */
.product-detail-page .gallery-thumb img {
    width: 100%;
    height: 100%;
    padding: 3px;
    object-fit: contain;
    object-position: center;
    transform: none;
}

/* التابلت */
@media (max-width: 1250px) {
    .product-detail-page #galleryStage {
        height: 390px;
    }
}

/* الموبايل */
@media (max-width: 720px) {
    .product-detail-page #galleryStage {
        height: 330px;
        padding: 12px;
    }
}

/* الهواتف الصغيرة */
@media (max-width: 430px) {
    .product-detail-page #galleryStage {
        height: 280px;
        padding: 10px;
    }
}
/* ==========================================
   Product Gallery — Light / Dark Mode
   ========================================== */

/* الوضع الفاتح */
.product-detail-page #galleryStage,
.product-detail-page .gallery-thumb {
    background-color: #ffffff;
    border-color: rgba(26, 71, 39, 0.10);
}

/* الوضع الداكن */
.dark .product-detail-page #galleryStage,
.dark .product-detail-page .gallery-thumb {
    background-color: #0e2a18;
    border-color: rgba(255, 255, 255, 0.12);
}