/* MMM Embroidery product page. Layout follows references/NOVA-04-product-detail.webp (1226 wide), scaled x1.2529 into the
   site's 1536 reference-pixel system (calc(N * var(--u))). Header and footer from site.css, cards from catalog.css. */

body.page-product { background: #f3f2ee; }


/* ===================== GALLERY + INFO ===================== */
.pdp { display: grid; grid-template-columns: calc(764 * var(--u)) 1fr; column-gap: calc(46 * var(--u)); padding: calc(7 * var(--u)) calc(45 * var(--u)) 0 calc(59 * var(--u)); align-items: start; }
.gal { display: grid; grid-template-columns: calc(108 * var(--u)) calc(646 * var(--u)); column-gap: calc(10 * var(--u)); height: calc(673 * var(--u)); }
.gal__thumbs { display: flex; flex-direction: column; gap: calc(9 * var(--u)); }
.gal__thumbs button {
  position: relative; flex: 0 0 calc(104 * var(--u)); border-radius: calc(7 * var(--u)); overflow: hidden;
  background: linear-gradient(180deg, #ebeae6, #e5e3de); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.gal__thumbs button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.6px #111; }
.gal__thumbs img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.gal__main { position: relative; border-radius: calc(9 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #ecebe7 0%, #e6e4df 100%); }
.gal__main img { position: absolute; inset: 3%; width: 94%; height: 94%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .25s; }
.gal__main img.is-loading { opacity: .25; }
.gal__zoom { position: absolute; right: calc(18 * var(--u)); top: calc(18 * var(--u)); width: calc(37 * var(--u)); height: calc(37 * var(--u)); border-radius: calc(9 * var(--u)); background: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.gal__zoom svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 1.7; }

.info { margin-top: calc(-6 * var(--u)); min-width: 0; }
.info__badge { display: inline-grid; place-items: center; height: calc(21 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(5 * var(--u)); background: #111; color: #fff; font-size: calc(12.4 * var(--u)); font-weight: 500; margin-bottom: calc(16 * var(--u)); }
.info__badge[hidden] { display: none; }
.info__code { font-size: calc(15 * var(--u)); color: #66635d; }
.info__name { margin-top: calc(4 * var(--u)); font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: calc(45 * var(--u)); line-height: 1.1; letter-spacing: -0.022em; color: #0d0d0d; }
.info__meta { margin-top: calc(4 * var(--u)); font-size: calc(14.4 * var(--u)); color: #4e4c48; }
.info__desc { margin-top: calc(14 * var(--u)); max-width: calc(600 * var(--u)); font-size: calc(16.4 * var(--u)); line-height: calc(22 * var(--u)); color: #57544f; }
.info__big { margin-top: calc(13 * var(--u)); font-family: "Inter", system-ui, sans-serif; font-weight: 800; font-size: calc(42 * var(--u)); line-height: 1; letter-spacing: -0.02em; color: #0c0c0c; }
.info__bigsub { margin-top: calc(5 * var(--u)); font-size: calc(15.4 * var(--u)); color: #66635d; }
.info__label { display: flex; justify-content: space-between; align-items: center; margin-top: calc(23 * var(--u)); font-size: calc(15.6 * var(--u)); font-weight: 500; color: #111; }
.info__label em { font-style: normal; font-weight: 400; color: #66635d; }
.info__link { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(13.8 * var(--u)); font-weight: 500; color: #222; }
.info__link .arr { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.info__link--icon svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 1.4; }
.info__bigsub + .info__label { margin-top: calc(30 * var(--u)); }
.swatches { display: flex; flex-wrap: wrap; gap: calc(9.5 * var(--u)); margin-top: calc(11 * var(--u)); }
.swt { width: calc(43 * var(--u)); height: calc(43 * var(--u)); border-radius: 50%; background: var(--c, #ddd) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.swt[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 calc(3 * var(--u)) #f3f2ee, 0 0 0 calc(4.6 * var(--u)) #111; }
.swt--more { background: #fff; display: grid; place-items: center; font-size: calc(20 * var(--u)); font-weight: 300; color: #222; box-shadow: inset 0 0 0 1px #e2dfd9; }
.sizes-row { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); margin-top: calc(9 * var(--u)); }
.sizes { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); }
.sizes-row .info__link { flex: 0 0 auto; }
.szc { min-width: calc(56 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(8 * var(--u)); border: 1px solid #dcd8d1; border-radius: calc(6 * var(--u)); background: #f8f7f4; font-size: calc(14 * var(--u)); color: #2c2a27; }
.szc[aria-pressed="true"] { border-color: #111; box-shadow: inset 0 0 0 .6px #111; background: #fff; }
.qty { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(10 * var(--u)); margin-top: calc(9 * var(--u)); }
.qty button { height: calc(72 * var(--u)); border: 1px solid #dcd8d1; border-radius: calc(7 * var(--u)); background: #f8f7f4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--u)); }
.qty b { font-size: calc(15.4 * var(--u)); font-weight: 600; color: #111; }
.qty span { font-size: calc(13 * var(--u)); color: #66635d; }
.qty button[aria-pressed="true"] { border-color: #111; box-shadow: inset 0 0 0 .6px #111; background: #fff; }
.info__ctas { display: flex; gap: calc(12.5 * var(--u)); margin-top: calc(22 * var(--u)); }
.btn--xl { height: calc(48 * var(--u)); font-size: calc(15 * var(--u)); border-radius: calc(7 * var(--u)); gap: calc(9 * var(--u)); }
.btn--xl svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); stroke-width: 1.8; }
.info__ctas .btn--dark { width: calc(320 * var(--u)); }
.info__ctas .btn--light { width: calc(290 * var(--u)); }
.ptrust { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); margin: calc(30 * var(--u)) calc(-2 * var(--u)) 0; }
.ptrust li { display: flex; align-items: center; gap: calc(9 * var(--u)); flex: 0 1 auto; min-width: 0; }
.ptrust .prop__ic { flex: 0 0 auto; width: calc(31 * var(--u)); height: calc(31 * var(--u)); border-width: 1.2px; }
.ptrust .prop__ic svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.ptrust b { display: block; font-size: calc(11.6 * var(--u)); font-weight: 600; color: #141414; white-space: nowrap; }
.ptrust div span { display: block; margin-top: calc(2 * var(--u)); font-size: calc(10.8 * var(--u)); color: #66635d; white-space: nowrap; }

/* ===================== TABS ===================== */
.ptabs { margin-top: calc(54 * var(--u)); }
.ptabs__bar { display: flex; gap: calc(52 * var(--u)); margin-left: calc(56 * var(--u)); padding-left: calc(15 * var(--u)); width: calc(631 * var(--u)); border-bottom: 1px solid #e2dfd9; }
.ptabs__bar button { position: relative; padding: 0 calc(4 * var(--u)) calc(13 * var(--u)); font-size: calc(14 * var(--u)); color: #4a4844; white-space: nowrap; }
.ptabs__bar button[aria-selected="true"] { color: #111; font-weight: 600; }
.ptabs__bar button[aria-selected="true"]::after { content: ""; position: absolute; left: calc(-12 * var(--u)); right: calc(-12 * var(--u)); bottom: -1px; height: 2px; background: #111; }
.ptab { display: grid; grid-template-columns: calc(412 * var(--u)) 1fr; column-gap: calc(49 * var(--u)); padding: calc(18 * var(--u)) calc(52 * var(--u)) 0 calc(58 * var(--u)); }
.ptab__text { padding-top: calc(5 * var(--u)); }
.ptab[hidden] { display: none; }
.ptab__text--wide { grid-column: 1 / -1; }
.ptab__title { font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: calc(29 * var(--u)); letter-spacing: -0.015em; color: #0f0f0f; }
.ptab__title span { font-weight: 400; color: #66635d; font-size: calc(18 * var(--u)); margin-left: calc(8 * var(--u)); }
.ptab__text > p { margin-top: calc(14 * var(--u)); font-size: calc(15.4 * var(--u)); line-height: calc(24.5 * var(--u)); color: #57544f; }
.ptab__list { margin-top: calc(14 * var(--u)); }
.ptab__list li { position: relative; padding-left: calc(22 * var(--u)); font-size: calc(15.6 * var(--u)); line-height: calc(27.5 * var(--u)); color: #2d2b28; }
.ptab__list li::before { content: ""; position: absolute; left: calc(4 * var(--u)); top: calc(12 * var(--u)); width: calc(4.5 * var(--u)); height: calc(4.5 * var(--u)); border-radius: 50%; background: #333; }
.pgal { display: grid; grid-template-columns: 275fr 349fr 299fr; column-gap: calc(12 * var(--u)); align-items: start; }
.pgal figure { margin: 0; }
.pgal__one, .pgal__four { height: calc(310 * var(--u)); }
.pgal__one { border-radius: calc(8 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #ebe9e5, #e4e2dd); position: relative; }
.pgal__one img, .pgal__four img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pgal__one img.is-photo, .pgal__four img.is-photo { object-fit: cover; mix-blend-mode: normal; }
.pgal__four { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: calc(9 * var(--u)); }
.pgal__four span { border-radius: calc(8 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #ebe9e5, #e4e2dd); position: relative; }
.pgal__four img { position: absolute; inset: 0; }
.pgal figcaption { margin-top: calc(13 * var(--u)); font-size: calc(13 * var(--u)); color: #66635d; }
.size-table { border-collapse: collapse; margin-top: calc(18 * var(--u)); font-size: calc(14 * var(--u)); min-width: calc(560 * var(--u)); }
.size-table th, .size-table td { padding: calc(10 * var(--u)) calc(16 * var(--u)); text-align: left; border-bottom: 1px solid #e3e0da; white-space: nowrap; }
.size-table thead th { background: #ebe9e4; font-weight: 600; color: #111; }
.size-table tbody th { font-weight: 500; color: #2c2a27; }
.size-table td { color: #4a4844; }
.size-wrap { overflow-x: auto; max-width: 100%; }
.size-note { margin-top: calc(14 * var(--u)); font-size: calc(14 * var(--u)); color: #66635d; }
.allcolors { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(170 * var(--u)), 1fr)); gap: calc(10 * var(--u)) calc(18 * var(--u)); margin-top: calc(20 * var(--u)); }
.allcolors button { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(14 * var(--u)); color: #2c2a27; text-align: left; }
.allcolors button:hover, .allcolors button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.allcolors .swt { width: calc(28 * var(--u)); height: calc(28 * var(--u)); flex: 0 0 auto; }
.custom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--u)); margin-top: calc(20 * var(--u)); }
.custom > div { padding: calc(20 * var(--u)) calc(22 * var(--u)); border-radius: calc(10 * var(--u)); background: #f8f7f4; border: 1px solid #e6e3dd; }
.custom b { display: block; font-size: calc(16 * var(--u)); color: #111; }
.custom p { margin-top: calc(8 * var(--u)); font-size: calc(14.4 * var(--u)); line-height: calc(22 * var(--u)); color: #57544f; }
.custom__note { margin-top: calc(18 * var(--u)); font-size: calc(15 * var(--u)); color: #444; }
.custom__note a { text-decoration: underline; font-weight: 600; }

/* ===================== YOU MAY ALSO LIKE ===================== */
.rel { position: relative; margin-top: calc(42 * var(--u)); padding-bottom: calc(70 * var(--u)); }
.rel__title { margin-left: calc(59 * var(--u)); font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: calc(26 * var(--u)); letter-spacing: -0.015em; color: #0f0f0f; }
.rel__rail { display: flex; gap: calc(16 * var(--u)); margin: calc(6 * var(--u)) calc(84 * var(--u)) 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.rel__rail::-webkit-scrollbar { display: none; }
.rcard { position: relative; flex: 0 0 calc(213 * var(--u)); scroll-snap-align: start; border-radius: calc(9 * var(--u)); background: #f7f6f3; box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden; }
.rcard__img { height: calc(146 * var(--u)); background: linear-gradient(180deg, #ecebe7, #e7e5e0); position: relative; }
.rcard__img img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.rcard p { padding: 0 calc(16 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard__code { margin-top: calc(10 * var(--u)); font-size: calc(13 * var(--u)); color: #66635d; }
.rcard__name { margin-top: calc(3 * var(--u)); font-size: calc(14.4 * var(--u)); color: #151515; }
.rcard__meta { margin: calc(6 * var(--u)) 0 calc(14 * var(--u)); font-size: calc(14.4 * var(--u)); font-weight: 600; color: #111; }
.round--rel { position: absolute; z-index: 2; left: calc(24 * var(--u)); top: calc(150 * var(--u)); width: calc(50 * var(--u)); height: calc(50 * var(--u)); }
.round--rel .arr { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.round--relr { left: auto; right: calc(24 * var(--u)); }

/* catalog cards: the whole card opens the product page */

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(15,15,15,.9); display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 90vh; max-height: 90dvh; background: #f1f0ec; border-radius: 10px; }   /* dvh: Safari's toolbars never cut it */
.lightbox button { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; background: #fff; font-size: 26px; line-height: 1; }

.pdp-missing { padding: 40px 0 80px; font-size: 18px; }
.pdp-missing a { text-decoration: underline; font-weight: 600; }

/* ===================== PHONES + TABLETS ===================== */
@media (max-width: 1179px) {
  .pdp { display: block; padding: 0 16px; }
  .gal { display: flex; flex-direction: column-reverse; height: auto; gap: 10px; }
  .gal__main { aspect-ratio: 1 / 1; border-radius: 12px; }
  .gal__thumbs { flex-direction: row; overflow-x: auto; gap: 8px; scrollbar-width: none; }
  .gal__thumbs::-webkit-scrollbar { display: none; }
  .gal__thumbs button { flex: 0 0 66px; height: 66px; border-radius: 8px; }
  .gal__zoom { right: 12px; top: 12px; width: 38px; height: 38px; border-radius: 10px; }
  .gal__zoom svg { width: 18px; height: 18px; }
  .info { margin-top: 22px; }
  .info__badge { height: 22px; padding: 0 9px; font-size: 12px; margin-bottom: 12px; border-radius: 5px; }
  .info__code { font-size: 14px; }
  .info__name { font-size: 30px; }
  .info__meta { font-size: 14px; margin-top: 8px; }
  .info__desc { font-size: 15.5px; line-height: 23px; margin-top: 14px; }
  .info__big { font-size: 30px; margin-top: 16px; }
  .info__bigsub { font-size: 14px; margin-top: 6px; }
  .info__label { font-size: 15px; margin-top: 24px; }
  .info__link { font-size: 14px; gap: 6px; }
  .info__link .arr { width: 14px; height: 14px; }
  .info__link--icon svg { width: 18px; height: 18px; }
  .swatches { gap: 10px; margin-top: 12px; }
  .swt { width: 40px; height: 40px; }
  .swt[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px #f3f2ee, 0 0 0 4.5px #111; }
  .swt--more { font-size: 20px; }
  .sizes-row { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 12px; }
  .sizes { gap: 8px; }
  .szc { min-width: 54px; height: 44px; font-size: 15px; border-radius: 7px; }
  .qty { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .qty button { height: 64px; border-radius: 8px; gap: 4px; }
  .qty b { font-size: 15px; }
  .qty span { font-size: 12.5px; }
  .info__ctas { flex-direction: column; gap: 10px; margin-top: 20px; }
  .info__ctas .btn--xl { flex: 0 0 auto; width: 100%; height: 52px; font-size: 16px; border-radius: 8px; }
  .btn--xl svg { width: 18px; height: 18px; }
  .ptrust { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin: 26px 0 0; }
  .ptrust .prop__ic { width: 38px; height: 38px; }
  .ptrust .prop__ic svg { width: 18px; height: 18px; }
  .ptrust b { font-size: 13.5px; white-space: normal; }
  .ptrust div span { font-size: 12.5px; white-space: normal; }
  .ptabs { margin-top: 44px; }
  .ptabs__bar { margin: 0 16px; padding-left: 0; width: auto; gap: 26px; overflow-x: auto; scrollbar-width: none; }
  .ptabs__bar::-webkit-scrollbar { display: none; }
  .ptabs__bar button { font-size: 15px; padding: 0 2px 12px; }
  .ptabs__bar button[aria-selected="true"]::after { left: -6px; right: -6px; }
  .ptab { display: block; padding: 22px 16px 0; }
  .ptab__text { padding-top: 0; }
  .ptab__title { font-size: 24px; }
  .ptab__title span { font-size: 16px; }
  .ptab__text > p { font-size: 15.5px; line-height: 24px; margin-top: 12px; }
  .ptab__list li { font-size: 15.5px; line-height: 26px; padding-left: 20px; }
  .ptab__list li::before { top: 11px; width: 5px; height: 5px; }
  .pgal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .pgal figure:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .pgal__one, .pgal__four { height: auto; aspect-ratio: 1 / 1.05; }
  .pgal__four { aspect-ratio: 2 / 1.6; gap: 8px; }
  .pgal figcaption { font-size: 13px; margin-top: 8px; }
  .size-table { font-size: 14px; min-width: 0; margin-top: 14px; }
  .size-table th, .size-table td { padding: 10px 12px; }
  .size-note { font-size: 14px; }
  .allcolors { grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 14px; }
  .allcolors button { font-size: 14px; padding: 6px; gap: 10px; }
  .allcolors .swt { width: 28px; height: 28px; }
  .custom { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
  .custom > div { padding: 16px 16px; border-radius: 10px; }
  .custom b { font-size: 16px; }
  .custom p { font-size: 14.5px; line-height: 22px; }
  .custom__note { font-size: 15px; }
  .rel { margin-top: 44px; padding-bottom: 44px; }
  .rel__title { margin-left: 16px; font-size: 22px; }
  .rel__rail { margin: 16px 0 0; padding: 0 16px; gap: 10px; scroll-padding: 0 16px; }
  .rcard { flex: 0 0 46%; border-radius: 10px; }
  .rcard__img { height: auto; aspect-ratio: 1 / 1; }
  .rcard p { padding: 0 12px; }
  .rcard__code { font-size: 12px; margin-top: 8px; }
  .rcard__name { font-size: 14px; }
  .rcard__meta { font-size: 13.5px; margin: 4px 0 12px; }
  .round--rel { display: none; }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .pdp { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; padding: 0 32px; }
  .crumbs { padding: 2px 32px 14px; }
  .info { margin-top: 0; }
  .ptabs__bar { margin: 0 32px; }
  .ptab { padding: 24px 32px 0; }
  .pgal { grid-template-columns: 1fr 2fr 1fr; }
  .pgal figure:nth-child(2) { grid-column: auto; grid-row: auto; }
  .rel__rail { padding: 0 32px; }
  .rcard { flex-basis: 30%; }
  .qty { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* decoration on the product page (optional; the builder asks again) */
.deco-row { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); margin-top: calc(9 * var(--u)); }
.deco-row--places { margin-top: calc(7 * var(--u)); }
.chipd { height: calc(34 * var(--u)); padding: 0 calc(13 * var(--u)); border-radius: 99px; border: 1px solid #dcd8d1; background: #f8f7f4; font-size: calc(13.4 * var(--u)); color: #2c2a27; }
.chipd--place { height: calc(30 * var(--u)); font-size: calc(12.6 * var(--u)); background: transparent; border-style: dashed; }
.chipd[aria-pressed="true"] { background: #111; border-color: #111; border-style: solid; color: #fff; }
#add-proj { cursor: pointer; }
@media (max-width: 1179px) {
  .deco-row { gap: 7px; margin-top: 10px; }
  .chipd { height: 40px; padding: 0 14px; font-size: 14px; }
  .chipd--place { height: 36px; font-size: 13.5px; }
}

/* 10/22 mobile pass: 44 px targets on the phone product page (same look, the rows keep their spacing) */
@media (max-width: 1179px) {
  .gal__zoom { width: 44px; height: 44px; }
  .info__link { min-height: 44px; margin: -12px -6px -12px 0; padding: 0 6px; }
  .sizes-row .info__link { margin: -6px 0 -6px -6px; }
  .chipd, .chipd--place { height: 44px; }
  .ptabs__bar button { padding-top: 12px; }
  .ptabs { margin-top: 32px; }
}