/*
  Arc interaction layer for the Sonlum product page.
  Motion and interaction only: no type, colour or layout changes to the store's identity.
  Every rule is scoped under html.arc, which arc-ui.js sets, so without the script the page behaves exactly as before.

  Motion tokens are Arc's (uiarc.dev motion-tokens): snappy 0.26s, smooth 0.4s, morph 0.42s visual duration, all
  critically damped (no overshoot). CSS has no spring, so the springs are expressed as one linear() curve (a critically
  damped response) at the settle time of each spring, with Arc's ease.standard as the fallback where linear() is missing.
*/
:root {
  --arc-spring: cubic-bezier(.22, 1, .36, 1);
  --arc-ease-standard: cubic-bezier(.22, 1, .36, 1);
  --arc-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --arc-ease-exit: cubic-bezier(.7, 0, .84, 0);
  --arc-instant: 120ms;
  --arc-fast: 160ms;
  --arc-exit: 180ms;
  --arc-standard: 240ms;
  --arc-snappy: 400ms;   /* spring.snappy, settled */
  --arc-glide: 520ms;    /* gallery rail glide */
  --arc-smooth: 610ms;   /* spring.smooth, settled */
  --arc-morph: 640ms;    /* spring.morph, settled */
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --arc-spring: linear(0, .0265 3.1%, .0902 6.2%, .1734 9.4%, .2642 12.5%, .3732 16.2%, .4751 20%, .594 25%, .6916 30%, .7689 35%, .8414 41.2%, .8926 47.5%, .9337 55%, .9596 62.5%, .9794 72.5%, .9913 85%, 1); }
}

/* 1. Gallery ------------------------------------------------------------- */
html.arc .stage { touch-action: pan-y; -webkit-tap-highlight-color: transparent; cursor: zoom-in; }
html.arc .stage .arrow { cursor: pointer; }
/* The script owns the track's motion (a spring with momentum), so the CSS tween steps aside. */
html.arc .stage[data-arc-gallery] .slides { transition: none; will-change: transform; }
html.arc .slides img { -webkit-user-drag: none; }
html.arc .stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
html.arc .stage:focus:not(:focus-visible) { outline: none; }
html.arc .zoom[role="button"] { cursor: pointer; z-index: 3; transition: scale var(--arc-snappy) var(--arc-spring), opacity var(--arc-fast) var(--arc-ease-standard); }
html.arc .zoom[role="button"]:active { scale: .92; }
html.arc .zoom[role="button"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
html.arc .stage[data-arc-lens] .zoom { opacity: 0; }

/* The lens: a round window onto the same photo at higher magnification. It rides a spring behind the pointer. */
.arc-lens {
  position: absolute; z-index: 2; top: 0; left: 0; width: 176px; height: 176px; overflow: hidden; border-radius: 50%;
  background: var(--soft, #f5f5f5); box-shadow: 0 10px 30px rgba(0, 0, 0, .16); pointer-events: none;
  opacity: 0; scale: .6; will-change: transform;
  transition: opacity var(--arc-fast) var(--arc-ease-standard), scale var(--arc-glide) var(--arc-spring);
}
.arc-lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .72), inset 0 0 0 2.5px rgba(0, 0, 0, .08); }
.arc-lens.on { opacity: 1; scale: 1; }
.arc-lens img { position: absolute; top: 0; left: 0; max-width: none; object-fit: cover; will-change: transform; }

/* One ring glides between thumbnails instead of the border jumping. */
html.arc .thumbs[data-arc-rail] { position: relative; }
/* The page's own current-thumb border goes transparent (same size, no shift); the ring wears it instead and glides. */
html.arc .thumbs[data-arc-rail] .thumb[aria-current="true"] { border-color: transparent; }
html.arc .thumb { opacity: .72; transition: opacity var(--arc-fast) var(--arc-ease-standard), scale var(--arc-snappy) var(--arc-spring); }
html.arc .thumb[aria-current="true"], html.arc .thumb:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) { html.arc .thumb:hover { opacity: 1; } }
html.arc .thumb:active { scale: .96; }
html.arc .thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.arc-rail-ring {
  /* Shadow and radius are copied from the page's own current thumbnail by arc-ui.js. */
  position: absolute; z-index: 1; top: 0; left: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px #000;
  pointer-events: none; opacity: 0; will-change: transform;
  transition: transform var(--arc-glide) var(--arc-spring), opacity var(--arc-fast) var(--arc-ease-standard);
}
.arc-rail-ring.on { opacity: 1; }
.arc-rail-ring.snap { transition: opacity var(--arc-fast) var(--arc-ease-standard); }
html.arc .dots span { transition: background-color var(--arc-fast) var(--arc-ease-standard), scale var(--arc-snappy) var(--arc-spring); }
html.arc .dots span[aria-current="true"] { scale: 1.15; }

