/* MAINSOURCE AGRO FZC LLC shared product-page styles
   Load after css/style.css from the landing page. */

.product-page-main {
    color: var(--color-text);
    background: var(--color-cream);
    overflow: hidden;
}

.product-scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1200;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), #f2d56f);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

.product-page-main img {
    display: block;
    width: 100%;
}

.product-page-main section {
    position: relative;
}

.product-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1;
    text-transform: uppercase;
}

.product-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
}

.product-section-heading {
    max-width: 760px;
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(38px, 3.5vw, 60px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.03em;
}

.product-section-heading em {
    color: var(--color-accent);
    font-weight: 500;
}

.product-section-intro {
    max-width: 700px;
    margin: 20px 0 0;
    color: #46514e;
    font-size: 17px;
    line-height: 1.7;
}

/* Hero */
.product-hero {
    min-height: 780px;
    padding: calc(var(--navbar-height) + 48px) 0 90px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 88% 18%, rgba(189,90,55,.09), transparent 29%),
        linear-gradient(180deg, #f8f4eb 0%, var(--color-cream) 100%);
}

.product-hero::after {
    content: "";
    position: absolute;
    right: -200px;
    bottom: -300px;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(13,40,34,.05);
    border-radius: 50%;
    box-shadow: 0 0 0 80px rgba(13,40,34,.018), 0 0 0 160px rgba(13,40,34,.012);
    pointer-events: none;
}

.product-breadcrumbs {
    margin-bottom: 42px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #65706d;
    font-size: 13px;
}

.product-breadcrumbs a { transition: color var(--transition); }
.product-breadcrumbs a:hover { color: var(--color-accent); }
.product-breadcrumbs span[aria-current] { color: var(--color-primary); font-weight: 700; }

.product-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(480px, 1.06fr);
    align-items: center;
    gap: clamp(55px, 7vw, 125px);
}

.product-hero-title {
    max-width: 780px;
    margin: 0 0 25px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(62px, 6vw, 104px);
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.05em;
}

.product-hero-lead {
    max-width: 700px;
    margin: 0 0 32px;
    color: #3e4a47;
    font-size: clamp(18px, 1.45vw, 22px);
    line-height: 1.65;
}

.product-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.product-action {
    min-height: 60px;
    padding: 15px 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: var(--button-radius);
    font-size: 15px;
    font-weight: 700;
    transition: transform var(--transition), background var(--transition), color var(--transition), gap var(--transition);
}

.product-action-primary { color: #fff; background: var(--color-accent); }
.product-action-primary:hover { gap: 18px; background: var(--color-accent-hover); transform: translateY(-3px); }
.product-action-secondary { color: var(--color-primary); border-color: rgba(13,40,34,.33); }
.product-action-secondary:hover { color: #fff; background: var(--color-primary); transform: translateY(-3px); }

.product-hero-media {
    position: relative;
    min-height: 570px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 28px 65px rgba(13,40,34,.14);
}

.product-hero-media img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    animation: productHeroDrift 16s ease-in-out infinite alternate;
}

.product-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(13,40,34,.5));
}

.product-origin-card {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    min-width: 190px;
    padding: 17px 19px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 11px;
    color: #fff;
    background: rgba(13,40,34,.74);
    backdrop-filter: blur(12px);
}

