/* Ridge: a clean, roomy store in signal red, the look of the legacy Razor Theme_5 ("Furniture Store") as stores such as
   Bundy Batteries run it with their own light colours. Lato throughout, square corners, a see-through header over
   full-height banners washed in the page colour from the left (the line above the big capital heading, letter-spaced),
   three category boxes lifted over the banners' foot with the picture breaking out of the box, capital headings with a
   short rule in the primary colour, products in rows of five with the name and price centred, picture banners across
   the full width and a light footer with a subscribe bar.
   Colours come from the tokens, so a store's own palette (Hike Theme settings) carries over; the Walnut preset is the
   Razor theme's own dark look. */

/* ---------- Type and buttons ---------- */
.section-heading h2 { position: relative; padding-bottom: 18px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
.section-heading h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 70px; height: 4px; background: var(--color-primary); }
.section-heading--center h2::after { left: 50%; transform: translateX(-50%); }
.section-heading p { margin-top: 24px; font-size: .9rem; color: color-mix(in srgb, var(--color-subheading) 55%, var(--color-background)); }
.section-heading--center { margin-bottom: 36px; }
.btn { border-radius: 0; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.badge { border-radius: 0; }

/* ---------- Header: the logo on the left, a spaced capital menu on the right beside the search, account, wishlist and
   cart. On the home page it sits over the banners in a light veil of the header colour (Theme_5's 30%), its text in
   the navigation colour (the banners are washed in the page colour, so the text stays readable), solid once the page
   scrolls. ---------- */
.site-header { border-top: 4px solid var(--color-accent); }
.site-header .site-header__inner { min-height: 96px; }
.site-nav__link { font-size: .95rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--color-primary); }
.site-header .site-nav__dropdown { border-radius: 0; }
.site-search__form input { width: clamp(140px, 13vw, 200px); border-width: 0 0 1px; border-radius: 0; background: transparent; }
.cart-count { background: var(--color-primary); color: var(--color-on-primary); }
body:has(.hike-region--main > .hike-section:first-child:is(.hike-section--hero_full, .hike-section--slideshow)) .hdr-transparent:not(.is-scrolled) { background: color-mix(in srgb, var(--color-header-background) 30%, transparent); color: var(--color-navigation); }
body:has(.hike-region--main > .hike-section:first-child:is(.hike-section--hero_full, .hike-section--slideshow)) .hdr-transparent:not(.is-scrolled) .site-nav__link:hover { background: none; color: var(--color-primary); }
body:has(.hike-region--main > .hike-section:first-child:is(.hike-section--hero_full, .hike-section--slideshow)) .hdr-transparent:not(.is-scrolled) .site-search__form { background: none; border-color: transparent; }
body:has(.hike-region--main > .hike-section:first-child:is(.hike-section--hero_full, .hike-section--slideshow)) .hdr-transparent:not(.is-scrolled) .site-search__form input { border-color: color-mix(in srgb, currentColor 35%, transparent); }
@media (max-width: 899px) { .site-header .site-header__inner { min-height: 68px; } }

/* ---------- Banners: the full height of the screen, washed in the page colour from the left ("Image darkening" sets
   how strongly), the line letter-spaced above a big capital heading in the subheading colour, a solid button ---------- */
