/* ================= SUB-MENU (breadcrumb) ================= */
.p-submenu { width: 1440px; background: #1965e1; padding: 15px 15px 15px 30px; }
.p-submenu__inner { display: flex; align-items: center; gap: 4px; font-family: 'Catamaran', Arial, sans-serif; font-weight: 700; font-size: 12px; color: #ffffff; }
.p-submenu__inner a { color: #ffffff; }
.p-submenu__inner a:hover { text-decoration: underline; }

/* ================= P-HERO ================= */
/* ===========================================================
   Project Detail — HERO (slug: p-hero)
   Figma node 1446:6755 · "Section 1 Hero" · 1440 x 383
   Fonts (Catamaran + Arial) are loaded globally — do NOT @import.
   Parent centers the 1440px section.
   =========================================================== */

.p-hero {
  box-sizing: border-box;
  position: relative;
  width: 1440px;
  height: 383px;
  overflow: hidden;                 /* clips decoratives bleeding past edges */
  background: #ffffff;
  font-family: 'Catamaran', Arial, sans-serif;
}

.p-hero *,
.p-hero *::before,
.p-hero *::after {
  box-sizing: border-box;
}

/* ---------- Grey dot grid (Points frame) ----------
   Frame: x=-209 y=-80.66 · 800.94 x 711.55
   Dots: #e2e2e2, 10.29px, 24px pitch (rounded → reads as a dot) */
.p-hero__dots {
  position: absolute;
  left: -209px;
  top: -80.664px;
  width: 800.942px;
  height: 711.55px;
  pointer-events: none;
  background-image: radial-gradient(
    circle at 5.145px 5.145px,
    #e2e2e2 0,
    #e2e2e2 5.145px,
    transparent 5.75px
  );
  background-size: 24px 24px;
  background-position: 0 0;
}

/* ---------- Photo ----------
   Node 1451:9323 · x=592 y=1.14 · 894 x 379 */
.p-hero__photo {
  position: absolute;
  left: 592px;
  top: 1.137px;
  width: 894px;
  height: 379px;
  overflow: hidden;
  pointer-events: none;
}

.p-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- White curved shape (Vector 170) ----------
   Node 1446:9304 · x=573.23 y=-49.31 · 264.77 x 429.95
   Carves the concave left edge of the photo. */
.p-hero__curve {
  position: absolute;
  left: 573.234px;
  top: -49.311px;
  width: 264.766px;
  height: 429.947px;
  pointer-events: none;
}

.p-hero__curve img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Blue swoosh line ----------
   Container node 1451:9324 · x=215.16 y=-178.48 · 753.09 x 656.43
   Inner image scaled per Figma: w167.69% h148.03% left -0.06% top -32.55% */
.p-hero__blueline {
  position: absolute;
  left: 215.161px;
  top: -178.479px;
  width: 753.093px;
  height: 656.427px;
  overflow: hidden;
  pointer-events: none;
}

.p-hero__blueline img {
  position: absolute;
  left: -0.06%;
  top: -32.55%;
  width: 167.69%;
  height: 148.03%;
  max-width: none;
  display: block;
}

/* ---------- Stars (Etoiles) ---------- */
.p-hero__star {
  position: absolute;
  pointer-events: none;
}

.p-hero__star img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Node 1446:7395 · x=654 y=44.78 · 43.12 x 52.08 */
.p-hero__star--big {
  left: 654px;
  top: 44.783px;
  width: 43.119px;
  height: 52.082px;
}

/* Node 1446:7401 · x=347 y=328.21 · 24.53 x 29.62 */
.p-hero__star--small {
  left: 347px;
  top: 328.211px;
  width: 24.526px;
  height: 29.624px;
}

/* ---------- Headline ----------
   HERO frame x=24 y=83.5 · Left block width 446 */
.p-hero__content {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);   /* vertically centered in the hero */
  width: 446px;
  z-index: 2;
}

.p-hero__headline {
  margin: 0;
  width: 446px;
  font-weight: 700;                 /* Catamaran Bold */
  font-size: 72px;
  line-height: 1;                   /* leading-none */
  color: #1a65e2;                   /* UI/#1 */
  word-break: break-word;
}

.p-hero__headline span {
  display: block;
}

/* ================= P-DETAIL ================= */
.p-detail {
  box-sizing: border-box;
  width: 1440px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  padding: 40px 20px;
  font-family: 'Catamaran', Arial, sans-serif;
  background: #ffffff;
}

.p-detail *,
.p-detail *::before,
.p-detail *::after {
  box-sizing: border-box;
}

/* Heading + description */
.p-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.p-detail__head-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  word-break: break-word;
}

.p-detail__title {
  margin: 0;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: #1a65e2;
  white-space: nowrap;
}

.p-detail__desc {
  margin: 0;
  width: 802px;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1;
  color: #000000;
  text-align: center;
}

/* Photo gallery */
.p-detail__gallery {
  display: flex;
  gap: 20px;
  align-items: center;
  width: 100%;
}

.p-detail__photo {
  height: 421px;
  overflow: hidden;
  flex-shrink: 0;
}

.p-detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-detail__photo--1 {
  width: 334px;
}

.p-detail__photo--1 img {
  object-position: 47% center;
}

.p-detail__photo--2 {
  width: 692px;
}

.p-detail__photo--2 img {
  object-position: center;
}

.p-detail__photo--3 {
  width: 334px;
}

.p-detail__photo--3 img {
  object-position: 53% center;
}

/* Show More button */
.p-detail__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.p-detail__btn {
  box-sizing: border-box;
  width: 282px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #002b92;   /* same look as the "Shop" outline buttons */
  border-radius: 0;
  font-family: 'Catamaran', Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: #002b92;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.p-detail__btn:hover {           /* invert on hover, like "Shop" */
  background: #002b92;
  color: #ffffff;
}

/* ================= P-MACHINE ================= */
.p-machine {
  box-sizing: border-box;
  width: 1440px;
  padding: 40px 20px;
  background: #ffffff;
  font-family: "Catamaran", Arial, sans-serif;
}

.p-machine *,
.p-machine *::before,
.p-machine *::after {
  box-sizing: border-box;
}

.p-machine__inner {
  display: flex;
  align-items: flex-start;
  gap: 142px;
  width: 100%;
}

.p-machine__media {
  flex: 0 0 auto;
  width: 807px;
  height: 374px;
}

.p-machine__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.p-machine__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.p-machine__title {
  margin: 0;
  font-weight: 700;
  font-size: 34px;
  line-height: 0.98;
  color: #1a65e2;
}

.p-machine__desc {
  margin: 0;
  width: 100%;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: #3f3f3f;
  word-break: break-word;
}

.p-machine__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: none;
  border-radius: 0;
  background: #d71a71;
  font-family: inherit;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
  cursor: pointer;
}

