/*
 * The Shopify build's look, ported onto Blocksy.
 *
 * Blocksy drives almost everything from a small set of CSS variables, so
 * restating those is enough to move the whole theme onto the old palette —
 * far less brittle than chasing individual selectors, and it survives theme
 * updates. The values are lifted straight from the Shopify theme's
 * settings_data.json rather than eyeballed.
 *
 *   #0e7a3d  primary green (buttons, links)
 *   #0c1a12  near-black green, the dark sections
 *   #3ad678  bright accent, only on dark backgrounds
 *   #f1f7f2  pale green tint, the alternating section background
 *   #10151b  headings
 */

/* `html:root` rather than `:root`: Blocksy prints its own `:root` block inline
   in the head, after this file, and at equal specificity source order would
   hand it the win. One extra element in the selector settles it for good. */
html:root {
  --rf-green:        #0e7a3d;
  --rf-green-dark:   #0b6332;
  --rf-green-bright: #3ad678;
  --rf-ink:          #10151b;
  --rf-ink-soft:     #4a545e;
  --rf-dark:         #0c1a12;
  --rf-dark-text:    #f2fbf5;
  --rf-tint:         #f1f7f2;
  --rf-border:       #e2e9e4;
  /* Amber, not brand green: gold stars are what a rating looks like
     everywhere else, and a green star sitting beside a green Add to cart
     makes both of them quieter. */
  --rf-star:         #fda256;

  /* Blocksy's palette slots, in the order the theme assigns meaning to them. */
  --theme-palette-color-1: var(--rf-green);
  --theme-palette-color-2: var(--rf-green-dark);
  --theme-palette-color-3: var(--rf-ink);
  --theme-palette-color-4: var(--rf-ink-soft);
  --theme-palette-color-5: var(--rf-border);
  --theme-palette-color-6: var(--rf-tint);
  --theme-palette-color-7: #f8fbf9;
  --theme-palette-color-8: #ffffff;

  --theme-text-color: var(--rf-ink-soft);
  --theme-headings-color: var(--rf-ink);
  --theme-link-initial-color: var(--rf-green);
  --theme-link-hover-color: var(--rf-green-dark);
  --theme-border-color: var(--rf-border);

  --theme-font-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --theme-font-weight: 400;

  /* Shopify: page_width 1200, buttons_radius 4, media_radius 6. */
  --theme-normal-container-max-width: 1200px;
  --theme-content-width: 1200px;
  --theme-button-border-radius: 4px;
  --theme-form-field-border-radius: 4px;
}

html body { font-family: var(--theme-font-family); }
html h1, html h2, html h3, html h4, html h5, html h6 {
  font-family: var(--theme-font-family);
  font-weight: 700;
  letter-spacing: -.015em;
}

/* --- Home page layout ---------------------------------------------------- */
/* The page's own "Home" heading would be a second H1 competing with the hero,
   so it goes. */
body.home .page-title,
body.home .entry-header,
body.home .hero-section { display: none; }

/* Blocksy constrains the content column; the bands are meant to run edge to
   edge, and each one re-establishes its own 1200px inner wrapper. */
