@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Source+Sans+3:wght@400;600;700&display=swap");

/* =========================================================
   JHF x CTCF Design Tokens
   ========================================================= */

:root {
    --jhfctcf-color-canvas: #e9e5de;
    --jhfctcf-color-paper: #f7f4ef;
    --jhfctcf-color-white: #fff;

    --jhfctcf-color-ink: #141210;
    --jhfctcf-color-text: #3a3732;
    --jhfctcf-color-muted: #5a554d;

    --jhfctcf-color-border: #d8d2c8;
    --jhfctcf-color-stone: #cfc9bf;

    --jhfctcf-color-orange: #a94e14;
    --jhfctcf-color-orange-light: #e8894a;

    --jhfctcf-color-red: #c8202a;
    --jhfctcf-color-red-dark: #7a1a1f;

    --jhfctcf-color-welcome: #fbedea;
    --jhfctcf-color-welcome-border: #efc9c2;

    --jhfctcf-font-body:
        "Source Sans 3",
        "Segoe UI",
        Helvetica,
        sans-serif;

    --jhfctcf-font-heading:
        "Archivo",
        "Segoe UI",
        Helvetica,
        sans-serif;
}
/* Existing header CSS */
.main-navigation {
    max-width: 100% !important;
}
#site-branding {
    min-height: 120px;
    background: var(--jhfctcf-color-white);
    padding: 15px 0 20px !important;
}
#site-branding .site-name {
    width: 100% !important;
    max-width: 220px !important;
}
.header-right {
        justify-content: center !important;
}
.header-right .trust_pilot_review,
.header-right .header-tel-info {
    display: none !important;
}
/* Existing header CSS end */

.jhfctcf-body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--jhfctcf-color-canvas);
  color: var(--jhfctcf-color-ink);
  font-family: var(--jhfctcf-font-body);
  font-size: 16px;
  line-height: 1.5;
}

.jhfctcf-body *,
.jhfctcf-body *::before,
.jhfctcf-body *::after {
  box-sizing: border-box;
}
.jhfctcf-body [hidden] {
  display: none !important;
}

.jhfctcf-body .entry-content {
    margin-bottom: 0 !important;
}

.jhfctcf-body .site-content > .wrap {
    max-width: 100% !important;
}

.jhfctcf-body .page-header,
.jhfctcf-body .page-title,
.jhfctcf-body #breadcrumbs {
    display: none;
}


.jhfctcf-body a {
  color: var(--jhfctcf-color-orange);
}
.jhfctcf-body a:hover {
  color: var(--jhfctcf-color-red-dark);
}
.jhfctcf-body button,
.jhfctcf-body input {
  font: inherit;
}
.jhfctcf-body button,
.jhfctcf-body a {
  -webkit-tap-highlight-color: transparent;
}
.jhfctcf-body :focus-visible {
  outline: 3px solid var(--jhfctcf-color-orange);
  outline-offset: 3px;
}
.jhfctcf-site {
  width: 100%;
  min-height: 100vh;
}

/* A separate centered inner container belongs inside every full-width band/section. */
.jhfctcf-container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 48px;
}

