/* Isolated replacement for the philosophy collage. */
.cv-philosophy-reels { width: min(360px, 100%); margin: 0 auto; }
.cv-philosophy-reels__frame { padding: 9px; border: 1px solid #D4C5B0; border-radius: 36px; background: #F5F0E6; box-shadow: 0 20px 48px rgba(89,67,48,.13), inset 0 0 0 3px rgba(255,255,255,.65); }
.cv-philosophy-reels__screen { position: relative; isolation: isolate; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 27px; background: #EAE3D9; touch-action: pan-y pinch-zoom; }
.cv-philosophy-reels__screen:focus-visible { outline: 2px solid #C9A87C; outline-offset: 4px; }
.cv-philosophy-reel { position: absolute; inset: 0; overflow: hidden; background: #EAE3D9; }
.cv-philosophy-reel[hidden] { display: none; }
.cv-philosophy-reel video, .cv-philosophy-reel img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cv-philosophy-reel img { pointer-events: none; }
.cv-philosophy-reel img[hidden] { display: none; }
.cv-philosophy-reels__progress { position: absolute; z-index: 2; left: 16px; right: 16px; top: 16px; display: flex; gap: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); pointer-events: none; }
.cv-philosophy-reels__segment { flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.3); }
.cv-philosophy-reels__segment span { display: block; height: 100%; background: rgba(255,255,255,.95); transform: scaleX(0); transform-origin: left; }
.cv-philosophy-reels__controls { position: absolute; z-index: 2; right: 14px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.cv-philosophy-reels__controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(201,168,124,.75); border-radius: 50%; color: #1A1A1A; background: rgba(245,240,230,.93); cursor: pointer; box-shadow: 0 2px 8px rgba(26,26,26,.12); transition: background .2s ease; }
.cv-philosophy-reels__controls button:hover { background: #fff; }
.cv-philosophy-reels__controls button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cv-philosophy-reels__controls button:disabled { opacity: .5; cursor: default; }
.cv-philosophy-reels__controls svg { display: block; width: 18px; height: 18px; }
.cv-philosophy-reels__pause .cv-philosophy-reels__play-icon { display: none; }
.cv-philosophy-reels[data-paused="true"] .cv-philosophy-reels__pause .cv-philosophy-reels__play-icon { display: block; }
.cv-philosophy-reels[data-paused="true"] .cv-philosophy-reels__pause .cv-philosophy-reels__pause-icon { display: none; }
.cv-philosophy-reels__caption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; margin: 0; padding: 44px 76px 22px 20px; color: #fff; font-size: .75rem; background: linear-gradient(transparent,rgba(0,0,0,.4)); pointer-events: none; }
.cv-philosophy-reels__caption[hidden] { display: none; }
.cv-philosophy-reels__status { position: absolute; z-index: 1; left: 16px; right: 76px; bottom: 20px; color: #fff; font-size: .7rem; line-height: 1.6; text-shadow: 0 1px 5px #1A1A1A; }
.cv-philosophy-reels__status:empty { display: none; }
.cv-philosophy-reels__fallback { display: grid; place-items: center; height: 100%; padding: 30px; text-align: center; font-family: var(--font-logo); }
@media (max-width: 1024px) { .cv-philo-media.cv-philosophy-reels { width: min(330px,86vw); max-width: none; } }
/* Keep the existing fixed cart clear of all three controls, including 320px screens. */
@media (max-width: 480px) { .cv-philosophy-reels__controls { right: 26px; } }
@media (prefers-reduced-motion: reduce) { .cv-philosophy-reels__controls button { transition: none; } }