/* writtengift product page. Layout geometry from tesla.com's order page (media fills the left and stays put,
   408px choice column with 48px gutters, 78px bar at the bottom); colours, type and shapes are writtengift's. */
.wgp { --wgp-rail: 408px; --wgp-gutter: 48px; --wgp-bar: 78px;
  --wgp-ink: var(--wg-ink, #161616); --wgp-text: #2b2a28; --wgp-muted: var(--wg-muted, #5f5b55);
  --wgp-line: var(--wg-line, #e9d9c2); --wgp-paper: var(--wp--preset--color--paper, #fcf8f2); --wgp-sand: var(--wg-surface-2, #f2ebe0);
  --wgp-accent: var(--wg-accent, #0a5844); --wgp-lime: var(--wg-lime, #9fe870);
  color: var(--wgp-text); font-variant-numeric: tabular-nums; font-size: 15px; line-height: 1.45;
  margin: 0; }
.wgp *, .wgp *::before, .wgp *::after { box-sizing: border-box; }
/* Zero specificity, so a fieldset that is also a .wgp-sec box (Colour, option groups) keeps the box's padding and margin. */
:where(.wgp) fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wgp legend { padding: 0; float: left; width: 100%; }
.wgp legend + * { clear: both; }
.wgp button { font: inherit; color: inherit; cursor: pointer; }
.wgp input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }

.wgp-main { display: flex; align-items: flex-start; }
.wgp-media { flex: 1 1 auto; min-width: 0; align-self: stretch; }
.wgp-media__in { position: sticky; top: 0; height: calc(100vh - var(--wgp-bar)); min-height: 420px; overflow: hidden; background: var(--wgp-sand); border-radius: 0 0 var(--wg-radius-lg, 16px) 0; transition: height .3s; }
body.wgp-bar-hidden .wgp-media__in { height: 100vh; }
.wgp-rail { flex: 0 0 var(--wgp-rail); margin: 0 var(--wgp-gutter); padding-bottom: 120px; }

/* stage */
.wgp-stage, .wgp-logo-stage { position: absolute; inset: 0; }
.wgp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.wgp-slide.is-on { opacity: 1; pointer-events: auto; }
.wgp-slide img { width: 100%; height: 100%; object-fit: contain; }
.wgp-slide--empty { flex-direction: column; gap: 12px; text-align: center; padding: 48px; font-family: var(--wp--preset--font-family--display, serif); font-size: clamp(28px, 3.4vw, 52px); letter-spacing: -.02em; color: var(--wgp-ink); line-height: 1.1; }
.wgp-slide--empty small { font-family: var(--wp--preset--font-family--body, sans-serif); font-size: 15px; letter-spacing: 0; color: var(--wgp-muted); max-width: 34ch; }
.wgp .wgp-slide--empty .wgp-btn { width: auto; padding: 0 var(--wg-btn-pad, 24px); font-family: var(--wp--preset--font-family--body, sans-serif); }
.wgp-slide--empty::before { content: ''; width: 120px; height: 120px; border-radius: 28px; border: 2px dashed rgba(22, 22, 22, .25); margin-bottom: 8px; }
.wgp-logo-stage { display: none; overflow: auto; padding: 72px 24px 88px; background: var(--wgp-paper); }
.wgp-media.is-logo .wgp-logo-stage { display: block; }
.wgp-media.is-logo .wgp-stage, .wgp-media.is-logo .wgp-pg, .wgp-media.is-logo .wgp-dots { display: none; }
.wgp-logo-stage .wg-config__designer:empty::before { content: 'Loading the designer…'; color: var(--wgp-muted); }

/* pager: at the top of the photo, so the bottom bar never covers it (at scroll 0 the photo's bottom is under the bar).
   It keeps clear of the full-screen button in the top right corner (68px each side, so it stays centred): in a narrow
   window with many photos the Photos / Your logo switch goes to a second row instead of covering the button. Only
   its buttons take clicks; between them a click reaches the photo. In logo mode only the switch shows, top left. */
.wgp-pager { position: absolute; left: 68px; right: 68px; top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; z-index: 5; pointer-events: none; }
.wgp-pager > * { pointer-events: auto; }
.wgp-media.is-logo .wgp-pager { left: 20px; right: auto; justify-content: flex-start; }
.wgp-pg { width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(252, 248, 242, .7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; }
.wgp-pg svg { width: 20px; height: 20px; }
.wgp-dots { display: flex; align-items: center; gap: 0; height: 40px; padding: 0 8px; border-radius: 999px; background: rgba(252, 248, 242, .7); backdrop-filter: blur(8px); }
.wgp-dot { width: 24px; height: 24px; border: 0; border-radius: 50%; padding: 7px; background: rgba(22, 22, 22, .25); background-clip: content-box; }
.wgp-dot.is-on { background-color: var(--wgp-ink); }
.wgp-modes { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(252, 248, 242, .8); backdrop-filter: blur(8px); }
.wgp-modes button { border: 0; background: transparent; height: var(--wg-chip-h, 36px); padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.wgp-modes button.is-on { background: var(--wgp-ink); color: var(--wgp-paper); }

/* rail */
.wgp-h1 { font-family: var(--wp--preset--font-family--display, serif); font-weight: 450; font-size: 40px; line-height: 1.15; letter-spacing: -.02em; text-align: center; color: var(--wgp-ink); margin: 32px 0 0; text-wrap: balance; overflow-wrap: break-word; }
/* Long names a size down (templates/product-page.php), and short hyphenated words ("USB-C") never split. */
.wgp-h1--long { font-size: 32px; }
.wgp .wg-nowrap { white-space: nowrap; }
.wgp-sub { text-align: center; color: var(--wgp-muted); font-size: 14px; margin: 8px 0 0; min-height: 1em; }
.wgp-zone { background: var(--wgp-sand); border-radius: 12px; margin-top: 24px; padding: 4px 16px 20px; }
.wgp-stats { display: flex; gap: 16px; padding: 16px 8px 12px; }
.wgp-zone:not(:has(.wgp-cards)) { padding-bottom: 4px; }
.wgp-stat { flex: 1; }
.wgp-stat .n { font-size: 20px; font-weight: 500; color: var(--wgp-ink); }
.wgp-stat .n small { font-size: 13px; }
.wgp-stat .l { font-size: 12px; color: var(--wgp-muted); margin-top: 4px; line-height: 1.3; text-wrap: balance; }
/* What the price includes when there is no print choice to make (a list read from one published price). */
.wgp-incl { margin: 0; padding: 0 8px 12px; font-size: 13px; line-height: 1.45; color: var(--wgp-text); }
.wgp-label { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--wgp-muted); margin: 8px 0 2px; }
.wgp-card { display: block; position: relative; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px rgba(95, 91, 85, .55); padding: 14px 16px; margin-top: 10px; cursor: pointer; transition: box-shadow .15s, background .15s; }
.wgp-card:hover { box-shadow: inset 0 0 0 1px var(--wgp-ink); }
.wgp-card.is-sel { box-shadow: inset 0 0 0 2px var(--wgp-ink); background: #fff; }
.wgp-card.is-off { opacity: .45; cursor: not-allowed; }
.wgp-card:has(input:focus-visible) { outline: 2px solid var(--wgp-accent); outline-offset: 2px; }
.wgp-card .t { font-size: 15px; display: flex; justify-content: space-between; gap: 12px; font-weight: 500; line-height: 20px; color: var(--wgp-ink); }
.wgp-card .p { color: var(--wgp-muted); white-space: nowrap; }
.wgp-card.is-sel .p { color: var(--wgp-ink); }
.wgp-card .sub { display: block; font-size: 12px; color: var(--wgp-muted); margin-top: 4px; }

.wgp-sec { background: var(--wgp-sand); border-radius: 12px; padding: 16px 20px 20px; margin-top: 16px; }
.wgp-sec__h { font-family: var(--wp--preset--font-family--display, serif); font-size: 22px; font-weight: 450; letter-spacing: -.01em; color: var(--wgp-ink); margin-bottom: 4px; }
.wgp-desc { font-size: 14px; color: var(--wgp-muted); margin: 6px 0 0; }
.wgp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wgp-chip { position: relative; display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 8px 16px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(95, 91, 85, .35); cursor: pointer; }
.wgp-chip .nm { font-size: 14px; font-weight: 500; color: var(--wgp-ink); }
.wgp-chip small { font-size: 11px; color: var(--wgp-muted); }
.wgp-chip small:empty { display: none; }
.wgp-chip:has(input:checked) { box-shadow: inset 0 0 0 2px var(--wgp-ink); }
.wgp-chip:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.wgp-chip:has(input:focus-visible) { outline: 2px solid var(--wgp-accent); outline-offset: 2px; }
.wgp-qty { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.wgp-qty input { width: 140px; height: 44px; border: 0; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--wg-field, #857d72); padding: 0 18px; font: inherit; font-size: 17px; font-weight: 500; color: var(--wgp-ink); }
.wgp-qty input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--wgp-ink); }
.wgp-qty span { color: var(--wgp-muted); }
.wgp-chips--qty { gap: 6px; }
.wgp-qchip { height: var(--wg-chip-h, 36px); padding: 0 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(95, 91, 85, .3); font-size: 13px; }
.wgp-qchip[aria-pressed=true] { background: var(--wgp-ink); color: var(--wgp-paper); box-shadow: none; }
.wgp-note { font-size: 13px; color: var(--wgp-muted); margin: 10px 0 0; }

/* The theme's button scale (tokens.css --wg-btn-*, docs/design-system.md): 48px, 15px, weight 400, .02em. */
.wgp .wgp-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--wg-btn-h, 48px); padding: 0 var(--wg-btn-pad, 24px); border-radius: var(--wg-btn-radius, 999px); font-size: var(--wg-btn-font, .9375rem); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; margin-top: 12px; transition: opacity .15s; }
.wgp .wgp-btn--primary { background: var(--wgp-ink); color: var(--wgp-paper); border: 0; }
.wgp .wgp-btn--outline { background: transparent; color: var(--wgp-ink); border: 1px solid var(--wgp-ink); }
.wgp-btn:disabled { opacity: .35; cursor: not-allowed; }

/* order section */
.wgp-pay { margin-top: 40px; }
.wgp-pay h2 { font-family: var(--wp--preset--font-family--display, serif); font-weight: 450; font-size: 28px; letter-spacing: -.02em; text-align: center; color: var(--wgp-ink); margin: 0 0 16px; }
.wgp-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding: 6px 0; color: var(--wgp-text); }
.wgp-row span:last-child { text-align: right; }
.wgp-row.is-b { font-weight: 600; color: var(--wgp-ink); border-top: 1px solid var(--wgp-line); margin-top: 8px; padding-top: 12px; }
.wgp-payrow { display: flex; justify-content: space-between; font-size: 22px; font-weight: 500; color: var(--wgp-ink); margin-top: 20px; }
.wgp-payrow--date { font-size: 17px; }
.wgp-payrow--date span:last-child { color: var(--wgp-accent); }
.wgp-cap { font-size: 12px; color: var(--wgp-muted); margin: 6px 0 0; }
.wgp-cap[data-wgp=orderStatus] { color: var(--wgp-ink); }
.wgp-cap[data-wgp=orderStatus]:empty { display: none; }
.wgp-legal { font-size: 12px; color: var(--wgp-muted); margin-top: 20px; line-height: 1.6; }
.wgp-legal a { color: var(--wgp-text); }
.wgp-email { margin-top: 16px; font-size: 14px; }
/* A full-height row with the FAQ's round + marker (theme pages.css .wg-qa), not the browser's small triangle. */
.wgp-email summary { position: relative; display: flex; align-items: center; min-height: 44px; padding: 6px 44px 6px 0; list-style: none; cursor: pointer; color: var(--wgp-ink); font-weight: 500; border-top: 1px solid var(--wgp-line); border-bottom: 1px solid var(--wgp-line); }
.wgp-email summary::-webkit-details-marker { display: none; }
.wgp-email summary::after { content: ''; position: absolute; right: 2px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--wgp-sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' fill='none' stroke='%23161616' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .2s, background-color .2s; }
.wgp-email[open] summary { border-bottom-color: transparent; }
.wgp-email[open] summary::after { transform: rotate(45deg); background-color: var(--wgp-lime); }
.wgp-email summary:hover { color: var(--wgp-accent); }
@media (prefers-reduced-motion: reduce) { .wgp-email summary::after { transition: none; } }
.wgp-email__row { display: grid; gap: 8px; margin-top: 10px; }
/* 16px in fields: iOS zooms into a field under 16px when it is focused (.wgp-email is 14px). */
.wgp-email__row input { height: 44px; border: 0; border-radius: 22px; padding: 0 18px; box-shadow: inset 0 0 0 1px var(--wg-field, #857d72); font: inherit; font-size: 16px; background: #fff; }
.wgp-email__row .wgp-btn { margin-top: 0; }
/* Sample offer: one line and a text link in the pay box, under Save official quote. */
.wgp-sample { margin-top: 16px; font-size: 13px; color: var(--wgp-text); }
.wgp-sample[hidden] { display: none; }
.wgp-sample__line { display: inline; margin: 0; font-size: 13px; }
.wgp .wgp-sample__btn { display: inline; margin: 0 0 0 4px; padding: 0; border: 0; background: none; color: var(--wgp-ink); font: inherit; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.wgp .wgp-sample__btn[hidden] { display: none; }
.wgp .wgp-sample__btn:disabled { opacity: .5; cursor: default; }
.wgp.is-estimate [data-wgp=total], .wgp.is-estimate [data-wgp=barTotal] { opacity: .5; }

/* bottom bar */
.wgp-bar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--wgp-bar); background: var(--wgp-paper); box-shadow: 0 -2px 10px rgba(22, 22, 22, .08); z-index: 40; display: flex; align-items: center; transition: transform .3s; }
body.wgp-bar-hidden .wgp-bar { transform: translateY(110%); }
.wgp-bar__l { padding-left: 32px; min-width: 0; }
.wgp-bar__l .m { font-family: var(--wp--preset--font-family--display, serif); font-size: 20px; color: var(--wgp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgp-bar__l .s { font-size: 12px; color: var(--wgp-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgp-bar__r { margin-left: auto; margin-right: var(--wgp-gutter); flex: 0 0 var(--wgp-rail); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wgp-bar__p { position: relative; }
.wgp-bar__p .pr { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font-size: 24px; font-weight: 500; color: var(--wgp-ink); }
.wgp-bar__p .pr svg { width: 14px; height: 8px; transition: transform .2s; }
.wgp-bar__p .pr[aria-expanded=true] svg { transform: rotate(180deg); }
.wgp-bar__p .cap { font-size: 12px; color: var(--wgp-muted); margin-top: 2px; white-space: nowrap; }
.wgp-bar__order { width: 150px; margin: 0; }
.wgp-pop { position: absolute; bottom: 64px; left: 0; width: 360px; background: #fff; border-radius: 12px; box-shadow: 0 6px 28px rgba(22, 22, 22, .16); padding: 16px 20px; display: none; }
.wgp-pop.is-open { display: block; }

/* Phones and tablets: the photo scrolls with the page (pinned, it took a third of the screen and hid the order
   summary), the controls sit in a row under it instead of on it, and the designer is in the page's flow so its
   proof button is never cut off. */
@media (max-width: 1024px) {
  .wgp-main { display: block; }
  .wgp-media { position: relative; }
  .wgp-media__in { position: relative; height: auto; min-height: 0; border-radius: 0; }
  body.wgp-bar-hidden .wgp-media__in { height: auto; }
  .wgp-stage { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .wgp-logo-stage { position: relative; inset: auto; overflow: visible; padding: 12px 12px 0; }
  .wgp-pager, .wgp-media.is-logo .wgp-pager { position: static; transform: none; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 8px 12px 10px; }
  .wgp-pg { width: 32px; height: 32px; }
  .wgp-dots { height: 32px; padding: 0 4px; }
  .wgp-dot { padding: 8px; }
  .wgp-modes button { padding: 0 12px; font-size: 12px; }
  #wgpPay { scroll-margin-top: 16px; }
  .wgp-rail { margin: 0; padding: 0 12px 100px; }
  .wgp-h1 { font-size: 28px; margin-top: 24px; }
  .wgp-h1--long { font-size: 24px; }
  .wgp-bar { height: 70px; border-radius: 12px 12px 0 0; }
  .wgp-bar__l { display: none; }
  .wgp-bar__r { flex: 1 1 auto; margin: 0; padding: 0 16px 0 20px; }
  .wgp-bar__p .pr { font-size: 20px; }
  .wgp-bar__order { width: auto; padding: 0 22px; }
  .wgp-pop { width: calc(100vw - 32px); left: -4px; }
  .wgp-slide--empty { gap: 8px; padding: 24px; font-size: 26px; }
  .wgp-slide--empty::before { display: none; }
  .wgp-slide--empty small { font-size: 13px; }
  .wgp .wgp-slide--empty .wgp-btn { height: var(--wg-btn-h-sm, 44px); padding: 0 var(--wg-btn-pad-sm, 18px); margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .wgp-slide, .wgp-bar, .wgp-media__in { transition: none; } }

/* Gallery: thumbnails down the left edge (along the bottom on phones), full-screen view with zoom. */
.wgp-thumbs { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 8px; max-height: calc(100% - 140px); overflow-y: auto; scrollbar-width: none; padding: 4px; }
.wgp-thumbs::-webkit-scrollbar { display: none; }
.wgp .wgp-thumb { flex: 0 0 auto; width: 64px; height: 64px; padding: 0; border: 1px solid transparent; border-radius: 12px; background: #fff; overflow: hidden; cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s; }
.wgp .wgp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wgp .wgp-thumb:hover { opacity: 1; }
.wgp .wgp-thumb.is-on { opacity: 1; border-color: var(--wgp-ink); box-shadow: 0 0 0 1px var(--wgp-ink); }
.wgp-media.is-logo .wgp-thumbs, .wgp-media.is-logo .wgp-zoom { display: none; }
.wgp .wgp-zoom { position: absolute; right: 20px; top: 20px; z-index: 4; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(252, 248, 242, .8); backdrop-filter: blur(8px); display: grid; place-items: center; cursor: pointer; color: var(--wgp-ink); }
.wgp-slide[data-full] img { cursor: zoom-in; }
/* Phones: the dots under the photo page through it; thumbnails would only cover it. */
@media (max-width: 1024px) { .wgp-thumbs { display: none; } }
.wgp-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(252, 248, 242, .98); color: #161616; }
.wgp-lightbox::backdrop { background: rgba(22, 22, 22, .4); }
.wgp-lightbox__img { position: absolute; inset: 56px 72px; display: grid; place-items: center; overflow: hidden; cursor: zoom-in; }
.wgp-lightbox__img img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .25s ease; }
.wgp-lightbox__img.is-zoom { cursor: zoom-out; }
.wgp-lightbox__img.is-zoom img { transform: scale(2.4); }
.wgp-lightbox button { position: absolute; border: 0; background: #fff; color: #161616; width: 48px; height: 48px; border-radius: 999px; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 4px 16px rgba(22, 22, 22, .12); }
.wgp-lightbox__x { top: 16px; right: 16px; }
.wgp-lightbox__pg[data-step="-1"] { left: 16px; top: 50%; transform: translateY(-50%); }
.wgp-lightbox__pg[data-step="1"] { right: 16px; top: 50%; transform: translateY(-50%); }
.wgp-lightbox__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 13px; color: #5f5b55; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .wgp-lightbox__img { inset: 64px 8px; } .wgp-lightbox__pg { top: auto !important; bottom: 12px; transform: none !important; } }
.wgp-rail, .wgp-rail .wgp-sec { min-width: 0; }

/* About this gift: our copy, facts as a tidy list, the branding tip set apart. */
/* Body text at the theme's reading size (16-17px), as on every other page. */
.wgp-about__body { font-size: var(--wp--preset--font-size--medium, 1.0625rem); line-height: 1.55; color: var(--wgp-text); }
.wgp-about__body p { margin: 8px 0 0; }
.wgp-about__body ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.wgp-about__body li { position: relative; padding-left: 18px; }
.wgp-about__body li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--wgp-accent); }
.wgp-about__body .wg-branding-tip { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--wgp-sand); font-size: 13px; }
.wgp-about__body .wg-branding-tip__label { font-weight: 500; }
/* Need it by? (templates/product-page.php, NeedBy.php). The words say late or in time; colour only supports them. */
.wgp { --wgp-late: var(--wg-late, #a3361f); }
.wgp-needby { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 15px; color: var(--wgp-ink); }
.wgp-needby label { font-weight: 500; }
.wgp-needby input { flex: 0 1 190px; min-width: 0; height: 40px; border: 0; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--wg-field, #857d72); padding: 0 14px; font: inherit; font-size: 16px; color: var(--wgp-ink); }
.wgp-needby input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--wgp-ink); }
.wgp-deadline { font-size: 13px; line-height: 1.5; color: var(--wgp-accent); margin-top: 8px; }
.wgp-deadline.is-late { color: var(--wgp-late); }
.wgp-deadline .wgp-countdown { display: block; font-weight: 600; }
.wgp-deadline .wgp-countdown:empty { display: none; }
.wgp-faster { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wgp-faster .wgp-chip { border: 0; text-align: left; max-width: 100%; }
.wgp-faster .wgp-chip .nm { font-size: 13px; }
.wgp-faster .wgp-chip:hover { box-shadow: inset 0 0 0 2px var(--wgp-ink); }
.wgp-faster__link { flex-basis: 100%; font-size: 13px; color: var(--wgp-ink); }
/* What is paid now (BookingFee: booking fee now, the balance by bank transfer) and partial price books, whose one
   published price is the highest per piece ("S$26.67 or less" above its quantity). */
.wgp-paynow { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--wgp-line); }
.wgp-paynow[hidden], .wgp-paynow [hidden], .wgp-paycap[hidden], .wgp-bar__p .cap--pay[hidden] { display: none; }
.wgp-paynow .wgp-row { padding: 3px 0; }
.wgp-paynow .wgp-row span:last-child { color: var(--wgp-ink); font-weight: 500; }
.wgp-paycap { font-size: 13px; line-height: 1.45; color: var(--wgp-ink); margin-top: 8px; }
.wgp-bar__p .cap--pay { color: var(--wgp-accent); font-weight: 500; }
.wgp-stat.is-upper .l { color: var(--wgp-accent); font-weight: 600; }
.wgp-volume.is-upper { color: var(--wgp-accent); }
.wgp-qchip.is-upper[aria-pressed=true]::after { content: ' · ' attr(data-less); font-size: 11px; opacity: .85; }
.wgp .wgp-upto { font-size: .62em; font-weight: 500; color: var(--wgp-muted); }
/* Phones: the bar never grows past --wgp-bar. The price stays on one line ("up to" set smaller beside it, dropped
   on the narrowest phones: it is in the breakdown and the pay section), one line under it says what is paid now
   (cut short with an ellipsis if it must), and the order button keeps its size. */
@media (max-width: 1024px) {
  .wgp-bar__r, .wgp-bar__p { min-width: 0; }
  .wgp-bar__p .pr { max-width: 100%; white-space: nowrap; }
  .wgp-bar__p .pr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .wgp-bar__p .wgp-upto { font-size: .55em; }
  .wgp-bar__p .cap:has(~ .cap--pay:not([hidden])) { display: none; }
  .wgp-bar__p .cap--pay { overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
  .wgp .wgp-bar__order { width: auto; flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 400px) {
  .wgp-bar__r { gap: 12px; padding: 0 12px 0 16px; }
  .wgp-bar__p .pr { font-size: 18px; }
  .wgp .wgp-bar__order { padding: 0 16px; }
}
@media (max-width: 340px) {
  .wgp-bar__p .wgp-upto { display: none; }
}
/* Section headings are h2 (screen readers jump between them) in the column's own type, the theme's h2 reset. */
.wgp h2.wgp-sec__h { margin: 0 0 4px; line-height: 1.25; }
.wgp .wgp-sec__h > h2 { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; line-height: 1.25; }
.wgp .wgp-linkbtn { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--wgp-ink); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.wgp .wgp-linkbtn[hidden] { display: none; }
/* Quantity: the minimum charge or why the entry is not a quantity, right under the box. */
.wgp-qtynote { color: var(--wgp-ink); margin-top: 8px; }
.wgp-qtynote[hidden] { display: none; }
.wgp-qty input[aria-invalid=true] { box-shadow: inset 0 0 0 2px var(--wgp-late); }
.wgp [data-wgp=date].is-checking { color: var(--wgp-muted); }
/* Save official quote: what it takes, and the next step, without leaving the page. */
.wgp-gate { margin-top: 12px; padding: 16px; border-radius: 12px; background: var(--wgp-sand); font-size: 14px; }
.wgp-gate[hidden], .wgp .wgp-gate [hidden] { display: none; }
.wgp-gate__t { margin: 0; line-height: 1.5; color: var(--wgp-ink); }
.wgp .wgp-gate .wgp-btn { text-decoration: none; }
.wgp .wgp-gate .wgp-linkbtn { display: block; margin-top: 12px; font-size: 13px; text-align: left; }
.wgp-gate__note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--wgp-accent); font-weight: 500; }
/* Full screen: the page's photo stands in, dimmed, until the big one has arrived. */
.wgp-lightbox__img.is-loading img { opacity: .45; }
.wgp-lightbox__img.is-loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 3px solid rgba(22, 22, 22, .15); border-top-color: #161616; animation: wgp-spin .8s linear infinite; }
@keyframes wgp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wgp-lightbox__img.is-loading::after { animation-duration: 2.4s; } }
/* Prices in the display face at its own weight, as the shop's cards and search set them (finder.css .wg-pcard__p):
   the stats, the order total and arrival rows, and the bar's total. The units beside a stat stay in the text face. */
.wgp .wgp-stat .n, .wgp .wgp-payrow, .wgp .wgp-bar__p .pr { font-family: var(--wp--preset--font-family--display, serif); font-weight: 450; }
.wgp .wgp-stat .n small { font-family: var(--wp--preset--font-family--body, sans-serif); font-weight: 400; color: var(--wgp-muted); }
/* The free request panel (ProductPage::leadPanel): the exact price above a partial book's listed quantity, an option
   our team prices, a date to check, a question. A white card in the section it opens in, its fields labelled above. */
.wgp-lead { position: relative; margin-top: 14px; padding: 16px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--wgp-line); font-size: 14px; }
.wgp-lead[hidden], .wgp .wgp-lead [hidden] { display: none; }
.wgp-pay .wgp-lead { background: var(--wgp-sand); box-shadow: none; }
.wgp-lead__h { margin: 0; font-family: var(--wp--preset--font-family--display, serif); font-size: 20px; font-weight: 450; letter-spacing: -.01em; line-height: 1.25; color: var(--wgp-ink); }
.wgp-lead__h:focus { outline: none; }
.wgp-lead__p { margin: 6px 0 4px; color: var(--wgp-text); line-height: 1.45; }
.wgp-lead__f { display: grid; gap: 4px; margin-top: 10px; }
.wgp-lead__f label { font-size: 13px; font-weight: 500; color: var(--wgp-ink); }
.wgp-lead__f input, .wgp-lead__f textarea { width: 100%; min-height: 44px; border: 0; border-radius: 12px; padding: 10px 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--wg-field, #857d72); font: inherit; font-size: 16px; color: var(--wgp-ink); }
.wgp-lead__f textarea { resize: vertical; min-height: 64px; line-height: 1.4; }
.wgp-lead__f input:focus, .wgp-lead__f textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--wgp-ink); }
/* A field the panel's error points at keeps the error colour while it has focus (where the buyer fixes it); the focus
   ring goes outside it. */
.wgp-lead__f [aria-invalid=true], .wgp-lead__f input:focus[aria-invalid=true], .wgp-lead__f textarea:focus[aria-invalid=true] { box-shadow: inset 0 0 0 2px var(--wgp-late); }
.wgp-lead__f input:focus[aria-invalid=true], .wgp-lead__f textarea:focus[aria-invalid=true] { outline: 2px solid var(--wg-focus, var(--wgp-ink)); outline-offset: 2px; }
/* Off screen, out of the tab order and hidden from screen readers: only a bot fills it in. */
.wgp-lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wgp-lead__status { color: var(--wgp-ink); font-size: 13px; line-height: 1.45; }
.wgp-lead__status.is-bad { color: var(--wgp-late); }
/* "Get my exact 200-pc price" under the total while the panel holds a question the buyer has typed. */
.wgp .wgp-exact { display: block; margin: 2px 0 4px auto; min-height: 44px; font-size: 14px; }
.wgp .wgp-exact[hidden] { display: none; }
.wgp-lead__status:empty { display: none; }
.wgp-lead__privacy a { color: var(--wgp-text); }
/* Desktop: the photo's controls in a strip under it, never on it (the arrows, the Photos | Your logo switch and the
   full-screen button), as on phones; the thumbnails down the left are the pager, so no dots. The panel ends at the
   bottom bar at every scroll position: --wgp-head is how much of the page above the form is still on screen (the site's
   header, until it scrolls away), kept up to date by product-page.js. Its default is the header's height (tokens.css
   --wg-header-h), so the first paint already has the final layout and nothing moves when the script runs; no height
   transition, or the panel would trail the scroll. */
@media (min-width: 1025px) {
  .wgp { --wgp-head: var(--wg-header-h, 70px); }
  .wgp-media__in { height: calc(100vh - var(--wgp-bar) - var(--wgp-head)); transition: none; }
  body.wgp-bar-hidden .wgp-media__in { height: calc(100vh - var(--wgp-head)); }
  .wgp-stage { inset: 0 0 64px 0; }
  .wgp-pager, .wgp-media.is-logo .wgp-pager { top: auto; bottom: 12px; left: 96px; right: 96px; }
  .wgp-media.is-logo .wgp-pager { left: 20px; right: auto; }
  .wgp .wgp-zoom { top: auto; bottom: 12px; }
  .wgp-media:has(.wgp-thumbs) .wgp-dots { display: none; }
  .wgp-thumbs { top: calc(50% - 32px); max-height: calc(100% - 180px); }
}
/* Too late for the buyer's date: the arrival in the warning colour, the main button to gifts that make it, ORDER NOW
   outlined (product-page.js setLate), "Tell us your date" and the shop's search under the faster options. */
.wgp .wgp-btn[hidden] { display: none; }
.wgp a.wgp-btn { text-decoration: none; }
.wgp-payrow--date.is-late span:last-child { color: var(--wgp-late); }
.wgp .wgp-faster__tell { flex-basis: 100%; text-align: left; font-size: 13px; }
/* A person is always reachable, under ORDER NOW. */
.wgp-contact { font-size: 13px; color: var(--wgp-text); margin-top: 10px; }
.wgp-contact a { color: var(--wgp-ink); font-weight: 500; text-underline-offset: 2px; }
.wgp .wgp-contact .wgp-linkbtn { font-size: 13px; }
/* Breadcrumb above the name: Shop › Bags › Tote Bag (CategoryPath::primary). */
.wgp-crumbs { margin: 24px 0 0; font-size: 13px; color: var(--wgp-muted); text-align: center; }
.wgp-crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; margin: 0; padding: 0; list-style: none; }
.wgp-crumbs li + li::before { content: '›'; margin: 0 8px; color: var(--wgp-muted); }
.wgp-crumbs a { color: var(--wgp-text); text-decoration: none; }
.wgp-crumbs a:hover { text-decoration: underline; text-underline-offset: 2px; }
.wgp-crumbs + .wgp-h1 { margin-top: 8px; }
/* Kit mode (kit spec 3.3, product-page.js): which gift of which kit is being set up, and the way back. One quantity
   for the whole kit (the box read-only, no chips), and nothing about this gift alone (quote, sample, estimate email). */
.wgp-kitbar { margin: 24px 0 0; padding: 12px 16px; border-radius: var(--wg-radius, 12px); background: var(--wgp-sand); box-shadow: inset 0 0 0 1px var(--wgp-line); font-size: 14px; line-height: 1.45; color: var(--wgp-ink); text-align: center; text-wrap: balance; }
.wgp-kitbar[hidden] { display: none; }
.wgp-kitbar a { color: var(--wgp-accent); font-weight: 600; white-space: nowrap; text-underline-offset: 2px; }
.wgp-kitbar:not([hidden]) ~ .wgp-crumbs { margin-top: 12px; }
.wgp.is-kit .wgp-chips--qty, .wgp.is-kit [data-wgp=minimumFix], .wgp.is-kit [data-wgp=quote], .wgp.is-kit [data-wgp=quoteCap],
.wgp.is-kit .wgp-gate, .wgp.is-kit .wgp-sample, .wgp.is-kit .wgp-email { display: none !important; }
.wgp.is-kit #wg-qty[readonly] { background: var(--wgp-sand); cursor: default; }
/* The shortlist's button (lane B): hidden until shortlist.css gives it a display (zero specificity, so any rule wins). */
:where(.wgp-save) { display: none; }
/* Similar gifts under "Your order": the shop's cards (finder.css .wg-pcard), in a row of four on desktop, swiped on phones. */
.wgp:has(+ .wgp-similar) .wgp-rail { padding-bottom: 32px; }
.wgp-similar { margin: 0 auto; padding: 32px var(--wgp-gutter, 48px) 120px; max-width: 1440px; border-top: 1px solid var(--wg-line, #e9d9c2); }
.wgp-similar__h { margin: 0 0 16px; font-family: var(--wp--preset--font-family--display, serif); font-weight: 450; font-size: 28px; letter-spacing: -.02em; color: var(--wg-ink, #161616); }
.wgp-similar .wgp-similar__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1024px) {
  .wgp-similar { padding: 24px 0 100px; }
  .wgp-similar__h { padding: 0 12px; font-size: 24px; }
  /* scroll-padding: cards snap 12px in from the edge, in line with the heading, not flush against the screen. */
  .wgp-similar .wgp-similar__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; gap: 12px; padding: 0 12px 8px; scrollbar-width: none; }
  .wgp-similar .wgp-similar__grid::-webkit-scrollbar { display: none; }
  .wgp-similar .wgp-similar__grid > li { flex: 0 0 min(62vw, 240px); scroll-snap-align: start; }
}
/* What keeps the date (booking-fee checkout): three steps down a thin line, under the arrival date. */
.wgp-steps { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--wgp-line); font-size: 13px; line-height: 1.45; color: var(--wgp-text); }
.wgp-steps[hidden] { display: none; }
.wgp-steps li { position: relative; padding: 2px 0 6px; }
.wgp-steps li::before { content: ''; position: absolute; left: -19px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--wgp-paper); box-shadow: inset 0 0 0 2px var(--wgp-accent); }
.wgp-steps strong { font-weight: 600; color: var(--wgp-ink); }
/* The next festival this gift can make, and the need-by date in words. */
.wgp-festive { font-size: 13px; color: var(--wgp-ink); margin-top: 10px; }
.wgp-festive[hidden] { display: none; }
.wgp-needby__day { font-weight: 400; color: var(--wgp-muted); font-size: 14px; }
.wgp-needby__day:empty { display: none; }
.wgp .wgp-qchip--more { background: transparent; box-shadow: inset 0 0 0 1px var(--wgp-ink); font-weight: 500; }
.wgp .wgp-qchip--more:hover { background: var(--wgp-ink); color: var(--wgp-paper); }