/* Shared elements */
.jhfctcf-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
}
.jhfctcf-button:hover {
  transform: translateY(-1px);
}
.jhfctcf-button--red {
  background: var(--jhfctcf-color-red);
  color: var(--jhfctcf-color-white);
}
.jhfctcf-button--red:hover {
  background: var(--jhfctcf-color-red-dark);
  color: var(--jhfctcf-color-white);
}
.jhfctcf-button--orange {
  background: var(--jhfctcf-color-orange);
  color: var(--jhfctcf-color-white) !important;
  text-decoration: none !important;
}
.jhfctcf-button--orange:hover {
  background: #873d10;
  color: var(--jhfctcf-color-white);
}
.jhfctcf-button--dark {
  background: var(--jhfctcf-color-ink);
  color: var(--jhfctcf-color-white);
}
.jhfctcf-button--dark:hover {
  background: #39342e;
  color: var(--jhfctcf-color-white);
}
.jhfctcf-eyebrow {
  margin: 0;
  color: var(--jhfctcf-color-orange-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.jhfctcf-section__inner {
  padding-top: 36px;
  padding-bottom: 36px;
}
.jhfctcf-section__heading {
  margin-bottom: 20px;
}
.jhfctcf-section__heading h2,
.jhfctcf-about h2 {
  margin: 0;
  font-family: var(--jhfctcf-font-heading);
  font-size: clamp(26px, 2.3vw, 34px);
  font-weight: 700;
  line-height: 1.15;
}
.jhfctcf-media-placeholder {
  display: flex;
  min-height: 108px;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 10px;
  background: var(--jhfctcf-color-stone);
  color: #3d3a35;
  font-size: 14px;
  text-align: center;
}
.jhfctcf-media-placeholder--product {
  min-height: 150px;
}
.jhfctcf-product-badge {
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 4px;
  background: #fbe9e9;
  color: var(--jhfctcf-color-red);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

/* Full-width delivery strip */
.jhfctcf-section.jhfctcf-delivery {
    background: var(--jhfctcf-color-canvas);
}
.jhfctcf-topbar {
  background: var(--jhfctcf-color-ink);
  color: var(--jhfctcf-color-paper);
  font-family: var(--jhfctcf-font-body);
}
.jhfctcf-topbar__inner {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 14px;
}
.jhfctcf-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.jhfctcf-topbar__item svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.jhfctcf-topbar__phone {
  font-weight: 700;
  color: var(--jhfctcf-color-paper) !important;
}

/* Header and navigation */
.jhfctcf-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--jhfctcf-color-border);
  background: var(--jhfctcf-color-white);
}
.jhfctcf-header__inner {
  position: relative;
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.jhfctcf-brand {
  display: inline-flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  gap: 18px;
  color: var(--jhfctcf-color-ink);
  text-decoration: none;
}
.jhfctcf-brand__logo{
  width: 100%;
  max-width: 220px;
}
.jhfctcf-brand__divider {
  width: 1px;
  height: 54px;
  flex: 0 0 auto;
  background: var(--jhfctcf-color-border);
}
.jhfctcf-brand__secondary {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jhfctcf-brand__eyebrow {
  color: var(--jhfctcf-color-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.jhfctcf-brand__cheshire {
  color: var(--jhfctcf-color-red);
  font-family: var(--jhfctcf-font-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.jhfctcf-main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 1.7vw, 26px);
}
.jhfctcf-main-nav a {
  color: var(--jhfctcf-color-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.jhfctcf-main-nav a:hover {
  color: var(--jhfctcf-color-orange);
}
.jhfctcf-basket {
  display: inline-flex;
  min-height: 46px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 2px solid var(--jhfctcf-color-ink);
  border-radius: 8px;
  color: var(--jhfctcf-color-ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.jhfctcf-basket:hover {
  background: var(--jhfctcf-color-ink);
  color: var(--jhfctcf-color-white) !important;
}
.jhfctcf-menu-toggle {
  display: none;
}

/* Welcome callout band */
.jhfctcf-welcome {
  border-bottom: 1px solid var(--jhfctcf-color-welcome-border);
  background: var(--jhfctcf-color-welcome);
  color: var(--jhfctcf-color-ink);
}
.jhfctcf-welcome__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.jhfctcf-welcome__message {
  margin: 0;
  color: #3a1512;
  font-size: 16px;
  line-height: 1.45;
}
.jhfctcf-welcome__message-box {
  display: flex;
  flex: auto;
  align-items: center;
  gap: 18px;
}
.jhfctcf-welcome__logo{
  width: 100%;
  max-width: 150px !important;
}
.jhfctcf-welcome__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 18px;
}
.jhfctcf-welcome__link {
  color: var(--jhfctcf-color-red-dark);
  font-weight: 700;
}
.jhfctcf-welcome__dismiss {
  min-width: 92px;
}

/* Hero band */
.jhfctcf-hero {
  background: var(--jhfctcf-color-ink);
  color: var(--jhfctcf-color-paper);
}
.jhfctcf-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-top: 56px;
  padding-bottom: 56px;
}
.jhfctcf-hero__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.jhfctcf-hero__title {
    color: var(--jhfctcf-color-white) !important;
  margin: 0;
  font-family: var(--jhfctcf-font-heading);
  font-size: clamp(38px, 4.2vw, 60px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.jhfctcf-hero__intro {
  max-width: 58ch;
  margin: 0;
  color: #dcd6cc;
  font-size: 19px;
  line-height: 1.45;
}
.jhfctcf-postcode-form {
  width: 100%;
  max-width: 620px;
  margin-top: 2px;
}
.jhfctcf-postcode-form__label {
  display: block;
  margin-bottom: 7px;
  color: var(--jhfctcf-color-paper);
  font-size: 14px;
  font-weight: 600;
}
.jhfctcf-postcode-form__controls {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.jhfctcf-postcode-form__input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  flex: 1 1 auto;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--jhfctcf-color-white);
  color: var(--jhfctcf-color-ink);
  font-size: 17px;
}
.jhfctcf-postcode-form__input[aria-invalid="true"] {
  border-color: #ff8b8b;
  box-shadow: 0 0 0 2px rgb(255 139 139 / 25%);
}
.jhfctcf-postcode-form__submit {
  min-width: 112px;
  min-height: 52px;
  font-size: 17px;
}
.jhfctcf-postcode-form__message {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
}
.jhfctcf-postcode-form__message--error {
  color: #ffb5b5;
}
.jhfctcf-postcode-form__message--success {
  color: var(--jhfctcf-color-paper);
}
.jhfctcf-hero__phone {
  margin: -3px 0 0;
  color: #dcd6cc;
  font-size: 15px;
}
.jhfctcf-hero__phone a {
  color: var(--jhfctcf-color-white);
  font-weight: 700;
  text-decoration: none;
}
.jhfctcf-hero__media,
.jhfctcf-about__media {
  display: flex;
  min-height: 400px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 10px;
  background: #3a3631;
  color: var(--jhfctcf-color-canvas);
  font-size: 14px;
  text-align: center;
}
.jhfctcf-hero__media span {
  max-width: 48ch;
}

/* Benefits band */
.jhfctcf-body .jhfctcf-benefits {
  border-bottom: 1px solid var(--jhfctcf-color-border);
  background: var(--jhfctcf-color-canvas);
}
.jhfctcf-benefits__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.jhfctcf-benefit {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}
.jhfctcf-benefit svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}
.jhfctcf-benefit span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.jhfctcf-benefit strong {
  font-weight: 700;
  line-height: 1.3;
}
.jhfctcf-benefit small {
  color: #4a463f;
  font-size: 14px;
  line-height: 1.35;
}

/* Category and product cards */
.jhfctcf-section.jhfctcf-categories,
.jhfctcf-section.jhfctcf-products {
  background: var(--jhfctcf-color-canvas);
}
.jhfctcf-category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.jhfctcf-category-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--jhfctcf-color-border);
  border-radius: 12px;
  background: var(--jhfctcf-color-white);
  color: var(--jhfctcf-color-ink);
  text-decoration: none;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.jhfctcf-category-card:hover {
  color: var(--jhfctcf-color-ink);
  box-shadow: 0 7px 20px rgb(20 18 16 / 9%);
  transform: translateY(-2px);
}
.jhfctcf-category-card > strong {
  font-family: var(--jhfctcf-font-heading);
  font-size: 17px;
  line-height: 1.25;
}
.jhfctcf-category-card > span:last-child {
  color: #4a463f;
  font-size: 14px;
  line-height: 1.35;
}
.jhfctcf-category-card .jhfctcf-product-badge {
  margin-top: 1px;
}
.jhfctcf-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.jhfctcf-product-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--jhfctcf-color-border);
  border-radius: 12px;
  background: var(--jhfctcf-color-white);
}
.jhfctcf-product-card h3 {
  margin: 0;
  color: var(--jhfctcf-color-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.jhfctcf-product-card__price {
  margin: 0;
  color: var(--jhfctcf-color-ink);
  font-size: 16px;
}
.jhfctcf-add-to-basket {
  width: 100%;
  margin-top: auto;
}

/* About section: the card sits inside its own section container. */
.jhfctcf-about {
  padding-block: 20px;
  background: var(--jhfctcf-color-canvas);
}
.jhfctcf-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding: 40px;
  border: 1px solid var(--jhfctcf-color-border);
  border-radius: 16px;
  background: var(--jhfctcf-color-white);
}
.jhfctcf-about__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.jhfctcf-brand-lockup {
  font-family: var(--jhfctcf-font-body);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.jhfctcf-brand-lockup strong {
  color: var(--jhfctcf-color-ink);
  font-family: var(--jhfctcf-font-heading);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.jhfctcf-brand-lockup span {
  color: var(--jhfctcf-color-red);
  font-family: var(--jhfctcf-font-heading);
  font-size: 15px;
  font-weight: 700;
}
.jhfctcf-about__content > p {
  margin: 0;
  color: var(--jhfctcf-color-text);
  font-size: 17px;
  line-height: 1.5;
}
.jhfctcf-about__points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jhfctcf-about__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.jhfctcf-about__points li span {
  color: var(--jhfctcf-color-orange);
  font-weight: 800;
}
.jhfctcf-about__media {
  min-height: 340px;
  background: var(--jhfctcf-color-stone);
  color: #3d3a35;
}

/* Delivery and FAQ sections */
.jhfctcf-section.jhfctcf-faq {
  background: var(--jhfctcf-color-canvas);
}
.jhfctcf-delivery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.jhfctcf-yard-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--jhfctcf-color-border);
  border-top: 6px solid var(--jhfctcf-color-orange);
  border-radius: 12px;
  background: var(--jhfctcf-color-white);
}
.jhfctcf-yard-card--congleton {
  border-top-color: var(--jhfctcf-color-red);
}
.jhfctcf-yard-card h3 {
  margin: 0;
  font-family: var(--jhfctcf-font-heading);
  font-size: 22px;
  line-height: 1.2;
}
.jhfctcf-yard-card p {
  margin: 0;
  color: var(--jhfctcf-color-text);
  line-height: 1.5;
}
.jhfctcf-yard-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.jhfctcf-yard-card__heading span {
  color: var(--jhfctcf-color-red);
  font-size: 13px;
  font-weight: 700;
}
.jhfctcf-faq__inner {
  padding-top: 20px;
  padding-bottom: 48px;
}
.jhfctcf-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.jhfctcf-faq-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--jhfctcf-color-border);
  border-radius: 12px;
  background: var(--jhfctcf-color-white);
}
.jhfctcf-faq-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.jhfctcf-faq-card p {
  margin: 6px 0 0;
  color: var(--jhfctcf-color-text);
}

.jhfctcf-about .jhfctcf-about__points{
    margin:0 !important;
}

.jhfctcf-section__inner .woocommerce-loop-product__title{
    font-family: var(--jhfctcf-font-heading) !important;
    font-weight:600 !important;
}

.jhfctcf-category-card{
    text-decoration: none !important; 
}

.jhfctcf-category-card > strong{
    color:black !important;
}

/* Full-width footer with constrained inner columns */
.jhfctcf-footer {
  background: var(--jhfctcf-color-ink);
  color: var(--jhfctcf-color-canvas);
  font-size: 15px;
}
.jhfctcf-footer__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.jhfctcf-footer__brand {
  display: flex;
  align-items: flex-start;
}
.jhfctcf-brand-lockup--footer {
  flex-direction: column-reverse;
  width: 100%;
  align-items: flex-start;
  gap: 8px;
  padding: 14px;
  border-radius: 10px;
  background: var(--jhfctcf-color-white);
}
.jhfctcf-brand-lockup--footer strong {
  font-size: 18px;
}
.jhfctcf-footer__column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.jhfctcf-footer__column h2 {
  margin: 0 0 3px;
  color: var(--jhfctcf-color-white);
  font-size: 16px;
  font-weight: 700;
}
.jhfctcf-footer__column h3 {
  margin: 8px 0 0;
  color: var(--jhfctcf-color-white);
  font-size: 15px;
  font-weight: 700;
}
.jhfctcf-footer__column p {
  margin: 0;
}
.jhfctcf-footer__column a {
  color: var(--jhfctcf-color-canvas);
}

/* Accessible toast notification */
.jhfctcf-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--jhfctcf-color-ink);
  color: var(--jhfctcf-color-white);
  box-shadow: 0 8px 28px rgb(20 18 16 / 24%);
  font-size: 14px;
}

/* Tablet layouts */
@media (max-width: 1180px) {
  .jhfctcf-container {
    padding-inline: 30px;
  }
  .jhfctcf-header__inner {
    gap: 16px;
  }
  .jhfctcf-brand {
    gap: 12px;
  }
  .jhfctcf-brand__primary {
    font-size: 17px;
  }
  .jhfctcf-brand__cheshire {
    font-size: 13px;
  }
  .jhfctcf-main-nav {
    gap: 14px;
  }
  .jhfctcf-main-nav a {
    font-size: 14px;
  }
  .jhfctcf-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .jhfctcf-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Collapsible navigation */
@media (max-width: 980px) {
  .jhfctcf-header__inner {
    min-height: 88px;
    gap: 12px;
  }
  .jhfctcf-brand {
    flex: 1 1 auto;
  }
  .jhfctcf-brand__primary {
    font-size: 16px;
  }
  .jhfctcf-brand__divider {
    height: 46px;
  }
  .jhfctcf-brand__cheshire {
    font-size: 12px;
  }
  .jhfctcf-menu-toggle {
    display: inline-flex;
    min-width: 46px;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--jhfctcf-color-border);
    border-radius: 8px;
    background: var(--jhfctcf-color-white);
    color: var(--jhfctcf-color-ink);
    font-weight: 700;
    cursor: pointer;
  }
  .jhfctcf-menu-toggle__icon {
    display: flex;
    width: 18px;
    flex-direction: column;
    gap: 4px;
  }
  .jhfctcf-menu-toggle__icon span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition:
      transform 0.18s ease,
      opacity 0.18s ease;
  }
  .jhfctcf-menu-toggle[aria-expanded="true"]
    .jhfctcf-menu-toggle__icon
    span:first-child {
    transform: translateY(6px) rotate(45deg);
  }
  .jhfctcf-menu-toggle[aria-expanded="true"]
    .jhfctcf-menu-toggle__icon
    span:nth-child(2) {
    opacity: 0;
  }
  .jhfctcf-menu-toggle[aria-expanded="true"]
    .jhfctcf-menu-toggle__icon
    span:last-child {
    transform: translateY(-6px) rotate(-45deg);
  }
  .jhfctcf-main-nav {
    position: absolute;
    top: calc(100% - 1px);
    right: 12px;
    left: 12px;
    z-index: 40;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 8px;
    border: 1px solid var(--jhfctcf-color-border);
    border-radius: 0 0 12px 12px;
    background: var(--jhfctcf-color-white);
    box-shadow: 0 12px 24px rgb(20 18 16 / 16%);
  }
  .jhfctcf-header--menu-open .jhfctcf-main-nav {
    display: flex;
  }
  .jhfctcf-main-nav a {
    padding: 12px;
    border-radius: 7px;
    font-size: 15px;
  }
  .jhfctcf-main-nav a:hover {
    background: var(--jhfctcf-color-canvas);
  }
}

