/* ==========================================================================
   SEYE — Products page  (Lanhu artboard 1920 x 4584)
   Design reference 1920px · 1rem = 16px @ 1920
   ========================================================================== */

/* ---------- HERO (design y 95 .. 1030) ---------- */
.p-hero{position:relative;height:58.5rem;margin-top:var(--nav-h);overflow:hidden;background:#f2e9df}
.p-hero-bg{position:absolute;inset:0}
/* the 1920x987 banner is bottom-anchored inside the 936px hero */
.p-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.p-hero-copy{position:relative;padding:5.4375rem 6.25rem 0}   /* copy left edge = 100px */

.p-eyebrow{
  display:flex;align-items:center;gap:1.625rem;
  font-size:1.4375rem;line-height:1;letter-spacing:.17em;text-transform:uppercase;
  font-weight:500;color:var(--olive);
}
.p-eyebrow::after{content:"";width:5.8125rem;height:1px;background:currentColor;opacity:.6}

.p-hero-title{font-family:var(--serif);font-weight:600;margin-top:2.525rem;line-height:1.21}
.p-hero-title>span{display:block;font-size:4.65rem;letter-spacing:0;color:#223a38}
.p-hero-title em{font-style:italic;font-size:4.65rem;color:var(--sage)}

.p-hero-text{margin-top:1.175rem;font-size:1.525rem;line-height:2.40625rem;color:#2b3a33;width:41.5rem;max-width:41.5rem}

.p-stats{display:flex;margin-top:2.456rem;margin-left:-1.78125rem}
.p-stat{width:11.8333rem;text-align:center;position:relative}
.p-stat+.p-stat::before{content:"";position:absolute;left:0;top:1rem;bottom:1rem;width:1px;background:rgba(36,74,54,.16)}
.p-stat-ico{
  width:5.3125rem;height:5.3125rem;margin:0 auto;color:#b4a078;
  border:1px solid rgba(180,160,120,.9);border-radius:50%;
  display:grid;place-items:center;
}
.p-stat-ico svg{width:2.5rem;height:2.5rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.p-stat-num{font-family:var(--serif);font-size:1.945rem;font-weight:600;line-height:1;letter-spacing:.005em;color:#223a38;margin-top:.5875rem}
.p-stat-lab{font-size:.845rem;line-height:1.3;color:#4b5f50;margin-top:.794rem}

.p-hero-btn{margin-top:3.825rem;--h:4.8125rem;width:24.75rem;font-size:1.375rem}

/* ---------- CATEGORY GRID (design y 1031 .. 3343) ---------- */
.s-products{background:var(--cream);padding:9.625rem 0 4.25rem}
.p-grid{
  width:104.25rem;margin-inline:auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:3.09375rem;row-gap:5.32rem;
}
.p-card{display:block}
.p-card-img{width:100%;height:39.5625rem;border-radius:3.875rem;overflow:hidden;position:relative;background:#fefff9}
.p-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.15s cubic-bezier(.2,.8,.25,1)}
.p-card-img::after{content:"";position:absolute;inset:0;background:rgba(20,45,32,0);transition:background-color .5s ease}
.p-card:hover .p-card-img img{transform:scale(1.05)}
.p-card:hover .p-card-img::after{background:rgba(20,45,32,.1)}

.p-card-body{padding-left:1.25rem}
.p-card-eyebrow{
  margin-top:2.75rem;font-size:1.22rem;line-height:1;letter-spacing:.19em;
  text-transform:uppercase;font-weight:500;color:#536c5d;
}
.p-card-title{
  font-family:var(--serif);font-size:4.33rem;font-weight:600;line-height:1.02;
  letter-spacing:.004em;color:var(--green);margin-top:1.68rem;width:35.5rem;max-width:none;
  transition:color .3s ease;
}
.p-card:hover .p-card-title{color:#2f6144}
.p-card-text{margin-top:1.46rem;font-size:1.36rem;line-height:2.375rem;color:#3f5445;width:31.5625rem;min-height:7.125rem}
.p-card-link{
  margin-top:2.634rem;display:inline-block;position:relative;
  font-size:1.2rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green);
  padding-bottom:.375rem;
}
.p-card-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:rgba(36,74,54,.55);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.25,1)}
.p-card:hover .p-card-link::after{transform:scaleX(1.04)}

/* ==========================================================================
   Responsive  < 1024px
   ========================================================================== */
@media (max-width:1023.98px){
  html{font-size:16px}

  .p-hero{height:auto;min-height:30rem;padding-bottom:2.5rem;
    background:linear-gradient(180deg,rgba(242,233,223,.94),rgba(242,233,223,.82)),url('../img/products/banner.jpg') center bottom/cover no-repeat}
  .p-hero-bg{display:none}
  .p-hero-copy{padding:2.5rem 1.25rem 0}
  .p-eyebrow{font-size:.8125rem;gap:.875rem}
  .p-eyebrow::after{width:3rem}
  .p-hero-title{margin-top:1rem;line-height:1.14}
  .p-hero-title>span,.p-hero-title em{font-size:clamp(1.875rem,8.2vw,3rem)}
  .p-hero-text{margin-top:1rem;width:auto;max-width:none;font-size:1rem;line-height:1.7}
  .p-stats{margin:1.75rem 0 0;flex-wrap:wrap;gap:1.5rem 0}
  .p-stat{width:50%}
  .p-stat+.p-stat::before,.p-stat:nth-child(3)::before{display:none}
  .p-stat-ico{width:3.25rem;height:3.25rem}
  .p-stat-ico svg{width:1.6rem;height:1.6rem}
  .p-stat-num{font-size:1.375rem}
  .p-stat-lab{font-size:.8125rem;margin-top:.5rem}
  .p-hero-btn{margin-top:2rem;--h:3.25rem;width:auto;min-width:11.5rem;max-width:100%;padding:0 1.75rem;font-size:.9375rem}

  .s-products{padding:3rem 0}
  .p-grid{width:auto;margin:0;padding:0 1.25rem;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1.75rem;align-items:start}
  .p-card-img{height:auto;aspect-ratio:3/4;border-radius:1.25rem}
  .p-card-body{padding-left:0}
  .p-card-eyebrow{margin-top:1.25rem;font-size:.8125rem}
  .p-card-title{font-size:1.375rem;line-height:1.15;margin-top:.5rem;width:auto;max-width:100%}
  .p-card-text{margin-top:.5rem;font-size:.875rem;line-height:1.6;width:auto;min-height:0}
  .p-card-link{margin-top:.75rem;font-size:.8125rem}
}
@media (min-width:640px) and (max-width:1023.98px){
  .p-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1.25rem}
  .p-card-title{font-size:1.625rem}
  .p-card-img{aspect-ratio:3/4}
}
@media (max-width:639.98px){  html{font-size:14px} }