.product-origin-card small,
.product-origin-card strong { display: block; }
.product-origin-card small { margin-bottom: 5px; color: rgba(255,255,255,.68); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.product-origin-card strong { font-family: var(--font-heading); font-size: 22px; font-weight: 500; }

@keyframes productHeroDrift {
    from { transform: scale(1.02); }
    to { transform: scale(1.09) translate3d(-1%, -1%, 0); }
}

/* Overview */
.product-overview { padding: clamp(90px, 10vw, 155px) 0; }
.product-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(400px, .75fr);
    gap: clamp(55px, 8vw, 135px);
    align-items: start;
}
.product-overview-copy p { margin: 25px 0 0; color: #44504d; font-size: 18px; line-height: 1.8; }

.product-facts-card {
    padding: 34px;
    border: 1px solid rgba(13,40,34,.09);
    border-radius: 15px;
    background: rgba(255,255,255,.35);
    box-shadow: 0 20px 45px rgba(13,40,34,.06);
}
.product-facts-card h3 { margin: 0 0 22px; color: var(--color-primary); font-family: var(--font-heading); font-size: 28px; font-weight: 500; }
.product-fact { padding: 17px 0; display: grid; grid-template-columns: .75fr 1.25fr; gap: 18px; border-top: 1px solid rgba(13,40,34,.09); }
.product-fact span { color: #6a7471; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.product-fact strong { color: var(--color-primary); font-size: 15px; line-height: 1.45; }

/* Attribute cards */
.product-attributes { padding: 0 0 clamp(90px, 10vw, 150px); }
.product-attribute-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.product-attribute {
    min-height: 210px;
    padding: 28px;
    border: 1px solid rgba(13,40,34,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.28);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.product-attribute:hover { transform: translateY(-7px); border-color: rgba(189,90,55,.28); box-shadow: 0 22px 42px rgba(13,40,34,.08); }
.product-attribute-number { display: block; margin-bottom: 38px; color: var(--color-accent); font-family: var(--font-heading); font-size: 21px; }
.product-attribute h3 { margin: 0 0 10px; color: var(--color-primary); font-family: var(--font-heading); font-size: 25px; font-weight: 500; }
.product-attribute p { margin: 0; color: #53605d; font-size: 14px; line-height: 1.6; }

/* Specifications */
.product-specifications { padding: clamp(90px, 10vw, 150px) 0; background: #0d2822; color: #fff; }
.product-specifications .product-eyebrow { color: #f2d56f; }
.product-specifications .product-section-heading { color: #fff; }
.product-specifications .product-section-intro { color: rgba(255,255,255,.68); }
.product-spec-grid { margin-top: 55px; display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(45px,7vw,110px); align-items: start; }
.product-spec-note { padding: 28px; border-left: 3px solid #f2d56f; color: rgba(255,255,255,.72); background: rgba(255,255,255,.04); font-size: 14px; line-height: 1.7; }
.product-spec-table { border-top: 1px solid rgba(255,255,255,.18); }
.product-spec-row { padding: 20px 0; display: grid; grid-template-columns: minmax(130px,.55fr) 1.45fr; gap: 25px; border-bottom: 1px solid rgba(255,255,255,.13); }
.product-spec-row dt { color: #f2d56f; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.product-spec-row dd { margin: 0; color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.55; }

/* Applications */
.product-applications { padding: clamp(90px, 10vw, 155px) 0; }
.product-application-layout { display: grid; grid-template-columns: minmax(420px,.9fr) 1.1fr; gap: clamp(55px,8vw,125px); align-items: center; }
.product-detail-image { position: relative; min-height: 580px; border-radius: 16px; overflow: hidden; box-shadow: 0 25px 55px rgba(13,40,34,.11); }
.product-detail-image img { position: absolute; inset: 0; height: 100%; object-fit: cover; transition: transform .8s ease; }
.product-detail-image:hover img { transform: scale(1.05); }
.product-application-list { margin-top: 38px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.product-application-item { min-height: 120px; padding: 22px; border: 1px solid rgba(13,40,34,.09); border-radius: 11px; background: rgba(255,255,255,.3); }
.product-application-item span { display: block; margin-bottom: 10px; color: var(--color-accent); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.product-application-item strong { color: var(--color-primary); font-family: var(--font-heading); font-size: 21px; font-weight: 500; line-height: 1.25; }

/* Process */
.product-process { padding: clamp(90px,10vw,150px) 0; background: rgba(255,255,255,.25); }
.product-process-grid { position: relative; margin-top: 58px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; }
.product-process-grid::before { content:""; position:absolute; top:24px; left:7%; right:7%; height:1px; background: rgba(13,40,34,.15); }
.product-process-line { position:absolute; top:23px; left:7%; right:7%; height:2px; background: linear-gradient(90deg,var(--color-accent),#f2d56f); transform:scaleX(0); transform-origin:left; transition:transform 1.6s ease; }
.product-process.is-visible .product-process-line { transform:scaleX(1); }
.product-process-step { position:relative; z-index:1; }
.product-process-dot { width:49px; height:49px; margin-bottom:25px; display:flex; align-items:center; justify-content:center; border:6px solid var(--color-cream); border-radius:50%; color:#fff; background:var(--color-accent); font-size:13px; font-weight:700; box-shadow:0 0 0 1px rgba(13,40,34,.12); }
.product-process-step h3 { margin:0 0 10px; color:var(--color-primary); font-family:var(--font-heading); font-size:24px; font-weight:500; }
.product-process-step p { margin:0; color:#53605d; font-size:14px; line-height:1.65; }

/* Export and packaging */
.product-export { padding: clamp(90px,10vw,150px) 0; }
.product-export-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,.78fr); gap:clamp(55px,8vw,125px); align-items:center; }
.product-check-list { margin:34px 0 0; padding:0; list-style:none; display:grid; gap:16px; }
.product-check-list li { position:relative; padding-left:35px; color:#43504c; font-size:16px; line-height:1.6; }
.product-check-list li::before { content:"✓"; position:absolute; top:0; left:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:var(--color-accent); font-size:12px; font-weight:700; }
.product-export-panel { padding:38px; border-radius:16px; color:#fff; background:var(--color-primary); box-shadow:0 25px 55px rgba(13,40,34,.14); }
.product-export-panel h3 { margin:0 0 24px; color:#fff; font-family:var(--font-heading); font-size:30px; font-weight:500; }
.product-export-panel dl { margin:0; }
.product-export-panel div { padding:17px 0; display:grid; grid-template-columns:.7fr 1.3fr; gap:18px; border-top:1px solid rgba(255,255,255,.13); }
.product-export-panel dt { color:#f2d56f; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.product-export-panel dd { margin:0; color:rgba(255,255,255,.8); font-size:14px; line-height:1.5; }

/* Product switcher */
.product-switcher { padding: 75px 0; border-top:1px solid rgba(13,40,34,.09); }
.product-switcher-title { margin:0 0 25px; color:var(--color-primary); font-family:var(--font-heading); font-size:30px; font-weight:500; }
.product-switcher-links { display:flex; flex-wrap:wrap; gap:10px; }
.product-switcher-links a { padding:11px 16px; border:1px solid rgba(13,40,34,.15); border-radius:50px; color:var(--color-primary); font-size:13px; font-weight:700; transition:all var(--transition); }
.product-switcher-links a:hover,
.product-switcher-links a[aria-current="page"] { color:#fff; border-color:var(--color-accent); background:var(--color-accent); }

/* FAQs */
.product-faq { padding: clamp(90px,10vw,145px) 0; background:rgba(255,255,255,.24); }
.product-faq-layout { display:grid; grid-template-columns:minmax(300px,.72fr) 1.28fr; gap:clamp(55px,8vw,125px); align-items:start; }
.product-faq-list { border-top:1px solid rgba(13,40,34,.13); }
.product-faq-item { border-bottom:1px solid rgba(13,40,34,.13); }
.product-faq-item summary { position:relative; padding:23px 48px 23px 0; color:var(--color-primary); font-family:var(--font-heading); font-size:21px; line-height:1.35; cursor:pointer; list-style:none; }
.product-faq-item summary::-webkit-details-marker { display:none; }
.product-faq-item summary::after { content:"+"; position:absolute; top:22px; right:4px; color:var(--color-accent); font-family:Arial,sans-serif; font-size:25px; font-weight:400; transition:transform var(--transition); }
.product-faq-item[open] summary::after { transform:rotate(45deg); }
.product-faq-answer { padding:0 45px 24px 0; color:#53605d; font-size:15px; line-height:1.7; }

/* CTA */
.product-cta { padding: clamp(85px,9vw,135px) 0; color:#fff; background:var(--color-primary); }
.product-cta-inner { display:grid; grid-template-columns:1fr auto; align-items:center; gap:45px; }
.product-cta h2 { max-width:850px; margin:0; color:#fff; font-family:var(--font-heading); font-size:clamp(42px,4vw,66px); font-weight:500; line-height:1.08; letter-spacing:-.03em; }
.product-cta h2 em { color:#f2d56f; font-weight:500; }
.product-cta p { max-width:750px; margin:20px 0 0; color:rgba(255,255,255,.7); font-size:17px; line-height:1.65; }
.product-cta .product-action-primary { white-space:nowrap; }

/* Reveal animation */
[data-reveal].reveal-ready { opacity:0; transform:translateY(38px); }
[data-reveal].is-visible { opacity:1; transform:none; transition:opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1); }
[data-reveal-delay="1"].is-visible { transition-delay:.12s; }
[data-reveal-delay="2"].is-visible { transition-delay:.24s; }
[data-reveal-delay="3"].is-visible { transition-delay:.36s; }

/* Tablet */
@media (max-width: 1050px) {
    .product-hero { padding-top: 135px; }
    .product-hero-grid,
    .product-overview-grid,
    .product-application-layout,
    .product-export-grid { grid-template-columns:1fr; }
    .product-hero-media { min-height:580px; }
    .product-overview-copy { max-width:850px; }
    .product-attribute-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .product-spec-grid { grid-template-columns:1fr; }
    .product-detail-image { min-height:560px; }
    .product-process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:45px 28px; }
    .product-process-grid::before,
    .product-process-line { display:none; }
    .product-faq-layout { grid-template-columns:1fr; }
    .product-cta-inner { grid-template-columns:1fr; }
}

/* Mobile */
@media (max-width: 650px) {
    .product-hero { min-height:0; padding:115px 0 70px; }
    .product-breadcrumbs { margin-bottom:30px; }
    .product-hero-grid { gap:42px; }
    .product-hero-title { font-size:clamp(52px,16vw,70px); }
    .product-hero-lead { font-size:17px; }
    .product-hero-actions { flex-direction:column; align-items:stretch; }
    .product-action { width:100%; }
    .product-hero-media { min-height:410px; border-radius:14px; }
    .product-origin-card { right:14px; bottom:14px; min-width:165px; }
    .product-section-heading { font-size:clamp(36px,11vw,48px); }
    .product-overview,
    .product-specifications,
    .product-applications,
    .product-process,
    .product-export,
    .product-faq { padding:75px 0; }
    .product-facts-card { padding:25px; }
    .product-fact { grid-template-columns:1fr; gap:7px; }
    .product-attribute-grid,
    .product-application-list,
    .product-process-grid { grid-template-columns:1fr; }
    .product-attribute { min-height:180px; }
    .product-spec-row { grid-template-columns:1fr; gap:7px; }
    .product-detail-image { min-height:380px; }
    .product-export-panel { padding:27px; }
    .product-export-panel div { grid-template-columns:1fr; gap:7px; }
    .product-cta-inner { gap:30px; }
}

@media (prefers-reduced-motion: reduce) {
    .product-hero-media img { animation:none; }
    [data-reveal].reveal-ready { opacity:1; transform:none; }
    .product-process-line { transform:scaleX(1); }
}