/* Mobile layout */
@media (max-width: 760px) {
  .jhfctcf-body {
    font-size: 15px;
  }
  .jhfctcf-container {
    padding-inline: 16px;
  }
  .jhfctcf-topbar__inner {
    min-height: 38px;
    flex-wrap: wrap;
    gap: 5px 14px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 12px;
  }
  .jhfctcf-topbar__item {
    gap: 8px;
  }
  .jhfctcf-topbar__item svg {
    width: 15px;
    height: 15px;
  }
  .jhfctcf-header__inner {
    min-height: 78px;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .jhfctcf-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
 .jhfctcf-brand__logo{
    max-width: 150px;
  }
  .jhfctcf-brand__divider,
  .jhfctcf-brand__eyebrow {
    display: none;
  }
  .jhfctcf-brand__cheshire {
    font-size: 10px;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .jhfctcf-menu-toggle {
    min-width: 44px;
    min-height: 42px;
  }
  .jhfctcf-basket {
    min-height: 42px;
    padding-inline: 10px;
    font-size: 14px;
  }
  .jhfctcf-welcome__inner {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .jhfctcf-welcome__message {
    font-size: 14px;
  }
  .jhfctcf-welcome__message-box{
    flex-direction: column;
  }
  .jhfctcf-welcome__actions {
    justify-content: stretch;
    gap: 10px;
  }
  .jhfctcf-welcome__actions > * {
    min-width: 0;
    flex: 1 1 0;
    text-align: center;
  }
  .jhfctcf-welcome__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
  }
  .jhfctcf-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-top: 32px;
    padding-bottom: 24px;
  }
  .jhfctcf-hero__content {
    gap: 14px;
  }
  .jhfctcf-hero__title {
    font-size: clamp(30px, 8vw, 42px);
  }
  .jhfctcf-hero__intro {
    font-size: 16px;
  }
  .jhfctcf-postcode-form__controls {
    flex-direction: column;
    gap: 10px;
  }
  .jhfctcf-postcode-form__input,
  .jhfctcf-postcode-form__submit {
    width: 100%;
    min-height: 48px;
  }
  .jhfctcf-hero__media {
    min-height: 220px;
  }
  .jhfctcf-benefits__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .jhfctcf-benefit {
    gap: 8px;
  }
  .jhfctcf-benefit svg {
    width: 20px;
    height: 20px;
  }
  .jhfctcf-benefit strong {
    font-size: 13px;
  }
  .jhfctcf-benefit small {
    font-size: 12px;
  }
  .jhfctcf-section__inner {
    padding-top: 26px;
    padding-bottom: 26px;
  }
  .jhfctcf-section__heading {
    margin-bottom: 14px;
  }
  .jhfctcf-section__heading h2,
  .jhfctcf-about h2 {
    font-size: clamp(24px, 6vw, 30px);
  }
  .jhfctcf-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .jhfctcf-category-card {
    gap: 7px;
    padding: 10px;
  }
  .jhfctcf-category-card > strong {
    font-size: 15px;
  }
  .jhfctcf-category-card > span:last-child {
    font-size: 13px;
  }
  .jhfctcf-media-placeholder {
    min-height: 96px;
    padding: 8px;
  }
  .jhfctcf-media-placeholder--product {
    min-height: 150px;
  }
  .jhfctcf-product-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .jhfctcf-product-card {
    padding: 12px;
  }
  .jhfctcf-about {
    padding-block: 12px;
  }
  .jhfctcf-about__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 22px;
  }
  .jhfctcf-brand-lockup {
    gap: 8px 12px;
  }
  .jhfctcf-brand-lockup strong {
    font-size: 16px;
  }
  .jhfctcf-brand-lockup span {
    font-size: 12px;
  }
  .jhfctcf-about__content {
    gap: 14px;
  }
  .jhfctcf-about__media {
    min-height: 210px;
  }
  .jhfctcf-delivery-grid,
  .jhfctcf-faq-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .jhfctcf-yard-card {
    padding: 18px;
  }
  .jhfctcf-faq__inner {
    padding-top: 12px;
    padding-bottom: 30px;
  }
  .jhfctcf-faq-card {
    padding: 16px;
  }
  .jhfctcf-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .jhfctcf-footer__brand {
    grid-column: 1 / -1;
  }
  .jhfctcf-toast {
    right: 16px;
    bottom: 16px;
  }
}

