/* Theme sales page (views/pages/theme-sales.php). The design's own rules, scoped to .theme-sales so
   they cannot reach the site header, footer or any other page. Colours and sizes are the approved ones. */
.theme-sales{font-family:'Inter',system-ui,sans-serif;color:#0b0b0c;background:#fff}
.theme-sales a{color:#0b0b0c}
.theme-sales a:hover{color:#c2410c}
.theme-sales summary{cursor:pointer;list-style:none}
.theme-sales summary::-webkit-details-marker{display:none}
.theme-sales details[open] .faq-plus{transform:rotate(45deg)}
.theme-sales .wrap{max-width:1280px;margin:0 auto;padding-left:32px;padding-right:32px;box-sizing:border-box}
.theme-sales .eyebrow{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#c2410c}
.theme-sales .h2{margin:0;font-family:'Clash Display',sans-serif;font-weight:600;letter-spacing:0;word-spacing:.12em;font-size:clamp(30px,3.8vw,50px);line-height:1.04}
.theme-sales .h3{margin:0;font-family:'Clash Display',sans-serif;font-weight:600;letter-spacing:0;word-spacing:.1em;font-size:24px;line-height:1.1}
.theme-sales .lede{margin:0;font-size:18px;line-height:1.6;color:#52525b}
.theme-sales .p{margin:0;font-size:16px;line-height:1.6;color:#52525b}
.theme-sales .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;background:#0b0b0c;color:#fff;text-decoration:none;font-size:15px;font-weight:500;letter-spacing:.01em;box-sizing:border-box}
.theme-sales .btn:hover{background:#ff6333;color:#fff}
.theme-sales .btn2{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;background:transparent;color:#0b0b0c;text-decoration:none;font-size:15px;font-weight:500;border:1.5px solid #0b0b0c;box-sizing:border-box}
.theme-sales .btn2:hover{border-color:#ff6333;color:#c2410c}
.theme-sales .card{background:#f7f6f3;border:1px solid #e7e4df;border-radius:6px;padding:28px;box-sizing:border-box}
.theme-sales .tick{flex:none;margin-top:3px}
.theme-sales .row{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.theme-sales h1,.theme-sales h2,.theme-sales h3,.theme-sales p,.theme-sales ul,.theme-sales figure{margin-top:0}
.theme-sales button{font:inherit}
.theme-sales button.btn{border:0;cursor:pointer}
.theme-sales button.btn2{cursor:pointer}
.theme-sales form[data-theme-checkout]{margin:0}
.theme-sales [data-lightbox]:not([hidden]){display:flex}
@media (max-width:560px){.theme-sales .wrap{padding-left:20px;padding-right:20px}}

/* Hero preview: a 580px window onto the full page capture. Not scrollable by wheel, so it never traps the page's own scroll; assets/js/pages/theme-sales.js drifts it, and the expand button opens the whole capture. */
.theme-sales .hero-scroll{display:block;height:580px;overflow:hidden;position:relative;background-size:100% auto;background-repeat:no-repeat;background-position:top}
.theme-sales .hero-scroll-img{display:block;width:100%;height:auto}

/* Hero gallery: a strip of the theme's pages along the bottom of the hero, eight thumbnails sharing the container's width at a time, the rest a sideways scroll away. Swipe or scroll it sideways; choosing one shows that page in the window. The line above
   each thumbnail is that page's progress as it scrolls: full for pages already seen, empty for those still to come. */
.theme-sales .hero-thumbs{position:relative;display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;margin-top:44px;padding:4px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.theme-sales .hero-thumb{flex:0 0 max(128px,calc((100% - 98px) / 8));margin:0;padding:0;border:0;background:none;text-align:left;cursor:pointer;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px}
.theme-sales .hero-bar{display:block;height:3px;background:#e7e4df;overflow:hidden;border-radius:2px}
.theme-sales .hero-bar-fill{display:block;height:100%;width:100%;background:#ff6333;transform:scaleX(0);transform-origin:left center}
.theme-sales .hero-thumb img{display:block;width:100%;height:110px;object-fit:cover;object-position:top;border:1px solid #e7e4df;border-radius:4px;opacity:.9;transition:opacity .2s ease,border-color .2s ease}
.theme-sales .hero-thumb:hover img,.theme-sales .hero-thumb:focus-visible img{opacity:1}
.theme-sales .hero-thumb[aria-current="true"] img{opacity:1;border-color:#0b0b0c}
.theme-sales .hero-thumb-label{font-size:12.5px;line-height:1.3;color:#52525b}
.theme-sales .hero-thumb[aria-current="true"] .hero-thumb-label{color:#0b0b0c;font-weight:500}
.theme-sales .hero-thumb:focus-visible{outline:2px solid #0b0b0c;outline-offset:3px}