.hike-section--slideshow .hero--large { --hero-height: clamp(520px, 100vh, 980px); }
@media (max-width: 699px) { .hike-section--slideshow .hero--large { --hero-height: 74vh; } }
.hike-section--slideshow .hero--has-image { color: var(--color-text); }
.hike-section--slideshow .hero--has-image::after { background: linear-gradient(90deg, var(--color-background) 0%, var(--color-background) 34%, transparent 64%); opacity: var(--hero-overlay, .9); }
.hike-section--slideshow .hero--right.hero--has-image::after { background: linear-gradient(270deg, var(--color-background) 0%, var(--color-background) 34%, transparent 64%); }
.hike-section--slideshow .hero--center.hero--has-image::after { background: var(--color-background); opacity: calc(var(--hero-overlay, .9) * .6); }
.hike-section--slideshow .hero__content { display: flex; flex-direction: column; align-items: flex-start; max-width: 680px; padding-top: 120px; }
.hike-section--slideshow .hero--center .hero__content { align-items: center; }
.hike-section--slideshow .hero--right .hero__content { align-items: flex-end; }
.hike-section--slideshow .hero__content p { order: -1; margin: 0 0 14px; font-size: clamp(.95rem, .8rem + .4vw, 1.2rem); font-weight: 700; letter-spacing: .4em; line-height: 2; color: var(--color-heading); }
.hike-section--slideshow .hero__content h1, .hike-section--slideshow .hero__content .h1 { margin: 0; font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem); font-weight: 700; letter-spacing: 0; line-height: 1.2; text-transform: uppercase; color: var(--color-subheading); }
.hike-section--slideshow .hero__actions { margin-top: 30px; }
.hike-section--slideshow .hero--has-image .btn--light, .image-banner .btn--light { padding: 14px 30px; background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.hike-section--slideshow .hero--has-image .btn--light:hover, .image-banner .btn--light:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
@media (max-width: 699px) {
  .hike-section--slideshow .hero__content { padding-top: 90px; }
  .hike-section--slideshow .hero__content p { letter-spacing: .2em; }
  .hike-section--slideshow .hero--has-image::after { background: var(--color-background); opacity: calc(var(--hero-overlay, .9) * .7); }
}

/* ---------- Category boxes (multi-column cards): tinted boxes with the picture breaking out of the top-left corner and
   the capital title and text beside it; the whole box is the link. Right after the banners they are lifted over the
   banners' foot, as in the Razor theme. ---------- */
.multicolumn--cards { gap: 24px; }
.multicolumn--cards .multicolumn__item { position: relative; display: grid; grid-template-columns: minmax(0, 150px) 1fr; grid-template-rows: auto 1fr; align-content: start; column-gap: 18px; min-height: 220px; margin-top: 40px; padding: 0 22px 28px 0; border-radius: 0; background: var(--color-background-alt); text-align: center; }
.multicolumn--cards .multicolumn__item:not(:has(> img)) { grid-template-columns: 1fr; padding: 36px 24px; }
.multicolumn--cards .multicolumn__item > img { grid-row: 1 / span 3; align-self: start; width: 150px; height: 130px; margin-top: -40px; border-radius: 0; background: var(--color-background); object-fit: contain; }
.multicolumn--cards .multicolumn__item h3 { margin: 70px 0 8px; font-size: 1.15rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.multicolumn--cards .multicolumn__item:not(:has(> img)) h3 { margin-top: 0; }
.multicolumn--cards .multicolumn__item p { margin: 0; font-size: .9rem; color: var(--color-subheading); }
.multicolumn--cards .multicolumn__link { position: absolute; inset: 0; z-index: 1; overflow: hidden; font-size: 0; color: transparent; }
.multicolumn--cards .multicolumn__link .icon { display: none; }
.multicolumn--cards .multicolumn__link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }
.multicolumn--cards .multicolumn__item:has(.multicolumn__link):hover h3 { color: var(--color-primary); }
@media (min-width: 900px) {
  .hike-section--slideshow + .hike-section--multicolumn .section { position: relative; z-index: 2; margin-top: -120px; padding-top: 0; background: none; }
  .hike-section--slideshow:has(+ .hike-section--multicolumn .multicolumn--cards) .slideshow__controls { bottom: 140px; }
}
@media (max-width: 599px) {
  .multicolumn--cards .multicolumn__item { grid-template-columns: minmax(0, 120px) 1fr; min-height: 0; padding-bottom: 22px; }
  .multicolumn--cards .multicolumn__item > img { width: 120px; height: 104px; }
  .multicolumn--cards .multicolumn__item h3 { margin-top: 36px; font-size: 1rem; }
}

/* ---------- Picture banners: across the full width of the page, side by side with no gap, the text centred ---------- */
.hike-section--multicolumn:has(.multicolumn--banners) .container { max-width: none; padding-inline: 0; }
.multicolumn--banners { gap: 0; }
.multicolumn--banners .multicolumn__item { align-items: center; min-height: clamp(260px, 26vw, 400px); text-align: center; }
.multicolumn--banners .multicolumn__item h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); letter-spacing: .02em; text-transform: uppercase; }
.multicolumn--banners .multicolumn__item p { letter-spacing: .3em; text-transform: uppercase; }
.multicolumn--banners .multicolumn__item:has(> img)::before { background: rgba(0, 0, 0, .42); }
.multicolumn--banners .multicolumn__item:has(> img) :is(h3, p) { color: #fff; }

/* ---------- Product cards: the picture whole on the page colour, the name and a bold price centred below; a thin
   frame in the primary colour on hover, as the Razor cards ---------- */
.pc--swap { padding: 8px; border: 1px solid transparent; transition: border-color .2s ease; }
.pc--swap:hover { border-color: var(--color-primary); }
.pc--swap .pc__media { --card-image-ratio: 1; background: var(--color-background); }
.pc--swap .pc__media img { object-fit: contain; }
.pc--swap .pc__peek { background: var(--color-primary); color: var(--color-on-primary); }
.pc--swap .pc__body { align-items: center; text-align: center; }
.pc--swap .pc__brand { display: none; }
.pc--swap .pc__line { flex-direction: column; align-items: center; gap: 4px; }
.pc--swap .pc__title { font-size: .95rem; font-weight: 400; }
.pc--swap .pc__title a { color: var(--color-text); }
.pc--swap .price { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 6px; text-align: center; font-size: 1.1rem; }
.pc--swap .price__current { font-weight: 700; color: var(--color-heading); }

/* ---------- Fixed banner: the text centred over a light wash, the heading in capitals ---------- */
.hike-section--image_banner .image-banner { align-items: center; justify-items: center; border-radius: 0; text-align: center; }
.hike-section--image_banner .image-banner__content { display: flex; flex-direction: column; align-items: center; max-width: 760px; }
.hike-section--image_banner .image-banner h2 { margin: 0 0 22px; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); text-transform: uppercase; }
.hike-section--image_banner .image-banner p { order: -1; margin: 0 0 8px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }

/* ---------- Categories: square pictures with the capital name below ---------- */
.category-card { border-radius: 0; }
.category-card__name { justify-content: center; padding: 14px 8px; font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.category-card__name .icon { display: none; }
.category-card:hover .category-card__name { color: var(--color-primary); }
@media (min-width: 900px) {
  .hike-section--category_collection .category-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
  .hike-section--category_collection .category-grid > li { flex: 0 0 calc((100% - (var(--columns, 6) - 1) * 24px) / var(--columns, 6)); }
}

/* ---------- Footer ---------- */
.ftr-subscribe__brand img { max-height: 96px; }