body.home .entry-content > .rf-hero,
body.home .entry-content > .rf-section {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body.home .entry-content { margin-block-start: 0; }
/* Blocksy pads the content wrapper 60px, which on the home puts a strip of
   page background between the header and a hero that is meant to sit right
   under it. Every band sets its own padding, so the wrapper needs none. */
body.home .site-main > .ct-container-full { padding-block: 0 !important; }

/* --- Buttons ------------------------------------------------------------- */
.ct-button, .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button,
.woocommerce .button.alt, .woocommerce input.button,
.rf-btn {
  background-color: var(--rf-green);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: .01em;
}
.ct-button:hover, .wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .button.alt:hover, .rf-btn:hover {
  background-color: var(--rf-green-dark);
  color: #fff;
}

.rf-btn {
  display: inline-block;
  padding: .85rem 1.9rem;
  text-decoration: none;
  min-height: 44px;
}
.rf-btn--ghost {
  background: transparent;
  border: 1.5px solid currentColor;
  color: inherit;
}
.rf-btn--ghost:hover { background: rgba(255,255,255,.12); color: inherit; }
.rf-btn--light { background: #fff; color: var(--rf-ink); }
.rf-btn--light:hover { background: var(--rf-tint); color: var(--rf-ink); }

/* --- Mega menu ------------------------------------------------------------
   The Shopify header dropped a panel the full width of the page, laid the
   clubs out in four balanced columns and closed with "View all <league> →".
   Blocksy ships a floating 200px box instead, which turns eighteen Premier
   League clubs into a list taller than the viewport.

   The panel is positioned against the header rather than against the menu
   item: dropping the item out of the positioning context with `position:
   static` lets `left: 0; right: 0` span the whole header, which is how the
   old theme did it. Anchoring to the item and pulling it back with a
   transform looks equivalent but centres the panel on the item, so the first
   column ends up off the left edge of the screen.

   The gutter mirrors Blocksy's own container maths — `min(90vw, 1200px)` —
   so the first club sits directly under the logo. */

header.ct-header, header#header { position: relative; }
header .menu > li.menu-item-has-children { position: static; }

header .menu > li.menu-item-has-children > .sub-menu {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: none;
  padding: 2.2rem max(1.25rem, calc((100vw - min(90vw, 1200px)) / 2));
  border-radius: 0;
  border-top: 1px solid var(--rf-border);
  background-color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
  /* Blocksy's dropdown ships dark with dashed separators between rows. */
  --dropdown-divider: 1px solid transparent;
}
header .menu > li.menu-item-has-children:hover > .sub-menu,
header .menu > li.menu-item-has-children:focus-within > .sub-menu {
  transform: none;
}
header .menu .sub-menu a { color: var(--rf-ink-soft); }
header .menu .sub-menu a:hover { color: var(--rf-green); }

/* A flat list of clubs flows into balanced columns. */
header .menu > li > .sub-menu:not(:has(> li > .sub-menu)) {
  display: block;
  columns: 4;
  column-gap: 3rem;
}
header .menu > li > .sub-menu:not(:has(> li > .sub-menu)) > li { break-inside: avoid; }
/* Six items or fewer never need four columns. */
header .menu > li > .sub-menu:not(:has(> li:nth-child(7))):not(:has(> li > .sub-menu)) {
  columns: 2;
}

/* Anything with a third level becomes grouped columns, each headed by its
   parent, instead of a flyout hanging off a flyout. */
header .menu > li > .sub-menu:has(> li > .sub-menu) {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  align-items: start;
  gap: 0 3rem;
}
header .menu > li > .sub-menu:has(> li > .sub-menu) > li { margin-bottom: 1.4rem; }

/* "View all Premier League →", across the foot of the panel. */
header .menu .sub-menu > li.rf-viewall {
  grid-column: 1 / -1;
  column-span: all;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rf-border);
}
header .menu .sub-menu > li.rf-viewall > a {
  font-weight: 700;
  color: var(--rf-ink);
  padding-inline: 0;
}
header .menu .sub-menu > li.rf-viewall > a::after {
  content: ' \2192';
  color: var(--rf-green);
}
header .menu > li > .sub-menu:has(> li > .sub-menu) > li > a {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
}
header .menu > li > .sub-menu > li > .sub-menu {
  position: static;
  display: block;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
header .menu > li > .sub-menu li > a { padding-block: .34rem; line-height: 1.3; }

/* --- Product cards ------------------------------------------------------- */
/* Shirts are shot square; letterboxing them to 4:3 crops the badge. */
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product figure > a { aspect-ratio: 1 / 1; }
.woocommerce ul.products li.product .ct-media-container img {
  width: 100%; height: 100%; object-fit: cover;
}
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img { border-radius: 6px; }
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price { color: var(--rf-ink); font-weight: 700; }
.woocommerce .woocommerce-product-gallery img { border-radius: 6px; }

/* --- Shared section furniture -------------------------------------------- */
.rf-section { padding: clamp(3rem, 6vw, 5rem) 0; }
.rf-section--tint { background: var(--rf-tint); }
.rf-section--dark { background: var(--rf-dark); color: var(--rf-dark-text); }
.rf-section--dark h2, .rf-section--dark h3 { color: var(--rf-dark-text); }
.rf-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.rf-eyebrow {
  display: block; margin-bottom: .6rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rf-green);
}
.rf-section--dark .rf-eyebrow { color: var(--rf-green-bright); }
.rf-h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0 0 .6rem; }
.rf-lede { max-width: 62ch; color: inherit; opacity: .85; margin: 0 0 2rem; }
.rf-head { margin-bottom: 2.2rem; }
.rf-head--center { text-align: center; }
.rf-head--center .rf-lede { margin-inline: auto; }

/* --- Hero ---------------------------------------------------------------- */
.rf-hero {
  background: linear-gradient(160deg, #0c1a12 0%, #123b23 55%, #0e7a3d 140%);
  color: var(--rf-dark-text);
  text-align: center;
  padding: clamp(4rem, 11vw, 8rem) 0;
}
.rf-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.05;
  margin: 0 0 1rem;
}
.rf-hero p { max-width: 56ch; margin: 0 auto 2rem; font-size: clamp(1rem, 1.6vw, 1.15rem); opacity: .9; }
.rf-hero__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* --- Benefits ------------------------------------------------------------ */
.rf-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.rf-benefit { text-align: center; }
.rf-benefit svg { width: 30px; height: 30px; color: var(--rf-green); margin-bottom: .7rem; }
.rf-benefit h3 { font-size: 1.02rem; margin: 0 0 .35rem; }
.rf-benefit p { margin: 0; font-size: .9rem; opacity: .8; }