@media(max-width:548px){
    .header-right{
        width:20% !important;
    }

    .jhfctcf-products .woocommerce ul.products li.product{
        margin:0px 0px 20px 0px !important;
       
        }
}

@media (max-width: 380px) {
  .jhfctcf-menu-toggle {
    min-width: 42px;
    padding: 7px;
  }
  .jhfctcf-container {
    padding-inline: 12px;
  }
  .jhfctcf-header__inner {
    gap: 8px;
  }
  .jhfctcf-brand__primary {
    font-size: 13px;
  }
  .jhfctcf-basket {
    padding-inline: 8px;
    font-size: 13px;
  }
}

/* WordPress / existing-theme integration */
.jhfctcf-container{width:100%;margin-inline:auto}
.jhfctcf-header-lockup{display:inline-flex;align-items:center;gap:16px;margin-left:16px;vertical-align:middle}
.jhfctcf-header-lockup__divider{display:block;width:1px;height:52px;background:#d8d2c8}
.jhfctcf-header-lockup__secondary{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.jhfctcf-header-lockup__eyebrow{font:700 10px/1.2 "Source Sans 3",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b665f}
.jhfctcf-header-lockup img{
    display:block;
    width:100%;
    max-width: 220px;
}
.jhfctcf-yard-card__heading img{width:auto;max-width:145px;max-height:38px}
.jhfctcf-brand-lockup img{width:auto;max-width:190px;max-height:70px}
.jhfctcf-category-card img{width:100%;height:150px;object-fit:cover;border-radius:10px}
.jhfctcf-hero__media img,.jhfctcf-about__media img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.jhfctcf-footer-marks{background:#fff;border-top:1px solid #d8d2c8;padding:24px 0}
.jhfctcf-footer-marks .jhfctcf-brand-lockup{display:flex;align-items:center;justify-content:center;gap:28px}

.jhfctcf-products .woocommerce ul.products{
    margin-bottom:0;
}
.jhfctcf-products .woocommerce ul.products li.product {
    margin: 10px;
    padding: 16px;
    border: 1px solid var(--jhfctcf-color-border);
    border-radius: 12px;
    background: var(--jhfctcf-color-white);
}
.jhfctcf-products .woocommerce ul.products li.product .button {
    background: var(--jhfctcf-color-ink);
    color: var(--jhfctcf-color-white);
    width: 100%;
    margin-top: auto;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    font-weight: 700;
}

.jhfctcf-product-badge{display:inline-block;position:relative;z-index:2}

@media (max-width:767px){

    .top-header {
        min-height: 170px !important;
        background: var(--jhfctcf-color-white) !important;
    }

    .jhfctcf-products .woocommerce ul.products  li.product {
        width: 100% !important;
    }

    .site-name{
        order: unset !important;
		margin-top: 0px!important;
        
    }

    .custom-logo-link .custom-logo {
		height: auto;
        width:100% !important;
		/* width: 84%!important; */
	}

    .jhfctcf-body .site-content > .wrap {
        padding: 0px !important;
    }

    .header-right .cart-box {
        order: unset !important;
    }

  .jhfctcf-topbar__delivery{display:none!important}
  .jhfctcf-topbar__inner{justify-content:center;min-height:40px;padding-top:6px;padding-bottom:6px}
  .jhfctcf-topbar__phone{font-size:14px}
     .jhfctcf-header-lockup{
        gap:9px;
        margin:0px 8px
    }
  .jhfctcf-header-lockup__divider{height:34px}
  .jhfctcf-header-lockup__eyebrow{font-size:8px}
  .jhfctcf-header-lockup img{max-width:95px;max-height:24px}
  .jhfctcf-section__inner{padding-top:16px;padding-bottom:16px}
}

.supermarket-template-footer-column {
    background: #000000 !important;
}

footer.site-footer .site-info {
    background: #000000 !important;
}

@media only screen and (min-width: 640px) {
  img.jhfctcf-custom-mobile-logo {
    display: none;
}
h2#jhfctcf-site-title {
    display: none;
}
}

@media only screen and (max-width: 640px) {
    .sc-footer-column {
        width: 100% !important;
    }

    .custom-logo-link img.custom-logo {
      display: none !important;
    }

    #site-branding .site-name {
      max-width: fit-content !important;
    }

    h2#jhfctcf-site-title {
        font-size: 16px !important;
        width: 100%;
        margin: 0 0 4px;
        font-weight: 600;
    }

    img.jhfctcf-custom-mobile-logo {
        width: 100% !important;
        max-width: 40px !important;
    }

    span.jhfctcf-header-lockup__divider {
        display: none !important;
    }

    .jhfctcf-header-lockup {
        flex-direction: column;
        gap: 0 !important;
    }

    span.jhfctcf-header-lockup__secondary {
      flex-direction: row;
  }
}