/* Studio (Razor Default_10 family, the configurable generation): only what differs from hike-base.
   Colours, type sizes and the full-width page come from design tokens taken from Default_10's settings. */

.container { padding-inline: clamp(16px, 3vw, 48px); }

.btn { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .8rem; border-width: 2px; }
.btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

/* Titles on the left with the link on the right ("collection-title-left"), an accent stroke before them */
.section-heading { align-items: center; border-bottom: 1px solid var(--color-outline); padding-bottom: 14px; }
.section-heading h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.25rem); }
.section-heading h2::before { content: ""; width: 28px; height: 4px; background: var(--color-accent); flex: none; }
.section-heading--center { border-bottom: 0; }
.section-heading__link { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }

/* Compact header */
.site-header__inner { min-height: 64px; }
.site-nav__link { font-weight: 700; font-size: .92rem; }
.site-nav__link[aria-current=page] { box-shadow: inset 0 -3px 0 var(--color-accent); }
.announcement { --color-announcement-background: var(--color-accent); --color-announcement-text: var(--color-on-accent); font-weight: 600; }

/* Edge-to-edge slider: tall, text centred, a solid accent button */
.slideshow .hero { --hero-height: min(78vh, 720px); }
.slideshow .hero .container { max-width: none; }
.slideshow .hero__content { margin-inline: auto; text-align: center; max-width: 760px; }
.slideshow .hero__actions { justify-content: center; }
.slideshow .hero--has-image::after { background: rgba(0, 0, 0, var(--hero-overlay, .45)); }
.hero h1, .hero .h1 { line-height: 1.02; letter-spacing: -.01em; }
.slideshow .btn--light { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

/* Cards: image wrapper with a hairline, details left */
.product-card { --card-border: 0; --card-shadow: none; background: transparent; }
.product-card:hover { box-shadow: none; }
.product-card__media { border: 1px solid var(--color-outline); }
.product-card__body { padding-inline: 0; }
.product-card__title { font-weight: 600; }
.product-card .price__current { font-weight: 700; }

.category-card__name { font-weight: 700; }
.site-footer h2, .site-footer h3 { text-transform: uppercase; letter-spacing: .08em; font-size: .88rem; }
