/* writtengift finder: header search, search popover, shop grid. Tokens from the theme (--wg-*). */
.wg-find-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--wg-ink, #161616); font: inherit; font-size: 14px; cursor: pointer; }
.wg-find-btn:hover { background: rgba(22, 22, 22, .06); }
.wg-find-btn__t, .wg-find-btn kbd { display: none; }
@media (min-width: 1100px) {
  .wg-find-btn { width: 220px; padding: 0 12px 0 14px; background: var(--wg-surface-2, #f2ebe0); color: var(--wg-muted, #5f5b55); }
  .wg-find-btn:hover { background: #ebe2d4; }
  .wg-find-btn__t { display: inline; flex: 1; text-align: left; }
  .wg-find-btn kbd { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--wg-line, #e9d9c2); font: 12px/1 inherit; color: var(--wg-muted, #5f5b55); }
}

/* Popover: a sheet under the header. */
.wg-find[popover] { position: fixed; inset: 72px auto auto 50%; transform: translateX(-50%); width: min(720px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - 96px)); margin: 0; padding: 0; border: 0; border-radius: 16px; background: var(--wp--preset--color--paper, #fcf8f2); color: var(--wg-ink, #161616); box-shadow: 0 24px 64px rgba(22, 22, 22, .22); overflow: hidden; display: none; flex-direction: column; }
.wg-find[popover]:popover-open { display: flex; }
.wg-find::backdrop { background: rgba(22, 22, 22, .28); }
.wg-find__bar { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--wg-line, #e9d9c2); }
.wg-find__q { flex: 1; height: 60px; border: 0; background: transparent; font: inherit; font-size: 18px; color: inherit; outline: none; min-width: 0; }
.wg-find__q::-webkit-search-cancel-button { display: none; }
.wg-find__x { width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; }
.wg-find__x:hover { background: rgba(22, 22, 22, .06); }
.wg-find__chips:not(:empty) { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; }
.wg-find__body { overflow-y: auto; padding: 8px; }
.wg-find__row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; padding: 8px; border-radius: 12px; color: inherit; text-decoration: none; }
.wg-find__row:hover, .wg-find__row:focus-visible { background: var(--wg-surface-2, #f2ebe0); }
/* Keyboard focus is a ring, not only the faint background (inset: the list scrolls and clips outside). */
.wg-find__row:focus-visible, .wg-find__all:focus-visible, .wg-find .wg-cat:focus-visible { outline: 2px solid var(--wg-accent, #0a5844); outline-offset: -2px; }
.wg-find__row img, .wg-find__row .wg-card__ph { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; background: #fff; }
.wg-find__n { font-size: 15px; line-height: 1.3; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wg-find__n small, .wg-find__p small { font-size: 12px; color: var(--wg-muted, #5f5b55); }
.wg-find__p { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wg-find__p strong { font-family: var(--wp--preset--font-family--display, serif); font-weight: 450; font-size: 17px; }
/* "or less" under a partial book's price above its quantity, as on the shop's cards (.wg-pcard__less). */
.wg-find__less { color: var(--wg-ink, #161616); }
.wg-find__all { display: block; margin: 6px 8px 8px; padding: 12px; border-radius: 999px; background: var(--wg-ink, #161616); color: var(--wp--preset--color--paper, #fcf8f2); text-align: center; text-decoration: none; font-size: 14px; letter-spacing: .02em; }
.wg-find__note { margin: 8px 10px; color: var(--wg-muted, #5f5b55); font-size: 14px; }
.wg-find__cats { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; }
.wg-find__empty { padding: 8px 10px 12px; color: var(--wg-muted, #5f5b55); font-size: 14px; }
.wg-find__empty p { margin: 0 0 10px; }
/* Phones: one line of category under a name of at most two lines, so more results fit above "See all". */
@media (max-width: 600px) {
  .wg-find__row { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 6px; }
  .wg-find__row img, .wg-find__row .wg-card__ph { width: 48px; height: 48px; }
  .wg-find__n { font-size: 14px; }
  .wg-find__n > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .wg-find__n small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wg-find__all { position: sticky; bottom: 0; margin: 6px 0 0; }
}

/* Chips shared by the popover and the shop. */
.wg-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--wg-chip-h, 36px); padding: 0 10px 0 12px; border: 0; border-radius: 999px; background: var(--wg-accent, #0a5844); color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.wg-chip span { font-size: 16px; line-height: 1; opacity: .8; }
.wg-cat { display: inline-flex; align-items: center; height: var(--wg-chip-h, 36px); padding: 0 14px; border-radius: 999px; border: 1px solid var(--wg-line, #e9d9c2); background: #fff; color: var(--wg-ink, #161616); font: inherit; font-size: 14px; white-space: nowrap; text-decoration: none; cursor: pointer; }
.wg-cat:hover { border-color: var(--wg-ink, #161616); }
.wg-cat.is-on { background: var(--wg-ink, #161616); border-color: var(--wg-ink, #161616); color: var(--wp--preset--color--paper, #fcf8f2); }

/* Shop and category pages. */
.wg-shop { max-width: 1280px; margin: 0 auto; padding: 40px 0 96px; }
.wg-shop__head { text-align: center; max-width: 760px; margin: 0 auto; }
.wg-shop__h { font-family: var(--wp--preset--font-family--display, serif); font-weight: 450; font-size: clamp(36px, 5vw, 56px); letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.wg-shop__sub { color: var(--wg-muted, #5f5b55); margin: 12px 0 24px; font-size: 16px; }
/* A category's or occasion tag's own words (or its gifts' facts) under the heading, then the line on how to search. */
.wg-shop__intro { max-width: 62ch; margin: 12px auto 0; color: var(--wg-ink, #161616); font-size: 17px; }
.wg-shop__intro p { margin: 0 0 8px; }
.wg-shop__intro + .wg-shop__sub { margin-top: 8px; }
.wg-shop__search { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px; border-radius: 999px; background: #fff; border: 1px solid var(--wg-line, #e9d9c2); box-shadow: 0 6px 24px rgba(22, 22, 22, .06); cursor: text; }
.wg-shop__search:focus-within { border-color: var(--wg-ink, #161616); }
/* The box's field draws no ring of its own (outline: none below): the pill shows where focus is, 2px in the theme's
   focus colour (SA-7, WCAG 2.4.7). In the popover the bar sits at the sheet's clipped edge, so its ring is inside. */
.wg-shop__search:focus-within { outline: 2px solid var(--wg-focus, var(--wg-accent, #23408e)); outline-offset: 2px; }
.wg-find__bar:focus-within { outline: 2px solid var(--wg-focus, var(--wg-accent, #23408e)); outline-offset: -2px; }
.wg-shop__search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 17px; color: var(--wg-ink, #161616); }
.wg-shop__intent { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: var(--wg-chip-h, 36px); margin-top: 12px; }
.wg-shop__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 28px 0 20px; }
.wg-shop__cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 1 480px; min-width: 0; padding: 2px; }
.wg-shop__cats::-webkit-scrollbar { display: none; }
.wg-shop__tools { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--wg-muted, #5f5b55); }
.wg-shop__count { white-space: nowrap; }
.wg-shop__qty { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Field edges at 3:1 or more against white and the page (WCAG 1.4.11): the theme's field token. */
.wg-shop__qty input { box-sizing: border-box; width: 76px; height: var(--wg-chip-h, 36px); padding: 0 8px; border: 1px solid var(--wg-field, #857d72); border-radius: 999px; background: #fff; text-align: center; font: inherit; font-size: 16px; color: var(--wg-ink, #161616); }
.wg-shop__tools select { min-width: 0; max-width: 100%; height: var(--wg-chip-h, 36px); border: 1px solid var(--wg-field, #857d72); border-radius: 999px; background: #fff; padding: 0 12px; font: inherit; font-size: 16px; color: var(--wg-ink, #161616); }
.wg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
@media (max-width: 1100px) { .wg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .wg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } .wg-shop { padding-top: 24px; } .wg-shop__tools { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 8px; } }
/* Phones: the count ("48 gifts", "3 of 48 gifts arrive by Fri 6 Nov") on a small line of its own above the quantity and
   the order (SDT-6). Its line is kept while it is empty (a search in the link: the script writes it), so nothing moves
   when it is filled. It stays readable to screen readers: with a search in the link, the results heading says
   "Results for …" and the status region speaks only once the visitor searches. */
@media (max-width: 700px) { .wg-shop__count { flex: 1 0 100%; order: -1; min-height: 1.4em; font-size: 13px; line-height: 1.4; white-space: normal; } }
/* An occasion in the link ("?q=onboarding kit"): no server cards until the script lists them in its order (Finder::page);
   the space they will take, shimmering like the gift finder's while it searches. */
.wg-grid--held[aria-busy=true] { min-height: min(70vh, 720px); border-radius: 14px; background: linear-gradient(90deg, var(--wg-surface-2, #f2ebe0), #fff, var(--wg-surface-2, #f2ebe0)) 0 0 / 200% 100%; animation: wgf-wait 1.2s linear infinite; }
@keyframes wgf-wait { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .wg-grid--held[aria-busy=true] { animation: none; } }
.wg-pcard a { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.wg-pcard__img { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--wg-surface-2, #f2ebe0); margin-bottom: 6px; }
.wg-pcard__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.wg-pcard a:hover .wg-pcard__img img { transform: scale(1.04); }
.wg-card__ph { display: block; width: 100%; height: 100%; background: var(--wg-surface-2, #f2ebe0); }
/* Two lines kept for every name, so the prices of a row line up. */
.wg-pcard__n { font-size: 15px; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wg-pcard__p { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--wg-muted, #5f5b55); }
.wg-pcard__p strong { font-family: var(--wp--preset--font-family--display, serif); font-weight: 450; font-size: 20px; color: var(--wg-ink, #161616); }
.wg-pcard__p span { margin-left: 4px; }
.wg-pcard__m { font-size: 13px; color: var(--wg-accent, #0a5844); }
/* Phones: two lines kept for the price as well ("S$4.49/pc or less" over "at 100 pcs" when it wraps in a narrow
   card), so "Ready in" lines up across a row whether or not a card's price wraps. */
@media (max-width: 700px) { .wg-pcard__p { line-height: 22px; min-height: 48px; } .wg-pcard__p strong { line-height: 1; } }
.wg-shop__empty { grid-column: 1 / -1; text-align: center; color: var(--wg-muted, #5f5b55); padding: 48px 0; }
.wg-shop__empty p { margin: 0 0 16px; }
/* The categories to try when nothing matches, on the shop (centred) and in the popover. */
.wg-shop__empty .wg-try, .wg-find__empty .wg-try { display: flex; flex-wrap: wrap; gap: 8px; }
.wg-shop__empty .wg-try { justify-content: center; }
.wg-ask a, .wg-find__empty .wg-ask a, .wg-shop__raya a, .wg-find__raya a { color: var(--wg-accent, #0a5844); text-decoration: underline; text-underline-offset: 3px; }
/* "Nothing matches Under S$5. The closest:" above the gifts that filter hid, and "Nothing matches all of that.
   Closest matches:" above gifts that match only some of the words; on phones too, where the count is hidden. */
.wg-shop__empty.wg-shop__note { padding: 0 0 8px; }
/* "Build it as a gift kit →" above the results for a hamper, a kit or a bundle, and in the empty states (KIT-FIND). */
.wg-kit-link { margin: 0 0 12px; font-size: 15px; }
.wg-kit-link a { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; color: var(--wg-accent, #0a5844); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.wg-shop__kit .wg-kit-link { margin: 0; }
.wg-find__body > .wg-kit-link { margin: 4px 10px 8px; font-size: 14px; }
/* The <a> "See all N gifts" and the <button> "Show more": a centred pill either way. */
.wg-shop__more { display: flex; align-items: center; justify-content: center; width: fit-content; box-sizing: border-box; margin: 40px auto 0; height: 48px; padding: 0 32px; border-radius: 999px; border: 1px solid var(--wg-ink, #161616); background: transparent; color: var(--wg-ink, #161616); font: inherit; font-size: 14px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.wg-shop__more:hover, .wg-shop__more:focus-visible { background: var(--wg-ink, #161616); color: var(--wp--preset--color--paper, #fcf8f2); }
.wg-shop__more[hidden] { display: none; }
.wg-shop--compact { padding-bottom: 48px; }
/* Theme button styles (uppercase, padding) must not reach these controls. The theme's stylesheet prints after
   this one in WordPress, so it wins any tie: the chip's layout and type are repeated here at a higher specificity. */
.wg-shop .wg-chip, .wg-find .wg-chip { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; background: var(--wg-accent, #0a5844); color: #fff; border: 0; padding: 0 10px 0 12px; font-size: 13px; font-weight: 400; opacity: 1; }
.wg-shop input[type=search]::-webkit-search-cancel-button { display: none; }
/* Phones and tablets swipe one row of categories (faded at the edge); on a wide screen, or with a mouse at any
   width (a narrow window, a zoomed laptop: a wheel cannot scroll the row), every category shows, wrapped onto
   as many lines as it takes, and the tools go below them. */
.wg-shop__cats { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
@media (min-width: 1024px), (hover: hover) and (pointer: fine) {
  .wg-shop__cats { flex-wrap: wrap; flex-basis: 100%; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .wg-shop__tools { margin-left: auto; }
}
/* Phones: the largest categories on at most two rows, wrapped, and "More" for the rest (finder.js foldCats). The box
   is two rows tall from the first paint (two 38px chips, the gap and the padding), before the deferred script folds
   it, so folding moves nothing below it: the script only hides chips inside it. Folded, the chips left fit in it and
   their focus rings may show past it; "More" opens it to every chip, still wrapped (is-open). */
.wg-shop__cats .wg-cat[hidden] { display: none; }
@media (max-width: 600px) {
  .wg-shop__cats { box-sizing: border-box; flex-wrap: wrap; max-height: calc(2 * (var(--wg-chip-h, 36px) + 2px) + 8px + 4px); overflow: hidden; mask-image: none; -webkit-mask-image: none; }
  .wg-shop__cats .wg-cat { box-sizing: content-box; }
  .wg-shop__cats.is-folded { overflow: visible; }
  .wg-shop__cats.is-open { max-height: none; overflow: visible; }
  .wg-shop .wg-cats__more { background: transparent; border-style: dashed; }
}
@media (max-width: 480px) { .wg-find-btn { padding: 0 8px; } .wg-header__tools { gap: 0 !important; } }
.wg-pcard__logo { position: absolute; object-fit: contain; pointer-events: none; mix-blend-mode: multiply; filter: drop-shadow(0 0 .5px rgba(0, 0, 0, .2)); }

/* Card extras: tags on the photo, "or less" above a partial book's quantity, the gift finder's order total. */
.wg-pcard__tags { position: absolute; left: 8px; top: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.wg-pcard__tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1; background: #fff; color: var(--wg-ink, #161616); box-shadow: 0 1px 3px rgba(22, 22, 22, .1); }
.wg-pcard__tag.is-fit { background: var(--wg-accent, #0a5844); color: #fff; }
.wg-pcard__tag.is-eco { background: var(--wg-lime, #9fe870); }
.wg-pcard__less { color: var(--wg-ink, #161616); }
.wg-pcard__t { font-size: 14px; color: var(--wg-ink, #161616); font-variant-numeric: tabular-nums; }
.wg-shop__gf { margin: 2px 0 0; font-size: 15px; }
.wg-shop__gf a { color: var(--wg-accent, #0a5844); text-decoration: underline; text-underline-offset: 3px; }
.wg-shop__gf a:hover { color: var(--wg-ink, #161616); }

/* "by 20 nov": gifts that would arrive late stay, last, with their photo dimmed; their line says "Too late for 20 Nov"
   in the late colour. Only the photo (and the logo on it) is dimmed, never the text or the tags on it, which keep
   their contrast (a whole card at .55 put its price, name and Eco tag under 4.5:1). */
.wg-pcard.is-late .wg-pcard__img > img, .wg-pcard.is-late .wg-pcard__img > .wg-card__ph { opacity: .55; transition: opacity .15s; }
.wg-pcard.is-late:hover .wg-pcard__img > img, .wg-pcard.is-late:focus-within .wg-pcard__img > img,
.wg-pcard.is-late:hover .wg-pcard__img > .wg-card__ph, .wg-pcard.is-late:focus-within .wg-pcard__img > .wg-card__ph { opacity: 1; }
.wg-pcard.is-late .wg-pcard__m { color: var(--wg-late, #a3361f); }
/* The shortlist's heart after each card's link: shortlist.css draws it where the shortlist runs; without it, no dead
   button (no specificity, so any rule of the shortlist's wins). */
:where(.wg-pcard__save) { display: none; }
/* The occasion a search was read as ("Deepavali") is what it is about, not a filter: outlined, beside the filled filters. */
.wg-shop .wg-chip[data-k="occasion"], .wg-find .wg-chip[data-k="occasion"] { background: #fff; color: var(--wg-accent, #0a5844); box-shadow: inset 0 0 0 1px var(--wg-accent, #0a5844); }

/* Festive order-by table (block writtengift/order-by, OrderBy.php) */
.wg-orderby { max-width: 1280px; margin: 0 auto; padding: 48px 0 24px; }
.wg-orderby__h { font-family: var(--wp--preset--font-family--display, serif); font-weight: 450; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; margin: 0; color: var(--wg-ink, #161616); }
.wg-orderby__sub { color: var(--wg-muted, #5f5b55); font-size: 15px; max-width: 62ch; margin: 8px 0 20px; }
.wg-orderby__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--wg-radius-lg, 16px); background: var(--wg-surface-2, #f2ebe0); }
.wg-orderby__t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.wg-orderby__t th, .wg-orderby__t td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--wg-line, #e9d9c2); white-space: nowrap; }
.wg-orderby__t tr:last-child th, .wg-orderby__t tr:last-child td { border-bottom: 0; }
.wg-orderby__t thead th { font-size: 13px; font-weight: 600; color: var(--wg-muted, #5f5b55); }
.wg-orderby__t tbody th { font-weight: 500; color: var(--wg-ink, #161616); }
.wg-orderby__t tbody th small { display: block; font-weight: 400; font-size: 12px; color: var(--wg-muted, #5f5b55); }
.wg-orderby__t td a { color: var(--wg-accent, #0a5844); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.wg-orderby__t td.is-passed { color: var(--wg-muted, #5f5b55); }
/* Phones: the occasion column wraps, a date never does ("Fri 23 Oct" on one line), and each date link has a
   44px tall tap area without growing the row. */
@media (max-width: 600px) { .wg-orderby { padding: 32px 0 16px; } .wg-orderby__t { font-size: 14px; } .wg-orderby__t th, .wg-orderby__t td { padding: 12px 8px; } .wg-orderby__t th { white-space: normal; } .wg-orderby__t td a { display: inline-block; padding: 13px 0; margin: -13px 0; } }