/* --- Collection grids ---------------------------------------------------- */
.rf-grid { display: grid; gap: 1rem; }
.rf-grid--4 { grid-template-columns: repeat(4, 1fr); }
.rf-grid--6 { grid-template-columns: repeat(6, 1fr); }
/* Photo, then the name under it with an arrow — no text burned over the kit. */
.rf-card { display: grid; gap: .75rem; text-decoration: none; color: inherit; }
.rf-card__media {
  display: block; overflow: hidden; border-radius: 6px;
  aspect-ratio: 1 / 1; background: var(--rf-tint);
}
.rf-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.rf-card:hover .rf-card__media img { transform: scale(1.05); }
.rf-card__title {
  display: flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .98rem; line-height: 1.25;
  color: var(--rf-ink);
}
.rf-card__title svg {
  width: 15px; height: 15px; flex: none;
  color: var(--rf-green);
  transition: transform .2s ease;
}
.rf-card:hover .rf-card__title svg { transform: translateX(3px); }

/* --- Product cards in the grid ------------------------------------------- */
/* The shirt is the card. Blocksy's own hover zoom would fight the cross-fade
   to the second photo, so the image itself stays still. */
.woocommerce ul.products li.product > figure { position: relative; overflow: hidden; border-radius: 6px; }
.rf-card-alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;      /* the link underneath stays clickable */
  transition: opacity .35s ease;
}
/* Blocksy leaves the actions wrapper behind once the button is emptied. */
.woocommerce ul.products li.product .ct-woo-card-actions:empty { display: none; }
.rf-card-alt__img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .woocommerce ul.products li.product:hover .rf-card-alt { opacity: 1; }
}
.woocommerce ul.products li.product {
  text-align: left;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  margin: .8rem 0 .25rem;
  color: var(--rf-ink);
}
.woocommerce ul.products li.product .price {
  font-size: .95rem;
  font-weight: 700;
  color: var(--rf-ink);
}

/* --- Story --------------------------------------------------------------- */
.rf-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.rf-story img { width: 100%; border-radius: 6px; }

/* --- FAQ ----------------------------------------------------------------- */
.rf-faq { max-width: 820px; margin: 0 auto; }
.rf-faq details {
  border-bottom: 1px solid var(--rf-border);
  padding: 1.1rem 0;
}
.rf-faq summary {
  cursor: pointer; font-weight: 600; font-size: 1.03rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
  min-height: 32px; align-items: center;
}
.rf-faq summary::-webkit-details-marker { display: none; }
.rf-faq summary::after { content: '+'; color: var(--rf-green); font-size: 1.5rem; line-height: 1; flex: none; }
.rf-faq details[open] summary::after { content: '\2013'; }
.rf-faq details p { margin: .8rem 0 0; opacity: .85; }

/* --- Newsletter ---------------------------------------------------------- */
.rf-news { text-align: center; }
.rf-news form { display: flex; gap: .6rem; justify-content: center; max-width: 460px; margin: 1.4rem auto 0; }
.rf-news input[type=email] {
  flex: 1; min-height: 46px; padding: .6rem 1rem;
  border: 1px solid rgba(255,255,255,.28); border-radius: 4px;
  background: rgba(255,255,255,.07); color: #fff;
}
.rf-news input::placeholder { color: rgba(255,255,255,.55); }

/* --- Announcement bar ---------------------------------------------------- */
.rf-announce {
  background: var(--rf-dark);
  color: var(--rf-dark-text);
  font-size: .82rem;
}
.rf-announce ul {
  display: flex; justify-content: center; gap: 2.5rem;
  list-style: none; margin: 0; padding: .6rem 0;
}
.rf-announce li { white-space: nowrap; }
@media (max-width: 900px) {
  /* Only the first promise survives the width; the rest would wrap into a
     three-line band above every page. */
  .rf-announce li + li { display: none; }
  .rf-announce ul { gap: 0; }
}


/* --- Collapsible archive copy --------------------------------------------
   The whole point is that the products start near the top while the text
   stays in the HTML. Clamping is visual only — nothing is removed from the
   page, and with JavaScript off the checkbox still opens it. */

.rf-clamp { position: relative; }
.rf-clamp__cb { position: absolute; opacity: 0; pointer-events: none; }
.rf-clamp__body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rf-clamp:has(.rf-clamp__cb:checked) .rf-clamp__body {
  display: block;
  overflow: visible;
}
.rf-clamp__btn {
  display: inline-flex; align-items: center;
  margin-top: .5rem; min-height: 40px;
  cursor: pointer; font-weight: 600; font-size: .9rem;
  color: var(--rf-green); text-decoration: underline;
}
.rf-clamp__less,
.rf-clamp:has(.rf-clamp__cb:checked) .rf-clamp__more { display: none; }
.rf-clamp:has(.rf-clamp__cb:checked) .rf-clamp__less { display: inline; }

/* Blocksy hides the archive copy below 768px outright. Two clamped lines cost
   almost nothing and keep the text on the page for every visitor. */
body .page-description.ct-hidden-sm { display: block !important; }

