/* TVC POD Shop — product carousel * Colors match thevikingcontent.com's own palette (dark burgundy / gold), * so this drops into the homepage without looking bolted on. */ /* The carousel's Themify Builder row (see CAROUSEL_ROW_CID in * class-tvc-pod-carousel.php) gets moved into place on the homepage by * PHP rather than being styled by Themify's own per-row CSS generator, so * it never inherited the site's dark row background (#1f0a0e) the way * every hand-built row on the page does — it was falling through to the * theme's plain white background instead. Setting it here on both * the row itself and the carousel div is belt-and-braces: whichever one * ends up covering the row's full width, the white gap disappears. */ .tb_4s7o93, .tvc-carousel { background-color: #1f0a0e; } .tvc-carousel { position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; cursor: grab; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge */ padding: 28px 0 40px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); } .tvc-carousel::-webkit-scrollbar { display: none; } .tvc-carousel.tvc-dragging { cursor: grabbing; scroll-behavior: auto; } .tvc-carousel-track { display: flex; align-items: flex-start; gap: 28px; width: max-content; will-change: scroll-position; } .tvc-carousel-card { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; width: 190px; text-decoration: none; transform: rotate(-2deg); transition: transform 0.25s ease; } .tvc-carousel-track > .tvc-carousel-card:nth-child(even) { transform: rotate(2deg); } .tvc-carousel-card:hover, .tvc-carousel-card:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.04); z-index: 2; } .tvc-carousel-img-wrap { display: block; width: 190px; height: 190px; border-radius: 16px; background: #fff; padding: 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(201, 166, 103, 0.15); transition: box-shadow 0.25s ease; } .tvc-carousel-card:hover .tvc-carousel-img-wrap, .tvc-carousel-card:focus-visible .tvc-carousel-img-wrap { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55), 0 0 0 2px #c9a667; } .tvc-carousel-img-wrap img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; } .tvc-carousel-meta { margin-top: 14px; text-align: center; display: flex; flex-direction: column; gap: 4px; } .tvc-carousel-title { font-family: "Norse", "Bank Gothic", sans-serif; font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; color: #ffffff; line-height: 1.35; } .tvc-carousel-price { font-family: "Norse", "Bank Gothic", sans-serif; font-size: 14px; font-weight: bold; color: #c9a667; } @media (max-width: 600px) { .tvc-carousel-card, .tvc-carousel-img-wrap { width: 150px; } .tvc-carousel-img-wrap { height: 150px; } } @media (prefers-reduced-motion: reduce) { .tvc-carousel-card { transform: none !important; } }