@charset "utf-8";
/* CSS Document */

/* Catgory thumb tweaks*/

.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item .product-title,
.sub-category-grid .listWrapper .item-box .sub-category-item .category-title  {
    background:rgba(255,255,255,.8);
    transform: translateY(0);
    padding: 1rem;
    width: calc(100% - 4px);
    left: 2px;
    bottom: 2px;
}
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item, 
.sub-category-grid .listWrapper .item-box {
    border-top: none;
}
.sub-category-grid .listWrapper .item-box:after, 
.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item:after {
    padding-bottom: 121%;
}

/* make sure link can host custom arrow */
.navbar-link {
  position: relative;
  padding-right: 1.4rem; /* space for arrow */
}

/* remove any default theme arrow */
.navbar-link::after {
  content: none !important;
}

/* create a thin, lined chevron using borders */
.navbar-link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.55rem;
  width: 7px;
  height: 7px;
  border-right: 2px solid #d22360;
  border-bottom: 2px solid #d22360;
  transform: translateY(-50%) rotate(45deg); /* perfect downward chevron */
  transition: border-color 0.2s ease;
}

/* optional: darker pink on hover */
.navbar-link:hover::before,
.navbar-link:focus::before {
  border-right-color: #b61c52;
  border-bottom-color: #b61c52;
}

/* Home Page - Mid Page Content - Set Background colour */
section.section.is-large.has-vertical-padding.has-background-primary.has-text-default {
  background-color: #F5F0E3 !important;
}

.navbar-dropdown.first-column,
.navbar-dropdown.second-column {
    min-height: 275px; /* match highest column */
}


/* Disable "Categories", "Products" and "Campaign POS Opt-In" top-level navbar links */
a.navbar-link[href="https://pcc-hub-howdens.com"] {
  pointer-events: none;
  cursor: default;
}

/* Lay out checkbox + label text in a row */
.TagSearchChk {
  display: flex;          /* puts checkbox and text on one line */
  align-items: center;    /* vertically centers them */
}

/* Reset any odd positioning on the checkbox itself */
.TagSearchChk input[type="checkbox"] {
  margin-right: 6px;      /* space between box and text */
  position: static;       /* undo absolute/relative if applied elsewhere */
  transform: none;        /* undo transforms if any */
}

/* All tag filter groups collapsed on page load */
.tagCategoryItemWrap {
  display: none;
}


/* Hide titles ONLY on the homepage category (catalogue) tiles */
.homePageCategories .category-item .product-title {
  display: none !important;
}

.category-subcategory-section .sub-category-item .category-title {
  display: none !important;
}

/* FAQs */
/* 1) Hide the arrow icon but keep the header width/alignment */
.block.is-fullwidth:nth-of-type(1) .card-header-icon .icon,
.block.is-fullwidth:nth-of-type(8) .card-header-icon .icon {
  visibility: hidden !important;   /* hides icon, keeps space */
}

/* 2) Disable click/keyboard toggle on ORDERING and DISPATCH AND DELIVERY */
.block.is-fullwidth:nth-of-type(1) .card-header,
.block.is-fullwidth:nth-of-type(8) .card-header {
  pointer-events: none;            /* no clicks/keys */
  cursor: default;                 /* normal cursor, not pointer */
}

/* 3) Belt & braces: make sure their dropdown content never shows */
.block.is-fullwidth:nth-of-type(1) .card-content,
.block.is-fullwidth:nth-of-type(8) .card-content {
  display: none !important;
}

/* DISPATCH AND DELIVERY (eighth card) */
.block.is-fullwidth:nth-of-type(8) .card-header-icon {
    visibility: hidden !important;
}


/* Default desktop behaviour */
.login__wrapper {
    background-size: cover;
    background-position: center center;
}

/* If screen is too short → avoid cropping */
@media (max-aspect-ratio: 16/10) {
  .login__wrapper {
    background-size: contain !important;
    background-position: center top !important;
    background-color: #263038; /* fallback background */
  }
}

/* Extra protection for very small-height displays */
@media (max-height: 700px) {
  .login__wrapper {
    background-size: contain !important;
  }
}

/* ================================
   Home slider: mobile banner swap
   ================================ */