/* Fullscreen viewer. It grows out of the photo's own rectangle and returns to it. */
.arc-viewer { position: fixed; z-index: 1000; inset: 0; color: var(--ink, #111); font-family: var(--sans, system-ui); font-size: 14px; }
.arc-viewer-backdrop {
  position: absolute; inset: 0; background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  opacity: 0; transition: opacity var(--arc-fast) var(--arc-ease-standard);
}
.arc-viewer-frame {
  position: absolute; overflow: hidden; background: var(--soft, #f5f5f5); border-radius: 12px; cursor: zoom-in;
  touch-action: none; -webkit-user-select: none; user-select: none; transform-origin: 50% 50%; will-change: transform;
}
.arc-viewer-frame[data-zoomed] { cursor: zoom-out; }
.arc-viewer-zoom { position: absolute; inset: 0; will-change: transform; }
.arc-viewer-track { position: absolute; inset: 0; display: flex; will-change: transform; }
[dir="rtl"] .arc-viewer-track { flex-direction: row-reverse; }
.arc-viewer-track img { flex: none; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.arc-viewer-top { position: absolute; top: 0; inset-inline: 0; display: flex; height: 64px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 0 24px; }
[dir="rtl"] .arc-viewer-top { padding: 0 24px 0 16px; }
.arc-viewer-count { font-weight: 500; }
.arc-viewer-nav { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; display: flex; align-items: center; gap: 14px; translate: -50% 0; }
.arc-viewer-btn {
  display: grid; width: 44px; height: 44px; flex: none; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line, #e6e6e6); color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--arc-fast) var(--arc-ease-standard), opacity var(--arc-fast) var(--arc-ease-standard), scale var(--arc-snappy) var(--arc-spring);
}
.arc-viewer-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .arc-viewer-nav .arc-viewer-btn svg { transform: scaleX(-1); }
.arc-viewer-btn:active:not(:disabled) { scale: .94; }
.arc-viewer-btn:disabled { cursor: default; opacity: .35; }
.arc-viewer-btn:focus-visible { outline: 2px solid var(--ink, #111); outline-offset: 2px; }
.arc-viewer-btn:focus:not(:focus-visible) { outline: none; }
@media (hover: hover) and (pointer: fine) { .arc-viewer-btn:not(:disabled):hover { background: var(--soft, #f5f5f5); } }
.arc-viewer-dots { display: flex; gap: 6px; }
.arc-viewer-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .22); transition: background-color var(--arc-fast) var(--arc-ease-standard), scale var(--arc-snappy) var(--arc-spring); }
.arc-viewer-dots span.on { background: var(--ink, #111); scale: 1.3; }
.arc-viewer-top, .arc-viewer-nav { opacity: 0; transition: opacity var(--arc-instant) var(--arc-ease-standard); }
.arc-viewer.open .arc-viewer-backdrop { opacity: 1; }
.arc-viewer.open .arc-viewer-top, .arc-viewer.open .arc-viewer-nav { opacity: 1; transition: opacity var(--arc-standard) var(--arc-ease-standard) 120ms; }
@media (max-width: 640px) { .arc-viewer-top { height: 56px; padding: 0 12px 0 16px; } [dir="rtl"] .arc-viewer-top { padding: 0 16px 0 12px; } }
html.arc-locked, html.arc-locked body { overflow: hidden; }

/* 2. Bundle cards: one selection ring slides between options -------------- */
html.arc .bundles[data-arc-ring] { position: relative; }
html.arc .bundles[data-arc-ring] .bundle:has(input:checked) { box-shadow: none; }
html.arc .bundle {
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--arc-fast) var(--arc-ease-standard), scale var(--arc-snappy) var(--arc-spring);
}
/* Press feel on the cards that are not selected (the selected one carries the ring, which must stay aligned). */
html.arc .bundle:not(:has(input:checked)):active { scale: .985; background: var(--soft); }
html.arc .bundle:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
html.arc .bundle input:focus-visible { outline: none; }
html.arc .bundle input { transition: border-color var(--arc-fast) var(--arc-ease-standard); }
html.arc .bundle input:checked::after { animation: arc-dot-in var(--arc-snappy) var(--arc-spring) both; }
@keyframes arc-dot-in { from { transform: scale(0); } to { transform: scale(1); } }
.arc-bundle-ring {
  /* Its shadow, radius and border width are copied from the page's own checked card by arc-ui.js. */
  position: absolute; z-index: 1; top: 0; left: 0; box-sizing: border-box; border: 0 solid transparent; border-radius: 10px;
  pointer-events: none; opacity: 0; will-change: transform;
  transition: transform var(--arc-morph) var(--arc-spring), opacity var(--arc-fast) var(--arc-ease-standard);
}
.arc-bundle-ring.on { opacity: 1; }
.arc-bundle-ring.snap { transition: opacity var(--arc-fast) var(--arc-ease-standard); }

/* 3. Buttons: press feedback on Arc's snappy spring ----------------------- */
/* The individual scale property composes with any transform a control already has (the gallery arrows are centred with one). */
html.arc :is(.buy, .wa-btn, .arrow, .pill, .icon-btn, .chat, .sheet-close, [data-arc-press]) {
  -webkit-tap-highlight-color: transparent;
  transition: scale var(--arc-snappy) var(--arc-spring), opacity var(--arc-fast) var(--arc-ease-standard), background-color var(--arc-fast) var(--arc-ease-standard);
}
html.arc :is(.buy, .wa-btn, .arrow, .pill, .icon-btn, .chat, .sheet-close, [data-arc-press]):active:not([aria-disabled="true"]):not(:disabled) { scale: .97; }
html.arc .chat:active { scale: .94; }

/* 4. Accordions: height on the smooth spring, content settles into place --- */
html.arc details[data-arc-anim] { overflow: hidden; }
html.arc details > .panel { transition: opacity var(--arc-standard) var(--arc-ease-enter), transform var(--arc-smooth) var(--arc-spring); }
html.arc details.arc-closing > .panel { opacity: 0; transform: translateY(-6px); transition: opacity var(--arc-fast) var(--arc-ease-standard), transform var(--arc-fast) var(--arc-ease-standard); }
html.arc details.arc-opening > .panel { opacity: 0; transform: translateY(-6px); transition: none; }
html.arc summary::after { transition: transform var(--arc-snappy) var(--arc-spring); }
/* While a panel closes, its marker already shows the closed state (copied from the page's own closed marker by arc-ui.js). */
html.arc details.arc-closing[data-arc-glyph] > summary::after {
  background-image: var(--arc-glyph-image) !important; background-size: var(--arc-glyph-size) !important;
  background-position: var(--arc-glyph-position) !important; transform: var(--arc-glyph-transform) !important;
  border-color: var(--arc-glyph-border) !important;
}
html.arc summary { -webkit-tap-highlight-color: transparent; }
html.arc summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
html.arc summary:focus:not(:focus-visible) { outline: none; }

/* 5. Sticky bar and strips ------------------------------------------------ */
/* Enter on the smooth spring, exit faster on Arc's exit curve. The bar fades a touch as it travels. */
html.arc .sticky { opacity: 0; transition: transform var(--arc-standard) var(--arc-ease-exit), opacity var(--arc-exit) var(--arc-ease-standard); }
html.arc .sticky.show { opacity: 1; transition: transform var(--arc-smooth) var(--arc-spring), opacity var(--arc-standard) var(--arc-ease-enter); }
@media (min-width: 1000px) {
  html.arc .sticky { transform: translateY(24px) scale(.98); }
  html.arc .sticky.show { transform: none; }
  html.arc .sticky:not(.show) { pointer-events: none; }
}
/* Items enter and leave the strips through a soft edge instead of a hard cut, and strips rest while off screen. */
html.arc .marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
html.arc .marquee .marquee-track { transition: opacity var(--arc-considered, 480ms) var(--arc-ease-standard); }
html.arc .marquee[data-arc-offscreen] .marquee-track { animation-play-state: paused; }
html.arc .marquee.arc-swap .marquee-track { opacity: 0; transition: none; }
html.arc .review-track { transition: transform var(--arc-smooth) var(--arc-spring); }

/* 6. Reduced motion: final states only, no travel ------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.arc *, html.arc *::before, html.arc *::after, .arc-viewer *, .arc-lens, .arc-lens img {
    transition-duration: 0ms !important; transition-delay: 0ms !important; animation-duration: 0ms !important;
  }
  html.arc .sticky { transition: opacity var(--arc-fast) linear !important; }
  html.arc .arc-viewer-backdrop { transition: opacity var(--arc-fast) linear !important; }
  html.arc :is(.buy, .wa-btn, .arrow, .pill, .icon-btn, .chat, .sheet-close, .thumb, .bundle, [data-arc-press]):active { scale: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .arc-viewer-backdrop { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}