.dtcpi{--dtcpi-red:#c5003e;--dtcpi-line:#d9d9d9;position:relative;width:100%;font-size:14px;color:#111}































































/* White filter area above the product results. */































.dtcpi-filter-section{background:#fff;margin:0;padding:72px 0 0;position:relative;z-index:30;overflow:visible!important}































.dtcpi-filter-section:before{background:#fff;content:"";inset:0 50%;margin-left:-50vw;margin-right:-50vw;position:absolute;z-index:-1}































.dtcpi-filter-section__inner{margin:0 auto;max-width:1240px;width:100%}































.dtcpi-heading{color:#111;font-family:inherit;font-size:25px;font-weight:400;letter-spacing:0;line-height:1.35;margin:0 0 62px;text-align:center;text-transform:none}































































/* Visual Filter by Look row. Uses the same pa_look selections as the Look dropdown. */































.dtcpi-visual-looks-shell{margin:0 auto 31px;max-width:1125px;position:relative;width:100%}































.dtcpi-visual-looks{display:grid;gap:34px;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;width:100%}































.dtcpi-visual-looks-arrow{align-items:center;appearance:none;background:#fff;border:1px solid #d7d7d7;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.08);color:#111;cursor:pointer;display:none;height:34px;justify-content:center;padding:0;position:absolute;top:48px;width:34px;z-index:5}































.dtcpi-visual-looks-arrow svg{fill:none;height:14px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;width:9px}































.dtcpi-visual-looks-arrow:disabled{opacity:.25;cursor:default}































.dtcpi-visual-looks-arrow--prev{left:-17px}































.dtcpi-visual-looks-arrow--next{right:-17px}































.dtcpi-visual-look{appearance:none;background:transparent;border:0;color:#111;cursor:pointer;font:inherit;margin:0;min-width:0;padding:0;text-align:center}































.dtcpi-visual-look__media{align-items:center;background:transparent;display:flex;height:126px;justify-content:center;margin-bottom:13px;overflow:visible;padding:0;position:relative}































.dtcpi-visual-look__image{display:block;height:100%!important;max-height:126px;max-width:100%;object-fit:contain;width:100%!important;filter:drop-shadow(0 5px 6px rgba(0,0,0,.13))}































.dtcpi-visual-look__label{display:block;font-size:14px;font-weight:400;line-height:1.35;transition:color .18s ease}































.dtcpi-visual-look:hover .dtcpi-visual-look__label,.dtcpi-visual-look:focus-visible .dtcpi-visual-look__label,.dtcpi-visual-look.is-active .dtcpi-visual-look__label{color:var(--dtcpi-red)}































.dtcpi-visual-look.is-active .dtcpi-visual-look__media:after{border-bottom:2px solid var(--dtcpi-red);bottom:-5px;content:"";left:18%;position:absolute;right:18%}































.dtcpi-visual-look:focus-visible{outline:1px solid var(--dtcpi-red);outline-offset:5px}































































/* Main dropdown/filter bar. */































.dtcpi-toolbar{align-items:center;overflow:visible!important;position:relative;z-index:40;border-bottom:1px solid var(--dtcpi-line);border-top:1px solid var(--dtcpi-line);display:flex;justify-content:space-between;margin:auto;max-width:1125px;min-height:61px;width:100%}































.dtcpi-filter-bar{align-items:center;display:flex;gap:28px}































.dtcpi-filter{position:relative}































.dtcpi-filter__toggle,.dtcpi-all-filters{align-items:center;appearance:none;background:none;border:0;color:#111;cursor:pointer;display:flex;font:inherit;font-size:14px;font-weight:500;gap:9px;line-height:1;padding:22px 0}































.dtcpi-chevron{border-bottom:1.5px solid var(--dtcpi-red);border-right:1.5px solid var(--dtcpi-red);display:block;height:6px;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;width:6px}































.dtcpi-filter.is-open .dtcpi-chevron{transform:rotate(225deg) translate(-1px,-1px)}































.dtcpi-filter__panel{background:#fff;border:1px solid var(--dtcpi-line);box-shadow:0 12px 28px rgba(0,0,0,.1);display:none;left:-18px;max-height:340px;min-width:230px;overflow:auto;padding:12px;position:absolute;top:calc(100% - 2px);z-index:9999}































.dtcpi-filter.is-open>.dtcpi-filter__panel{display:block}































.dtcpi-choice{align-items:center;cursor:pointer;display:grid;gap:10px;grid-template-columns:18px 1fr auto;padding:9px 7px}































.dtcpi-choice input{accent-color:var(--dtcpi-red);height:16px;margin:0;width:16px}































.dtcpi-choice small{color:#777;font-size:12px}































































/* Sort control including the missing red down arrow. */































.dtcpi-sort{align-items:center;display:flex;font-size:14px;font-weight:400;gap:12px;white-space:nowrap}































.dtcpi-sort__select-wrap{display:block;position:relative}































.dtcpi-sort select{appearance:none;-webkit-appearance:none;background:#f6f6f6;border:0;border-radius:24px;color:#111;cursor:pointer;font:inherit;font-size:13px;line-height:1;min-width:145px;outline:0;padding:12px 39px 12px 17px}































.dtcpi-sort__chevron{border-bottom:1.5px solid var(--dtcpi-red);border-right:1.5px solid var(--dtcpi-red);display:block;height:6px;pointer-events:none;position:absolute;right:18px;top:50%;transform:translateY(-65%) rotate(45deg);width:6px}































































.dtcpi-active-filters{display:flex;flex-wrap:wrap;gap:8px;margin:17px auto 0;max-width:1125px;width:100%}































.dtcpi-active-filters:empty{display:none}































.dtcpi-chip,.dtcpi-clear-inline{background:#f3f3f3;border:0;border-radius:20px;cursor:pointer;font-size:12px;padding:8px 13px}































.dtcpi-chip b{color:var(--dtcpi-red);font-size:17px;margin-left:8px}































.dtcpi-clear-inline{background:none;text-decoration:underline}































































.dtcpi-count{font-size:14px;margin:67px 0 47px;text-align:center}































.dtcpi-products-widget{margin:auto;max-width:1240px}































.dtcpi-grid{display:grid;gap:52px 20px;grid-template-columns:repeat(3,minmax(0,1fr));transition:opacity .2s ease}































.dtcpi-grid>.dpfp-ajax-slide{height:auto!important;min-width:0;width:auto!important}































.dtcpi-grid>.dpfp-ajax-slide>li.product{height:100%;margin:0!important;width:100%!important}































/* Match the compact outlined Sale/New badges used by Featured Products. */































.dtcpi-products-widget .qodef-woo-product-image{position:relative}































.dtcpi-products-widget .qodef-woo-product-image>.qodef-woo-product-mark{align-items:center!important;background:#fff!important;border:1px solid #111!important;border-radius:999px!important;bottom:auto!important;box-shadow:none!important;color:#111!important;display:inline-flex!important;font-family:inherit!important;font-size:10px!important;font-style:normal!important;font-weight:400!important;height:18px!important;justify-content:center;left:11px!important;letter-spacing:0!important;line-height:16px!important;margin:0!important;min-height:0!important;min-width:0!important;padding:0 6px!important;position:absolute!important;right:auto!important;text-transform:uppercase!important;top:11px!important;width:auto!important;z-index:6!important}































.dtcpi-products-widget .qodef-woo-product-image>.qodef-woo-product-mark.qodef-new{top:35px!important}































.dtcpi.is-loading .dtcpi-grid{opacity:.38;pointer-events:none}































.dtcpi-empty{grid-column:1/-1;text-align:center}































.dtcpi-pagination{align-items:center;display:grid;grid-template-columns:1fr minmax(145px,168px) 1fr;margin:55px auto;max-width:1240px;min-height:42px;width:100%}































.dtcpi-pagination:empty{display:none}































.dtcpi-page-next{background:#fff;border:1px solid #d0d0d0;border-radius:7px;color:#111;cursor:pointer;font:inherit;font-size:13px;font-weight:600;grid-column:2;height:38px;padding:0 22px;transition:border-color .2s ease,color .2s ease;width:100%}































.dtcpi-page-next:hover,.dtcpi-page-next:focus-visible{border-color:var(--dtcpi-red);color:var(--dtcpi-red)}































.dtcpi-page-next:disabled{cursor:default;opacity:.38}































.dtcpi-page-position{align-items:center;display:grid;gap:10px;grid-column:3;grid-template-columns:24px 40px 24px auto;justify-self:end;white-space:nowrap}































.dtcpi-page-arrow{align-items:center;align-self:center;background:transparent;border:0;color:#111;cursor:pointer;display:inline-flex;height:38px;justify-content:center;line-height:1;margin:0;padding:0;width:24px}































.dtcpi-page-arrow svg{display:block;fill:none;height:12px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;width:8px}































.dtcpi-page-arrow:hover,.dtcpi-page-arrow:focus-visible{color:var(--dtcpi-red)}































.dtcpi-page-arrow:disabled{cursor:default;opacity:.25}































.dtcpi-page-input[type=number]{-moz-appearance:textfield!important;-webkit-appearance:none!important;appearance:textfield!important;background:#fff;border:1px solid #d0d0d0;border-radius:7px;color:#111;font:inherit;font-size:13px;height:38px;margin:0!important;padding:0 6px!important;text-align:center;width:40px}































.dtcpi-page-input[type=number]::-webkit-inner-spin-button,.dtcpi-page-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none!important;appearance:none!important;display:none!important;margin:0!important}































.dtcpi-page-input:focus{border-color:var(--dtcpi-red);outline:0}































.dtcpi-page-total{color:#333;font-size:13px}































.dtcpi-status{height:1px;overflow:hidden;position:absolute;width:1px}































.dtcpi-drawer{inset:0;pointer-events:none;position:fixed;z-index:99999}































.dtcpi-drawer__backdrop{background:rgba(0,0,0,.42);border:0;inset:0;opacity:0;position:absolute;transition:opacity .25s ease;width:100%}































.dtcpi-drawer__panel{background:#fff;display:flex;flex-direction:column;height:100%;max-width:470px;position:absolute;right:0;top:0;transform:translateX(100%);transition:transform .25s ease;width:92%}































.dtcpi-drawer.is-open{pointer-events:auto}































.dtcpi-drawer.is-open .dtcpi-drawer__backdrop{opacity:1}































.dtcpi-drawer.is-open .dtcpi-drawer__panel{transform:translateX(0)}































.dtcpi-drawer header{align-items:center;border-bottom:1px solid var(--dtcpi-line);display:flex;font-size:20px;justify-content:space-between;padding:20px 24px}































.dtcpi-drawer__close{background:none;border:0;cursor:pointer;font-size:34px;font-weight:300}































.dtcpi-drawer__filters{flex:1;overflow:auto;padding:10px 24px}































.dtcpi-filter--drawer{border-bottom:1px solid var(--dtcpi-line)}































.dtcpi-filter--drawer .dtcpi-filter__toggle{justify-content:space-between;width:100%}































.dtcpi-filter--drawer .dtcpi-filter__panel{border:0;box-shadow:none;max-height:none;padding:0 0 14px;position:static}































.dtcpi-drawer footer{border-top:1px solid var(--dtcpi-line);display:flex;gap:12px;padding:18px 24px}































.dtcpi-drawer footer button{border:1px solid #111;cursor:pointer;flex:1;padding:13px}































.dtcpi-clear{background:#fff}.dtcpi-view-results{background:#111;color:#fff}































body.dtcpi-drawer-open{overflow:hidden}































































@media(max-width:1100px){































  .dtcpi-filter-section{padding-top:54px}































  .dtcpi-filter-section__inner{padding:0 28px}































  .dtcpi-heading{font-size:23px;margin-bottom:48px}































  .dtcpi-visual-looks-shell{margin-bottom:30px;max-width:none;padding:0 22px}































  .dtcpi-visual-looks{display:flex!important;flex-wrap:nowrap!important;gap:18px;max-width:none!important;overflow-x:auto!important;overflow-y:hidden!important;padding:0 0 10px;scroll-behavior:smooth;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}































  .dtcpi-visual-looks::-webkit-scrollbar{display:none}































  .dtcpi-visual-look{flex:0 0 150px!important;max-width:150px!important;min-width:150px!important;scroll-snap-align:start;width:150px!important}































  .dtcpi-visual-look__media{height:104px;margin-bottom:10px}































  .dtcpi-visual-look__image{max-height:104px}































  .dtcpi-visual-look__label{font-size:13px;white-space:nowrap}































  .dtcpi-visual-look__label:before,.dtcpi-visual-look__label:after{content:none!important;display:none!important}































  .dtcpi-visual-looks-arrow{display:flex}































  .dtcpi-visual-looks-arrow--prev{left:0}































  .dtcpi-visual-looks-arrow--next{right:0}































  .dtcpi-filter-bar{gap:18px}































  .dtcpi-filter-bar>.dtcpi-filter:nth-of-type(n+5){display:none}































  .dtcpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}































}































































@media(max-width:839px){































  .dtcpi-filter-bar>.dtcpi-filter{display:none}































  .dtcpi-toolbar{min-height:58px}































  .dtcpi-all-filters{font-size:13px;padding:17px 0}































  .dtcpi-sort{font-size:13px;gap:8px}































  .dtcpi-sort>span:first-child{display:none}































  .dtcpi-sort select{font-size:12px;min-width:145px;padding-bottom:10px;padding-top:10px}































}































































@media(max-width:767px){































  .dtcpi-filter-section{padding-top:38px}































  .dtcpi-filter-section__inner{padding:0 18px}































  .dtcpi-heading{font-size:20px;line-height:1.4;margin-bottom:34px;padding:0 10px}































  .dtcpi-visual-looks-shell{margin-bottom:24px;padding:0 20px}































  .dtcpi-visual-look{flex-basis:126px!important;max-width:126px!important;min-width:126px!important;width:126px!important}































  .dtcpi-visual-look__media{height:98px;margin-bottom:10px}































  .dtcpi-visual-look__image{max-height:98px}































  .dtcpi-visual-look__label{font-size:13px}































  .dtcpi-visual-looks-arrow{height:30px;top:39px;width:30px}































  .dtcpi-count{margin:38px 0 30px}































  .dtcpi-grid{gap:34px 12px;grid-template-columns:repeat(2,minmax(0,1fr))}































  .dtcpi-pagination{gap:20px;grid-template-columns:1fr;margin:42px auto}































  .dtcpi-page-next{grid-column:1;grid-row:1;justify-self:center;max-width:168px}































  .dtcpi-page-position{grid-column:1;grid-row:2;justify-self:center}































}































































.dtcpi-filter-section__inner,.dtcpi-toolbar__filters,.dtcpi-filter{overflow:visible!important}































.dtcpi-filter{position:relative;z-index:41}































.dtcpi-count,.dtcpi-products-widget,.dtcpi-pagination{position:relative;z-index:1}















































/* DTC product card title: preserve original size; emphasise name and force dimensions to line 2. */















.dtcpi-product-name{font-weight:600}















.dtcpi .dtcpi-product-dimensions{display:block;font-weight:inherit}















































/* Simple-product family switcher — sizes left, colour swatches right, directly above Add to Cart */







.dtcpi-family{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:8px 0 0;transition:opacity .18s ease;box-sizing:border-box}







.dtcpi-family.is-loading{opacity:.45;pointer-events:none}







.dtcpi-family-sizes{display:flex;align-items:center;justify-content:flex-start;gap:6px;flex-wrap:wrap;min-width:0;margin:0}







.dtcpi-family-colours{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin:0 0 0 auto}







.dtcpi-family-colour{appearance:none;width:24px;height:24px;padding:0;border:1px solid transparent;border-radius:50%;background:var(--dtcpi-family-colour,#d6d6d6);background-clip:content-box;cursor:pointer;box-sizing:border-box;transition:border-color .18s ease,transform .18s ease}







.dtcpi-family-colour:hover,.dtcpi-family-colour:focus-visible,.dtcpi-family-colour.is-active{border-color:#111}







.dtcpi-family-colour.is-active{box-shadow:inset 0 0 0 2px #fff}







.dtcpi-family-size{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:23px;margin:0;padding:2px 9px 1px;background:transparent;border:2px solid #111;border-radius:7px;color:#111;cursor:pointer;font:inherit;font-size:12px;font-weight:400;line-height:1.2;white-space:nowrap;box-sizing:border-box}







.dtcpi-family-size:hover,.dtcpi-family-size:focus-visible,.dtcpi-family-size.is-active{background:#fff;color:#111;border-color:#111}







.dtcpi-family-size.is-active{font-weight:500}







.dtcpi .qodef-woo-product-content>.dtcpi-family,.dtcpi .dpfp-product-actions>.dtcpi-family{order:-1}







@media(max-width:600px){.dtcpi-family{gap:8px}.dtcpi-family-size{font-size:11px;padding-left:7px;padding-right:7px}.dtcpi-family-colour{width:22px;height:22px}}















/* v1.3.8 family control placement/order */







.dtcpi-family-sizes{order:1!important;}







.dtcpi-family-colours{order:2!important;margin-left:auto!important;}







.dpfp-product-actions>.dtcpi-family{width:100%!important;margin:8px 0 6px!important;}















/* v1.3.8.2 — restore Add Sample + Wishlist action strip on Product Index cards.







   The actions are already rendered by DP Featured Products; Product Index needs







   its own scope because the DPFP action CSS is limited to Elementor/Related cards. */







.dtcpi-products-widget .qodef-woo-product-image-inner {







  position:absolute!important;







  left:0!important;







  right:0!important;







  bottom:0!important;







  top:auto!important;







  z-index:20!important;







  display:flex!important;







  align-items:stretch!important;







  width:100%!important;







  height:auto!important;







  opacity:0!important;







  visibility:hidden!important;







  transform:translateY(100%)!important;







  transition:transform .25s ease,opacity .2s ease!important;







  pointer-events:none!important;







}







.dtcpi-products-widget .qodef-woo-product-image:hover .qodef-woo-product-image-inner,







.dtcpi-products-widget .qodef-woo-product-image:focus-within .qodef-woo-product-image-inner {







  opacity:1!important;







  visibility:visible!important;







  transform:translateY(0)!important;







  pointer-events:auto!important;







}







.dtcpi-products-widget .qodef-woo-product-image-inner>.qwfw-add-to-wishlist-wrapper,







.dtcpi-products-widget .qodef-woo-product-image-inner>.qodef-quick-view-holder {







  display:flex!important;







  flex:1 1 50%!important;







  width:50%!important;







  min-width:0!important;







  margin:0!important;







  opacity:1!important;







  visibility:visible!important;







  position:relative!important;







  inset:auto!important;







  transform:none!important;







  pointer-events:auto!important;







}







.dtcpi-products-widget .qodef-woo-product-image-inner>.qwfw-add-to-wishlist-wrapper {







  order:1!important;







  background:#fff!important;







}







.dtcpi-products-widget .qodef-woo-product-image-inner>.qodef-quick-view-holder {







  order:2!important;







  background:#fff!important;







  border-left:1px solid rgba(0,0,0,.14)!important;







}







.dtcpi-products-widget .qodef-woo-product-image-inner .qwfw-add-to-wishlist,







.dtcpi-products-widget .qodef-woo-product-image-inner .dpfp-add-sample-button {







  display:flex!important;







  align-items:center!important;







  justify-content:center!important;







  box-sizing:border-box!important;







  width:100%!important;







  min-height:42px!important;







  height:42px!important;







  margin:0!important;







  padding:0 8px!important;







  border:0!important;







  background:#fff!important;







  color:#111!important;







  font-size:12px!important;







  line-height:1!important;







  text-transform:uppercase!important;







  text-decoration:none!important;







  opacity:1!important;







  visibility:visible!important;







  white-space:nowrap!important;







  cursor:pointer!important;







}







.dtcpi-products-widget .qodef-woo-product-image-inner .qwfw-m-text,







.dtcpi-products-widget .qodef-woo-product-image-inner .dpfp-add-sample-text {







  display:inline-block!important;







  opacity:1!important;







  visibility:visible!important;







  white-space:nowrap!important;







}







/* Keep the original DPFP icon animation on Product Index cards. */







.dtcpi-products-widget .qodef-woo-product-image-inner .dpfp-add-sample-button,







.dtcpi-products-widget .qodef-woo-product-image-inner .qwfw-add-to-wishlist {







  gap:0!important;







}







.dtcpi-products-widget .qodef-woo-product-image-inner .dpfp-add-sample-icon,







.dtcpi-products-widget .qodef-woo-product-image-inner .qwfw-add-to-wishlist .qwfw-m-icon {







  display:inline-flex!important;







  align-items:center!important;







  justify-content:center!important;







  flex:0 0 auto!important;







  width:0!important;







  margin:0!important;







  opacity:0!important;







  overflow:hidden!important;







  transform:translateX(-10px)!important;







  transition:width .25s ease,margin-right .25s ease,opacity .2s ease,transform .25s ease!important;







}







.dtcpi-products-widget .qodef-woo-product-image-inner .dpfp-add-sample-button:hover .dpfp-add-sample-icon,







.dtcpi-products-widget .qodef-woo-product-image-inner .dpfp-add-sample-button:focus-visible .dpfp-add-sample-icon {







  width:10px!important;







  margin-right:8px!important;







  opacity:1!important;







  transform:translateX(0)!important;







}







.dtcpi-products-widget .qodef-woo-product-image-inner .qwfw-add-to-wishlist:hover .qwfw-m-icon,







.dtcpi-products-widget .qodef-woo-product-image-inner .qwfw-add-to-wishlist:focus-visible .qwfw-m-icon {







  width:14px!important;







  margin-right:8px!important;







  opacity:1!important;







  transform:translateX(0)!important;







}







.dtcpi-products-widget .qodef-woo-product-image-inner .qwfw-add-to-wishlist .qwfw-m-icon svg {







  display:block!important;







  width:14px!important;







  height:14px!important;







  fill:currentColor!important;







}















/* DTC catalogue section heading */



.dtcpi .dtcpi-page-title{margin:0 0 18px;font-size:34px;line-height:1.15;font-weight:500;text-transform:none;}



.dtcpi .dtcpi-heading{margin-top:0;}







/* v1.5.9 — catalogue card content order.



   The catalogue AJAX markup places .dtcpi-family after Add to Cart in the DOM.



   Keep the existing typography/control styles untouched; only control vertical order. */



.dtcpi-products-widget .dtcpi-grid li.product .qodef-woo-product-content{



  display:flex!important;



  flex-direction:column!important;



}



.dtcpi-products-widget .dtcpi-grid li.product .qodef-woo-product-info{order:1!important;}



.dtcpi-products-widget .dtcpi-grid li.product .dtcpi-family{order:2!important;}



.dtcpi-products-widget .dtcpi-grid li.product .qodef-woo-add-to-cart{order:3!important;}











/* v1.6.5 — DTC family swatch tooltip (replaces browser title tooltip) */



.dtcpi-family,



.dtcpi-family-colours,



.dtcpi-family-colour {



  overflow: visible !important;



}







.dtcpi-family-colour {



  position: relative !important;



}







.dtcpi-family-colour::before {



  content: attr(data-tooltip);



  position: absolute;



  left: 50%;



  bottom: calc(100% + 10px);



  transform: translate(-50%, 4px);



  z-index: 99999;



  display: block;



  width: max-content;



  max-width: 190px;



  padding: 6px 9px;



  border-radius: 3px;



  background: #111;



  color: #fff;



  font-size: 11px;



  font-weight: 400;



  line-height: 1.2;



  text-align: center;



  white-space: nowrap;



  opacity: 0;



  visibility: hidden;



  pointer-events: none;



  box-shadow: 0 2px 6px rgba(0,0,0,.16);



  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;



}







.dtcpi-family-colour::after {



  content: "";



  position: absolute;



  left: 50%;



  bottom: calc(100% + 5px);



  transform: translateX(-50%);



  z-index: 99999;



  width: 0;



  height: 0;



  border-left: 5px solid transparent;



  border-right: 5px solid transparent;



  border-top: 5px solid #111;



  opacity: 0;



  visibility: hidden;



  pointer-events: none;



  transition: opacity .14s ease, visibility .14s ease;



}







.dtcpi-family-colour:hover::before,



.dtcpi-family-colour:focus-visible::before {



  opacity: 1;



  visibility: visible;



  transform: translate(-50%, 0);



}







.dtcpi-family-colour:hover::after,



.dtcpi-family-colour:focus-visible::after {



  opacity: 1;



  visibility: visible;



}





/* v1.6.6 — Related Products only.

   Keep the Qode info-hover layout from leaking its hover state into the

   single-product Related Products cards. This is deliberately scoped to

   #relatedProductsSingle so catalogue/featured cards are untouched. */

#relatedProductsSingle .qodef-woo-product-image-inner {

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;

}



#relatedProductsSingle li.product:hover .qodef-woo-product-image-inner,

#relatedProductsSingle li.product:focus-within .qodef-woo-product-image-inner {

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;

}



/* The theme's info-hover layout hides/moves product info on card hover.

   Related Products uses the normal below-image title/price layout instead. */

#relatedProductsSingle .qodef-woo-product-info,

#relatedProductsSingle li.product:hover .qodef-woo-product-info,

#relatedProductsSingle li.product:focus-within .qodef-woo-product-info,

#relatedProductsSingle .qodef-woo-product-info .price,

#relatedProductsSingle li.product:hover .qodef-woo-product-info .price,

#relatedProductsSingle li.product:focus-within .qodef-woo-product-info .price {

  opacity: 1 !important;

  visibility: visible !important;

  transform: none !important;

}



/* v1.6.7 — Related Products section only.

   The section is moved outside .qodef-grid-inner by product-index.js so the

   grey background can span the full page width. */

#relatedProductsSingle {

  width: 100% !important;

  max-width: none !important;

  margin-left: 0 !important;

  margin-right: 0 !important;

  padding: 40px !important;

  box-sizing: border-box !important;

  background: #F1F1F1 !important;

}



/* The padded/surround area around the related-product image is white.

   Do not add a visible border around the card/image wrapper. */

#relatedProductsSingle .qodef-woo-product-image {

  background: #fff !important;

  border: 0 !important;

  outline: 0 !important;

  box-shadow: none !important;

}



/* v1.6.12 — Clearance catalogues are individual products only.
   Never expose Product Range Key colour/size family controls on these pages. */
.dtcpi[data-section="tiles-clearance"] .dtcpi-family,
.dtcpi[data-section="timber-clearance"] .dtcpi-family,
.dtcpi[data-section="bathware-clearance"] .dtcpi-family,
.dtcpi[data-section="trade-clearance"] .dtcpi-family {
    display:none !important;
}

/* v1.6.17 — Clearance badge treatment everywhere.
   Clearance overrides Sale/New on cards and on the single product page. */
li.product.product_cat-clearance .qodef-woo-product-mark.qodef-new,
body.dtc-clearance-product .qodef-woo-product-mark.qodef-new {
    display: none !important;
}

li.product.product_cat-clearance .qodef-woo-product-mark.qodef-woo-onsale,
body.dtc-clearance-product .qodef-woo-product-mark.qodef-woo-onsale {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border: 1px solid #c9003f !important;
    border-radius: 999px !important;
    background: #c9003f !important;
    color: #fff !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}
\n\n/* v1.6.20 — Clearance pages inherit the exact parent catalogue geometry.\n   The clearance flag controls the query/badge only; it must never create a\n   separate card layout. Keep the product grid at the normal catalogue width. */\n.dtcpi[data-layout="timber"] .dtcpi-products-widget,\n.dtcpi[data-layout="tiles"] .dtcpi-products-widget,\n.dtcpi[data-layout="bathware"] .dtcpi-products-widget,\n.dtcpi[data-layout="trade"] .dtcpi-products-widget {\n    width:100% !important;\n    max-width:1240px !important;\n}\n\n/* Qode/Elementor can turn position:fixed descendants into containing-block\n   children when a parent is transformed. On Product Index pages that made the\n   All Filters drawer consume catalogue width and squeezed Timber cards. */\nbody.dtcpi-drawer-open .qodef-page-wrapper,\nbody.dtcpi-drawer-open .qodef-page-outer,\nbody.dtcpi-drawer-open .qodef-page-content-section,\nbody.dtcpi-drawer-open .elementor,\nbody.dtcpi-drawer-open .elementor-element,\nbody.dtcpi-drawer-open .dtcpi {\n    transform:none !important;\n    perspective:none !important;\n    filter:none !important;\n}\n.dtcpi .dtcpi-drawer {\n    position:fixed !important;\n    inset:0 !important;\n    width:100vw !important;\n    height:100vh !important;\n    max-width:none !important;\n}\n.dtcpi .dtcpi-drawer__panel {\n    position:absolute !important;\n    right:0 !important;\n    top:0 !important;\n    width:92% !important;\n    max-width:470px !important;\n    height:100vh !important;\n}\n

/* v1.6.21 — Drawer is portalled to body so it can never participate in the
   Product Index/Elementor layout or squeeze the catalogue grid. */
body > .dtcpi-drawer {
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    max-width:none !important;
    z-index:99999 !important;
}
body > .dtcpi-drawer .dtcpi-drawer__panel {
    position:absolute !important;
    right:0 !important;
    top:0 !important;
    width:92% !important;
    max-width:470px !important;
    height:100vh !important;
}

/* v1.6.22 — Clearance Timber page can be saved with Qode's boxed/content-grid
   page template while Clearance Tiles is full-width. The Product Index owns its
   own 1240px inner geometry, so remove the theme's outer width constraint only
   when this Timber Clearance catalogue is present. */
#qodef-page-inner.qodef-content-grid:has(.dtcpi[data-section="timber-clearance"]) {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#qodef-page-inner.qodef-content-grid:has(.dtcpi[data-section="timber-clearance"])
.qodef-page-content-section {
    width: 100% !important;
    max-width: none !important;
}

/* Keep the actual Timber catalogue controls/content aligned to the same
   1240px geometry used by the full-width catalogue pages. */
.dtcpi[data-section="timber-clearance"] .dtcpi-filter-section__inner,
.dtcpi[data-section="timber-clearance"] .dtcpi-products-widget,
.dtcpi[data-section="timber-clearance"] .dtcpi-pagination {
    width: calc(100% - 48px) !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}