/* ================= P-CAROUSEL ================= */
/* ===========================================================
   Explore Many Labelling Crafting Projects — carousel section
   Figma node 1453:9535 — 1440 x ~487px
   All selectors prefixed with .p-carousel
   Fonts (Catamaran, Arial) are loaded globally — do NOT @import.
   =========================================================== */

.p-carousel {
  box-sizing: border-box;
  position: relative;
  width: 1440px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  font-family: "Catamaran", Arial, sans-serif;
  background: #ffffff;
}

.p-carousel *,
.p-carousel *::before,
.p-carousel *::after {
  box-sizing: border-box;
}

/* ---------- Header ---------- */
.p-carousel__header {
  position: relative;
  width: 100%;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.p-carousel__header-row {
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-carousel__title {
  margin: 0;
  width: 781px;
  font-weight: 700;              /* Catamaran Bold */
  font-size: 34px;
  line-height: 1;                /* leading-none */
  color: #1a65e2;
  word-break: break-word;
}

.p-carousel__viewall {
  flex-shrink: 0;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;              /* Catamaran Medium */
  font-size: 26px;
  line-height: 1;
  color: #4d4d4d;
  white-space: nowrap;
  text-decoration: none;
}

.p-carousel__subtitle {
  margin: 0;
  max-width: 800px;
  font-weight: 400;              /* Catamaran Regular */
  font-size: 20px;
  line-height: 1.1;
  color: #020920;
  word-break: break-word;
}

/* ---------- Carousel ---------- */
.p-carousel__carousel {
  flex-shrink: 0;
  width: 1400.527px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-carousel__track {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

/* ---------- Card ---------- */
.p-carousel__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  width: 217px;
}

.p-carousel__card--wide {
  width: 218px;
}

.p-carousel__thumb {
  position: relative;
  width: 100%;
  height: 217px;
  overflow: hidden;
}

.p-carousel__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-carousel__meta {
  width: 100%;
  background: #e5ecf7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 14px;
}

.p-carousel__name {
  margin: 0;
  width: 100%;
  font-weight: 700;              /* Catamaran Bold */
  font-size: 18px;
  line-height: 1;                /* leading-none */
  color: #1a65e2;
  word-break: break-word;
}

/* ---------- Arrows ---------- */
.p-carousel__arrow {
  flex-shrink: 0;
  width: 53.263px;
  height: 53.263px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #ffffff;
  border: 0.918px solid rgba(25, 101, 225, 0.3);
  border-radius: 100px;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.p-carousel__arrow img {
  width: 15.63px;
  height: 25.346px;
  display: block;
  transition: filter .18s ease;
}

.p-carousel__arrow--right img {
  transform: scaleX(-1);         /* flip left chevron into a right chevron */
}

.p-carousel__arrow:hover {
  background: #0d2ea0;
  border-color: #0d2ea0;
}

.p-carousel__arrow:hover img {
  filter: brightness(0) invert(1);
}
/* ---- Simplified hero: single background image + text overlay ---- */
.p-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}

/* ================= VIDEO POPUP MODAL ================= */
.p-detail__video { cursor: pointer; }

.p-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.p-modal.is-open { display: block; }
.p-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.p-modal__panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 925px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); overflow: auto;
  background: #ffffff; padding: 40px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 5px 7px rgba(0,0,0,0.25);
  font-family: 'Catamaran', Arial, sans-serif;
}
.p-modal__x {
  position: absolute; top: 26px; right: 26px; width: 28.5px; height: 28.5px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.p-modal__x img { width: 100%; height: 100%; display: block; }
.p-modal__title { margin: 0; font-weight: 700; font-size: 34px; line-height: 1; color: #1a65e2; }
.p-modal__video { position: relative; width: 100%; aspect-ratio: 618 / 376; overflow: hidden; }
.p-modal__video-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-modal__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 122px; height: 122px; pointer-events: none;
}
.p-modal__actions { display: flex; justify-content: flex-end; }
.p-modal__close-btn {
  width: 152px; padding: 16px; background: #ffffff; border: 1px solid #000000; color: #000000;
  font-family: 'Catamaran', Arial, sans-serif; font-weight: 600; font-size: 24px; line-height: 1;
  cursor: pointer; border-radius: 0; transition: background-color .18s ease, color .18s ease;
}
.p-modal__close-btn:hover { background: #000000; color: #ffffff; }

/* ---- Video plays inline (YouTube) on click ---- */
.p-modal__video { cursor: pointer; }
.p-modal__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.p-modal__video.is-playing .p-modal__play,
.p-modal__video.is-playing .p-modal__video-img { visibility: hidden; }

/* ---- Hover consistency with the main page ---- */
/* "Shop Now" — magenta invert (white bg, magenta border+text) */
.p-machine__btn { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.p-machine__btn:hover { background: #ffffff; color: #d71a71; box-shadow: inset 0 0 0 2px #d71a71; }

/* "View All >" — grey to blue on hover */
.p-carousel__viewall { transition: color .18s ease; }
.p-carousel__viewall:hover { color: #1a65e2; }

/* ================= FPO tags (For Placement Only) ================= */
.p-detail__photo,
.p-carousel__thumb,
.p-machine__media { position: relative; }
img.fpo-tag {
  position: absolute;
  top: auto;             /* cancel `inset:0` from `.p-carousel__thumb img` */
  left: auto;
  bottom: 8px;
  right: 8px;
  width: 63px;
  height: 47px;
  object-fit: contain;   /* override the container's `img { width:100%; height:100% }` */
  z-index: 6;
  pointer-events: none;
  display: block;
}
img.fpo-tag--left { right: auto; left: 8px; }