/* ============================================================
   Bari Enterprise — product pages
   Linked after styles.css, which supplies the tokens + fonts.
   ============================================================ */

.pp{max-width:1180px;margin:0 auto;padding:26px var(--gut) 0}

/* --- top bar --- */
.pp-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:16px;border-bottom:1px solid var(--line-soft)}
.pp-top .logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.pp-top .logo img{width:38px;height:38px;object-fit:contain}
.pp-top .logo .name{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1;letter-spacing:.005em}
.pp-top .logo .name small{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--slate);margin-top:5px}
.pp-top nav{display:flex;gap:22px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.pp-top nav a:hover{color:var(--ink)}
@media (max-width:760px){.pp-top nav{display:none}}

/* --- breadcrumb --- */
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-block:22px 6px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.crumb a{color:var(--slate)}
.crumb a:hover{color:var(--ink)}
.crumb span.sep{opacity:.5}
.crumb .here{color:var(--ink)}

/* --- hero of the page --- */
.pp-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(18px,3vw,38px) clamp(26px,4vw,54px)}
@media (max-width:900px){.pp-head{grid-template-columns:1fr;gap:26px}}
.pp-media{position:relative;border-radius:var(--r);overflow:hidden;background:var(--sand);aspect-ratio:1}
.pp-media img{width:100%;height:100%;object-fit:cover;display:block}
.pp-media .tag{position:absolute;left:14px;top:14px;background:rgba(247,244,236,.94);
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  padding:7px 11px;border-radius:2px}
.pp-copy .eyebrow{margin:0 0 14px}
.pp-copy h1{font-size:clamp(30px,4.6vw,54px);line-height:1.03;letter-spacing:-.02em;margin:0 0 16px}
.pp-copy h1 em{font-style:normal;font-weight:600;color:var(--moss)}
.pp-copy p{color:var(--slate);font-size:15px;line-height:1.65;max-width:52ch;margin:0 0 22px}
.pp-actions{display:flex;flex-wrap:wrap;gap:10px}

/* --- specs --- */
.specs{margin-block:clamp(10px,2vw,22px) clamp(34px,5vw,58px)}
.specs h2{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);margin:0 0 16px}
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
@media (max-width:900px){.spec-grid{grid-template-columns:repeat(2,1fr)}}
.spec-cell{background:var(--bone);padding:16px 16px 15px}
.spec-cell .k{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--slate);margin-bottom:7px}
.spec-cell .v{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.15}

/* --- related --- */
.rel{margin-bottom:clamp(40px,6vw,70px)}
.rel h2{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);margin:0 0 16px}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.rel-grid{grid-template-columns:repeat(2,1fr)}}
.rel-card{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;background:var(--sand);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.rel-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -26px rgba(10,22,19,.8)}
.rel-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.rel-card span{display:block;padding:10px 11px 12px;font-size:12px;line-height:1.35;font-weight:500}

/* --- enquiry strip --- */
.pp-cta{background:var(--forest);color:var(--bone);border-radius:var(--r);padding:clamp(22px,3.4vw,40px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(40px,6vw,70px)}
.pp-cta h2{font-family:var(--serif);font-size:clamp(22px,3vw,34px);margin:0 0 8px;line-height:1.1}
.pp-cta h2 em{font-style:normal;color:var(--lime)}
.pp-cta p{margin:0;color:var(--mist);font-size:13.5px;max-width:46ch;line-height:1.6}
.pp-cta .btn.lime{--bg:var(--lime);--fg:var(--ink)}

/* --- footer --- */
.pp-foot{border-top:1px solid var(--line-soft);padding-block:26px 40px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between}
.pp-foot a:hover{color:var(--ink)}

/* --- long copy block --- */
.pp-text{max-width:74ch;margin-bottom:clamp(34px,5vw,56px)}
.pp-text h2{font-family:var(--serif);font-size:clamp(21px,2.5vw,28px);margin:0 0 12px}
.pp-text h2+p{margin-top:0}
.pp-text p{color:var(--slate);font-size:14.5px;line-height:1.72;margin:0 0 14px}
.pp-text a{color:var(--ink);border-bottom:1px solid var(--line)}
.pp-steps{margin:0 0 16px;padding:0;list-style:none;counter-reset:s}
.pp-steps li{counter-increment:s;position:relative;padding-left:34px;margin-bottom:11px;color:var(--slate);font-size:14px;line-height:1.6}
.pp-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--moss)}
.pp-steps b{color:var(--ink);font-weight:500}
.pp-note{font-size:13px !important;color:var(--slate);border-left:2px solid var(--lime-2);padding-left:14px}
.pp-back{margin-top:18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase}
.pp-back a{color:var(--moss)}
.pp-back a:hover{color:var(--ink)}

/* --- hub pages --- */
.hub-head{padding-block:clamp(16px,3vw,30px) clamp(24px,4vw,44px);max-width:70ch}
.hub-head h1{font-size:clamp(32px,5vw,60px);line-height:1.02;letter-spacing:-.022em;margin:0 0 16px}
.hub-head h1 em{font-style:normal;font-weight:600;color:var(--moss)}
.hub-head p{color:var(--slate);font-size:15.5px;line-height:1.7;margin:0 0 22px}
.rel-grid--hub{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.rel-grid--hub{grid-template-columns:repeat(2,1fr)}}
.hub-more{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:6px 0 clamp(34px,5vw,54px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.hub-more a{border:1px solid var(--line);border-radius:2px;padding:8px 12px;color:var(--ink);transition:background .3s,color .3s}
.hub-more a:hover{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.hub-more--cross{margin-top:-18px}
.hub-more--cross a{border-color:var(--lime-2);background:rgba(201,230,160,.28)}
.hub-more--cross a:hover{background:var(--ink);border-color:var(--ink)}

/* Season Mix space glyph is tight at heading sizes */
.rel h2{word-spacing:.16em}
.hub-head h1{word-spacing:.04em}