/* ==========================================================================
   Idea & gift pages: /giveaway-ideas/, /christmas-giveaways/, /personalized-gifts-philippines/, /about/, /contact/, /our-work/.
   Enqueued by inc/ideas-pages.php after pages.css, on these pages only. Sample cards, accordions and the end block
   come from pages.css (.sm-pg); the hero reuses .sm-giftshero (app.css). Tokens only, no new colours.
   ========================================================================== */

/* ---------- hero B additions (lead, buttons, note, link); the spec strip sits right under the hero (.sm-ihero__after) ---------- */
.sm-ihero .sm-h1 { text-wrap: balance; }
.sm-ihero__kicker { margin: 0 0 8px; color: var(--ink-2); }
.sm-ihero__lead { margin: 10px 0 0; max-width: 26em; }
.sm-ihero__after { margin-top: 16px; }
.sm-ihero__after > :first-child { margin-top: 0; }
.sm-ihero__note { margin: 12px 0 0; font-size: var(--fs-md); font-weight: 600; color: var(--ink-3); }
.sm-ihero__link { margin: 14px 0 0; font-weight: 700; }
.sm-ihero__link a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--laser); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sm-ihero__spec { margin-top: 20px; }
.sm-ihero .sm-giftshero__cta .sm-btn { min-width: 0; }
@media (max-width: 959px) {
  .sm-ihero .sm-giftshero__ph { max-height: 46vh; max-height: 46svh; aspect-ratio: auto; height: min(46svh, 125vw); }
  .sm-ihero .sm-giftshero__cta .sm-btn { flex: 1 1 100%; }
}
@media (min-width: 960px) {
  .sm-ihero { padding-top: 32px; }
  .sm-ihero .sm-h1 { font-size: var(--fs-hero); }
  /* the art is landscape (3:2); 5:4 keeps the whole set of pieces and the chips row above the fold */
  .sm-ihero .sm-giftshero__ph { aspect-ratio: 5 / 4; max-height: calc(100vh - var(--top-h) - 120px); }
}

/* ---------- sample cards: the craft tag is a real link ---------- */
.sm-ideas-craft { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: var(--pill); background: var(--paper); box-shadow: inset 0 0 0 1px var(--edge-2); color: var(--ink); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; transition: box-shadow var(--dur-1) ease, scale var(--dur-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sm-ideas-craft:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.sm-ideas-craft:active { scale: .97; }
.sm-ideas .sm-samples__m { line-height: 1.7; }
/* four ideas fill their rows: one row of four on desktop, two by two on a tablet (never three and an orphan) */
@media (min-width: 768px) { .sm-ideas .sm-samples:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .sm-ideas .sm-samples:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 16px; } }

/* ---------- /giveaway-ideas/: sticky occasion chips + folding occasion sections ---------- */
.sm-ideas-chips { position: sticky; top: var(--top-h); z-index: 20; padding: 10px 0; background: rgba(238,241,244,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--edge); }
.sm-ideas-chips .sm-container { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sm-ideas-chips .sm-container::-webkit-scrollbar { display: none; }
.sm-ideas-chips .sm-chip { flex: none; padding-left: 6px; }
.sm-ideas-chips__ph.sm-pchip { width: 32px; height: 32px; box-shadow: none; }
.sm-ideas-occ { padding: 28px 0 8px; scroll-margin-top: calc(var(--top-h) + 72px); }
@media (min-width: 960px) { .sm-ideas-occ { padding: var(--sec) 0 calc(var(--sec) * .75); } }
.sm-ideas-year .sm-h2 { margin: 8px 0 20px; max-width: 18em; }
/* summary: heading, then its idea count under it; the +/- toggle centred beside both */
.sm-ideas-occ__d > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 8px 0 20px; cursor: pointer; }
.sm-ideas-occ__d > summary::-webkit-details-marker { display: none; }
.sm-ideas-occ__d > summary .sm-h2 { margin: 0; max-width: 18em; }
.sm-ideas-occ__n { grid-column: 1; padding: 0; background: none; color: var(--ink-3); font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; }
.sm-ideas-occ__d > summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; font-size: 28px; line-height: 1; }
.sm-ideas-occ__d[open] > summary::after { content: '\2212'; transform: none; }
.sm-ideas-occ__d:not([open]) > summary { padding: 18px 20px; border-radius: var(--r); background: var(--paper); box-shadow: var(--lift); }
.sm-ideas-occ__d:not([open]) > summary .sm-h2 { font-size: clamp(1.2rem, 4vw, 1.6rem); }
/* desktop shows every occasion open: the heading is a heading, not a toggle (ideas.js reopens any folded on a narrow load) */
@media (min-width: 960px) { .sm-ideas-occ__d > summary { cursor: default; pointer-events: none; } .sm-ideas-occ__d > summary::after { display: none; } }
.sm-ideas-occ__more { margin: 16px 0 0; font-size: var(--fs-md); color: var(--ink-3); }
.sm-ideas-occ__more a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sm-ideas-occ__more b { color: var(--laser-deep); }
.sm-ideas-occ__go { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 28px 0 0; padding: 14px 16px; border-radius: var(--r); background: var(--paper); box-shadow: var(--lift); font-weight: 650; }
.sm-ideas-occ__go .sm-btn { flex: 0 1 auto; }
@media (max-width: 599px) { .sm-ideas-occ__go .sm-btn { flex: 1 1 100%; } }

