/* writtengift designer. Fills its container (the product page's photo area); tokens from the theme. */
.wg-config__designer { --d-ink: var(--wg-ink, #161616); --d-muted: var(--wg-muted, #5f5b55); --d-line: var(--wg-line, #e9d9c2); --d-paper: var(--wp--preset--color--paper, #fcf8f2); --d-sand: var(--wg-surface-2, #f2ebe0); --d-accent: var(--wg-accent, #0a5844);
  display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 420px; color: var(--d-ink); font-size: 14px; }
.wg-config__designer.is-drag .wgd-stage { outline: 2px dashed var(--d-accent); outline-offset: -8px; }
.wgd-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.wgd-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--d-sand); }
.wgd-tabs button { border: 0; background: transparent; height: 30px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.wgd-tabs button[aria-selected=true] { background: var(--d-ink); color: var(--d-paper); }
.wgd-tabs[hidden], .wgd-tabs button[hidden] { display: none; }
.wgd-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.wg-config__designer .wgd-tool { display: inline-flex; align-items: center; gap: 6px; height: var(--wg-chip-h, 36px); padding: 0 12px; border: 1px solid var(--d-line); border-radius: 999px; background: #fff; color: var(--d-ink); font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.wg-config__designer .wgd-tool:hover:not(:disabled) { border-color: var(--d-ink); }
.wg-config__designer .wgd-tool:disabled { opacity: .4; cursor: default; }
.wg-config__designer .wgd-tool--primary { background: var(--d-ink); border-color: var(--d-ink); color: var(--d-paper); }
@media (max-width: 1280px) { .wgd-tool:not(.wgd-tool--primary) span { display: none; } .wg-config__designer .wgd-tool:not(.wgd-tool--primary) { width: var(--wg-chip-h, 36px); padding: 0; justify-content: center; } }
.wgd-stage { position: relative; flex: 1 1 auto; min-height: 280px; display: grid; place-items: center; border-radius: 16px; background: #fff; overflow: hidden; }
.wgd-stage .canvas-container { margin: auto; }
/* The print area over the canvas (outline and dimming are drawn on the canvas): its size label and, while it
   is empty, the upload prompt inside it. data-fit: full (roomy), compact, or tag (prompt under a small area). */
.wgd-area { position: absolute; pointer-events: none; z-index: 2; }
.wgd-area__l { position: absolute; left: -2px; bottom: calc(100% + 6px); padding: 3px 9px; border-radius: 999px; background: var(--d-accent); color: #fff; font-size: 12px; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgba(22, 22, 22, .12); }
.wgd-area.is-top .wgd-area__l { bottom: auto; top: 6px; left: 6px; }
/* Near the canvas's right side the label ends at the area's right edge (designer.js drawArea). */
.wgd-area.is-right .wgd-area__l { left: auto; right: -2px; }
.wgd-area.is-top.is-right .wgd-area__l { left: auto; right: 6px; }
/* A small area with a design in it: the label moves under it, clear of the rotate handle above the logo. */
.wgd-area[data-fit=tag]:has(.wgd-drop[hidden]) .wgd-area__l { bottom: auto; top: calc(100% + 8px); }
.wgd-area.is-low[data-fit=tag]:has(.wgd-drop[hidden]) .wgd-area__l { top: auto; bottom: calc(100% + 6px); }
.wg-config__designer .wgd-drop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; align-content: center; justify-items: center; gap: 3px; width: max-content; max-width: calc(100% - 12px); padding: 10px 12px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 16px rgba(22, 22, 22, .12); color: var(--d-ink); font: inherit; line-height: 1.3; text-align: center; text-transform: none; letter-spacing: 0; cursor: pointer; pointer-events: auto; }
.wg-config__designer .wgd-drop:hover { background: #fff; box-shadow: 0 6px 20px rgba(22, 22, 22, .18); }
.wg-config__designer .wgd-drop:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 2px; }
.wgd-drop[hidden] { display: none !important; }
.wgd-drop strong { font-size: 15px; font-weight: 500; }
.wgd-drop span { font-size: 12px; color: var(--d-muted); }
.wgd-drop .wgd-drop__here { font-size: 13px; color: var(--d-ink); }
.wgd-drop .wgd-drop__i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--d-accent); color: #fff; margin-bottom: 2px; }
.wgd-area[data-fit=compact] .wgd-drop__t, .wgd-area[data-fit=compact] .wgd-drop__more, .wgd-area[data-fit=tag] .wgd-drop__more, .wgd-area[data-fit=tag] .wgd-drop__t { display: none; }
.wgd-area[data-fit=compact] .wgd-drop__i { width: 30px; height: 30px; }
/* A small area (a pen barrel, a strap): the prompt is a tag just under it. */
.wg-config__designer .wgd-area[data-fit=tag] .wgd-drop { inset: auto; left: 50%; top: calc(100% + 8px); transform: translateX(calc(-50% + var(--tag-shift, 0px))); width: max-content; max-width: 240px; grid-auto-flow: column; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; box-shadow: 0 4px 16px rgba(22, 22, 22, .14); }
.wg-config__designer .wgd-area.is-low[data-fit=tag] .wgd-drop { top: auto; bottom: calc(100% + 40px); }
.wgd-area[data-fit=tag] .wgd-drop__i { width: 26px; height: 26px; margin: 0; }
.wgd-area[data-fit=tag] .wgd-drop__i svg { width: 15px; height: 15px; }
.wgd-size { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: var(--d-ink); color: var(--d-paper); font-size: 12px; font-variant-numeric: tabular-nums; }
.wgd-size[hidden] { display: none; }
.wgd-bottom { display: grid; gap: 10px; }
.wgd-panel { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--d-line); }
.wgd-panel[hidden] { display: none; }
.wgd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wgd-row__l { font-size: 12px; color: var(--d-muted); min-width: 56px; }
/* Fields at 16px: iOS Safari zooms the page into a field under 16px when it is focused, taking the canvas off screen. */
.wgd-in { flex: 1 1 180px; height: 38px; padding: 0 12px; border: 1px solid var(--d-line); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; color: var(--d-ink); min-width: 0; }
.wgd-in--sel { flex: 0 1 180px; }
.wg-config__designer .wgd-chip { width: var(--wg-chip-h, 36px); height: var(--wg-chip-h, 36px); border: 1px solid var(--d-line); border-radius: 10px; background: #fff; color: var(--d-ink); font: inherit; font-size: 15px; cursor: pointer; padding: 0; text-transform: none; }
.wg-config__designer .wgd-chip.is-on { background: var(--d-ink); color: var(--d-paper); border-color: var(--d-ink); }
.wgd-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.wg-config__designer .wgd-sw { width: 28px; height: 28px; padding: 0; border-radius: 999px; border: 1px solid rgba(22, 22, 22, .2); background: var(--c); cursor: pointer; position: relative; }
.wg-config__designer .wgd-sw.is-on { box-shadow: 0 0 0 2px var(--d-paper), 0 0 0 4px var(--d-ink); }
.wg-config__designer .wgd-sw--pick { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); overflow: hidden; display: inline-block; }
.wgd-sw--pick input { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
/* Size: the printed width in mm, by keyboard or finger. */
.wgd-range { flex: 1 1 160px; min-width: 0; height: 28px; margin: 0; accent-color: var(--d-accent); }
.wgd-row__v { min-width: 52px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.wgd-keys { font-size: 12px; }
@media (hover: none) { .wgd-keys { display: none; } }
.wgd-toggle { cursor: pointer; font-size: 13px; }
.wgd-toggle input { width: 18px; height: 18px; accent-color: var(--d-accent); }
.wgd-note { margin: 0; font-size: 13px; color: var(--d-muted); }
.wgd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.wgd-status { flex: 1 1 260px; display: grid; gap: 4px; min-width: 0; }
.wgd-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; }
.wgd-verdict strong { font-weight: 600; }
.wgd-verdict span { color: var(--d-muted); font-variant-numeric: tabular-nums; }
.wgd-verdict[data-state=print_ready] strong::before { content: '✓ '; color: var(--d-accent); }
.wgd-verdict[data-state=auto_fixable] strong::before { content: '● '; color: var(--wg-risk, #8a5a00); }
.wgd-verdict[data-state=fix_needed] strong::before { content: '! '; color: var(--wg-late, #a3361f); }
.wgd-hint { margin: 0; font-size: 12.5px; color: var(--d-muted); }
/* Low contrast (designer.js contrastHint): the logo prints but is hard to see on the product; one tap fixes it. */
.wgd-verdict[data-contrast=low] strong::before { content: '● '; color: var(--wg-risk, #8a5a00); }
.wgd-contrast { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border-radius: 10px; background: #fbf0dc; }
.wgd-contrast .wgd-hint { flex: 1 1 100%; color: var(--d-ink); }
.wg-config__designer .wgd-contrast .wgd-chip { width: auto; height: auto; min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; }
.wg-config__designer .wgd-chip--ink::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 999px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(22, 22, 22, .35); vertical-align: -1px; }
/* Nothing placed yet (designer.js syncEmpty): proof and sign-off are outlined and say what to do first. */
.wg-config__designer .wgd-btn[aria-disabled=true]:not(:disabled) { opacity: .8; }
.wgd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wgd-review { flex: 1 0 100%; margin: 0; font-size: 13px; color: var(--d-ink); }
.wgd-review::before { content: '✓ '; color: var(--d-accent); }
.wgd-review a { color: var(--d-accent); white-space: nowrap; }
/* The theme's button scale, compact (tokens.css --wg-btn-*: 44px, a comfortable tap target; 15px, weight 400, .02em). */
.wg-config__designer .wgd-btn { min-height: var(--wg-btn-h-sm, 44px); padding: 0 var(--wg-btn-pad-sm, 18px); border-radius: var(--wg-btn-radius, 999px); border: 1px solid var(--d-ink); background: transparent; color: var(--d-ink); font: inherit; font-size: var(--wg-btn-font, .9375rem); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
.wg-config__designer .wgd-btn--dark { background: var(--d-ink); color: var(--d-paper); }
.wg-config__designer .wgd-btn:disabled { opacity: .6; cursor: default; }
.wgd-render:empty { display: none; }
/* Desktop, wide enough (designer.js sets .is-wide at 700px or more): the edit panel, the logo check and the proof
   buttons share a column beside the product, so the canvas keeps its size (about 590px at 1440 x 900) when
   something is selected. Narrower desktop windows keep them below, with the canvas at least 420px tall (the
   photo area scrolls). */
@media (min-width: 1025px) {
  .wg-config__designer:not(.is-wide) .wgd-stage { min-height: 420px; flex-shrink: 0; }
  .wg-config__designer.is-wide { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 32%, 300px); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 16px; row-gap: 12px; }
  .wg-config__designer.is-wide .wgd-top { grid-column: 1 / -1; }
  .wg-config__designer.is-wide .wgd-stage { grid-column: 1; grid-row: 2 / 4; min-height: 0; }
  .wg-config__designer.is-wide .wgd-bottom { grid-column: 2; grid-row: 2; align-self: start; align-content: start; max-height: 100%; overflow: auto; }
  .wg-config__designer.is-wide .wgd-render { grid-column: 2; grid-row: 3; }
  .wg-config__designer.is-wide .wgd-foot { flex-direction: column; align-items: stretch; }
  .wg-config__designer.is-wide .wgd-status { flex: none; }
  .wg-config__designer.is-wide .wgd-actions { flex-direction: column; }
  .wg-config__designer.is-wide .wgd-range { flex-basis: 90px; }
  .wg-config__designer.is-wide .wgd-in--sel { flex: 1 1 120px; }
}
/* Phones and tablets: the designer sits in the page (product-page.css), so it is as tall as what it holds: a
   square photo as wide as the screen, the proof buttons sharing a row. Every tool stays on screen (there is no
   Delete key on a phone): the tools share a row with the area tabs while both fit, else take the next row, and
   on a narrow phone they are smaller so they still fit in one; narrower still, they wrap. */
@media (max-width: 1024px) {
  .wg-config__designer { height: auto; min-height: 0; }
  .wgd-stage { flex: none; width: 100%; aspect-ratio: 1; min-height: 0; max-height: 78vh; }
  .wg-config__designer .wgd-tool { flex: none; }
  .wgd-actions { width: 100%; }
  .wg-config__designer .wgd-actions .wgd-btn { flex: 1 1 140px; padding: 0 12px; white-space: nowrap; }
}
@media (max-width: 480px) { .wgd-tabs { max-width: 100%; overflow-x: auto; } }
@media (max-width: 389px) {
  .wgd-toolbar { gap: 2px; }
  .wg-config__designer .wgd-tool:not(.wgd-tool--primary) { width: 32px; height: 32px; }
  .wg-config__designer .wgd-tool--primary { height: 32px; padding: 0 10px; }
}
/* The narrowest phones: "Upload logo" becomes its icon too (its name stays as the button's label). */
@media (max-width: 352px) {
  .wgd-tool--primary span { display: none; }
  .wg-config__designer .wgd-tool--primary { width: 32px; padding: 0; justify-content: center; }
}
/* Touch screens and phones: every tool and swatch takes a finger at 44px or more while looking the same: an invisible
   area around each (its ::after, laid out inside the 1px border), 46px across, so 22px from the centre in any
   direction is still that control: a 36px tool's reaches 6px past its border, a 28px swatch's 10px, the 32px tools
   of the narrowest phones 8px. Controls sit 46px apart, centre to centre, so one control's area never lies under its
   neighbour's; on a phone "Upload logo" shows its icon only to make that room (its name stays its label, and the
   empty print area says it in words). */
@media (pointer: coarse), (max-width: 700px) {
  .wgd-toolbar { gap: 10px; }
  .wg-config__designer .wgd-tool { position: relative; }
  .wg-config__designer .wgd-tool::after { content: ''; position: absolute; inset: -6px; border-radius: 999px; }
  .wgd-swatches { gap: 18px; }
  .wg-config__designer .wgd-sw::after { content: ''; position: absolute; inset: -10px; border-radius: 999px; }
  .wg-config__designer .wgd-sw--pick { overflow: visible; }
  .wgd-sw--pick input { inset: -10px; width: auto; height: auto; }
  .wg-config__designer .wgd-contrast .wgd-chip { min-height: 44px; }
}
@media (max-width: 480px) {
  .wgd-tool--primary span { display: none; }
  .wg-config__designer .wgd-tool--primary { width: var(--wg-chip-h, 36px); padding: 0; justify-content: center; }
}
@media (max-width: 389px) {
  .wgd-toolbar { gap: 14px; }
  .wg-config__designer .wgd-tool::after { inset: -8px; }
  .wg-config__designer .wgd-tool--primary { width: 32px; }
}
/* Sign-off: status pill under the actions (its own class: .wgd-chip is the Bold and Italic toggles), and the
   request dialog (appended to <body>, so it sets its own tokens). */
.wgd-signoff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wgd-signoff[hidden] { display: none; }
.wgd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--d-sand); font-size: 13px; }
.wgd-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--wg-risk, #8a5a00); }
.wgd-pill[data-state=approved]::before { background: var(--d-accent); }
.wgd-pill[data-state=changes]::before { background: var(--wg-late, #a3361f); }
.wgd-pill[data-state=expired]::before { background: var(--d-muted); }
.wgd-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--d-accent, #0a5844); text-decoration: underline; cursor: pointer; }
.wgd-dialog { --d-ink: var(--wg-ink, #161616); --d-muted: var(--wg-muted, #5f5b55); --d-line: var(--wg-line, #e9d9c2); --d-paper: var(--wp--preset--color--paper, #fcf8f2); --d-sand: var(--wg-surface-2, #f2ebe0); --d-accent: var(--wg-accent, #0a5844);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--wg-radius-lg, 16px); background: var(--d-paper); color: var(--d-ink); box-shadow: 0 30px 80px rgb(0 0 0 / .25); }
.wgd-dialog::backdrop { background: rgb(22 22 22 / .45); }
.wgd-dialog [hidden] { display: none; }
.wgd-dialog__form { display: grid; gap: 12px; padding: 24px; font-size: 14px; }
.wgd-dialog h2 { margin: 0; font-family: var(--wp--preset--font-family--display, serif); font-weight: 450; font-size: 26px; letter-spacing: -.02em; }
.wgd-dialog label { display: grid; gap: 4px; font-size: 13px; }
.wgd-dialog label > span { font-weight: 600; }
.wgd-dialog input, .wgd-dialog select, .wgd-dialog textarea { font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--d-line); border-radius: 10px; background: #fff; color: var(--d-ink); width: 100%; box-sizing: border-box; }
.wgd-approvers { display: grid; gap: 12px; }
.wgd-approver { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin: 0; padding: 12px; border: 1px solid var(--d-line); border-radius: 12px; }
.wgd-approver legend { padding: 0 4px; font-size: 12px; color: var(--d-muted); }
.wgd-approver label:last-child { grid-column: 1 / -1; }
.wgd-me { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wgd-dialog__err:empty { display: none; }
.wgd-dialog__err { color: var(--wg-late, #a3361f); }
.wgd-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; }
.wgd-dialog .wgd-btn { min-height: var(--wg-btn-h-sm, 44px); padding: 0 var(--wg-btn-pad-sm, 18px); border-radius: var(--wg-btn-radius, 999px); border: 1px solid var(--d-ink); background: transparent; color: var(--d-ink); font: inherit; font-size: var(--wg-btn-font, .9375rem); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
.wgd-dialog .wgd-btn--dark { background: var(--d-ink); color: var(--d-paper); }
.wgd-dialog .wgd-btn:disabled { opacity: .6; }
@media (max-width: 520px) { .wgd-approver, .wgd-me { grid-template-columns: 1fr; } .wgd-dialog__form { padding: 16px; } }
.wgd-render img { width: 100%; border-radius: 16px; }

/* Looks on the product page: cards in a row you can swipe, or step through with the arrows (designer-loader.js
   shows them while there are more cards than fit). */
.wgp-looks { position: relative; }
.wgp-looks__nav { position: absolute; top: 14px; right: 16px; display: flex; gap: 6px; }
.wgp-looks__nav[hidden] { display: none; }
.wgp-looks:has(.wgp-looks__nav:not([hidden])) .wgp-sec__h { padding-right: 84px; }
.wgp .wgp-looks__arrow { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--wg-line, #e9d9c2); border-radius: 999px; background: #fff; color: var(--wg-ink, #161616); cursor: pointer; }
.wgp .wgp-looks__arrow:hover:not(:disabled) { border-color: var(--wg-ink, #161616); }
.wgp .wgp-looks__arrow:disabled { opacity: .35; cursor: default; }
/* scroll-padding-inline: the row's own side padding, so a card scrolled into view (a Tab to it, designer-loader.js)
   stops where its focus ring shows whole, not cut at the row's edge. */
.wgp-looks__row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none; margin: 12px -4px 0; padding: 4px; }
/* Phones: snapping only near a card, so the browser can bring a focused card fully into view. */
@media (max-width: 600px) { .wgp-looks__row { scroll-snap-type: x proximity; } }
.wgp-looks__row::-webkit-scrollbar { display: none; }
/* Each card's listitem wrapper (designer-loader.js card()) is the row's flex and snap item; the card fills it. */
.wgp-looks__item { flex: 0 0 168px; scroll-snap-align: start; display: flex; }
.wgp .wgp-look { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 0 12px; border: 1px solid var(--wg-line, #e9d9c2); border-radius: 14px; background: #fff; text-align: left; cursor: pointer; overflow: hidden; font: inherit; color: var(--wg-ink, #161616); text-transform: none; letter-spacing: 0; }
.wgp .wgp-look:hover { border-color: var(--wg-ink, #161616); }
.wgp .wgp-look.is-on { border-color: var(--wg-accent, #0a5844); box-shadow: 0 0 0 1px var(--wg-accent, #0a5844); }
.wgp-look__img { position: relative; display: block; width: 100%; aspect-ratio: 1; background: #fff; overflow: hidden; margin-bottom: 6px; }
/* The view: the photo and its print area, zoomed onto the area (designer-loader.js viewOf). */
.wgp-look__view { position: absolute; display: block; }
.wgp-look__view > img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The print area on the card's photo; the mark is placed inside it the way the designer places the look. */
.wgp-look__zone { position: absolute; overflow: hidden; pointer-events: none; }
.wgp-look__mark { position: absolute; transform: translateY(-50%); object-fit: contain; pointer-events: none; }
.wgp-look__mark--ink { -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.wgp-look__line { position: absolute; left: 0; right: 0; text-align: center; font-size: 9px; line-height: 1.1; letter-spacing: .02em; color: #161616; transform: translateY(-50%); white-space: nowrap; }
.wgp-look__kind { margin: 0 12px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--wg-muted, #5f5b55); }
.wgp-look__t { margin: 0 12px; font-size: 14px; font-weight: 500; line-height: 1.25; }
.wgp-look__n { margin: 0 12px; font-size: 12px; line-height: 1.35; color: var(--wg-muted, #5f5b55); }
/* PS-3: the logo as uploaded is hard to see on this product (the designer's low-contrast mark, same colour). */
.wgp-look__warn { margin: 2px 12px 0; font-size: 12px; line-height: 1.35; color: var(--wg-risk, #8a5a00); }
.wgp-look__warn::before { content: '● '; }
.wgp-look__p { margin: 2px 12px 0; padding: 2px 8px; border-radius: 999px; background: var(--wg-surface-2, #f2ebe0); font-size: 11px; }
.wgp-look__go { margin: 6px 12px 0; font-size: 13px; font-weight: 500; color: var(--wg-accent, #0a5844); }
.wgp-look__go::after { content: ' →'; }