/* Default: desktop image shows */
.homebanners .flexslider .slides li img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile: hide desktop image and use mobile background image */
@media (max-width: 768px) {

  /* Hide desktop <img> */
  .homebanners .flexslider .slides li img {
    display: none !important;
  }

  /* Keep slide height proportional to the mobile banner (1030 x 1350) */
  .homebanners .flexslider .slides li.section {
    background-image: url("/-216357927/Handler/Picture/GU/F/Howdens//Assets//8510 Tiles For Print Shed_1030px x 1350px_banner.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;

    /* show full banner */
    background-size: contain !important;

    /* height = 100vw * (1350/1030) = ~131.1vw */
    height: 131.1vw !important;
    min-height: 0 !important;
    max-height: 90vh;              /* prevents it taking over very short screens */
    background-color: #fff;        /* shows if contain leaves side gaps */
  }

  /* Flexslider sometimes pins viewport height; let it expand */
  .homebanners .flexslider .flex-viewport {
    height: auto !important;
  }
}

/* Optional: smaller phones get a bit less height */
@media (max-width: 420px) {
  .homebanners .flexslider .slides li.section {
    min-height: 440px;
  }
}

/* =========================
   Privacy notice formatting
   ========================= */
.privacy-notice h1,
.privacy-notice h2,
.privacy-notice h3,
.privacy-notice h4 {
  display: block !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 1.25rem 0 0.75rem !important;
}

/* Headings sizes (adjust if you want) */
.privacy-notice h1 { font-size: 2rem !important; }
.privacy-notice h2 { font-size: 1.5rem !important; }
.privacy-notice h3 { font-size: 1.2rem !important; }
.privacy-notice h4 { font-size: 1.05rem !important; }

.privacy-notice p {
  margin: 0 0 0.9rem !important;
}

/* Restore bullets + indentation */
.privacy-notice ul,
.privacy-notice ol {
  list-style: disc outside !important;
  margin: 0 0 1rem !important;
  padding-left: 1.5rem !important;
}

.privacy-notice ol {
  list-style: decimal outside !important;
}

.privacy-notice li {
  display: list-item !important;
  margin: 0.25rem 0 !important;
}

/* If your theme resets all fonts */
.privacy-notice {
  font-size: 1rem;
}

/* ############################## */
/* Responsive + Equal Button Size */
/* ############################## */

/* --- Base: keep normal document flow so headings/subheadings don't move --- */
.ict-content-column {
  display: block;
}

/* Make each button container behave nicely */
.ict-content-column .ict-buttons {
  display: flex;
  justify-content: center; /* or flex-start if you want left aligned */
}

.ict-content-column .ict-buttons .button {
  min-width: 220px;  /* adjust */
  text-align: center;
}


/* --- Desktop / Tablet: put the LAST TWO .block elements (the button blocks) side-by-side --- */
@media (min-width: 769px) {
  /* target only the last two .block elements inside the content column */
  .ict-content-column > .block:nth-last-of-type(-n+2) {
    display: inline-flex;
    vertical-align: middle;
    margin-bottom: 0;  /* override Bulma .block spacing */
  }

  /* spacing between the two button blocks */
  .ict-content-column > .block:nth-last-of-type(2) {
    margin-right: 1rem;
  }
}


/* --- Mobile: stack and center --- */
@media (max-width: 768px) {
  /* center the whole button row */
  .ict-content-column > .block:nth-last-of-type(-n+2) {
    display: flex;
    justify-content: center;
  }

  /* make the .buttons container shrink-to-fit so centering works */
  .ict-content-column > .block:nth-last-of-type(-n+2) .ict-buttons.buttons {
    display: inline-flex;          /* key: shrink to content */
    flex-direction: column;        /* stack */
    align-items: center;           /* center buttons */
    gap: 1rem;
    width: auto;                   /* don't stretch full width */
    margin: 0 auto;                /* center within block */
  }

  /* consistent button sizing */
  .ict-content-column > .block:nth-last-of-type(-n+2) .ict-buttons.buttons .button {
    width: 100%;
    max-width: 260px;              /* your mobile button width */
    min-width: 220px;              /* keeps same size feel */
    text-align: center;
  }
}

/* Constrain the POS image box, then make it square */
.ict-image-column .image {
  width: 100%;
  max-width: 320px;      /* <-- adjust to match category tile size */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0 auto;
}

.ict-image-column .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .ict-image-column .image {
    max-width: 260px;    /* matches your mobile button max-width */
  }
}

/* =========================================
   LOGIN PAGE: simplify / hide navigation
   ========================================= */

/* Hide Home + Categories + POS Type + POS Opt-In */
html.LoginPage #main-navbar .navbar-start {
  display: none !important;
}

/* (Covers your original rule explicitly as well) */
html.LoginPage #main-navbar .navbar-start > .navbar-item.has-dropdown {
  display: none !important;
}

/* Hide Login link (icon + text versions) */
html.LoginPage .navbar-item.login-link {
  display: none !important;
}

/* Hide Basket (icon + button versions) */
html.LoginPage .basket-link {
  display: none !important;
}

/* Hide Search (icon + button versions) */
html.LoginPage .navbar-search-toggle {
  display: none !important;
}

/* Hide My Account / Logout (safety) */
html.LoginPage .my-account-link,
html.LoginPage .my-account-dropdown,
html.LoginPage .logout-link {
  display: none !important;
}

/* Hide right-hand navigation group */
html.LoginPage .navbar-end {
  display: none !important;
}

/* Hide burger menu on login page */
html.LoginPage .navbar-burger {
  display: none !important;
}

/* LOGIN PAGE: remove logo rendered via the page title pseudo-element */
html.LoginPage .page-title::before{
  content: none !important;      /* removes the pseudo element */
  display: none !important;
  background: none !important;
}