/* ---------- page text (extra reading + FAQ) in columns, folded into .sm-acc ---------- */
.sm-ideas-more { padding-top: 24px; }
.sm-ideas-cols { display: grid; gap: 28px; }
@media (min-width: 960px) { .sm-ideas-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; align-items: start; } }
.sm-ideas-cols__c > h2 { margin: 0 0 12px; font-size: clamp(1.3rem, 3.6vw, 1.7rem); letter-spacing: -.02em; }
.sm-ideas-cols__c > p, .sm-ideas-cols__c > ol, .sm-ideas-cols__c > ul { color: var(--ink-2); max-width: 36em; }
.sm-ideas-cols__c > ol { padding-left: 1.2em; }
.sm-ideas-cols__c > ol li { margin: 6px 0; }
.sm-ideas-cols__c a, .sm-ideas .sm-acc__b a { color: var(--laser-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- /christmas-giveaways/: budget tiers ---------- */
.sm-xmas-tier { padding: 32px 0; }
.sm-xmas-tier + .sm-xmas-tier { padding-top: 0; }
@media (min-width: 960px) { .sm-xmas-tier { padding: var(--sec) 0 calc(var(--sec) * .75); } }
.sm-xmas-tier__in { display: grid; gap: 16px; }
@media (min-width: 960px) { .sm-xmas-tier__in { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; } .sm-xmas-tier__h { position: sticky; top: calc(var(--top-h) + 24px); } .sm-xmas-tier__h .sm-h2 { font-size: clamp(1.6rem, 2.2vw, 2rem); } } /* "₱150 to under ₱300" in two lines, not three, in the 240px column */
.sm-xmas-tier__h .sm-h2 { margin: 0; }
.sm-xmas-tier__h p { margin: 4px 0 0; font-size: var(--fs-md); }
.sm-xmas-tier__h a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sm-xmas-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
@media (min-width: 768px) { .sm-xmas-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; } }
.sm-xmas-card { display: flex; flex-direction: column; margin: 0; }
.sm-xmas-card__img { display: block; border-radius: var(--r); overflow: hidden; box-shadow: var(--lift); }
.sm-xmas-card__img .sm-ph { border-radius: 0; }
.sm-xmas-card__img img { transition: scale var(--dur-3) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sm-xmas-card__img:hover img { scale: 1.03; } }
.sm-xmas-card__t { margin: 12px 0 2px; font-size: 1rem; line-height: 1.25; }
.sm-xmas-card__t a { color: var(--ink); }
.sm-xmas-card__p { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.sm-xmas-card__e { margin: 2px 0 0; font-size: var(--fs-ui); }
.sm-xmas-card__e a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.sm-xmas-card__a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.sm-xmas-card__a { flex-direction: column; align-items: stretch; gap: 2px; }
.sm-xmas-card__ask { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-weight: 700; font-size: var(--fs-ui); color: var(--ink); text-decoration: underline; text-decoration-color: var(--laser); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (min-width: 768px) { .sm-xmas-card__a { flex-direction: row; align-items: center; gap: 14px; } .sm-xmas-card__a .sm-btn { flex: none; } }
.sm-xmas-how { scroll-margin-top: calc(var(--top-h) + 16px); }
.sm-xmas-how__in { display: grid; gap: 20px; align-items: center; }
@media (min-width: 768px) { .sm-xmas-how__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; } }
.sm-xmas-how__in .sm-h2 { margin: 0 0 8px; }
.sm-xmas-how__in p { margin: 0 0 16px; color: var(--ink-2); max-width: 30em; }

/* ---------- /personalized-gifts-philippines/ ---------- */
.sm-giftspg2 .sm-occasions { margin-bottom: 0; }
.sm-giftspg2 .sm-gifts-occ { padding-top: 0; }

/* ---------- /about/: machines, doors, proof ---------- */
.sm-about-mach { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 768px) { .sm-about-mach { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sm-about-mach > li { margin: 0; }
.sm-about-mach a { display: flex; flex-direction: column; height: 100%; padding: 10px 10px 16px; border-radius: var(--r-lg); background: var(--lab); color: #dfe8f5; box-shadow: var(--lift); transition: translate var(--dur-1) var(--ease-out), box-shadow var(--dur-1) ease, scale var(--dur-press) var(--ease-out); }
/* the lift sits on the li so the pause button (motion.js puts it on the li, outside the link) rises with the card */
.sm-about-mach .smm-pp { transition: translate var(--dur-1) var(--ease-out), scale var(--dur-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sm-about-mach > li:hover > a { translate: 0 -2px; box-shadow: var(--lift-2); } .sm-about-mach > li:hover > .smm-pp { translate: 0 -2px; } }
.sm-about-mach a:active { scale: .98; }
.sm-about-mach .sm-pg-loop { border-radius: calc(var(--r-lg) - 10px); box-shadow: none; }
.sm-about-mach__t { margin: 14px 8px 2px; color: #fff; font-size: 1.15rem; }
.sm-about-mach__s { margin: 0 8px 14px; color: #b3c2d8; font-size: var(--fs-md); }
.sm-about-mach__go { align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px; margin: auto 8px 0; padding: 8px 16px; border-radius: var(--pill); box-shadow: inset 0 0 0 1.5px var(--laser-2); color: var(--laser-2); font-weight: 700; font-size: var(--fs-md); } /* the whole card is the link; the label reads as its button */
.sm-about-doors { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 600px) { .sm-about-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.sm-about-doors > li { margin: 0; }
@media (max-width: 599px) { .sm-about-doors .sm-ph { aspect-ratio: 16 / 9; } }
.sm-about-proof { padding-top: 0; }
.sm-about-proof__in > * { max-width: 880px; }
.sm-about-proof__in .sm-h2 { margin: 0 0 16px; }
.sm-about-proof__mail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 16px 0 20px; }
.sm-about-proof__mail a { font-weight: 800; font-size: 1.1rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--laser); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sm-about2 .sm-acc__b ul { padding-left: 1.1em; }
/* ponytail: the laser-bed photo is a 4:3 shot padded to a square with white bars; zoom past them. Drop once the media item is re-exported without the bars */
.sm-about-bed > img { scale: 1.35; }

/* ---------- /contact/ ---------- */
.sm-ctpg2 { padding-top: 16px; }
.sm-ctpg2 .sm-ct__head { max-width: 640px; padding-bottom: 20px; }
.sm-ctpg2__grid { display: grid; gap: 16px; }
@media (min-width: 960px) { .sm-ctpg2 { padding-top: 32px; } .sm-ctpg2__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; } }
.sm-ctpg2__side { display: grid; gap: 16px; align-content: start; }
.sm-ctpg2__me { margin: 12px; }
.sm-ctroute { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sm-ctroute > li { margin: 0; }
.sm-ctroute__a { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 8px 14px 8px 8px; border: 0; border-radius: var(--r); background: var(--frost); color: var(--ink); font: inherit; font-weight: 700; font-size: 16px; text-align: left; cursor: pointer; transition: background-color var(--dur-1) ease, box-shadow var(--dur-1) ease, scale var(--dur-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sm-ctroute__a:hover { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); } }
.sm-ctroute__a:active { scale: .98; }
.sm-ctroute__a > span:not(.sm-pchip) { flex: 1; }
.sm-ctroute__a .sm-pchip { width: 48px; height: 48px; box-shadow: none; }
.sm-ctroute__a > .sm-i { flex: none; color: var(--ink-3); }
.sm-ctchan { display: flex; flex-direction: column; padding: 4px 0; overflow: hidden; }
.sm-ctchan__row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 18px; border-top: 1px solid var(--edge); color: var(--ink); }
.sm-ctchan__row:first-child { border-top: 0; }
@media (hover: hover) and (pointer: fine) { .sm-ctchan__row:hover { background: var(--frost); } }
.sm-ctchan__row > span { display: grid; flex: 1; min-width: 0; }
.sm-ctchan__row b { font-size: 16px; overflow-wrap: anywhere; }
.sm-ctchan__row small { color: var(--ink-3); font-size: var(--fs-ui); }
.sm-ctchan__row em { font-style: normal; font-size: var(--fs-xs); font-weight: 700; padding: 3px 8px; border-radius: var(--r-xs); background: var(--frost); color: var(--ink-2); }
.sm-ctchan__row--m .sm-i { color: #0a7cff; }
.sm-ctchan__follow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 18px 8px; border-top: 1px solid var(--edge); font-size: var(--fs-ui); font-weight: 650; color: var(--ink-3); }
.sm-ctchan__follow .sm-foot__soc { margin: 0; }
.sm-ctchan__follow .sm-foot__soc .sm-ic { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .sm-ctchan__follow .sm-foot__soc .sm-ic:hover { background: var(--frost); color: var(--ink); } }
.sm-bizcard { padding: 18px 18px 14px; }
.sm-bizcard .sm-h3 { margin: 0 0 10px; }
.sm-bizcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sm-bizcard li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.sm-bizcard li > .sm-i { flex: none; margin-top: 2px; color: var(--laser-deep); }
.sm-bizcard li span { display: grid; }
.sm-bizcard small { color: var(--ink-3); font-size: var(--fs-ui); }
.sm-bizcard__more { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--edge); font-weight: 700; }
.sm-bizcard__more a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--laser); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sm-cthelp { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.page-template-page-contact .sm-foot { margin-top: 48px; }

/* ---------- /our-work/ ---------- */
.sm-workhero__who { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--laser); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sm-work__spec { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 0 12px 10px 30px; font-size: var(--fs-sm); color: var(--ink-3); }
.sm-work__spec b { color: var(--ink); font-weight: 700; }
a.sm-badge[data-lb-label] { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a.sm-badge[data-lb-label]:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }