@total_onion/onion-library 3.2.0 → 3.2.2

package/public/block-post-type-filter-grid-v3/post-type-filter-grid-v3.css

@@ -0,0 +1,873 @@
+.post-type-filter-grid-v3 {
+  z-index: 10;
+  position: relative;
+  pointer-events: all;
+  background-color: var(--block-background-colour);
+}
+.post-type-filter-grid-v3__main-container {
+  display: grid;
+  grid-column-gap: var(--global-inline-spacing);
+  -moz-column-gap: var(--global-inline-spacing);
+  column-gap: var(--global-inline-spacing);
+  grid-template: "filter " "sort" "markettoggle" "grid" "loadmore"/1fr;
+}
+.post-type-filter-grid-v3__main-container--hide-filters {
+  grid-template: "markettoggle" "grid" "loadmore"/1fr;
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__main-container {
+    grid-template: "filter markettoggle grid" "sort markettoggle grid" "... loadmore"/1fr 4fr;
+  }
+  .post-type-filter-grid-v3__main-container--hide-filters {
+    grid-template: "markettoggle" "grid" "loadmore"/1fr;
+  }
+  .post-type-filter-grid-v3__main-container[data-layout="2"] {
+    grid-template: "filter " "sort" "markettoggle" "grid" "loadmore"/1fr;
+  }
+  .post-type-filter-grid-v3__main-container[data-layout="3"] {
+    grid-template: "filter " "sort" "markettoggle" "grid" "loadmore"/1fr;
+  }
+}
+.post-type-filter-grid-v3__filter {
+  position: relative;
+  position: sticky;
+  top: 10px;
+  z-index: 200;
+  display: grid;
+  top: calc(80 / var(--design-reference) * var(--screen-width));
+  background-color: var(--filter-background-colour-mobile);
+  align-items: center;
+  justify-items: center;
+  place-items: center;
+}
+.post-type-filter-grid-v3__filter[data-layout="2"] {
+  width: 100%;
+  padding-bottom: calc(var(--global-inline-spacing) / 2);
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__filter {
+    top: calc(140 / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__filter {
+    background-color: var(--filter-background-colour);
+    top: 0;
+  }
+}
+.post-type-filter-grid-v3__filter-container {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  width: 100%;
+  background-color: var(--filter-background-colour-mobile);
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__filter-container {
+    height: auto;
+    background-color: transparent;
+  }
+  .post-type-filter-grid-v3__filter-container[data-layout="2"] {
+    display: flex;
+    gap: calc(20 / var(--design-reference) * var(--screen-width));
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    justify-content: flex-start;
+    grid-auto-flow: row;
+    width: auto;
+    max-width: 100%;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+}
+.post-type-filter-grid-v3__filter-container--open {
+  height: auto;
+  position: absolute;
+  top: 100%;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2705882353);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.post-type-filter-grid-v3__open-filter-toggle {
+  position: relative;
+  position: sticky;
+  width: 100%;
+  cursor: pointer;
+}
+.post-type-filter-grid-v3__open-filter-toggle--open {
+  color: white;
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3 button.post-type-filter-grid-v3__open-filter-toggle {
+    display: none;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3 button.post-type-filter-grid-v3__open-filter-toggle {
+    display: none;
+  }
+}
+.post-type-filter-grid-v3__filter-top-level-category-name {
+  position: relative;
+}
+.post-type-filter-grid-v3__filter-top-level-category-name::after {
+  transition: transform 0.3s;
+  content: "";
+  width: 0.8em;
+  height: 0.8em;
+  background-color: var(--theme-primary-text-colour);
+  position: absolute;
+  translate: 160%;
+  right: 0;
+  clip-path: polygon(100% 0, 0 0, 50% 100%);
+  rotate: 180deg;
+  bottom: calc(3 / var(--desktop-design-reference) * var(--screen-width-static));
+  transform-origin: center;
+}
+.post-type-filter-grid-v3__filter-categories {
+  display: grid;
+  top: 0;
+  grid-gap: calc(10 / var(--design-reference) * var(--screen-width));
+  gap: calc(10 / var(--design-reference) * var(--screen-width));
+  grid-template-columns: 1fr;
+  padding-bottom: var(--global-inline-spacing);
+  width: 100%;
+}
+.post-type-filter-grid-v3__filter-categories[data-layout="2"] {
+  padding-bottom: 0;
+  padding-bottom: initial;
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__filter-categories {
+    grid-template-columns: 1fr;
+    position: relative;
+    gap: calc(20 / var(--design-reference) * var(--screen-width));
+  }
+  .post-type-filter-grid-v3__filter-categories[data-layout="2"] {
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    width: -moz-max-content;
+    width: max-content;
+    margin: 0;
+    margin: initial;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__filter-categories {
+    gap: calc(30 / var(--design-reference) * var(--screen-width));
+  }
+}
+.post-type-filter-grid-v3__filter-category {
+  flex-direction: column;
+  width: 100%;
+}
+.post-type-filter-grid-v3__filter-category.active .post-type-filter-grid-v3__filter-subcategory-list {
+  max-height: 1000px;
+}
+.post-type-filter-grid-v3__filter-category.active .post-type-filter-grid-v3__filter-top-level-category-name::after {
+  rotate: 0deg;
+}
+.post-type-filter-grid-v3__filter-subcategory-list {
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: calc(var(--filter-category-gap) / var(--design-reference) * var(--screen-width));
+  transition: 0.3s;
+  max-height: 0px;
+  overflow: hidden;
+}
+.post-type-filter-grid-v3__filter-subcategory-list::-webkit-scrollbar {
+  display: none;
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__filter-subcategory-list {
+    gap: calc(var(--filter-category-gap) / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__filter-subcategory-list {
+    gap: calc(var(--filter-category-gap) / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__filter-subcategory-list[data-layout="2"] {
+    grid-auto-flow: column;
+  }
+}
+.post-type-filter-grid-v3__filter-subcategory-list-item {
+  width: auto;
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__filter-subcategory-list-item {
+    width: auto;
+    width: initial;
+  }
+}
+.post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="2"] {
+  margin: 0;
+  margin: initial;
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="2"] {
+    margin: auto;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="2"] {
+    margin: auto;
+  }
+}
+.post-type-filter-grid-v3__filter-subcategory-button-icon {
+  width: 1em;
+}
+.post-type-filter-grid-v3__sort-container {
+  grid-area: sort;
+}
+.post-type-filter-grid-v3__sort {
+  display: none;
+  position: relative;
+  width: -moz-max-content;
+  width: max-content;
+}
+.post-type-filter-grid-v3__sort:hover {
+  cursor: pointer;
+}
+.post-type-filter-grid-v3--micro-gap .post-type-filter-grid-v3__grid {
+  gap: calc(var(--micro-grid-gap-amount) / var(--desktop-design-reference) * var(--screen-width-static));
+}
+.post-type-filter-grid-v3__market-toggle {
+  background: var(--black);
+  align-items: center;
+  display: inline-flex;
+  gap: calc(10 / var(--desktop-design-reference) * var(--screen-width-static));
+  padding: calc(15 / var(--desktop-design-reference) * var(--screen-width-static)) calc(10 / var(--desktop-design-reference) * var(--screen-width-static));
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__market-toggle {
+    padding: calc(15 / var(--desktop-design-reference) * var(--screen-width-static));
+  }
+}
+.post-type-filter-grid-v3__switch {
+  align-items: center;
+  display: inline-flex;
+  gap: calc(10 / var(--desktop-design-reference) * var(--screen-width-static));
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__switch {
+    gap: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
+  }
+}
+.post-type-filter-grid-v3__switch {
+  margin: auto;
+}
+.post-type-filter-grid-v3__switch-toggle {
+  display: inline-block;
+  position: relative;
+  height: calc(26 / var(--desktop-design-reference) * var(--screen-width-static));
+  width: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__switch-toggle {
+    height: calc(34 / var(--desktop-design-reference) * var(--screen-width-static));
+    width: calc(68 / var(--desktop-design-reference) * var(--screen-width-static));
+  }
+}
+.post-type-filter-grid-v3__switch-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.post-type-filter-grid-v3__switch-toggle .switch-slider {
+  background-color: var(--palette-default-1);
+  border-radius: calc(34 / var(--desktop-design-reference) * var(--screen-width-static));
+  bottom: 0;
+  cursor: pointer;
+  height: calc(26 / var(--desktop-design-reference) * var(--screen-width-static));
+  left: 0;
+  top: 0;
+  position: absolute;
+  right: 0;
+  transition: 0.4s;
+  width: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__switch-toggle .switch-slider {
+    height: calc(34 / var(--desktop-design-reference) * var(--screen-width-static));
+    width: calc(68 / var(--desktop-design-reference) * var(--screen-width-static));
+  }
+}
+.post-type-filter-grid-v3__switch-toggle .switch-slider::before {
+  background-color: var(--black);
+  border-radius: 50%;
+  bottom: calc(2 / var(--desktop-design-reference) * var(--screen-width-static));
+  content: "";
+  height: calc(22 / var(--desktop-design-reference) * var(--screen-width-static));
+  right: calc(2 / var(--desktop-design-reference) * var(--screen-width-static));
+  position: absolute;
+  transition: 0.4s;
+  width: calc(22 / var(--desktop-design-reference) * var(--screen-width-static));
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__switch-toggle .switch-slider::before {
+    height: calc(30 / var(--desktop-design-reference) * var(--screen-width-static));
+    width: calc(30 / var(--desktop-design-reference) * var(--screen-width-static));
+  }
+}
+.post-type-filter-grid-v3__switch-toggle input:checked + .switch-slider::before {
+  transform: translateX(calc(-24 / var(--desktop-design-reference) * var(--screen-width-static)));
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__switch-toggle input:checked + .switch-slider::before {
+    transform: translateX(calc(-34 / var(--desktop-design-reference) * var(--screen-width-static)));
+  }
+}
+.post-type-filter-grid-v3__switch-toggle input:checked + .switch-slider {
+  background-color: var(--palette-default-1);
+}
+.post-type-filter-grid-v3__switch-text {
+  color: var(--palette-default-5);
+  font-family: var(--tertiary-font-family);
+  font-size: calc(10 / var(--desktop-design-reference) * var(--screen-width-static));
+  text-transform: uppercase;
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__switch-text {
+    font-size: calc(11 / var(--desktop-design-reference) * var(--screen-width-static));
+  }
+}
+.post-type-filter-grid-v3__grid {
+  grid-area: grid;
+  display: grid;
+  background-color: var(--grid-background-colour);
+  grid-template-columns: repeat(var(--columns-mobile), 1fr);
+  color: var(--theme-primary-text-colour);
+  grid-gap: calc(var(--global-inline-spacing) * var(--gap-multiplier-mobile));
+  gap: calc(var(--global-inline-spacing) * var(--gap-multiplier-mobile));
+  border: calc(var(--grid-border-width) / var(--desktop-design-reference) * var(--screen-width-static)) solid var(--grid-border-colour);
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__grid {
+    padding-top: 0;
+    padding-top: initial;
+    grid-template-columns: repeat(var(--columns-portrait), 1fr);
+    gap: calc(var(--global-inline-spacing) * var(--gap-multiplier-portrait));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__grid {
+    gap: calc(var(--global-inline-spacing) * var(--gap-multiplier));
+    grid-template-columns: repeat(var(--columns-desktop), 1fr);
+  }
+}
+.post-type-filter-grid-v3__featured-post {
+  background: var(--featured-post-background-colour);
+}
+.post-type-filter-grid-v3__post-container {
+  display: grid;
+  width: 100%;
+  z-index: 1;
+  position: relative;
+  padding: calc(var(--global-inline-spacing) * var(--post-container-padding-mobile));
+  align-self: var(--block-container-vertical-align);
+  justify-self: var(--block-container-vertical-align);
+  place-self: var(--block-container-vertical-align);
+  background-color: var(--post-container-background-colour);
+  grid-auto-rows: auto;
+  grid-auto-rows: var(--post-container-grid-auto-rows, auto);
+  grid-auto-columns: auto;
+  grid-auto-columns: var(--post-container-grid-auto-columns, auto);
+  grid-template-rows: auto;
+  grid-template-rows: var(--post-container-grid-template-rows, auto);
+  grid-template-columns: auto;
+  grid-template-columns: var(--post-container-grid-template-columns, auto);
+  grid-gap: calc(var(--global-inline-spacing) * (var(--post-container-grid-gap-mobile)));
+  gap: calc(var(--global-inline-spacing) * (var(--post-container-grid-gap-mobile)));
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__post-container {
+    gap: calc(var(--global-inline-spacing) * (var(--post-container-grid-gap-portrait)));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__post-container {
+    padding: calc(var(--global-inline-spacing) * var(--post-container-padding));
+    gap: calc(var(--global-inline-spacing) * (var(--post-container-grid-gap-desktop)));
+  }
+}
+.post-type-filter-grid-v3__post-image-container-link {
+  display: grid;
+  grid-template: "main"/1fr;
+  width: 100%;
+  z-index: 2;
+  max-width: none;
+  max-width: initial;
+  position: relative;
+}
+.post-type-filter-grid-v3__post-image-container-link--show-alt-image-on-hover:hover .post-type-filter-grid-v3__post-image {
+  opacity: 0;
+}
+.post-type-filter-grid-v3__post-image-container-link--show-alt-image-on-hover:hover .post-type-filter-grid-v3__post-image--secondary {
+  opacity: 1;
+}
+.post-type-filter-grid-v3__post-image-container-link--set-as-background-image {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  grid-area: unset;
+}
+.post-type-filter-grid-v3__post-image-container-link--set-as-background-image img {
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+.post-type-filter-grid-v3__info-item {
+  display: grid;
+  z-index: 5;
+  z-index: var(--element-z-index, 5);
+  grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
+  grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
+  align-self: var(--grid-vertical-placement-mobile);
+  justify-self: var(--grid-horizontal-placement-mobile);
+  place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
+}
+.post-type-filter-grid-v3__info-item:has(> .subgrid-layout-mobile) {
+  grid-template-rows: subgrid;
+}
+.post-type-filter-grid-v3__info-item:has(> .subgrid-layout-mobile) > section {
+  grid-row: 1/-1;
+  grid-column: 1/-1;
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__info-item {
+    grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
+    grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
+    align-self: var(--grid-vertical-placement-portrait);
+    justify-self: var(--grid-horizontal-placement-portrait);
+    place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
+  }
+  .post-type-filter-grid-v3__info-item:has(> .subgrid-layout-portrait) {
+    grid-template-rows: subgrid;
+  }
+  .post-type-filter-grid-v3__info-item:has(> .subgrid-layout-portrait) > section {
+    grid-row: 1/-1;
+    grid-column: 1/-1;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__info-item {
+    grid-row: var(--grid-row-start)/span var(--grid-row-span);
+    grid-column: var(--grid-column-start)/span var(--grid-column-span);
+    align-self: var(--grid-vertical-placement-desktop);
+    justify-self: var(--grid-horizontal-placement-desktop);
+    place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
+  }
+  .post-type-filter-grid-v3__info-item:has(> .subgrid-layout-desktop) {
+    grid-template-rows: subgrid;
+  }
+  .post-type-filter-grid-v3__info-item:has(> .subgrid-layout-desktop) > section {
+    grid-row: 1/-1;
+    grid-column: 1/-1;
+  }
+}
+.post-type-filter-grid-v3__info-item {
+  z-index: 2;
+}
+.post-type-filter-grid-v3__info-item:not(.post-type-filter-grid-v3__post-link):not(.post-type-filter-grid-v3__product-buy-now):not(.post-type-filter-grid-v3__post-image-container-link):not(.post-type-filter-grid-v3__post-tags):not(.post-type-filter-grid-v3__shopify) * {
+  width: 100%;
+}
+.post-type-filter-grid-v3__post-tags {
+  pointer-events: none;
+}
+.post-type-filter-grid-v3__post-image,
+.post-type-filter-grid-v3__post-image--secondary,
+.post-type-filter-grid-v3__global-image,
+.post-type-filter-grid-v3__media-image {
+  opacity: 1;
+  z-index: 1;
+  transition: opacity 0.3s;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  width: var(--post-image-width-mobile);
+  -o-object-fit: var(--post-image-fit-style);
+  object-fit: var(--post-image-fit-style);
+  aspect-ratio: var(--post-image-aspect-ratio);
+  border-radius: var(--post-image-border-radius);
+  border: 0px solid transparent;
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__post-image,
+  .post-type-filter-grid-v3__post-image--secondary,
+  .post-type-filter-grid-v3__global-image,
+  .post-type-filter-grid-v3__media-image {
+    width: var(--post-image-width-portrait);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__post-image,
+  .post-type-filter-grid-v3__post-image--secondary,
+  .post-type-filter-grid-v3__global-image,
+  .post-type-filter-grid-v3__media-image {
+    width: var(--post-image-width-desktop);
+  }
+}
+.post-type-filter-grid-v3__post-image--image_accent,
+.post-type-filter-grid-v3__post-image--secondary--image_accent,
+.post-type-filter-grid-v3__global-image--image_accent,
+.post-type-filter-grid-v3__media-image--image_accent {
+  position: relative;
+  position: var(--element-position, relative);
+  z-index: var(--element-z-index);
+  align-self: var(--mobile-vertical-placement);
+  justify-self: var(--mobile-horizontal-placement);
+  place-self: var(--mobile-vertical-placement) var(--mobile-horizontal-placement);
+  translate: 0 0;
+  translate: var(--element-horizontal-offset-mobile, 0) var(--element-vertical-offset-mobile, 0);
+  rotate: 0deg;
+  rotate: var(--element-rotation-mobile, 0deg);
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__post-image--image_accent,
+  .post-type-filter-grid-v3__post-image--secondary--image_accent,
+  .post-type-filter-grid-v3__global-image--image_accent,
+  .post-type-filter-grid-v3__media-image--image_accent {
+    align-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement));
+    justify-self: var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
+    place-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement)) var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
+    translate: 0 0;
+    translate: var(--element-horizontal-offset-portrait, var(--element-horizontal-offset-desktop, 0)) var(--element-vertical-offset-portrait, var(--element-vertical-offset-desktop, 0));
+    rotate: 0deg;
+    rotate: var(--element-rotation-portrait, var(--element-rotation-desktop, 0deg));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__post-image--image_accent,
+  .post-type-filter-grid-v3__post-image--secondary--image_accent,
+  .post-type-filter-grid-v3__global-image--image_accent,
+  .post-type-filter-grid-v3__media-image--image_accent {
+    align-self: var(--desktop-vertical-placement);
+    justify-self: var(--desktop-horizontal-placement);
+    place-self: var(--desktop-vertical-placement) var(--desktop-horizontal-placement);
+    translate: 0 0;
+    translate: var(--element-horizontal-offset-desktop, 0) var(--element-vertical-offset-desktop, 0);
+    rotate: 0deg;
+    rotate: var(--element-rotation-desktop, 0deg);
+  }
+}
+.post-type-filter-grid-v3__post-image--image_accent,
+.post-type-filter-grid-v3__post-image--secondary--image_accent,
+.post-type-filter-grid-v3__global-image--image_accent,
+.post-type-filter-grid-v3__media-image--image_accent {
+  width: var(--post-image-width-mobile);
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__post-image--image_accent,
+  .post-type-filter-grid-v3__post-image--secondary--image_accent,
+  .post-type-filter-grid-v3__global-image--image_accent,
+  .post-type-filter-grid-v3__media-image--image_accent {
+    width: var(--post-image-width-desktop);
+  }
+}
+.post-type-filter-grid-v3__global-image {
+  display: grid;
+  z-index: 5;
+  z-index: var(--element-z-index, 5);
+  grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
+  grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
+  align-self: var(--grid-vertical-placement-mobile);
+  justify-self: var(--grid-horizontal-placement-mobile);
+  place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
+}
+.post-type-filter-grid-v3__global-image:has(> .subgrid-layout-mobile) {
+  grid-template-rows: subgrid;
+}
+.post-type-filter-grid-v3__global-image:has(> .subgrid-layout-mobile) > section {
+  grid-row: 1/-1;
+  grid-column: 1/-1;
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__global-image {
+    grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
+    grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
+    align-self: var(--grid-vertical-placement-portrait);
+    justify-self: var(--grid-horizontal-placement-portrait);
+    place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
+  }
+  .post-type-filter-grid-v3__global-image:has(> .subgrid-layout-portrait) {
+    grid-template-rows: subgrid;
+  }
+  .post-type-filter-grid-v3__global-image:has(> .subgrid-layout-portrait) > section {
+    grid-row: 1/-1;
+    grid-column: 1/-1;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__global-image {
+    grid-row: var(--grid-row-start)/span var(--grid-row-span);
+    grid-column: var(--grid-column-start)/span var(--grid-column-span);
+    align-self: var(--grid-vertical-placement-desktop);
+    justify-self: var(--grid-horizontal-placement-desktop);
+    place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
+  }
+  .post-type-filter-grid-v3__global-image:has(> .subgrid-layout-desktop) {
+    grid-template-rows: subgrid;
+  }
+  .post-type-filter-grid-v3__global-image:has(> .subgrid-layout-desktop) > section {
+    grid-row: 1/-1;
+    grid-column: 1/-1;
+  }
+}
+.post-type-filter-grid-v3__global-image {
+  width: 100%;
+  max-width: 100%;
+  max-width: var(--global-image-max-width-mobile, 100%);
+  z-index: 1;
+  z-index: var(--global-image-z-index, 1);
+  position: relative;
+  position: var(--global-image-position, relative);
+  -o-object-fit: cover;
+  object-fit: cover;
+  -o-object-fit: var(--global-image-fit-style, cover);
+  object-fit: var(--global-image-fit-style, cover);
+  height: auto;
+  height: var(--global-image-height, auto);
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__global-image {
+    max-width: 100%;
+    max-width: var(--global-image-max-width-desktop, 100%);
+  }
+}
+.post-type-filter-grid-v3__media-image-container {
+  position: relative;
+  width: 100%;
+}
+.post-type-filter-grid-v3__post-image--secondary {
+  opacity: 0;
+  z-index: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+.post-type-filter-grid-v3__post-text-container {
+  display: grid;
+  z-index: 2;
+}
+.post-type-filter-grid-v3__post-title {
+  display: flex;
+  gap: 1.5em;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.post-type-filter-grid-v3__post-title * {
+  width: 100%;
+}
+.post-type-filter-grid-v3__post-headline {
+  width: 100%;
+}
+.post-type-filter-grid-v3__post-title-icon {
+  width: 1em;
+}
+.post-type-filter-grid-v3__post-category {
+  background: var(--black);
+  color: var(--white);
+  display: flex;
+  gap: calc(15 / var(--desktop-design-reference) * var(--screen-width-static));
+  padding: calc(10 / var(--desktop-design-reference) * var(--screen-width-static));
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.post-type-filter-grid-v3__post-category--item {
+  margin: 0;
+}
+.post-type-filter-grid-v3__cta {
+  gap: 0.5em;
+}
+.post-type-filter-grid-v3__icon-image {
+  width: 1em;
+}
+.post-type-filter-grid-v3__icon-image * {
+  fill: inherit;
+}
+.post-type-filter-grid-v3__spacer {
+  z-index: 2;
+  width: 100%;
+  background-color: var(--spacer-bg-colour);
+  height: calc(var(--global-inline-spacing) * var(--spacer-size-mult-mobile));
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__spacer {
+    height: calc(var(--global-inline-spacing) * var(--spacer-size-mult-portrait));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__spacer {
+    height: calc(var(--global-inline-spacing) * var(--spacer-size-mult));
+  }
+}
+.post-type-filter-grid-v3__post-link,
+.post-type-filter-grid-v3__better-reviews {
+  max-width: -moz-max-content;
+  max-width: max-content;
+}
+.post-type-filter-grid-v3__cta-style-post-colour,
+.post-type-filter-grid-v3__cta-style-post-text-colour-style {
+  padding-top: calc(10 / var(--design-reference) * var(--screen-width));
+  padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
+  padding-left: calc(20 / var(--design-reference) * var(--screen-width));
+  padding-right: calc(20 / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__cta-style-post-colour,
+  .post-type-filter-grid-v3__cta-style-post-text-colour-style {
+    padding-top: calc(10 / var(--design-reference) * var(--screen-width));
+    padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
+    padding-left: calc(20 / var(--design-reference) * var(--screen-width));
+    padding-right: calc(20 / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__cta-style-post-colour,
+  .post-type-filter-grid-v3__cta-style-post-text-colour-style {
+    padding-top: calc(10 / var(--design-reference) * var(--screen-width));
+    padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
+    padding-left: calc(20 / var(--design-reference) * var(--screen-width));
+    padding-right: calc(20 / var(--design-reference) * var(--screen-width));
+  }
+}
+.post-type-filter-grid-v3__cta-style-post-colour {
+  color: var(--post-colour);
+  border: 1px solid var(--post-colour);
+}
+.post-type-filter-grid-v3__cta-style-post-colour * {
+  stroke: var(--post-colour);
+  fill: var(--post-colour);
+}
+.post-type-filter-grid-v3__cta-style-post-colour:hover {
+  color: var(--post-colour);
+}
+.post-type-filter-grid-v3__cta-style-post-colour:hover * {
+  stroke: var(--post-colour);
+  fill: var(--post-colour);
+}
+.post-type-filter-grid-v3__cta-style-post-text-colour-style {
+  color: var(--post-text-colour-style);
+  border: 1px solid var(--post-text-colour-style);
+}
+.post-type-filter-grid-v3__cta-style-post-text-colour-style * {
+  stroke: var(--post-text-colour-style);
+  fill: var(--post-text-colour-style);
+}
+.post-type-filter-grid-v3__cta-style-post-text-colour-style:hover {
+  color: var(--post-text-colour-style);
+}
+.post-type-filter-grid-v3__cta-style-post-text-colour-style:hover * {
+  stroke: var(--post-text-colour-style);
+  fill: var(--post-text-colour-style);
+}
+.post-type-filter-grid-v3__post-tags {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  z-index: 2;
+}
+.post-type-filter-grid-v3__load-more-container {
+  grid-area: loadmore;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  z-index: 2;
+  margin-top: calc(115 / var(--design-reference) * var(--screen-width));
+}
+.post-type-filter-grid-v3__load-more-container:has(.show-spinner) {
+  pointer-events: none;
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__load-more-container {
+    margin-top: calc(90 / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__load-more-container {
+    margin-top: calc(80 / var(--design-reference) * var(--screen-width));
+  }
+}
+.post-type-filter-grid-v3__load-more-button .cmpl-cta-span.hide-text {
+  display: none;
+}
+.post-type-filter-grid-v3 .loader {
+  --spinner-size: 20px;
+  width: 20px;
+  width: var(--spinner-size);
+  height: 20px;
+  height: var(--spinner-size);
+  border: 2px solid #fff;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: none;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.post-type-filter-grid-v3 .loader.show-spinner {
+  display: inline-block;
+}
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.post-type-filter-grid-v3__load-more-icon {
+  width: 1em;
+}
+.post-type-filter-grid-v3__show-all {
+  z-index: 2;
+  position: relative;
+  width: auto;
+  align-self: flex-end;
+  justify-self: flex-end;
+  place-self: flex-end;
+  margin-bottom: 0;
+  margin-bottom: initial;
+  cursor: pointer;
+  width: 100%;
+}
+@media screen and (min-width: 768px) {
+  .post-type-filter-grid-v3__show-all {
+    width: auto;
+    width: initial;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .post-type-filter-grid-v3__show-all[data-layout="2"] {
+    grid-column: 1;
+    width: -moz-max-content;
+    width: max-content;
+  }
+}
+.post-type-filter-grid-v3 .fade-move,
+.post-type-filter-grid-v3 .fade-enter-active,
+.post-type-filter-grid-v3 .fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+.post-type-filter-grid-v3 .fade-enter-from,
+.post-type-filter-grid-v3 .fade-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+.post-type-filter-grid-v3 .fade-leave-active {
+  position: absolute;
+}
+.post-type-filter-grid-v3.shopify-add-to-cart {
+  text-align: center;
+}