/* Same gutter as the 1200px content column, so the trail lines up with the
   first product rather than sitting against the window edge. */
.rf-crumbs {
  padding: .9rem max(1.25rem, calc(50vw - 600px)) 0;
  font-size: .85rem;
}
.rf-crumbs .woocommerce-breadcrumb { color: var(--rf-ink-soft); }

/* Collapsing the copy only pays off if the band around it shrinks too —
   otherwise the grid still starts most of a screen down. Blocksy generates
   these paddings (50px and 60px) in its own stylesheet from customiser values,
   which no selector here can reliably out-rank, so this is one of the few
   places `!important` earns its keep. Together they lift the first row of
   shirts by about 90px. */
body .hero-section .entry-header { padding-block: 20px 22px !important; }
body .site-main > .ct-container { padding-top: 24px !important; }
body .hero-section .page-title { margin-bottom: .4rem; }
body .hero-section .page-description { margin: 0; }

/* --- Refine by club ------------------------------------------------------ */
.rf-refine { padding-top: 2.5rem; }
.rf-refine__list {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 1rem 0 0; padding: 0;
}
.rf-refine__list a {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: .4rem .9rem;
  border: 1px solid var(--rf-border); border-radius: 999px;
  text-decoration: none; color: var(--rf-ink); font-size: .9rem;
}
.rf-refine__list a:hover { border-color: var(--rf-green); color: var(--rf-green); }
.rf-refine__list span { color: var(--rf-ink-soft); font-size: .8rem; }

.rf-archive-trust, .rf-archive-faq {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}

