/* ==========================================================================
   YADEA — Product page (GT60)
   Built to follow the reference recording: full-bleed 16:9 feature
   panels with text placed over the image, tabbed detail blocks,
   a 2×2 storage grid and the specifications table.
   Text positions are percentages of the panel so they track the
   artwork at every desktop width; phones stack text under the image
   (see responsive.css).
   ========================================================================== */

/* ---------- Hero ---------- */
.p-hero { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #2a1d14; }
.p-hero__img { width: 100%; height: 100%; object-fit: cover; animation: pHeroIn 1.8s var(--ease-expo) both; }
@keyframes pHeroIn { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: none; } }

/* ---------- Full-bleed feature panels ---------- */
.p-feature {
  --x: 10.2%;
  --y: 30%;
  --w: 26%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #121212;
}
.p-feature__media { position: absolute; inset: 0; overflow: hidden; }
.p-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.p-feature__media [data-parallax] { --parallax-scale: 1.08; }
.p-feature__text {
  position: absolute; z-index: 2;
  left: var(--x); top: var(--y);
  width: var(--w);
  color: #2b2b2b;
}
.p-feature__text--light { color: #fff; }
.p-feature__title { color: inherit; font-size: clamp(1.125rem, 1.58vw, 2.25rem); font-weight: 500; line-height: 1.2; }
.p-feature__desc { margin-top: clamp(14px, 1.85vw, 40px); font-size: clamp(.6875rem, .79vw, 1.0625rem); font-weight: 500; line-height: 1.38; }
.p-feature__desc + .p-feature__desc { margin-top: clamp(10px, 1.1vw, 24px); }
.p-feature__text--light .p-feature__desc { text-shadow: 0 1px 12px rgba(0, 0, 0, .2); }

/* positions measured from the reference (share of panel width / height) */
.p-feature--tough      { --x: 70.8%; --y: 44%;  --w: 24%; background: #cfc3b6; }
.p-feature--tough .p-feature__desc { margin-top: clamp(14px, 1.9vw, 40px); }
.p-feature--tires      { --x: 10.2%; --y: 29%;  --w: 26%; background: #0c1417; }
.p-feature--headlight  { --x: 10.3%; --y: 33%;  --w: 27%; background: #1c1f22; }
.p-feature--battery    { --x: 63.7%; --y: 23%;  --w: 23.5%; background: #e7dcd6; }
.p-feature--motor      { --x: 10.8%; --y: 8%;   --w: 28%; background: #efe3dc; }
.p-feature--controller { --x: 62%;   --y: 20%;  --w: 26%; background: #d8b5a3; }
.p-feature--modes      { --x: 10.2%; --y: 34%;  --w: 26%; background: #3b5b33; }
.p-feature--smart      { --x: 10.2%; --y: 50%;  --w: 30%; background: #fff; }
.p-feature--smart .p-feature__text { transform: translateY(-50%); }
.p-feature--controller .p-feature__desc,
.p-feature--battery .p-feature__desc { color: #4a3d38; }
.p-feature--motor .p-feature__desc { color: #5a4a44; }

/* Counters */
.p-stats { display: grid; gap: clamp(18px, 3.3vw, 72px); margin-top: clamp(22px, 2.6vw, 56px); }
.p-stat__value {
  display: flex; align-items: baseline; gap: .22em;
  font-size: clamp(1.25rem, 1.75vw, 2.375rem);
  font-weight: 500; line-height: 1;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.p-stat__unit { font-size: .45em; font-weight: 500; }
.p-stat__value--range { gap: 0; }
.p-stat__label { margin-top: clamp(4px, .5vw, 10px); font-size: clamp(.625rem, .6vw, .8125rem); color: #7d726d; }

/* Smart features */
.p-smart + .p-smart { margin-top: clamp(14px, 1.5vw, 30px); }
.p-smart__title { font-size: clamp(1.125rem, 1.58vw, 2.25rem); font-weight: 500; color: #333; }
.p-smart__list { margin-top: clamp(8px, .8vw, 16px); font-size: clamp(.6875rem, .74vw, 1rem); line-height: 1.45; color: #444; }
.p-smart__list li::before { content: "· "; }

/* ---------- Tabbed detail blocks ---------- */
.p-tabs { padding-block: clamp(56px, 6.2vw, 120px) clamp(48px, 4.2vw, 84px); }
.p-tabs__media {
  position: relative;
  width: 68.6%;
  margin-inline: auto;
  aspect-ratio: 1298 / 698;
  overflow: hidden;
  background: #efe9e4;
}
.p-tabs--wide .p-tabs__media { width: 79.1%; aspect-ratio: 1127 / 706; }
.p-tabs--modes .p-tabs__media { aspect-ratio: 1500 / 697; }
.p-tabs__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s var(--ease), transform 1.2s var(--ease-expo);
}
.p-tabs__img.is-active { opacity: 1; transform: none; }

.p-tabs__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px;
  width: 59.6%;
  margin: clamp(24px, 2.35vw, 48px) auto 0;
}
.p-tabs--wide .p-tabs__list { width: 79.1%; }
.p-tabs__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-tab {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-start;
  align-self: start;
  padding-top: clamp(16px, 1.45vw, 30px);
  text-align: left;
  border-top: 1px solid #d9d9d9;
  color: #c4c4c4;
  transition: color var(--dur) var(--ease);
}
.p-tab::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -2px;
  height: 3px; background: #222;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s var(--ease-expo);
}
.p-tab:hover { color: #9a9a9a; }
.p-tab.is-active { color: var(--c-ink); }
.p-tab.is-active::before { transform: scaleX(1); }
.p-tab__title { display: block; font-size: clamp(1rem, 1.27vw, 1.625rem); font-weight: 500; line-height: 1.25; }
.p-tab__desc { display: grid; grid-template-rows: 1fr; margin-top: clamp(14px, 2.2vw, 56px); transition: grid-template-rows var(--dur) var(--ease); }
.p-tab__desc > span { overflow: hidden; font-size: clamp(.75rem, .79vw, 1rem); font-weight: 500; line-height: 1.35; }
.p-tabs--narrow .p-tab__desc { margin-top: clamp(14px, 2.2vw, 48px); }

/* ---------- Storage grid ---------- */
.p-storage { padding-block: clamp(40px, 4vw, 80px) clamp(72px, 8vw, 150px); }
.p-storage__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(1002px, 88%);
  margin-inline: auto;
}
.p-storage__img { aspect-ratio: 506 / 283; overflow: hidden; }
.p-storage__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-expo); }
.p-storage__img:hover img { transform: scale(1.05); }
.p-storage__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px 12% 24px 20%;
  background: var(--c-cream);
}
.p-storage__text--hook { padding-left: 10%; }
.p-storage__title { font-size: clamp(.9375rem, .9vw, 1.0625rem); font-weight: 600; color: #222; }
.p-storage__desc { margin-top: 10px; max-width: 290px; font-size: clamp(.75rem, .72vw, .875rem); line-height: 1.2; color: #444; }

/* ---------- Specifications ---------- */
.p-specs { padding-block: clamp(24px, 3vw, 60px) clamp(64px, 6.5vw, 120px); }
.p-specs__inner { width: min(83.6%, 1640px); margin-inline: auto; }
.p-specs__title { padding-left: clamp(0px, 1vw, 20px); font-size: clamp(1.375rem, 1.58vw, 2.125rem); font-weight: 500; }
.p-specs__viewer { display: flex; flex-direction: column; align-items: center; margin-top: clamp(20px, 1.6vw, 34px); }
.p-specs__stage { position: relative; width: min(540px, 72%); aspect-ratio: 2652 / 1661; }
.p-specs__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0; transform: translateX(28px);
  transition: opacity .6s var(--ease), transform .9s var(--ease-expo);
}
.p-specs__img.is-leaving { transform: translateX(-28px); }
.p-specs__img.is-active { opacity: 1; transform: none; }
.p-specs__colors { display: flex; gap: 20px; margin-top: clamp(20px, 2vw, 36px); }
.p-color {
  position: relative;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  transition: transform var(--dur-fast) var(--ease);
}
.p-color:hover { transform: scale(1.12); }
.p-color::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid transparent; transition: border-color var(--dur-fast) var(--ease); }
.p-color.is-active::after { border-color: #333; }
.p-color--grey { --sw: #a3a3a3; }
.p-color--white { --sw: #f0f0f0; }
.p-color--black { --sw: #3a3a3a; }

.spec-table {
  width: 100%;
  margin-top: clamp(40px, 3.6vw, 72px);
  border-collapse: separate; border-spacing: 0;
  font-size: clamp(.8125rem, .74vw, .9375rem);
  color: #333;
}
.spec-table th, .spec-table td { text-align: left; font-weight: 400; }
.spec-table thead td { width: 28.9%; }
.spec-table__model { padding: 0 0 clamp(18px, 1.6vw, 30px); font-size: clamp(.9375rem, .9vw, 1.125rem); font-weight: 500 !important; color: var(--c-ink); }
.spec-table__group th {
  padding: clamp(14px, 1vw, 20px) clamp(20px, 2.9vw, 56px);
  background: var(--c-sand);
  font-size: clamp(.8125rem, .8vw, 1rem);
  font-weight: 600 !important;
  text-transform: uppercase;
  color: #222;
}
.spec-table tbody th[scope="row"] { width: 28.9%; padding: 12px 0 12px clamp(20px, 2.9vw, 56px); }
.spec-table tbody td { padding: 12px 0; }
.spec-table__group + tr > * { padding-top: clamp(18px, 1.4vw, 28px) !important; }
.spec-table tbody tr:last-child > * { padding-bottom: clamp(28px, 2.4vw, 48px); }
.spec-table tbody tr:not(.spec-table__group) { transition: background var(--dur-fast) var(--ease); }
.spec-table tbody tr:not(.spec-table__group):hover { background: #faf8f6; }

.p-notes { margin-top: clamp(40px, 4vw, 80px); font-size: 11.5px; line-height: 1.5; color: #333; }