/* Use a complete system serif to avoid mixing subset and fallback glyphs within headings. */
:root.design-preview {
  --orange: #88602e;
  --orange-dark: #694620;
  --peach: #ece7df;
  --ink: #2b241f;
  --muted: #685b4f;
  --border: #d6cec3;
  --field-border: #8b7b68;
  --surface: #ece7df;
  --brand-field: #32251e;
  --campaign-accent: #e3b568;
  --page-ground: #f8f7f3;
  --on-brand: #faf5eb;
  --service-field: #e9e1d5;
  --on-brand-muted: #dfd0bd;
  --sun-field: #eee4d4;
  --field-ground: #ffffff;
  --photo-shade: #49392b;
  --photo-scrim: rgba(31,22,16,.62);
  --photo-caption: rgba(31,22,16,.8);
  --error-ink: #8a3026;
  --error-surface: #f7e8e3;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --radius: 0;
  font-size: 16px;
  line-height: 1.65;
}
.design-preview body {background:var(--page-ground)}
.design-preview button,.design-preview a,.design-preview summary {touch-action:manipulation}
.design-preview .site-marquee .marquee-viewport {overscroll-behavior-x:contain}
.marquee-viewport:focus-visible {outline:2px solid var(--campaign-accent);outline-offset:-2px}
.service-controls {display:none}
.gift-flow>.offer-image {display:block;width:100%;aspect-ratio:3/1;object-fit:contain}
.confirm-dialog {overscroll-behavior:contain}
main :is(input,textarea,select,button,a,summary),.form-error {scroll-margin-block:calc(var(--site-header-height,144px) + 24px) 32px}
@media(max-width:540px) {
  .service-controls {display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;margin:8px 0}
  .service-controls button {min-width:44px;padding:8px;font-size:20px;background:transparent;color:inherit}
  .service-controls .service-scroll-hint {display:block;margin:0;text-align:center;font-size:12px;color:inherit}
  main.preview-brand-led>.services-section:has(.massage-grid) .service-controls {color:var(--on-brand)}
  main.preview-brand-led>.services-section:has(.massage-grid) .service-controls button:hover {color:var(--campaign-accent);border-color:var(--campaign-accent)}
}
.skip-link {position:fixed;left:16px;top:12px;z-index:100;transform:translateY(-160%);padding:12px 20px;background:var(--brand-field);color:var(--on-brand);border:2px solid var(--campaign-accent);border-radius:4px}
.skip-link:focus {transform:none;color:var(--on-brand)}
main,.event-card {scroll-margin-top:calc(var(--site-header-height,144px) + 16px)}
main h1:focus-visible {outline:2px solid var(--orange-dark);outline-offset:6px}
.page-masthead h1:focus-visible,.hero h1:focus-visible {outline-color:var(--campaign-accent)}
.preview-toolbar {display:flex;justify-content:space-between;gap:16px;padding:8px 32px;background:var(--surface);color:var(--muted);font-size:13px}
.preview-toolbar a {color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.site-header {background:var(--field-ground)}
main {max-width:1220px;padding:0 32px}
main ::selection {background:var(--brand-field);color:var(--on-brand)}
main input,main textarea {caret-color:var(--orange);font-size:16px}
main input,main select,main textarea {border-color:var(--field-border)}
main.preview-home-grid {display:grid;grid-template-columns:minmax(0,1fr);gap:56px 0;padding-top:24px}
main.preview-home-grid>section {grid-column:1/-1}
main.preview-home-grid>.hero {grid-column:1;grid-row:1}
main.preview-home-grid>.services-section:has(.service-values) {grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:16px 48px;padding:0;background:transparent}
main.preview-brand-led>.gratitude-campaign {grid-column:1;grid-row:1;background:transparent;color:var(--ink);padding:24px 0 0;overflow:visible}
main.preview-brand-led>.hero {grid-row:2;background:transparent;color:var(--ink);padding:24px 0;align-items:center;border-block:1px solid var(--border);grid-template-columns:1fr 1.15fr;gap:32px}
main.preview-brand-led>.services-section:has(.service-values) {grid-row:3}
main.preview-brand-led .hero-emblem>strong {font-size:32px;margin:6px 0}
main.preview-brand-led .hero-emblem>small {color:var(--muted)}
h1,h2,h3 {font-weight:600;letter-spacing:0;text-wrap:balance}
h1 {font-size:clamp(30px,3.7vw,52px)}
h2 {font-size:clamp(26px,2.7vw,38px)}
.hero-emblem>strong,.services-section h2,.gratitude-selection h2,.store-section h2,#campaign-title {font-family:var(--font-display,"PMingLiU",serif);font-weight:600}
.section {padding:48px 0}
.hero {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:48px;padding:40px;min-height:0;background:var(--brand-field);color:var(--on-brand)}
.hero-copy {padding:0;align-self:end}
.hero .preview-brand-title {font-size:18px;font-weight:500;line-height:1.6;max-width:100%;margin:0 0 12px;color:inherit}
.hero p {font-size:16px;line-height:1.8;max-width:36em;margin:0;color:inherit}
.hero-side {background:transparent;border-radius:0;min-height:0;justify-content:flex-start}
.hero-emblem {background:transparent;color:inherit;align-items:flex-start;padding:0;height:auto}
.hero-emblem>span {font-family:inherit;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:0;color:inherit;white-space:nowrap}
.hero-emblem>strong {font-family:inherit;font-size:clamp(56px,6vw,84px);font-weight:700;line-height:1.08;text-align:left;margin:20px 0}
.preview-slogan-line,.preview-cart-count {display:inline-block}
.hero-emblem>small {font-size:16px;color:var(--on-brand-muted)}
.gratitude-campaign {margin:0!important;border:0;border-radius:0}
main.preview-brand-led>.gratitude-campaign {position:relative;isolation:isolate;overflow:hidden;background:var(--brand-field);color:var(--on-brand);padding:0}
.gratitude-campaign .content-layout.preview-campaign-stage {display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;min-height:480px;gap:32px;padding:48px max(32px,calc((100% - 1156px)/2));isolation:isolate}
.preview-campaign-stage>#campaign-title {grid-column:1;grid-row:2;position:relative;z-index:1;max-width:12em;margin:0}
.preview-campaign-stage>.content-copy {grid-column:1;grid-row:1;align-self:start;position:relative;z-index:1;max-width:44em;display:flex;flex-direction:column;align-items:flex-start;gap:20px;text-align:left}
.preview-campaign-photo {position:absolute;inset:0;z-index:-2;background-image:var(--preview-hero-image);background-size:cover;background-position:center}
.preview-campaign-stage::before {content:'';position:absolute;inset:0;z-index:-1;background:var(--photo-scrim)}
.preview-campaign-stage>.offer-image {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-2}
#campaign-title {font-size:clamp(40px,6vw,84px);line-height:1.15;color:var(--on-brand)}
.gratitude-campaign p {font-size:16px;line-height:1.8;margin:0;color:inherit}
.gratitude-campaign .preview-campaign-offer {font-size:26px;line-height:1.5;text-wrap:balance}
.gratitude-campaign .content-copy>small {font-size:14px;color:var(--on-brand-muted)}
.gratitude-campaign .actions {display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 0}
.gratitude-campaign .button {background:transparent;border-color:var(--on-brand);color:var(--on-brand)}
.gratitude-campaign .button:hover {background:var(--on-brand);border-color:var(--on-brand);color:var(--brand-field)}
.gratitude-campaign .preview-campaign-primary {background:var(--campaign-accent);border-color:var(--campaign-accent);color:var(--brand-field)}
.gratitude-campaign a:focus-visible {outline-color:var(--on-brand)}
button,.button,input,select,textarea {border-radius:0}
button,.button {min-height:46px;padding:11px 20px;font-size:15px}
button.primary:hover,.button.primary:hover {background:var(--orange-dark);border-color:var(--orange-dark)}
.secondary {background:transparent}
.services-section {display:grid;grid-template-columns:minmax(240px,.65fr) minmax(0,1fr);gap:16px 48px;align-items:start}
.services-section .section-heading {grid-column:1;grid-row:1;margin:0;text-align:left}
.services-section .section-heading h2 {font-size:36px;line-height:1.3;margin:0 0 20px;font-weight:600}
.services-section .section-heading p {font-size:16px;margin:0;line-height:1.8;color:var(--ink)}
.service-values {grid-column:1;grid-row:2;text-align:left;font-size:15px;margin:0;line-height:1.8}
.service-values>div {margin:0 0 10px}
.service-values strong {font-weight:600}
.service-grid,.massage-grid {grid-column:2;grid-row:1 / span 3;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:none;padding:0;margin:0;gap:16px;background:transparent}
.service-card {position:relative;padding:8px;background:var(--service-field)}
.service-copy:not(.sr-only) {padding:12px;color:#2b241f}
.service-card .offer-image {display:block;width:100%;aspect-ratio:1;border-radius:0;object-fit:contain}
.service-grid:focus-visible {outline:2px solid var(--orange);outline-offset:4px}
.preview-gift-guide summary {display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;min-height:44px;padding:10px 0;font-size:15px;line-height:1.6;font-weight:500}
.preview-gift-guide summary::-webkit-details-marker {display:none}
.preview-gift-guide summary::before {content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);flex-shrink:0}
.preview-gift-guide[open] summary::before {transform:rotate(45deg)}
.preview-gift-guide {margin:4px 0 8px}
section.section:has(>#gratitude-list) {padding-top:24px}
section:has(>#gratitude-list)>h1 {font-size:clamp(30px,3.2vw,44px);line-height:1.25;margin:20px 0 8px}
section:has(>#gratitude-list)>p.muted {margin:0 0 12px}
section:has(>#gratitude-list) .product-search {margin:12px 0 0}
section:has(>#gratitude-list)>#gratitude-count {margin:8px 0 12px;font-size:14px}
.preview-gift-guide .gift-flow {margin:16px auto}
.preview-gift-guide .notice {margin-bottom:16px}
.preview-gift-guide summary:focus-visible {outline:2px solid var(--orange);outline-offset:3px}
main.preview-home-grid>.services-section:has(.service-values) .section-heading h2 {margin-bottom:16px}
main.preview-home-grid>.services-section:has(.service-values) .service-values {font-size:15px;margin-top:0}
main.preview-home-grid>.services-section:has(.service-values) .service-grid {margin-top:0;max-width:660px;justify-self:end}
.service-actions {justify-content:flex-start;margin:10px 0 0}
.services-section>.service-actions {grid-column:1;grid-row:3}
.services-section>.service-actions .button {border:0;padding:8px 0;min-height:44px;text-decoration:underline;text-underline-offset:6px;background:transparent;color:var(--ink)}
.services-section>.service-actions .button:hover {background:transparent;color:var(--orange-dark)}
.services-section:has(>.massage-grid) {display:grid;grid-template-columns:1fr auto;gap:24px 32px;background:transparent;padding:0}
.services-section:has(>.massage-grid)>.section-heading {grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:32px}
.services-section:has(>.massage-grid) .section-heading>div {display:flex;align-items:center;gap:28px}
.services-section:has(>.massage-grid) .section-heading h2 {margin:0}
.services-section:has(>.massage-grid) .section-heading p {margin:0;max-width:25em}
.services-section:has(>.massage-grid)>.service-actions {grid-column:2;grid-row:1;margin:0}
.services-section:has(>.massage-grid)>.massage-grid {grid-column:1/-1;grid-row:2;margin:0}
.massage-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:24px}
.massage-grid {align-items:start}
.gratitude-selection {display:grid;grid-template-columns:1.15fr 1fr;gap:20px 32px;align-items:center;padding:32px;background:var(--surface)}
.gratitude-selection>.gift-flow {grid-column:2;grid-row:span 2;max-width:none;margin:0;padding:0;background:transparent}
.gratitude-selection>.section-heading {grid-column:1;grid-row:1;text-align:left;margin:0;align-self:end;padding:0}
.gratitude-selection h2 {font-size:40px;max-width:14em;line-height:1.3;margin:0}
.gift-flow {max-width:640px;margin:0 auto 40px}
.gratitude-selection>.service-actions {grid-column:1;grid-row:2;margin:0;align-self:start;padding:0}
.product-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;justify-content:stretch}
.product-card {display:flex;flex-direction:column;width:auto;border:0;border-radius:0;overflow:visible}
.product-photo {border-radius:0}
.product-search {max-width:560px;margin:20px 0 0}
.card-body {flex:1;padding:12px 0 0;height:auto;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto auto;gap:6px;align-content:start}
@supports(grid-template-rows:subgrid) {
  .product-grid>.product-card {display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:6px}
  .product-grid>.product-card>.card-body {grid-template-rows:subgrid;grid-row:span 5}
}
.card-body .split {display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:0 8px}
.card-body .split .price {grid-column:1;grid-row:1}
.card-body .split .stock {grid-column:1;grid-row:2}
.card-body .split .wish-button {grid-column:2;grid-row:1 / span 2;padding:0}
.card-body>.muted {font-size:13px;line-height:1.5}
.product-title {font-size:18px;line-height:1.4;height:auto;min-height:1.4em;font-weight:600}
.card-desc {font-size:14px;line-height:1.5;height:auto;min-height:1.5em;margin:0;color:var(--muted)}
.card-body .price {font-size:14px;font-weight:500}
.card-body .stock {font-size:13px}
.card-body>.primary {font-size:14px;padding:10px;width:100%;margin:4px 0 0}
.product-card .secondary {font-size:14px;min-height:44px;padding:8px 0;justify-content:flex-start}
.product-card .primary {background:var(--ink);border-color:var(--ink);margin-bottom:0}
.product-card .primary:hover {background:var(--orange);border-color:var(--orange)}
.product-card .primary:disabled {background:var(--surface);border-color:var(--border);color:var(--muted)}
.wish-button {min-width:44px;min-height:44px;color:var(--ink)}
.store-section {--ink:var(--on-brand);--muted:var(--on-brand-muted);grid-template-columns:1.15fr 1fr;background:var(--brand-field);padding:40px;margin-top:8px;border:0;gap:48px;color:var(--on-brand)}
.store-section .secondary {border-color:var(--on-brand);color:var(--on-brand)}
.store-section a:focus-visible {outline-color:var(--on-brand)}
.store-section a:hover {color:var(--on-brand);text-decoration:underline;text-underline-offset:4px}
.store-section h2 {font-size:36px;margin:0 0 20px;max-width:9em}
.store-section p {font-size:16px;color:var(--ink)}
.store-section>div:first-child {display:flex;flex-direction:column;align-items:flex-start}
.store-section>div:first-child>h2 {font-size:22px;margin:0 0 20px;max-width:none}
.store-section>div:first-child>p {font-size:32px;line-height:1.5;max-width:12em;margin:0 0 28px;text-wrap:balance}
.preview-store-phrase {white-space:nowrap}
.store-section>div:first-child>.button {background:var(--campaign-accent);border-color:var(--campaign-accent);color:var(--brand-field)}
.store-section>div:first-child>.button:hover {background:var(--on-brand);border-color:var(--on-brand);color:var(--brand-field)}
.store-details dl {margin:0}
.store-details dl>div:has(a[href*="maps"]) dd {font-size:22px;line-height:1.5}
.store-details dl>div {font-size:16px;border:0;padding:12px 0;grid-template-columns:100px minmax(0,1fr)}
.store-details dd>a[href*="maps"] {font-size:14px;color:var(--on-brand);text-decoration:underline;text-underline-offset:4px}
.offer {background:var(--surface);border:0;padding:32px}
.offer h3 {font-size:26px;margin:0 0 16px}
.offer p {font-size:16px}
.notice-strip,.notice {background:var(--surface);border:0;border-radius:0;font-size:15px}
.notice p {max-width:80ch;line-height:1.8}
.panel {background:var(--surface);border:0;border-radius:0;padding:32px}
.auth {max-width:560px}
.auth h1 {font-size:40px;margin:0 0 24px}
.auth .panel {padding:32px}
.auth input,.reservation-actions textarea {background:var(--field-ground)}
.form {gap:20px}
.form p,.form small {margin:0;line-height:1.7}
.form label {font-size:16px}
.form .admin-check {font-size:14px;flex-wrap:wrap}
.form .text-button {font-size:14px;padding:4px 0;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.cart-row {background:transparent;padding:20px 0}
.cart-info h3 {font-size:18px}
.cart-info p {font-size:15px}
.order {background:var(--surface);padding:24px;font-size:15px}
.order p {font-size:15px}
.order-id {font-size:13px}
.order-id,.stock,.detail-grid input[type="number"] {font-variant-numeric:tabular-nums}
.badge {font-size:13px;background:var(--brand-field);color:var(--on-brand);border-radius:0}
.reservation-actions.panel {background:var(--surface);padding:24px}
.reservation-actions textarea {line-height:1.8;padding:16px;border-color:var(--field-border)}
.order-grid>div {background:var(--surface)}
.order-grid .order {margin:0;background:transparent}
.order-grid .reservation-actions {margin:0}
.reservation-actions label {font-size:16px}
.reservation-actions p {margin:0;font-size:14px}
.detail-grid {gap:48px;grid-template-columns:1.05fr 1fr;align-items:start}
.detail-grid>div:nth-child(2) {background:transparent;padding:0}
.detail-grid button[data-action="add"] {background:var(--ink);border-color:var(--ink);color:var(--on-brand)}
.detail-grid button[data-action="add"]:not(:disabled):hover {background:var(--orange);border-color:var(--orange)}
.mobile-purchase button[data-action="add"] {background:var(--ink);border-color:var(--ink);color:var(--on-brand)}
.detail-grid h1 {font-size:clamp(28px,3vw,42px);line-height:1.35;margin:16px 0 24px}
.detail-photo>img {aspect-ratio:1;object-fit:contain;border-radius:0;background:var(--surface)}
.detail-photo {position:relative}
.detail-photo>.preview-photo-previous {position:absolute;top:0;left:0;width:100%;pointer-events:none}
.preview-shared-photo {position:fixed;z-index:10;pointer-events:none;object-fit:contain;transform-origin:top left;background:var(--surface)}
.thumbnails {gap:12px;flex-wrap:wrap}
.thumbnails button {width:76px;height:76px;border-radius:0}
.thumbnails button[aria-pressed="true"] {border-color:var(--orange)}
.detail-price {font-size:24px}
.preview-detail-summary {display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:12px 0;margin:12px 0 20px;border-block:1px solid var(--border)}
.preview-detail-summary>.detail-price {grid-column:1;grid-row:1;font-size:17px;margin:0}
.preview-detail-summary>.stock {grid-column:1;grid-row:2;font-size:14px;margin:0}
.preview-detail-summary>.quantity-label {grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:row;align-items:center;gap:8px;font-size:14px;width:auto;margin:0}
.preview-detail-summary input {width:64px;padding:8px}
.detail-grid .faq p,.spec-panel dl>div {font-size:16px}
.spec-panel {background:var(--surface);padding:32px}
.empty {background:var(--surface);border-radius:0;font-size:16px}
.event-card {border:0;border-radius:0;background:var(--surface)}
.event-body {padding:32px}
.event-body h2 {font-size:28px;line-height:1.4}
.event-body p {font-size:16px;line-height:1.7}
.confirm-dialog {border:0;border-radius:0;padding:28px;max-width:460px}
.agreement-dialog {max-width:680px}
.agreement-text {font-size:16px;border-radius:0;background:var(--surface);border:0;padding:16px}
.agreement-privacy {font-size:14px}
.back {font-size:15px}
.section-heading>button {flex-shrink:0;white-space:nowrap}
@media(prefers-reduced-motion:no-preference) {
  .product-photo img {transition:transform 1000ms var(--ease-out)}
  .product-card:focus-within .product-photo img {transform:scale(1.035)}
  .preview-gift-guide summary::before {transition:transform 550ms var(--ease-out)}
  main button,main .button,dialog button {transition:background-color 550ms ease,color 550ms ease,transform 260ms var(--ease-out)}
  main button:not(:disabled):active,main .button:active {transform:translateY(1px)}
  .preview-action-arrow {display:inline-block;transition:transform 550ms var(--ease-out)}
  .product-card .secondary {position:relative;text-decoration:none}
  .product-card .secondary::after {content:"";position:absolute;left:0;bottom:5px;width:6em;max-width:100%;height:1px;background:currentColor;transform:scaleX(.35);transform-origin:left;transition:transform 550ms var(--ease-out)} /* taste-skill-ignore: functional link underline and focus feedback */
  .product-card .secondary:focus-visible::after {transform:scaleX(1)}
  .button:focus-visible .preview-action-arrow {transform:translateX(3px)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .product-card:hover .product-photo img {transform:scale(1.035)}
  main .button:hover .preview-action-arrow {transform:translateX(3px)}
  .product-card .secondary:hover::after {transform:scaleX(1)}
}
@media(min-width:801px) {
  section.section:has(>#gratitude-list) {display:grid;grid-template-columns:1.15fr 1fr;gap:8px 40px}
  section:has(>#gratitude-list)>.back {grid-column:1/-1}
  section:has(>#gratitude-list)>h1 {grid-column:1;grid-row:2}
  section:has(>#gratitude-list)>p.muted:not(#gratitude-count) {grid-column:1;grid-row:3}
  section:has(>#gratitude-list)>.product-search {grid-column:2;grid-row:2/4;align-self:center;margin:0;max-width:none}
  section:has(>#gratitude-list)>.preview-gift-guide {grid-column:1/-1;grid-row:4}
  section:has(>#gratitude-list)>#gratitude-count {grid-column:1/-1;grid-row:5}
  section:has(>#gratitude-list)>#gratitude-list {grid-column:1/-1;grid-row:6}
  section:has(>#gratitude-list)>.catalogue-pagination {grid-column:1/-1;grid-row:7}
}
@media(max-width:1000px) {
  #campaign-title {font-size:48px}
  .services-section {gap:20px 28px;grid-template-columns:minmax(200px,.6fr) minmax(0,1fr)}
  .services-section .section-heading h2,.gratitude-selection h2 {font-size:28px}
  .product-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:800px) {
  main {padding:0 24px}
  main.preview-home-grid {display:block}
  main.preview-brand-led>.gratitude-campaign {padding:12px 0 0;margin-bottom:28px!important}
  main.preview-brand-led>.hero {padding:20px 0;grid-template-columns:1fr;gap:16px}
  .gratitude-campaign .content-layout.preview-campaign-stage {grid-template-columns:minmax(0,1fr);gap:20px}
  .preview-campaign-stage>.offer-image {grid-column:1;grid-row:3;max-width:240px;justify-self:center}
  .hero {gap:24px;grid-template-columns:minmax(0,1fr);min-height:0;padding:32px}
  .hero .preview-brand-title {font-size:18px}
  .hero-emblem {padding:0}
  .hero-emblem>span {font-size:18px}
  .hero-emblem>strong {font-size:64px}
  .hero-side {min-height:0}
  .services-section {display:block}
  main.preview-home-grid>.services-section:has(.service-values) {display:block;padding:32px 0}
  main.preview-home-grid>.services-section:has(.service-values) .service-grid {margin-top:24px}
  main.preview-home-grid>.services-section:has(.service-values) .service-values {margin-top:16px}
  .services-section:has(>.massage-grid) {display:block}
  .services-section:has(>.massage-grid) .section-heading>div {display:block}
  .services-section:has(>.massage-grid)>.section-heading {display:block}
  .services-section:has(>.massage-grid) .section-heading p {margin-top:16px}
  .services-section:has(>.massage-grid)>.massage-grid {margin-top:24px}
  .services-section:has(>.massage-grid)>.service-actions {margin-top:12px}
  .gratitude-selection.section {display:block;padding:28px}
  .gratitude-selection>.gift-flow {max-width:640px;margin:0 auto 28px}
  .gratitude-selection>.service-actions {margin:20px 0 28px}
  .gratitude-selection>.section-heading,.gratitude-selection>.service-actions {padding:0}
  .service-grid,.massage-grid {margin-top:24px;max-width:680px}
  .massage-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-values {margin-top:20px}
  .service-actions {margin-top:20px}
  .section {padding:40px 0}
  .store-section {grid-template-columns:1fr;padding:32px;gap:24px}
}
@media(max-width:540px) {
  :root.design-preview {font-size:16px}
  .preview-toolbar {padding:8px 16px;font-size:11px;gap:10px}
  .preview-toolbar span {max-width:230px}
  main {padding:0 16px}
  main.preview-home-grid {padding-top:16px}
  main.preview-brand-led>.gratitude-campaign {padding:12px 0 0;margin-bottom:24px!important}
  main.preview-brand-led .hero-emblem>strong {font-size:26px}
  main.preview-brand-led .hero-emblem>strong {display:flex;gap:16px}
  main.preview-brand-led .hero-emblem>strong br {display:none}
  main.preview-brand-led>.hero {padding:16px 0;gap:12px}
  main.preview-brand-led .hero-emblem>span {font-size:14px}
  main.preview-brand-led .hero-emblem>small {font-size:13px}
  main.preview-brand-led .hero-copy p {font-size:14px;line-height:1.6}
  main.preview-brand-led>.hero {gap:16px}
  main.preview-home-grid>.services-section:has(.service-values) {padding:28px 0}
  .hero {padding:24px 20px;gap:22px}
  .hero-copy {padding:0}
  .hero .preview-brand-title {font-size:18px;margin:0 0 10px;max-width:none}
  .hero p {font-size:15px;line-height:1.7;margin:0}
  .hero-side {height:auto;min-height:0}
  .hero-emblem {padding:0;display:flex;align-items:flex-start}
  .hero-emblem>span {font-size:16px;line-height:1.4;margin:0}
  .hero-emblem>strong {position:static;font-size:52px;line-height:1.14;margin:18px 0;text-align:left}
  .hero-emblem>small {font-size:14px}
  .gratitude-campaign {padding:0 0 28px}
  #campaign-title {font-size:40px;line-height:1.2}
  .gratitude-campaign .preview-campaign-offer {font-size:18px;line-height:1.5}
  .gratitude-campaign p {font-size:15px;line-height:1.7}
  .gratitude-campaign .actions {display:flex;flex-direction:row;gap:10px;width:100%}
  .gratitude-campaign .actions .button {flex:1;min-width:0;font-size:13px;padding:10px 6px}
  .section {padding:32px 0}
  .services-section:has(>.massage-grid) {padding:0 0 28px}
  .services-section .section-heading h2,.gratitude-selection h2 {font-size:26px;margin-bottom:16px}
  .gratitude-selection.section {padding:20px}
  .gratitude-selection h2 {font-size:28px;line-height:1.3}
  section.section:has(>#gratitude-list) {padding-top:20px}
  section:has(>#gratitude-list)>h1 {font-size:30px;margin-top:16px}
  .services-section .section-heading p {font-size:15px}
  .service-values {font-size:14px;line-height:1.7;margin-top:16px}
  main.preview-home-grid>.services-section:has(.service-values) .service-values {font-size:14px;line-height:1.5}
  .service-values>div {margin:0 0 8px}
  .service-values>div:last-child {margin-bottom:0}
  .service-scroll-hint {text-align:left;font-size:13px;margin:12px 0 8px;font-variant-numeric:tabular-nums}
  .service-grid,.massage-grid {grid-auto-flow:column;grid-auto-columns:88%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0;margin-top:16px;max-width:none}
  .service-card .offer-image {object-fit:contain;border-radius:0}
  .service-actions {justify-content:flex-start;margin-top:8px}
  .gift-flow {margin-bottom:28px}
  .product-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .product-card {width:auto}
  .card-body {padding:10px 0 0;height:auto;gap:4px}
  .card-body>.muted {font-size:12px}
  .product-title {font-size:15px;line-height:1.4;height:auto}
  .card-desc {font-size:13px;line-height:1.4;height:auto;min-height:1.4em}
  .card-body .price,.card-body .stock {font-size:13px}
  .card-body>.primary {font-size:13px;min-height:44px;padding:8px 4px}
  .product-card .secondary {font-size:13px;padding:8px 0;white-space:nowrap}
  .card-body .split {gap:2px}
  .store-section {padding:24px;margin-top:28px}
  .store-section h2 {font-size:26px}
  .store-section>div:first-child>h2 {font-size:18px;margin-bottom:12px}
  .store-section>div:first-child>p {font-size:26px;margin-bottom:20px}
  .store-details dl>div:has(a[href*="maps"]) dd {font-size:18px}
  .store-details dl>div {font-size:14px;grid-template-columns:76px minmax(0,1fr);gap:10px}
  .auth h1 {font-size:30px}
  .auth .panel,.panel {padding:20px}
  .auth .admin-check {gap:6px}
  .cart-row {padding:16px}
  .order,.reservation-actions.panel {padding:20px}
  .confirm-dialog {padding:20px}
  .detail-grid {grid-template-columns:1fr;gap:24px}
  .detail-photo>img {height:260px;aspect-ratio:auto}
  .detail-grid h1 {font-size:28px;margin-bottom:12px}
  .detail-grid>div:nth-child(2) {padding:0}
  .spec-panel {padding:20px}
  .spec-panel dl>div {font-size:14px}
}

/* Inner pages keep the same identity, with layouts matched to each task. */
body:not(:has(main.preview-home-grid))>.site-header {max-width:none;margin:0;padding:20px max(32px,calc((100% - 1156px)/2));background:var(--brand-field);color:var(--on-brand);border:0;--ink:var(--on-brand);--orange:var(--campaign-accent);--orange-dark:var(--campaign-accent)}
body:not(:has(main.preview-home-grid))>.site-header .brand {font-size:32px;font-weight:500;letter-spacing:.12em;color:inherit}
body:not(:has(main.preview-home-grid))>.site-header nav a {color:inherit}
main:not(.preview-home-grid) {max-width:none;padding:0;min-height:calc(100vh - 220px)}
main:not(.preview-home-grid)>section {max-width:none;padding:40px max(32px,calc((100% - 1156px)/2));margin:0}
main:not(.preview-home-grid) h1,main:not(.preview-home-grid) .event-body h2,main:not(.preview-home-grid) .spec-panel h2 {font-family:var(--font-display,"PMingLiU",serif);font-weight:600}
main:not(.preview-home-grid)>section>h1,main:not(.preview-home-grid) .section-heading h1 {font-size:clamp(32px,3.6vw,48px);line-height:1.3;margin:16px 0 24px}
main:not(.preview-home-grid) .back {display:inline-flex;align-items:center;min-height:44px}
main:not(.preview-home-grid) .button,main:not(.preview-home-grid) button {border-radius:5px}
main:not(.preview-home-grid) .product-grid {gap:32px 24px}
main:not(.preview-home-grid) .product-photo {background:var(--service-field);overflow:hidden;border-radius:8px}
main:not(.preview-home-grid) .product-title {text-wrap:pretty}
section.section:has(>#gratitude-list)>.product-search input {background:var(--field-ground);min-height:52px;border-radius:5px}
section.section:has(>#gratitude-list)>.preview-gift-guide {background:var(--surface);padding:0 20px;border-radius:5px;margin:16px 0 8px}
section.section:has(>#gratitude-list)>#gratitude-count {margin:8px 0 16px}
main:not(.preview-home-grid) .catalogue-pagination {justify-content:center;margin-top:32px}
.detail-grid {grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;margin-top:20px}
.detail-grid>.detail-photo {padding:24px;background:var(--service-field);border-radius:8px}
.detail-grid>.detail-photo>img {max-height:480px;background:transparent}
.detail-grid .thumbnails button {background:var(--page-ground);border-radius:5px}
.detail-grid>div:nth-child(2)>span {font-size:14px;letter-spacing:0;color:var(--muted)}
.detail-grid h1 {margin:12px 0 16px;font-size:clamp(30px,3vw,42px)}
.preview-detail-summary {border:0;background:var(--surface);padding:20px;border-radius:5px}
.detail-grid .faq {border:0;padding:12px 0;margin-bottom:16px}
.detail-grid .faq summary {font-size:16px;min-height:44px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.detail-grid .faq p {line-height:1.8;margin-top:8px}
.detail-grid>div:nth-child(2)>.actions {gap:12px}
.detail-grid>div:nth-child(2)>.actions button {flex:1;min-height:50px}
.spec-panel {padding:28px 32px;margin-top:40px;background:var(--surface);border-radius:8px}
.spec-panel h2 {font-size:28px;margin:0 0 20px}
.spec-panel dl {display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.spec-panel dl>div {grid-template-columns:minmax(90px,.4fr) minmax(0,1fr);gap:16px;border:0;padding:12px 0}
.spec-panel dd {overflow-wrap:anywhere}
section.narrow:has(>.preview-cart-items) {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px 48px;align-items:start}
section:has(>.preview-cart-items)>.section-heading {grid-column:1/-1;margin:0}
.preview-cart-items {min-width:0;grid-column:1;grid-row:2}
.preview-cart-items>.cart-row {padding:20px 0;margin:0;background:transparent;align-items:flex-start}
.preview-cart-items .cart-image {width:132px;height:132px;border-radius:8px;background:var(--service-field)}
.preview-cart-items .cart-image img {object-fit:contain}
section:has(>.preview-cart-items)>.panel {grid-column:2;grid-row:2;position:sticky;top:24px;padding:28px;background:var(--brand-field);color:var(--on-brand);border-radius:8px}
section:has(>.preview-cart-items)>.panel>.muted {color:var(--on-brand-muted);font-size:14px;line-height:1.8}
section:has(>.preview-cart-items)>.panel>.button {background:var(--campaign-accent);border-color:var(--campaign-accent);color:var(--brand-field);margin-top:16px}
section:has(>#checkout-form) {display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1fr);gap:16px 64px;align-items:start}
section:has(>#checkout-form)>.back {grid-column:1/-1}
section:has(>#checkout-form)>h1 {grid-column:1;position:sticky;top:32px}
#checkout-form {grid-column:2;grid-row:2;background:var(--surface);border-radius:8px}
main:not(.preview-home-grid)>section.auth {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);position:relative;isolation:isolate;max-width:1056px;margin:40px auto;padding:0;background:var(--brand-field);border-radius:8px;overflow:hidden}
main>section.auth::before {content:'';grid-column:1;grid-row:1;background-image:var(--auth-background-image);background-color:var(--photo-shade);background-blend-mode:multiply;background-size:cover;background-position:center;min-height:480px}
main>section.auth>h1 {grid-column:1;grid-row:1;z-index:1;align-self:start;padding:40px;margin:0;color:var(--on-brand);font-size:40px;line-height:1.4}
main>section.auth>.back {grid-column:1/-1;padding:12px 24px;color:var(--on-brand)}
main>section.auth>.panel {grid-column:2;grid-row:1;margin:0;padding:40px;background:var(--page-ground);min-width:0}
main>section.auth:has(>.back)::before,main>section.auth:has(>.back)>h1,main>section.auth:has(>.back)>.panel {grid-row:2}
.auth input {min-height:48px;border-radius:5px}
.auth .admin-check input[type=checkbox] {min-height:0;flex-shrink:0}
.auth .form-error:empty {display:none}
.auth .form-error {overflow-wrap:anywhere}
.events-page>.section-heading {margin-bottom:24px}
.events-page .event-card {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0;margin-bottom:32px;background:var(--surface);border-radius:8px;overflow:hidden}
.events-page .event-card>img {width:100%;height:auto;aspect-ratio:1;align-self:start;max-height:440px;object-fit:contain;background:var(--service-field)}
.events-page .event-body {padding:36px;align-self:center;min-width:0}
.events-page .event-card:not(:has(>img))>.event-body {grid-column:1/-1}
.events-page .event-body h2 {font-size:32px;margin-top:0}
.events-page .event-period {font-size:14px;color:var(--muted)}
.order-grid {gap:24px;margin-top:28px}
.order-grid>div {border-radius:8px;overflow:hidden}
.order-grid .order {padding:28px}
.order-grid .reservation-actions {padding:0 28px 28px}
.reservation-actions textarea {width:100%;border-radius:5px}
.order-id {overflow-wrap:anywhere}
.empty {padding:48px 24px;border-radius:8px}
@media(min-width:801px) {
  .detail-grid>.detail-photo {position:sticky;top:24px}
}
@media(max-width:1100px) {
  main:not(.preview-home-grid)>section.auth {margin:32px}
}
@media(max-width:800px) {
  body:not(:has(main.preview-home-grid))>.site-header {padding:20px 24px;gap:12px}
  main:not(.preview-home-grid)>section {padding:28px 24px}
  .detail-grid {gap:28px}
  .detail-grid>.detail-photo {padding:16px}
  .spec-panel dl {grid-template-columns:1fr}
  section.narrow:has(>.preview-cart-items),section:has(>#checkout-form) {grid-template-columns:1fr;gap:16px}
  section:has(>.preview-cart-items)>.panel {grid-column:1;grid-row:3;position:static}
  section:has(>#checkout-form)>h1 {position:static}
  #checkout-form {grid-column:1;grid-row:3}
  main:not(.preview-home-grid)>section.auth {margin:28px 24px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  main>section.auth>h1 {padding:28px;font-size:32px}
  main>section.auth>.panel {padding:28px}
  .events-page .event-card {grid-template-columns:1fr}
  .events-page .event-card>img {max-height:360px}
  .events-page .event-body {padding:28px}
}
@media(max-width:540px) {
  body:not(:has(main.preview-home-grid))>.site-header {padding:16px 20px}
  body:not(:has(main.preview-home-grid))>.site-header .brand {font-size:28px}
  main:not(.preview-home-grid)>section {padding:24px 20px}
  main:not(.preview-home-grid)>section>h1,main:not(.preview-home-grid) .section-heading h1 {font-size:30px;margin:12px 0 20px}
  main:not(.preview-home-grid) .product-grid {gap:24px 12px}
  section.section:has(>#gratitude-list)>.preview-gift-guide {padding:0 12px}
  .detail-grid {grid-template-columns:minmax(0,1fr);gap:20px;margin-top:12px}
  .detail-grid>.detail-photo {padding:12px}
  .detail-grid>.detail-photo>img {height:236px;max-height:236px;aspect-ratio:auto}
  .detail-grid .thumbnails button {width:56px;height:56px}
  .preview-detail-summary {padding:16px;margin:16px 0}
  .spec-panel {padding:24px 20px;margin-top:28px}
  .spec-panel h2 {font-size:24px}
  .spec-panel dl>div {font-size:14px;gap:12px}
  .preview-cart-items .cart-image {width:88px;height:88px}
  .preview-cart-items .cart-row {gap:16px;flex-wrap:nowrap}
  .preview-cart-items .cart-info {min-width:0}
  .cart-info h3 {font-size:16px}
  .cart-info p {font-size:14px}
  section:has(>.preview-cart-items)>.panel {padding:24px}
  main:not(.preview-home-grid)>section.auth {display:block;margin:24px 20px}
  main>section.auth::before {display:none}
  main>section.auth>h1 {padding:24px;margin:0;background-image:var(--auth-background-image);background-color:var(--photo-shade);background-blend-mode:multiply;background-size:cover;background-position:center 40%;font-size:30px}
  main>section.auth>.panel {padding:24px 20px}
  main>section.auth>.back {display:flex}
  .events-page .event-body {padding:24px 20px}
  .events-page .event-body h2 {font-size:26px}
}
/* Homepage header and campaign share one grid area so the photograph reaches behind navigation. */
body:has(main.preview-brand-led) {display:grid;grid-template-columns:minmax(0,1fr)}
body:has(main.preview-brand-led)>.site-marquee {grid-column:1;grid-row:1;background:var(--brand-field);color:var(--on-brand)}
body:has(main.preview-brand-led)>.site-marquee a {color:inherit}
body:has(main.preview-brand-led)>.site-marquee .marquee-label {color:var(--on-brand)}
body:has(main.preview-brand-led)>.site-header {grid-column:1;grid-row:2;align-self:start;position:relative;z-index:5;max-width:none;width:100%;margin:0;padding:24px max(32px,calc((100% - 1156px)/2));background:transparent;border:0;color:var(--on-brand);--ink:var(--on-brand);--orange:var(--campaign-accent);--orange-dark:var(--campaign-accent)}
body:has(main.preview-brand-led)>.site-header .brand {font-size:40px;font-weight:500;letter-spacing:.12em;color:inherit}
body:has(main.preview-brand-led)>.site-header nav a {color:inherit}
body:has(main.preview-brand-led)>.site-header nav a:hover,body:has(main.preview-brand-led)>.site-header nav a.active {color:var(--on-brand);border-color:var(--campaign-accent)}
body:has(main.preview-brand-led)>main {grid-column:1;grid-row:2;margin:0;width:100%;min-width:0}
body:has(main.preview-brand-led)>.preview-toolbar {grid-column:1;grid-row:3}
main.preview-brand-led .content-layout.preview-campaign-stage {min-height:580px;padding-top:144px;padding-bottom:40px;gap:40px}
main.preview-brand-led .preview-campaign-photo {background-image:var(--preview-story-image);background-position:center 55%}
main.preview-brand-led .preview-campaign-stage::before {background:var(--photo-scrim)}
main.preview-brand-led #campaign-title {letter-spacing:-.025em;max-width:none}
main.preview-brand-led .preview-campaign-stage>.content-copy {max-width:36em}
main.preview-brand-led .preview-campaign-offer {font-size:24px}
main.preview-brand-led .preview-atmosphere {background-image:var(--preview-hero-image)}
/* Restin reference: photographic opening, editorial story, dark service gallery. */
main.preview-home-grid {max-width:none;padding:0;gap:0}
main.preview-home-grid>section:not(.gratitude-campaign) {padding:48px max(32px,calc((100% - 1156px)/2))}
main.preview-brand-led>.hero {grid-template-columns:1fr 1fr;gap:24px 64px;background:var(--page-ground);border:0;align-items:center}
.preview-home-grid .hero-side {grid-column:2;grid-row:1;align-self:end}
.preview-home-grid .hero-copy {grid-column:2;grid-row:2;align-self:start}
.preview-home-grid .hero-emblem>strong {font-size:44px;line-height:1.25;margin:16px 0}
.preview-home-grid .hero .preview-brand-title {font-size:23px;line-height:1.5;margin-bottom:16px}
.preview-atmosphere {grid-column:1;grid-row:1 / span 2;align-self:stretch;position:relative;min-height:320px;margin:0;background-image:var(--preview-story-image);background-position:center;background-size:cover;border-radius:8px}
main.preview-home-grid>.services-section:has(.service-values) {padding:48px max(32px,calc((100% - 1156px)/2));background:var(--sun-field);gap:20px 48px}
.preview-home-grid>.services-section:has(>.massage-grid) {--ink:var(--on-brand);--muted:var(--on-brand-muted);padding:48px max(32px,calc((100% - 1156px)/2));background:var(--brand-field);color:var(--on-brand);gap:24px}
.preview-home-grid>.services-section:has(>.massage-grid) .button:hover {color:var(--campaign-accent)}
.preview-home-grid .service-card {border-radius:8px}
.preview-home-grid>.gratitude-selection {background:var(--page-ground);gap:32px 56px}
.preview-home-grid>.store-section {background:var(--brand-field);margin:0}
.preview-home-grid .button {border-radius:5px}
@media(max-width:1000px) {
  main.preview-brand-led>.hero {gap:24px 32px}
  .preview-home-grid .hero-emblem>strong {font-size:36px}
  .preview-home-grid>.services-section:has(>.massage-grid)>.section-heading {display:block}
  .preview-home-grid>.services-section:has(>.massage-grid) .section-heading>div {display:block}
  .preview-home-grid>.services-section:has(>.massage-grid) .section-heading p {margin-top:12px}
}
@media(max-width:800px) {
  body:has(main.preview-brand-led)>.site-header {padding:20px 24px;gap:12px}
  body:has(main.preview-brand-led)>.site-header .brand {font-size:32px}
  main.preview-brand-led .content-layout.preview-campaign-stage {min-height:540px;padding-top:164px;padding-bottom:32px;gap:32px}
  main.preview-home-grid {display:block}
  main.preview-brand-led>.gratitude-campaign {margin-bottom:0!important;padding:0}
  .gratitude-campaign .content-layout.preview-campaign-stage {min-height:420px;padding:32px 24px;gap:28px}
  main.preview-home-grid>section:not(.gratitude-campaign),main.preview-home-grid>.services-section:has(.service-values),.preview-home-grid>.services-section:has(>.massage-grid) {padding:32px 24px}
  main.preview-brand-led>.hero {display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1fr);gap:20px 24px}
  .preview-home-grid .hero-side {grid-column:2;grid-row:1;align-self:center}
  .preview-home-grid .hero-copy {grid-column:1/-1;grid-row:2}
  .preview-atmosphere {grid-column:1;grid-row:1;min-height:180px}
  .preview-home-grid .hero-emblem>strong {display:block;font-size:36px;margin:12px 0}
  .preview-home-grid .hero-emblem>strong br {display:block}
  .preview-home-grid .hero .preview-brand-title {font-size:22px}
}
@media(max-width:540px) {
  body:has(main.preview-brand-led)>.site-header {padding:16px 20px;gap:8px}
  body:has(main.preview-brand-led)>.site-header .brand {font-size:30px}
  body:has(main.preview-brand-led)>.site-header nav {font-size:12px}
  main.preview-brand-led .content-layout.preview-campaign-stage {min-height:500px;padding-top:148px;padding-bottom:28px;gap:32px}
  main.preview-brand-led .preview-campaign-offer {font-size:21px}
  .gratitude-campaign .content-layout.preview-campaign-stage {min-height:400px;padding:28px 20px;gap:24px}
  #campaign-title {font-size:42px}
  .gratitude-campaign .preview-campaign-offer {font-size:22px}
  .gratitude-campaign p {font-size:15px}
  .preview-campaign-stage>.content-copy {gap:16px}
  .gratitude-campaign .actions .button {font-size:13px;padding:10px 8px}
  main.preview-home-grid>section:not(.gratitude-campaign),main.preview-home-grid>.services-section:has(.service-values),.preview-home-grid>.services-section:has(>.massage-grid) {padding:28px 20px}
  main.preview-brand-led>.hero {gap:16px}
  .preview-atmosphere {min-height:164px}
  main.preview-brand-led .hero-emblem>strong {display:block;font-size:28px}
  .preview-home-grid .preview-slogan-line {display:block;white-space:nowrap}
  .preview-home-grid .hero .preview-brand-title {font-size:20px;margin-bottom:10px}
  .preview-home-grid>.gratitude-selection>.gift-flow {margin-bottom:16px}
  .preview-home-grid>.gratitude-selection>.service-actions {margin:16px 0 0}
  .preview-home-grid>.store-section {gap:16px}
  .preview-home-grid .hero p {font-size:16px}
}
/* The enduring brand owns the opening; replaceable campaigns follow it. */
main.preview-home-grid.preview-brand-led>.hero {grid-row:1;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;position:relative;isolation:isolate;min-height:100svh;padding:160px max(32px,calc((100% - 1156px)/2)) 64px;gap:24px;background:var(--brand-field);color:var(--on-brand);overflow:hidden}
main.preview-brand-led>.hero>.preview-atmosphere {position:absolute;grid-column:auto;grid-row:auto;inset:0;z-index:-2;min-height:0;width:100%;height:100%;border-radius:0;background-image:var(--home-background-image);background-position:center 55%}
main.preview-brand-led>.hero::before {content:'';position:absolute;inset:0;z-index:-1;background:var(--photo-scrim)}
main.preview-brand-led .hero-side {grid-column:1;grid-row:1;align-self:end}
main.preview-brand-led .hero-copy {grid-column:1;grid-row:2;align-self:start;max-width:44em}
main.preview-brand-led .hero-emblem>strong {display:block;font-size:clamp(48px,6vw,80px);line-height:1.2;margin:16px 0}
main.preview-brand-led .preview-slogan-line {display:block;white-space:normal}
main.preview-brand-led .hero-emblem>strong br {display:none}
main.preview-brand-led .hero-emblem>span,main.preview-brand-led .hero-emblem>small {color:var(--on-brand)}
main.preview-brand-led .hero .preview-brand-title {font-size:28px;line-height:1.5;margin:0 0 12px;max-width:none;color:var(--on-brand)}
main.preview-brand-led .hero p {color:var(--on-brand);margin:0}
main.preview-brand-led>.gratitude-campaign {grid-row:2;background:var(--surface);color:var(--ink)}
main.preview-brand-led .content-layout.preview-campaign-stage {grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-rows:auto;min-height:0;padding:48px max(32px,calc((100% - 1156px)/2));gap:24px 48px}
main.preview-brand-led .preview-campaign-stage>.content-copy>#campaign-title {color:var(--ink);line-height:1.3;align-self:start;margin:0}
main.preview-brand-led .preview-campaign-stage>.content-copy {grid-column:2;grid-row:1;max-width:none;gap:16px;align-self:center;min-width:0}
main.preview-brand-led .preview-campaign-stage:not(.has-image)>.content-copy {grid-column:1/-1}
main.preview-brand-led .preview-campaign-stage::before {display:none}
main.preview-brand-led .preview-campaign-photo {display:none}
main.preview-brand-led .preview-campaign-stage>.offer-image {position:static;grid-column:1;grid-row:1;align-self:center;width:100%;height:auto;max-height:300px;z-index:auto}
main.preview-brand-led .gratitude-campaign .button {border-color:var(--ink);color:var(--ink)}
main.preview-brand-led .gratitude-campaign .preview-campaign-primary {background:var(--brand-field);border-color:var(--brand-field);color:var(--on-brand)}
main.preview-brand-led .gratitude-campaign .button:hover {background:var(--campaign-accent);border-color:var(--campaign-accent);color:var(--brand-field)}
main.preview-brand-led .gratitude-campaign .button.primary {background:var(--campaign-accent);border-color:var(--campaign-accent);color:var(--brand-field)}
main.preview-brand-led .gratitude-campaign .button.primary:hover {background:var(--orange-dark);border-color:var(--orange-dark);color:var(--on-brand)}
main.preview-brand-led .gratitude-campaign a:focus-visible {outline-color:var(--ink)}
main.preview-brand-led .gratitude-campaign .content-copy>small {color:var(--muted)}
@media(max-width:800px) {
  main.preview-home-grid.preview-brand-led>.hero {padding:164px 24px 48px;gap:20px}
  main.preview-brand-led .hero-emblem>strong {font-size:60px}
  main.preview-brand-led .hero .preview-brand-title {font-size:24px}
  main.preview-brand-led .content-layout.preview-campaign-stage {padding:32px 24px;grid-template-columns:1fr;gap:20px}
  main.preview-brand-led .preview-campaign-stage>.content-copy {grid-column:1;grid-row:2}
  main.preview-brand-led .preview-campaign-stage>.offer-image {grid-row:1;max-width:none}
}
@media(max-width:540px) {
  main.preview-home-grid.preview-brand-led>.hero {padding:164px 20px 48px;gap:20px}
  main.preview-brand-led .hero-emblem>strong {font-size:48px}
  main.preview-brand-led .hero .preview-brand-title {font-size:22px}
  main.preview-brand-led .hero-copy p {font-size:15px;line-height:1.7}
  main.preview-brand-led .content-layout.preview-campaign-stage {padding:28px 20px}
}
/* Shared control states preserve the existing application behavior. */
.site-header nav a {display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding-inline:6px;text-underline-offset:7px}
.site-header nav a[aria-current=page] {border-bottom-color:var(--campaign-accent)}
.site-header nav a:focus-visible {outline:2px solid var(--campaign-accent);outline-offset:4px;border-radius:3px}
.site-header nav {position:relative}
.site-header nav.has-nav-indicator a.active {text-decoration:none}
.nav-indicator {position:absolute;left:0;top:0;width:1px;height:2px;background:var(--campaign-accent);transform-origin:0 0;pointer-events:none}
@media(prefers-reduced-motion:no-preference) {.nav-indicator {transition:transform 440ms var(--ease-out),opacity 320ms ease}}
.product-card,.card-body {background:transparent}
main button.primary,main .button.primary {background:var(--brand-field);border-color:var(--brand-field);color:var(--on-brand)}
main button.primary:not(:disabled):hover,main .button.primary:hover {background:var(--orange-dark);border-color:var(--orange-dark)}
main button.secondary,main .button.secondary {background:transparent;color:var(--ink);border-color:var(--field-border)}
main .text-button {background:transparent;color:var(--ink);border-color:transparent;text-decoration:underline;text-underline-offset:4px}
main button:focus-visible,main a:focus-visible,dialog button:focus-visible {outline:2px solid var(--orange-dark);outline-offset:4px}
main.preview-brand-led .hero a:focus-visible,.preview-home-grid>.services-section:has(>.massage-grid) a:focus-visible,.preview-home-grid>.services-section:has(>.massage-grid) .service-grid:focus-visible,section:has(>.preview-cart-items)>.panel a:focus-visible {outline-color:var(--campaign-accent)}
main button:disabled:not([aria-busy=true]) {background:var(--surface);color:var(--muted);border-color:var(--border);cursor:not-allowed;transform:none}
main button[aria-busy=true] {position:relative;cursor:wait;color:transparent!important;pointer-events:none}
main button[aria-busy=true]::after {content:'';position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px;border:2px solid var(--on-brand);border-top-color:transparent;border-radius:50%;animation:preview-busy-turn .7s linear infinite}
main button.secondary[aria-busy=true]::after {border-color:var(--ink);border-top-color:transparent}
main .detail-grid button[data-action=add][aria-busy=true]::after {border-color:var(--on-brand);border-top-color:transparent}
[data-action=wish] {display:inline-flex;align-items:center;justify-content:center;gap:8px}
[data-action=wish] svg {width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[data-action=wish][aria-pressed=true] {color:var(--orange-dark)}
[data-action=wish][aria-pressed=true] svg {fill:currentColor}
.wish-button:hover {background:var(--surface)}
.form input:not([type=checkbox]),.form textarea,.form select {border:1px solid var(--field-border);background:var(--field-ground);transition:border-color 320ms ease}
.form input:focus-visible,.form textarea:focus-visible,.form select:focus-visible {outline:2px solid var(--orange-dark);outline-offset:3px;border-color:var(--orange-dark)}
.form [aria-invalid=true],.form input:user-invalid,.form textarea:user-invalid {border-color:var(--error-ink)}
.form input[type=checkbox] {accent-color:var(--brand-field)}
.form .preview-field-error {display:block;margin-top:6px;font-size:13px;line-height:1.5;color:var(--error-ink)}
.form .form-error:not(:empty) {padding:12px 16px;background:var(--error-surface);color:var(--error-ink);border-radius:5px;font-size:14px;line-height:1.6}
#toast {border-radius:6px;background:var(--brand-field);color:var(--on-brand);padding:14px 20px;font-size:14px;line-height:1.6;box-shadow:none}
.has-purchase-bar~#toast {bottom:96px}
@keyframes preview-busy-turn {to {transform:rotate(360deg)}}
@media(max-width:540px) {
  .site-header nav a {padding-inline:4px}
}
@media(max-width:360px) {
  .site-header nav {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
}
@media(prefers-reduced-motion:reduce) {
  main button[aria-busy=true]::after {animation:none;border-top-color:var(--campaign-accent)}
  main .detail-grid button[data-action=add][aria-busy=true]::after {border-top-color:var(--campaign-accent)}
  .form input,.form textarea,.form select {transition:none}
}
/* Shared production and preview assets use the explicit server whitelist. */
:root.design-preview {--preview-hero-image:url(/assets/design-preview/sunlight-hero.webp);--preview-story-image:url(/assets/design-preview/lounge.webp);--home-background-image:var(--preview-story-image);--auth-background-image:var(--preview-story-image);--page-background-image:var(--preview-hero-image)}
/* Restin composition adapted to the existing service and gift content. */
body:has(main.preview-brand-led)>.site-header {padding:24px 4vw;min-height:100px;position:sticky;top:0}
body:has(main.preview-brand-led)>.site-header.is-scrolled {background:var(--brand-field)}
body:has(main.preview-brand-led)>.site-header nav {gap:24px}
main.preview-home-grid.preview-brand-led>.hero {grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:1fr auto;min-height:100svh;padding:184px 4vw 56px;gap:48px}
main.preview-brand-led .hero-copy {grid-column:1;grid-row:1;align-self:start;max-width:29em}
main.preview-brand-led .hero .preview-brand-title {font-family:inherit;font-size:22px;line-height:1.6;margin-bottom:16px}
main.preview-brand-led .hero-copy p {font-size:16px;line-height:1.8}
main.preview-brand-led .hero-copy>.button {margin-top:28px;background:var(--campaign-accent);border-color:var(--campaign-accent);color:var(--brand-field);border-radius:5px}
main.preview-brand-led .hero-copy>.button:hover {background:var(--on-brand);border-color:var(--on-brand);transform:translateY(-2px)}
main.preview-brand-led .hero-side {grid-column:1;grid-row:2;align-self:end}
main.preview-brand-led .hero-emblem>strong {font-family:var(--font-display,"PMingLiU",serif);font-weight:600;font-size:clamp(56px,6.2vw,100px);line-height:1.2;margin:0 0 16px}
main.preview-brand-led .hero-emblem>span {display:none}
main.preview-brand-led .hero-emblem>small {font-size:18px}
main.preview-brand-led>.hero>.preview-atmosphere {background-position:center 58%;transform-origin:center}
main.preview-brand-led>.hero::before {background:none}
main.preview-brand-led>.hero>.preview-atmosphere::before {content:'';position:absolute;inset:0;background:var(--photo-scrim)}
main.preview-home-grid>section:not(.hero):not(.gratitude-campaign),main.preview-home-grid>.services-section:has(.service-values),.preview-home-grid>.services-section:has(>.massage-grid) {padding-block:88px;scroll-margin-top:160px}
main.preview-brand-led .content-layout.preview-campaign-stage {padding-block:72px}
.service-card {transition:transform 800ms var(--ease-out)}
.service-card:hover {transform:translateY(-4px)}
.product-photo img {transition:transform 1000ms var(--ease-out)}
.product-photo:hover img {transform:scale(1.025)}
.button,button {transition:background-color 550ms ease,color 550ms ease,transform 550ms ease}
.button:active,button:not(:disabled):active {transform:translateY(1px)}
.preview-action-arrow {transition:transform 550ms var(--ease-out)}
.button:hover .preview-action-arrow {transform:translateX(4px)}
@media(prefers-reduced-motion:no-preference) {
  main.preview-brand-led>.hero>.preview-atmosphere {animation:storefront-photo-arrive 4000ms var(--ease-out) both}
}
@keyframes storefront-photo-arrive {from {transform:scale(1.06)}to {transform:scale(1)}}
@media(max-width:1100px) {
  main.preview-home-grid.preview-brand-led>.hero {gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body:has(main.preview-brand-led)>.site-header nav {gap:14px}
}
@media(max-width:800px) {
  body:has(main.preview-brand-led)>.site-header {padding:20px 24px;align-items:flex-start}
  main.preview-home-grid.preview-brand-led>.hero {padding:164px 24px 48px;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:32px}
  main.preview-brand-led .hero-copy {grid-column:1;grid-row:1;max-width:30em}
  main.preview-brand-led .hero .preview-brand-title {font-size:20px}
  main.preview-brand-led .hero-side {grid-column:1;grid-row:2;align-self:end}
  main.preview-brand-led .hero-emblem>strong {font-size:64px}
  main.preview-home-grid>section:not(.hero):not(.gratitude-campaign),main.preview-home-grid>.services-section:has(.service-values),.preview-home-grid>.services-section:has(>.massage-grid) {padding-block:32px}
  main.preview-brand-led .content-layout.preview-campaign-stage {padding-block:32px}
}
@media(max-width:540px) {
  body>.site-header {display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px}
  body>.site-header nav {width:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  body:has(main.preview-brand-led)>.site-header {padding:16px 20px;min-height:104px}
  body:has(main.preview-brand-led)>.site-header nav {gap:0}
  main.preview-home-grid.preview-brand-led>.hero {min-height:80svh;padding:140px 20px 32px;gap:24px}
  main.preview-brand-led .hero .preview-brand-title {font-size:18px}
  main.preview-brand-led .hero-copy p {font-size:15px}
  main.preview-brand-led .hero-copy>.button {margin-top:18px;font-size:14px}
  main.preview-brand-led .hero-emblem>strong {font-size:48px}
  main.preview-brand-led .hero-emblem>small {font-size:16px}
}
@media(max-width:360px) {
  body:has(main.preview-brand-led)>.site-header nav {display:grid;gap:0}
  main.preview-home-grid.preview-brand-led>.hero {padding-top:154px}
  main.preview-brand-led .hero-emblem>strong {font-size:42px}
}
@media(prefers-reduced-motion:reduce) {
  .service-card,.product-photo img,.button,button,.preview-action-arrow {transition:none}
  .service-card:hover,.product-photo:hover img,.button:hover,.button:active,button:not(:disabled):active,.button:hover .preview-action-arrow {transform:none}
  main.preview-brand-led .hero-copy>.button:hover {transform:none}
}
/* Shared inner-page composition: photographic title, breadcrumb, focused content, designed close. */
body:has(main.preview-inner-page) {display:grid;grid-template-columns:minmax(0,1fr)}
body:has(main.preview-inner-page)>.site-marquee {grid-column:1;grid-row:1;background:var(--brand-field);color:var(--on-brand)}
body:has(main.preview-inner-page)>.site-marquee a,body:has(main.preview-inner-page)>.site-marquee .marquee-label {color:inherit}
body:has(main.preview-inner-page)>.site-header {grid-column:1;grid-row:2;align-self:start;position:sticky;top:0;z-index:5;width:100%;max-width:none;padding:24px 4vw;margin:0;background:transparent;border:0;color:var(--on-brand);--ink:var(--on-brand);--orange:var(--campaign-accent);--orange-dark:var(--campaign-accent)}
body:has(main.preview-inner-page)>.site-header.is-scrolled {background:var(--brand-field)}
body:has(main.preview-inner-page)>.site-header .brand {font-size:40px}
body:has(main.preview-inner-page)>.site-header nav a {color:inherit}
body:has(main.preview-inner-page)>main {grid-column:1;grid-row:2;width:100%;min-width:0;margin:0}
main.preview-inner-page>.page-masthead {display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:24px;min-height:380px;padding:160px 32px 64px;position:relative;isolation:isolate;overflow:hidden;background:var(--brand-field);color:var(--on-brand);text-align:center}
main.preview-inner-page>.page-masthead::before {content:'';position:absolute;inset:0;z-index:-1;background-image:var(--page-background-image);background-color:var(--photo-shade);background-blend-mode:multiply;background-position:center 55%;background-size:cover}
main.preview-inner-page .page-masthead h1 {font-family:var(--font-display,"PMingLiU",serif);font-size:clamp(36px,4.2vw,60px);font-weight:600;line-height:1.3;margin:0;max-width:22em;overflow-wrap:anywhere;color:inherit}
.page-masthead nav {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;font-size:14px;max-width:48em}
.page-masthead nav>*+*::before {content:'›';margin-right:14px;color:var(--campaign-accent)}
.page-masthead nav a {display:inline-flex;align-items:center;min-height:44px;color:inherit;text-underline-offset:5px}
.page-masthead nav a:hover {color:var(--on-brand);text-decoration:underline}
.page-masthead nav a:focus-visible {outline-color:var(--campaign-accent)}
main.preview-inner-page>section {padding-block:64px}
main.preview-inner-page>section:has(>#gratitude-list) {display:block}
main.preview-inner-page>section:has(>#gratitude-list)>.product-search {max-width:560px;margin:20px 0}
main.preview-inner-page>section:has(>#gratitude-list)>.preview-gift-guide {margin:24px 0 12px}
main.preview-inner-page .product-grid {margin-top:24px;gap:40px 24px}
main.preview-inner-page .product-photo {border-radius:6px}
main.preview-inner-page .card-body {padding-top:16px;gap:8px}
main.preview-inner-page .product-title {font-size:19px;line-height:1.5}
main.preview-inner-page .product-card .secondary {color:var(--ink);text-underline-offset:5px}
main.preview-inner-page .product-card .secondary:hover {text-decoration:underline}
main.preview-inner-page .product-search {width:min(100%,560px);margin:0 0 16px}
main.preview-inner-page .product-search input {min-height:52px;background:var(--field-ground)}
main.preview-inner-page .detail-grid {margin-top:8px;gap:64px}
main.preview-inner-page .detail-grid>.detail-photo {top:144px}
main.preview-inner-page .preview-detail-summary {margin:20px 0 28px;padding:24px}
main.preview-inner-page .detail-grid .faq summary::after {content:'+';margin-left:auto;font-size:22px;font-weight:400;transition:transform 550ms var(--ease-out)}
main.preview-inner-page .detail-grid .faq[open] summary::after {transform:rotate(45deg)}
main.preview-inner-page .events-page .event-card {margin-bottom:48px;align-items:stretch}
main.preview-inner-page .events-page .event-body {padding:40px}
main.preview-inner-page .events-page .event-body h2 {font-family:var(--font-display,"PMingLiU",serif);font-size:clamp(26px,2.4vw,36px);font-weight:600;line-height:1.4;text-wrap:pretty;word-break:normal;overflow-wrap:break-word}
.event-month {white-space:nowrap}
main.preview-inner-page .events-page .event-body>.preline {line-height:1.9}
main.preview-inner-page .events-page .event-period {color:var(--orange-dark);font-size:15px}
main.preview-inner-page .events-page .event-card .button {margin-top:12px}
main.preview-inner-page>section.auth {margin:64px auto}
.auth-story {grid-column:1;grid-row:1;z-index:1;align-self:end;padding:40px;color:var(--on-brand)}
.auth-story>p {font-family:var(--font-display,"PMingLiU",serif);font-size:36px;line-height:1.45;margin:0 0 20px}
.auth-story>span {font-size:16px}
section.auth:has(>.back)>.auth-story {grid-row:2}
main.preview-inner-page #checkout-form {padding:36px}
.checkout-summary {grid-column:1;grid-row:2;position:sticky;top:144px;padding:32px;background:var(--brand-field);color:var(--on-brand);border-radius:6px;min-width:0}
.checkout-summary h2 {font-family:var(--font-display,"PMingLiU",serif);font-size:30px;margin:0 0 24px;color:inherit}
.checkout-summary p {font-size:16px;line-height:1.8;overflow-wrap:anywhere}
.checkout-summary p:last-child {margin-top:28px;color:var(--on-brand-muted)}
main.preview-inner-page section:has(>.preview-cart-items)>.panel {top:144px}
main.preview-inner-page section:has(>.order-grid)>.actions {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0 40px}
main.preview-inner-page .order-grid>div {background:var(--surface)}
main.preview-inner-page .order .split {align-items:flex-start;gap:16px}
main.preview-inner-page .order .badge {border-radius:3px;padding:5px 10px;white-space:normal;text-align:center}
main.preview-inner-page .order hr {border:0;margin:20px 0}
main.preview-inner-page .reservation-actions {display:grid;gap:16px}
main.preview-inner-page .empty {padding:48px;background:var(--surface);font-size:17px;text-align:left}
main.preview-inner-page .empty .button {margin:20px 0 0;display:flex;width:fit-content}
main.preview-inner-page>section.narrow>.panel.preline {max-width:76ch;margin-inline:auto;font-size:16px;line-height:1.9}
.confirm-dialog {border:0;border-radius:8px;background:var(--page-ground);color:var(--ink);padding:32px}
.confirm-dialog h2 {font-family:var(--font-display,"PMingLiU",serif);font-size:28px;line-height:1.5}
.confirm-dialog::backdrop {background:var(--photo-caption)}
.confirm-dialog .actions {gap:12px;margin-top:24px}
.confirm-dialog button:focus-visible {outline:2px solid var(--orange-dark);outline-offset:4px}
.site-footer {grid-column:1;max-width:none;width:100%;margin:0;padding:64px max(32px,calc((100% - 1156px)/2)) 32px;background:var(--brand-field);color:var(--on-brand);display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;border:0}
.site-footer .footer-brand {font-family:var(--font-display,"PMingLiU",serif);font-size:clamp(48px,6vw,80px);font-weight:600;line-height:1.2;letter-spacing:.08em;color:inherit;width:fit-content}
.site-footer>p {grid-column:1;grid-row:2;font-size:18px;margin:0}
.site-footer nav {grid-column:2;grid-row:1 / span 2;align-self:center;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
.site-footer nav a {display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:inherit;width:fit-content;text-underline-offset:6px}
.site-footer a:hover {color:var(--campaign-accent);text-decoration:underline}
.site-footer a:focus-visible {outline:2px solid var(--campaign-accent);outline-offset:4px}
.site-footer>small {grid-column:1/-1;font-size:12px;line-height:1.7;color:var(--on-brand-muted);margin-top:24px}
@media(prefers-reduced-motion:no-preference) {
  .page-masthead-enter::before {animation:storefront-photo-arrive 2800ms var(--ease-out) both}
  .confirm-dialog[open] {animation:storefront-dialog-enter 200ms var(--ease-out)}
}
@keyframes storefront-dialog-enter {from {opacity:.6;transform:translateY(12px)}to {opacity:1;transform:none}}
@media(max-width:1100px) {
  main.preview-inner-page>section.auth {margin:48px 32px}
}
@media(max-width:800px) {
  body:has(main.preview-inner-page)>.site-header {padding:20px 24px}
  body:has(main.preview-inner-page)>.site-header .brand {font-size:32px}
  main.preview-inner-page>.page-masthead {min-height:360px;padding:184px 24px 40px;gap:12px}
  main.preview-inner-page>section {padding-block:40px}
  main.preview-inner-page>section.auth {margin:40px 24px}
  .auth-story {padding:28px}
  .auth-story>p {font-size:30px}
  .checkout-summary {grid-column:1;grid-row:2;position:static;padding:24px}
  main.preview-inner-page #checkout-form {grid-row:3;padding:28px}
  main.preview-inner-page section:has(>.order-grid)>.actions {grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer {padding:48px 24px 28px;gap:24px}
}
@media(max-width:540px) {
  body:has(main.preview-inner-page)>.site-header {padding:16px 20px}
  body:has(main.preview-inner-page)>.site-header .brand {font-size:28px}
  main.preview-inner-page>.page-masthead {min-height:240px;padding:132px 20px 24px;gap:8px}
  main.preview-inner-page .page-masthead h1 {font-size:30px;line-height:1.4}
  .page-masthead nav {font-size:13px;gap:4px 8px}
  .page-masthead nav>*+*::before {margin-right:8px}
  .page-masthead nav>[aria-current] {display:none}
  main.preview-inner-page>section {padding-block:24px}
  main.preview-inner-page .product-grid {gap:32px 12px}
  main.preview-inner-page .product-title {font-size:16px}
  main.preview-inner-page .detail-grid {gap:24px}
  main.preview-inner-page .preview-detail-summary {padding:16px;margin:16px 0}
  main.preview-inner-page .events-page .event-body {padding:24px 20px}
  main.preview-inner-page>section.auth {margin:24px 20px}
  main.preview-inner-page>section.auth>.auth-story {display:none}
  main.preview-inner-page #checkout-form {padding:24px 20px}
  main.preview-inner-page .empty {padding:28px 20px}
  .confirm-dialog {padding:24px 20px;max-width:calc(100% - 32px)}
  .confirm-dialog h2 {font-size:23px}
  .site-footer {grid-template-columns:1fr;padding:28px 20px 24px}
  .site-footer>p {grid-column:1;grid-row:2;font-size:16px}
  .site-footer nav {grid-column:1;grid-row:3;margin-top:8px}
  .site-footer>small {margin-top:8px}
}
@media(prefers-reduced-motion:reduce) {
  main.preview-inner-page .detail-grid .faq summary::after {transition:none}
}
@media(max-width:360px) {
  main.preview-inner-page .page-masthead h1 {font-size:26px}
  main.preview-inner-page .events-page .event-body h2 {font-size:22px}
}
@media(min-width:801px) {
  main.preview-inner-page>section:has(>#gratitude-list) {display:grid;grid-template-columns:1fr 1fr;gap:8px 40px}
  main.preview-inner-page section:has(>#gratitude-list)>.back {grid-column:1;grid-row:1;margin:0}
  main.preview-inner-page section:has(>#gratitude-list)>p.muted:not(#gratitude-count) {grid-column:1;grid-row:2}
  main.preview-inner-page section:has(>#gratitude-list)>.product-search {grid-column:2;grid-row:1 / span 2;align-self:center;max-width:none;margin:0}
  main.preview-inner-page section:has(>#gratitude-list)>.preview-gift-guide {grid-row:3}
  main.preview-inner-page section:has(>#gratitude-list)>#gratitude-count {grid-row:4}
  main.preview-inner-page section:has(>#gratitude-list)>#gratitude-list {grid-row:5}
  main.preview-inner-page section:has(>#gratitude-list)>.catalogue-pagination {grid-row:6}
  main.preview-inner-page section:has(>#gratitude-list)>[data-search-count] {display:none}
}

@media(max-width:800px),(max-height:540px),(pointer:coarse) {
  main.preview-brand-led>.hero>.preview-atmosphere,.page-masthead-enter::before,.confirm-dialog[open] {animation:none}
  .service-card,.product-photo img,.button,button,.preview-action-arrow,.nav-indicator {transition:none}
  .design-preview main button,.design-preview main .button,.design-preview dialog button {transition:none}
  .service-card:hover,.product-photo:hover img,.button:hover,.button:active,button:not(:disabled):active,.button:hover .preview-action-arrow {transform:none}
  main.preview-brand-led .hero-copy>.button:hover {transform:none}
}
.design-preview .service-grid {scrollbar-color:var(--orange) var(--sun-field);scrollbar-width:thin}
.design-preview .massage-grid {scrollbar-color:var(--campaign-accent) var(--brand-field)}
main .detail-grid button[data-action="add"] {min-inline-size:8em}
main button[data-action="add"].is-added,main button[data-action="add"].is-added:hover {background:var(--campaign-accent);border-color:var(--campaign-accent);color:var(--brand-field)}

/* Shared compact catalogue cards: six columns on desktop, three on phones. */
.design-preview main .product-grid {grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 16px}
.design-preview main .product-card {position:relative;min-width:0}
.design-preview main .product-grid>.empty {grid-column:1/-1}
.design-preview main .card-body {padding:8px 0 0;gap:4px;min-width:0}
.design-preview main .card-body>.muted {font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.design-preview main .product-title {font-size:15px;line-height:1.4;min-height:2.8em;text-wrap:wrap;overflow-wrap:anywhere}
.design-preview main .card-body .split {display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:2px}
.design-preview main .card-body .price {font-size:13px;line-height:1.4}
.design-preview main .card-body .stock {font-size:12px;line-height:1.4}
.design-preview main .product-card .wish-button {position:static;width:44px;height:44px;padding:0;background:transparent;color:var(--ink)}
.design-preview main .product-card .wish-button:hover {background:var(--surface)}
.design-preview main .product-card .wish-button svg {width:20px;height:20px}
.design-preview main .product-card .primary,.design-preview main .product-card .secondary {font-size:13px;line-height:1.4;min-height:44px;margin:0;padding:6px 3px;justify-content:center;white-space:normal}
.design-preview main .product-card .secondary::after {content:none}
.card-spec-mobile {display:none}
.catalogue-pagination {display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;font-variant-numeric:tabular-nums}
.catalogue-pagination>[aria-disabled=true] {opacity:.5;cursor:default}
#gratitude-list .product-photo {scroll-margin-top:calc(var(--site-header-height,144px) + 20px)}
@media(max-width:1000px) {
  .design-preview main .card-body .split .price {grid-column:1/-1;grid-row:1}
  .design-preview main .card-body .split .wish-button {grid-column:2;grid-row:2}
}
@media(max-width:800px) {
  .design-preview main .product-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 8px}
  .design-preview main .product-title {font-size:13px}
  .design-preview main .card-body .price {font-size:12px}
  .design-preview main .product-card .primary,.design-preview main .product-card .secondary {font-size:12px}
  .card-spec-desktop {display:none}
  .card-spec-mobile {display:inline}
  .catalogue-pagination {gap:10px}
  .catalogue-pagination .button {font-size:13px;padding:8px 12px}
}