/* --- Product page -------------------------------------------------------- */
.rf-product .product_title {
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
  margin-bottom: .5rem;
}
.rf-stock {
  display: flex; align-items: center; gap: .5rem;
  margin: .8rem 0; font-size: .9rem;
}
.rf-stock::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rf-green); flex: none;
}
.rf-stock--out::before { background: #b3261e; }

/* The shirts are square files; Blocksy frames the gallery 3:4 and crops the
   hem off every one of them. */
.rf-product .woocommerce-product-gallery .ct-media-container,
.rf-product .woocommerce-product-gallery__image { aspect-ratio: 1 / 1; }
.rf-product .woocommerce-product-gallery img { object-fit: cover; }

.rf-brand {
  margin: .1rem 0 .8rem;
  font-size: .85rem;
  color: var(--rf-ink-soft);
}
/* Blocksy prints the SKU / categories / tags block from a closure of its own,
   which cannot be unhooked. It repeats the breadcrumb and the URL, and the old
   page did not carry it. */
.rf-product .product_meta { display: none; }

/* The product hero band is empty apart from the trail; it does not need a
   screenful of air above the shirt. */
.rf-product .hero-section .entry-header { padding-block: .8rem 1rem; }

.rf-trust { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .7rem; }
.rf-trust li { display: flex; align-items: center; gap: .7rem; font-size: .9rem; }
.rf-trust svg { width: 20px; height: 20px; color: var(--rf-green); flex: none; }
.rf-product-description { margin-top: 1.6rem; font-size: .95rem; }
.rf-product .product_meta { font-size: .85rem; color: var(--rf-ink-soft); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 999px) {
  .rf-benefits { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .rf-grid--6 { grid-template-columns: repeat(3, 1fr); }
  .rf-story { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .rf-grid--4, .rf-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .rf-news form { flex-direction: column; }
}

/* ==========================================================================
   Hero photograph
   ========================================================================== */
/* The gradient stays underneath as the fallback, so the headline is legible
   for the moment before a 2752px photo arrives — and if it never does. */
.rf-hero--photo {
  background-image:
    linear-gradient(180deg, rgba(6, 16, 10, .78) 0%, rgba(6, 16, 10, .62) 45%, rgba(6, 16, 10, .82) 100%),
    var(--rf-hero-image);
  background-size: cover;
  background-position: center;
}
@media (min-width: 1000px) {
  .rf-hero--photo { background-attachment: fixed; }
}

.rf-story__media img { width: 100%; height: auto; border-radius: 6px; display: block; }

/* ==========================================================================
   Category rail (carousel)
   ========================================================================== */
.rf-rail { position: relative; }

/* Flex, not grid. `grid-auto-columns: minmax(190px, 1fr)` looks right until the
   track overflows: the `1fr` resolves against the *container* rather than the
   content, so every card claims the full width and they stack on top of one
   another. A fixed flex-basis says exactly how many fit, which is the whole
   point of a rail. */
.rf-rail__track {
  display: flex;
  gap: var(--rf-rail-gap, 1.25rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Room for the hover lift and the focus ring. */
  padding-block: 4px;
  /* Bleed to the edge on a phone so the next card peeks past the gutter. */
  scroll-padding-inline-start: 0;
}
.rf-rail__track::-webkit-scrollbar { display: none; }

.rf-rail__track > .rf-card {
  flex: 0 0 calc((100% - 3 * var(--rf-rail-gap, 1.25rem)) / 4);
  min-width: 0;
  scroll-snap-align: start;
}
/* Two lines of room so "Wolverhampton" and "Arsenal" still line their photos
   up with each other. */
.rf-rail__track > .rf-card .rf-card__title {
  min-height: 2.6em;
  align-items: flex-start;
}
.rf-rail__track > .rf-card .rf-card__title svg { margin-top: .25em; }

@media (max-width: 1099px) {
  .rf-rail__track > .rf-card { flex-basis: calc((100% - 2 * var(--rf-rail-gap, 1.25rem)) / 3); }
}
@media (max-width: 799px) {
  .rf-rail { --rf-rail-gap: .8rem; }
  .rf-rail__track > .rf-card { flex-basis: calc((100% - var(--rf-rail-gap)) / 2); }
}
@media (max-width: 479px) {
  /* A sliver of the next card is the only affordance that reads as
     "this scrolls" without an arrow to point at. */
  .rf-rail__track > .rf-card { flex-basis: 72%; }
}

.rf-rail__btn {
  position: absolute;
  top: calc(50% - 3.2rem);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--rf-border);
  border-radius: 50%;
  background: #fff;
  color: var(--rf-ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease, transform .2s ease;
}
.rf-rail__btn svg { width: 20px; height: 20px; }
.rf-rail__btn:hover { background: var(--rf-ink); color: #fff; transform: scale(1.06); }
.rf-rail__btn:focus-visible { outline: 2px solid var(--rf-green); outline-offset: 2px; }
.rf-rail__btn--prev { left: -22px; }
.rf-rail__btn--next { right: -22px; }
/* Arrows are a mouse affordance; a touch device just drags the rail. */
.rf-rail.is-start .rf-rail__btn--prev,
.rf-rail.is-end .rf-rail__btn--next,
.rf-rail.is-static .rf-rail__btn { opacity: 0; pointer-events: none; }
@media (hover: none), (max-width: 799px) {
  .rf-rail__btn { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.rf-footer {
  background: var(--rf-dark);
  color: var(--rf-dark-text);
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
}
.rf-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
}
.rf-footer__logo img { max-width: 190px; height: auto; }
/* The logo is dark green on transparent; on the dark footer it needs lifting. */
.rf-footer__logo img { filter: brightness(0) invert(1); opacity: .95; }
.rf-footer__name { font-size: 1.2rem; font-weight: 700; margin: 0 0 .6rem; }
.rf-footer__brand p { font-size: .88rem; opacity: .75; margin: .8rem 0 1.2rem; max-width: 44ch; }
.rf-footer__promises { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.rf-footer__promises li { display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.rf-footer__promises svg { width: 18px; height: 18px; color: var(--rf-green-bright); flex: none; }
.rf-footer__col h2 {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rf-green-bright);
  margin: 0 0 .9rem;
}
.rf-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.rf-footer__col a {
  color: var(--rf-dark-text); opacity: .8;
  text-decoration: none; font-size: .88rem;
  display: inline-block; min-height: 28px;
}
.rf-footer__col a:hover { opacity: 1; text-decoration: underline; }
.rf-footer__bar {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  align-items: center;
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .78rem; opacity: .7;
}
.rf-footer__bar p { margin: 0; }
.rf-footer__pay { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rf-pay {
  padding: .18rem .5rem; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 3px; font-size: .68rem; letter-spacing: .02em;
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 799px) {
  /* Two columns, as on the old shop. One is a lot of scrolling for 24 shirts. */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .9rem !important;
  }
  .woocommerce ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .84rem; }
  .woocommerce ul.products li.product .price { font-size: .86rem; }

  .rf-benefits { grid-template-columns: repeat(2, 1fr); }
  .rf-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .rf-footer__brand { grid-column: 1 / -1; }
  .rf-footer__bar { justify-content: flex-start; }

  /* The hero is the first thing on a phone; a fixed background stutters. */
  .rf-hero--photo { background-attachment: scroll; }
  .rf-hero { padding-block: clamp(3rem, 14vw, 5rem); }

  /* Product page: the strip of thumbnails under the gallery is dead weight on
     a phone, where the gallery is already a swipeable carousel. */
  .rf-product .flexy-pills,
  .rf-product [data-flexy-pills],
  .rf-product .woocommerce-product-gallery__wrapper > ol,
  .rf-product .flex-control-thumbs { display: none !important; }

  .rf-product .product_title { font-size: 1.4rem; }
  .rf-personalisation { padding: 1rem; }
}

/* ==========================================================================
   Collection filters
   ========================================================================== */
.rf-filters {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start;
  margin: 0 0 1.4rem;
}
.rf-filters__group { position: relative; }
.rf-filters__group > summary {
  display: flex; align-items: center; gap: .45rem;
  min-height: 42px; padding: .45rem .9rem;
  border: 1px solid var(--rf-border); border-radius: 999px;
  background: #fff; cursor: pointer; list-style: none;
  font-size: .88rem; font-weight: 600; color: var(--rf-ink);
}
.rf-filters__group > summary::-webkit-details-marker { display: none; }
.rf-filters__group > summary::after {
  content: ''; width: 7px; height: 7px; margin-left: .15rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.rf-filters__group[open] > summary { border-color: var(--rf-green); color: var(--rf-green); }
.rf-filters__applied {
  padding: .05rem .45rem; border-radius: 999px;
  background: var(--rf-green); color: #fff; font-size: .72rem; font-weight: 700;
}
.rf-filters__group > ul {
  position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0;
  min-width: 230px; max-height: 320px; overflow-y: auto;
  margin: 0; padding: .5rem; list-style: none;
  background: #fff; border: 1px solid var(--rf-border); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}
.rf-filters__group > ul a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  min-height: 38px; padding: .3rem .6rem; border-radius: 5px;
  text-decoration: none; color: var(--rf-ink-soft); font-size: .88rem;
}
.rf-filters__group > ul a:hover { background: var(--rf-tint); color: var(--rf-ink); }
.rf-filters__group > ul a.is-on { color: var(--rf-green); font-weight: 700; }
.rf-filters__group > ul a span { font-size: .76rem; opacity: .6; }
.rf-filters__clear {
  align-self: center; font-size: .85rem; font-weight: 600;
  color: var(--rf-green); text-decoration: underline; min-height: 42px;
  display: inline-flex; align-items: center;
}

/* ==========================================================================
   Search
   ========================================================================== */
.rf-search { display: flex; gap: .5rem; width: 100%; max-width: 560px; }
.rf-search input[type=search] {
  flex: 1; min-height: 46px; padding: .55rem 1rem;
  border: 1px solid var(--rf-border); border-radius: 4px;
}
.rf-search button {
  min-height: 46px; padding: .55rem 1.4rem;
  border: 0; border-radius: 4px; cursor: pointer;
  background: var(--rf-green); color: #fff; font-weight: 600;
}
.rf-search button:hover { background: var(--rf-green-dark); }

/* The logo replaces the name; showing both reads as a mistake. Blocksy wraps
   the text in .site-title-container and styles it more specifically than a
   bare class selector can beat. */
.site-branding .site-title-container { display: none !important; }
.site-logo-container img, .custom-logo { max-height: 56px; width: auto; }

/* Blocksy lists every category under each card. On a shirt from a league and a
   club that is two lines of "ARSENAL RETRO SHIRTS, PREMIER LEAGUE RETRO
   SHIRTS" under the price, repeating the breadcrumb of the page you are on. */
.woocommerce ul.products li.product .entry-meta { display: none; }

@media (max-width: 799px) {
  .rf-filters { gap: .45rem; }
  .rf-filters__group > summary { min-height: 40px; padding: .4rem .75rem; font-size: .82rem; }
  .rf-filters__group > ul { position: fixed; left: 1rem; right: 1rem; min-width: 0; }
}

/* ==========================================================================
   Assurance strip and reviews
   ========================================================================== */
.rf-assurance__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.rf-assurance__list li { display: flex; gap: .8rem; align-items: flex-start; }
.rf-assurance__list svg { width: 24px; height: 24px; color: var(--rf-green); flex: none; margin-top: 2px; }
.rf-assurance__list a { text-decoration: none; color: var(--rf-ink); }
.rf-assurance__list a:hover strong { text-decoration: underline; }
.rf-assurance__list strong { display: block; font-size: .92rem; }
.rf-assurance__list span { display: block; font-size: .82rem; color: var(--rf-ink-soft); }


@media (max-width: 799px) {
  .rf-assurance__list { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
}


/* ==========================================================================
   Vertical rhythm
   ==========================================================================
   Every band was 80px top and bottom, so 160px of air fell between each one
   and the page read as evenly padded rather than as a sequence of ideas. The
   alternating tint already does the separating; the padding only has to give
   each band room to breathe. One variable so the whole page stays in step.  */
html:root { --rf-band: clamp(2.5rem, 4.5vw, 4rem); }

.rf-section { padding-block: var(--rf-band); }
.rf-hero { padding-block: clamp(3.25rem, 8vw, 6.5rem); }

/* Two bands of the *same* colour in a row read as one, so the doubled gap
   between them is just a gap. Where the colour changes the seam is deliberate
   and the second band still needs its own room — both halves of the selector
   have to match, which the first version of this rule got wrong. */
.rf-section:not(.rf-section--tint):not(.rf-section--dark)
  + .rf-section:not(.rf-section--tint):not(.rf-section--dark) { padding-top: 0; }
.rf-section--tint + .rf-section--tint { padding-top: 0; }
.rf-section--dark + .rf-section--dark { padding-top: 0; }

/* A heading belongs to the block under it, so it sits closer to that than to
   the band above — proximity doing the grouping instead of a rule. */
.rf-head { margin-bottom: clamp(1.4rem, 2.5vw, 2rem); }
.rf-head .rf-lede { margin-bottom: 0; }

/* ==========================================================================
   Applied filters
   ========================================================================== */
.rf-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.rf-chips__label { font-size: .82rem; color: var(--rf-ink-soft); }
.rf-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 34px; padding: .25rem .5rem .25rem .75rem;
  border-radius: 999px; background: var(--rf-green); color: #fff;
  font-size: .82rem; font-weight: 600; text-decoration: none;
}
.rf-chip:hover { background: var(--rf-green-dark); color: #fff; }
.rf-chip span { font-size: 1rem; line-height: 1; opacity: .8; }
.rf-chips__count { font-size: .82rem; color: var(--rf-ink-soft); margin-left: auto; }

/* ==========================================================================
   Search suggestions
   ========================================================================== */
.rf-search, .ct-search-form { position: relative; }
.rf-suggest {
  position: absolute; z-index: 60; top: calc(100% + .4rem); left: 0; right: 0;
  max-height: min(65vh, 460px); overflow-y: auto;
  padding: .6rem;
  background: #fff; color: var(--rf-ink);
  border: 1px solid var(--rf-border); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
  text-align: left;
}
.rf-suggest ul { list-style: none; margin: 0 0 .4rem; padding: 0; }
.rf-suggest__label {
  margin: .4rem .5rem .3rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rf-ink-soft);
}
.rf-suggest__item, .rf-suggest__col {
  display: flex; align-items: center; gap: .7rem;
  padding: .45rem .5rem; border-radius: 6px;
  text-decoration: none; color: var(--rf-ink); min-height: 44px;
}
.rf-suggest__item:hover, .rf-suggest__col:hover { background: var(--rf-tint); }
.rf-suggest__item img, .rf-suggest__ph {
  width: 44px; height: 44px; border-radius: 4px; object-fit: cover;
  background: var(--rf-tint); flex: none;
}
.rf-suggest__text { display: grid; gap: .1rem; min-width: 0; }
.rf-suggest__text strong {
  font-size: .87rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-suggest__text span { font-size: .78rem; color: var(--rf-ink-soft); }
.rf-suggest__col { justify-content: space-between; font-weight: 600; font-size: .87rem; }
.rf-suggest__col span { font-size: .76rem; color: var(--rf-ink-soft); }
.rf-suggest__all {
  display: block; padding: .6rem; margin-top: .3rem;
  border-top: 1px solid var(--rf-border);
  text-align: center; font-size: .84rem; font-weight: 600;
  color: var(--rf-green); text-decoration: none;
}
.rf-suggest__empty { padding: 1rem .6rem; margin: 0; font-size: .87rem; color: var(--rf-ink-soft); }

.rf-noresults { padding: 1.5rem 0; }
.rf-noresults > p { max-width: 60ch; }
.rf-noresults ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.rf-noresults a {
  display: inline-flex; gap: .4rem; align-items: center;
  min-height: 40px; padding: .4rem .9rem;
  border: 1px solid var(--rf-border); border-radius: 999px;
  text-decoration: none; color: var(--rf-ink); font-size: .88rem;
}
.rf-noresults a:hover { border-color: var(--rf-green); color: var(--rf-green); }
.rf-noresults span { font-size: .78rem; color: var(--rf-ink-soft); }

/* Blocksy's footer builder is switched off in inc/footer.php, so there is
   nothing left to hide here. */


/* ==========================================================================
   Reviews
   ========================================================================== */
/* Stars in the grid: small, green, with the number of them beside it. */
.rf-stars { display: flex; align-items: center; gap: .4rem; margin: .25rem 0 .3rem; }
.rf-stars .star-rating { font-size: .72rem; color: var(--rf-star); margin: 0; float: none; }
.rf-stars__count { font-size: .74rem; color: var(--rf-ink-soft); }

.rf-reviews { padding-block: var(--rf-band); }
.rf-reviews__head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: baseline;
  margin-bottom: 1.5rem;
}
.rf-reviews__head .rf-h2 { margin: 0; }
.rf-reviews__sort { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .85rem; }
.rf-reviews__sort > span { color: var(--rf-ink-soft); margin-right: .2rem; }
.rf-reviews__sort a {
  padding: .35rem .7rem; border-radius: 999px; min-height: 34px;
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--rf-ink-soft);
}
.rf-reviews__sort a:hover { background: var(--rf-tint); color: var(--rf-ink); }
.rf-reviews__sort a.is-on { background: var(--rf-ink); color: #fff; font-weight: 600; }

/* --- Summary ------------------------------------------------------------- */
.rf-rsum {
  display: grid; grid-template-columns: minmax(160px, 210px) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: 1.4rem clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--rf-border); border-radius: 10px;
  margin-bottom: 1.6rem;
}
.rf-rsum__score { text-align: center; display: grid; gap: .3rem; justify-items: center; }
.rf-rsum__score strong { font-size: 2.8rem; line-height: 1; font-weight: 700; color: var(--rf-ink); }
.rf-rsum__score .star-rating { font-size: 1rem; color: var(--rf-star); float: none; margin: 0; }
.rf-rsum__score > span { font-size: .84rem; color: var(--rf-ink-soft); }
.rf-rsum__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.rf-rsum__bars li { display: grid; grid-template-columns: 2.6rem 1fr 2.6rem; gap: .7rem; align-items: center; }
.rf-rsum__label { font-size: .8rem; color: var(--rf-ink-soft); display: flex; gap: .15rem; align-items: center; }
.rf-rsum__label span { color: var(--rf-star); }
.rf-rsum__bar { height: 8px; border-radius: 999px; background: var(--rf-border); overflow: hidden; }
.rf-rsum__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--rf-star); }
.rf-rsum__pct { font-size: .76rem; color: var(--rf-ink-soft); text-align: right; }

/* --- The reviews themselves ---------------------------------------------- */
.rf-reviews__list {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.rf-review {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--rf-border); border-radius: 10px;
  background: #fff;
  display: grid; align-content: start; gap: .6rem;
}
.rf-review__stars .star-rating { font-size: .8rem; color: var(--rf-star); float: none; margin: 0; }
.rf-review__title { margin: .35rem 0 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.rf-review__body { font-size: .9rem; color: var(--rf-ink-soft); }
.rf-review__body p { margin: 0 0 .5rem; }
.rf-review__body p:last-child { margin-bottom: 0; }
.rf-review__meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
  padding-top: .7rem; border-top: 1px solid var(--rf-border);
  font-size: .78rem; color: var(--rf-ink-soft);
}
.rf-review__author { font-weight: 600; color: var(--rf-ink); }
/* Verified is the single most load-bearing word in the block; it gets the
   colour and the tick, and nothing else in the card competes with it. */
.rf-review__verified {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--rf-green); font-weight: 600;
}
.rf-review__verified svg { width: 13px; height: 13px; }
.rf-review__meta time { margin-left: auto; }

.rf-reviews__more { margin-top: 1.4rem; }
.rf-reviews__empty { color: var(--rf-ink-soft); }
.rf-reviews__form { margin-top: 2rem; }
.rf-reviews__form .comment-reply-title { font-size: 1.05rem; font-weight: 700; }
.rf-reviews__form .comment-form-rating .stars a { color: var(--rf-star); }

@media (max-width: 599px) {
  .rf-rsum { grid-template-columns: 1fr; gap: 1.2rem; }
  .rf-reviews__list { grid-template-columns: 1fr; }
}

/* One colour for every star on the site, whoever rendered it.
   WooCommerce builds the widget from two layers — the container draws five
   empty stars and an inner span overlays the filled ones — so both have to be
   set, and the empty layer wants to be neutral grey rather than a pale tint of
   the fill, or a 3-star rating reads as nearly 5 at a glance. */
html .star-rating::before,
html .woocommerce .star-rating::before { color: #d6d8da; }
html .star-rating span::before,
html .woocommerce .star-rating span::before,
html .woocommerce p.stars a::before { color: var(--rf-star); }
html .rf-stars .star-rating span::before,
html .rf-rsum__score .star-rating span::before,
html .rf-review__stars .star-rating span::before { color: var(--rf-star); }

/* ==========================================================================
   Social proof
   ========================================================================== */
.rf-wall__score {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem; margin: .6rem 0 0;
}
.rf-wall__score .star-rating { font-size: .95rem; float: none; margin: 0; }
.rf-wall__score strong { font-size: 1.05rem; }
.rf-wall__score span { color: var(--rf-ink-soft); font-size: .9rem; }

.rf-wall__grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.rf-wall__item {
  display: grid; align-content: start; gap: .55rem;
  padding: 1.2rem 1.3rem;
  background: #fff; border: 1px solid var(--rf-border); border-radius: 10px;
}
.rf-wall__stars .star-rating { font-size: .8rem; float: none; margin: 0; }
.rf-wall__item h3 { margin: .2rem 0 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.rf-wall__item > p { margin: 0; font-size: .9rem; color: var(--rf-ink-soft); }
.rf-wall__product {
  display: flex; align-items: center; gap: .7rem;
  margin-top: .3rem; padding-top: .8rem;
  border-top: 1px solid var(--rf-border);
  text-decoration: none; color: inherit;
}
.rf-wall__product img { border-radius: 4px; object-fit: cover; flex: none; }
.rf-wall__product > span { display: grid; gap: 1px; min-width: 0; }
.rf-wall__product strong {
  font-size: .82rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-wall__product > span > span { font-size: .76rem; color: var(--rf-ink-soft); }
.rf-wall__product:hover strong { text-decoration: underline; }

/* The line above a collection grid. */
.rf-collection-rating {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin: 0 0 1rem; font-size: .88rem;
}
.rf-collection-rating .star-rating { font-size: .8rem; float: none; margin: 0; }
.rf-collection-rating strong { font-weight: 700; }
.rf-collection-rating span { color: var(--rf-ink-soft); }