/* Wallcraft Products — taxonomy-driven catalogue */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.products-hero{
  min-height:78svh;
  padding:155px 0 80px;
  display:grid;
  align-items:center;
  overflow:hidden;
  position:relative;
  isolation:isolate;

  /* Keep the existing light/darker diagonal hero shapes underneath. */
  background:linear-gradient(135deg,#f4f1eb 0 58%,#ece7dd 58%);
}

/*
  Colour photograph layer.

  Match the product-details hero treatment:
  the photograph lives only in the LEFT panel and is clipped by the
  same diagonal shape. The RIGHT panel is returned to the original
  solid #ece7dd background.
*/
.products-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  /*
    38% paper veil over the image keeps the hero copy readable while
    preserving the colour in the photograph.
  */
  background:
    linear-gradient(
      rgba(244,241,235,.38),
      rgba(244,241,235,.38)
    ),
    url("../images/products-hero-colour.webp")
    center center / cover
    no-repeat;

  /* Same left-side diagonal treatment used on proddetails. */
  clip-path:polygon(
    0 0,
    82% 0,
    40% 100%,
    0 100%
  );
}

/*
  Existing circular background treatment.
  The thin outer line remains unchanged; the broad pale circular bands
  are now 50% opaque so some of the colour image remains visible through them.
*/
.products-hero::after{
  content:"";
  position:absolute;
  z-index:1;
  right:-8vw;
  bottom:-22vw;
  width:52vw;
  aspect-ratio:1;
  border-radius:50%;

  border:1px solid rgba(21,21,19,.08);

  box-shadow:
    0 0 0 70px rgba(244,241,235,.50),
    0 0 0 140px rgba(244,241,235,.50);

  pointer-events:none;
}

.products-hero-grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  align-items:center;
  gap:70px;
  position:relative;
  z-index:2;
}
.products-hero-copy .display{max-width:850px}.products-hero-copy .display em{color:var(--blue);font-weight:400}.products-hero-copy .lede{margin:26px 0 30px;max-width:680px}

.product-lens{width:min(100%,610px);aspect-ratio:1;justify-self:end;position:relative;display:grid;place-items:center}
.product-lens-ring{position:absolute;border-radius:50%;border:1px solid rgba(21,21,19,.16)}
.ring-one{inset:7%;animation:lens-spin 24s linear infinite}.ring-two{inset:21%;border-style:dashed;animation:lens-spin 18s linear infinite reverse}
.product-lens-core{width:46%;aspect-ratio:1;border-radius:48% 52% 55% 45% / 45% 54% 46% 55%;background:var(--blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;box-shadow:0 25px 70px rgba(25,88,209,.24);animation:lens-blob 8s ease-in-out infinite alternate}
.product-lens-core span{font-size:.7rem;letter-spacing:.19em;font-weight:850}.product-lens-core strong{font-family:Georgia,serif;font-size:2rem;font-weight:400;color:var(--lime);line-height:.8}
.lens-label{position:absolute;padding:10px 15px;border:1px solid var(--line);border-radius:999px;background:rgba(251,248,242,.85);backdrop-filter:blur(10px);font-size:.77rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;box-shadow:0 8px 28px rgba(0,0,0,.06)}
.lens-label-a{left:1%;top:28%;transform:rotate(-8deg)}.lens-label-b{right:2%;top:19%;transform:rotate(7deg)}.lens-label-c{right:-2%;bottom:24%;transform:rotate(-5deg)}.lens-label-d{left:9%;bottom:16%;transform:rotate(8deg)}
@keyframes lens-spin{to{transform:rotate(360deg)}}@keyframes lens-blob{to{border-radius:58% 42% 44% 56% / 56% 42% 58% 44%;transform:rotate(8deg) scale(1.035)}}

.project-strip{padding:88px 0 105px;background:var(--cream);border-block:1px solid var(--line)}
.section-heading-row{display:grid;grid-template-columns:1fr minmax(260px,440px);gap:50px;align-items:end;margin-bottom:34px}.section-heading-row .h2{margin-bottom:0}.section-heading-row p{margin:0 0 8px}
.project-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.project-choice{min-height:205px;border:0;border-radius:24px;padding:21px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;position:relative;overflow:hidden;transition:transform .42s var(--ease),box-shadow .42s var(--ease);isolation:isolate}
.project-choice:after{content:"";position:absolute;width:170px;height:170px;border-radius:47% 53% 58% 42% / 43% 57% 43% 57%;background:rgba(255,255,255,.18);right:-70px;top:-70px;transition:transform .65s var(--ease);z-index:-1}
.project-choice:hover,.project-choice.is-active{transform:translateY(-7px);box-shadow:0 18px 45px rgba(0,0,0,.11)}.project-choice:hover:after,.project-choice.is-active:after{transform:scale(1.38) rotate(18deg)}
.project-choice strong{font-family:Georgia,serif;font-size:2rem;font-weight:400;line-height:1}.project-choice>span:last-child{font-size:.78rem;margin-top:8px;opacity:.72}.project-index{position:absolute;left:20px;top:18px;font-size:.7rem;font-weight:850;letter-spacing:.15em}
.project-choice-blue{background:#316acb;color:#fff}.project-choice-sage{background:#9faf9c}.project-choice-clay{background:#cb7659;color:#fff}.project-choice-ink{background:#252522;color:#fff}.project-choice-violet{background:#8a73bd;color:#fff}.project-choice-lime{background:#d7ff4f}.project-choice-water{background:#a9d9e4}.project-choice-paper{background:#e6ded0}

.catalogue-section{padding:100px 0 120px}.catalogue-layout{display:grid;grid-template-columns:285px minmax(0,1fr);gap:46px;align-items:start}.filter-sticky{position:sticky;top:105px}.filter-title-row{display:flex;justify-content:space-between;align-items:start;gap:15px;padding-bottom:18px;border-bottom:1px solid var(--line)}.filter-title-row h2{font-family:Georgia,serif;font-weight:400;font-size:2.15rem;margin:.12em 0 0;line-height:1}.filter-reset{border:0;background:transparent;color:var(--muted);font-size:.78rem;text-decoration:underline;text-underline-offset:4px;padding:4px 0}.filter-reset:hover{color:var(--ink)}
.catalogue-search{margin:18px 0 20px;border:1px solid var(--line);border-radius:999px;background:#fff;display:flex;align-items:center;padding:0 14px;transition:border-color .2s,box-shadow .2s}.catalogue-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(25,88,209,.08)}.catalogue-search input{width:100%;border:0;background:transparent;padding:12px 4px;outline:0;min-width:0}.catalogue-search>span:last-child{font-size:1.15rem;color:var(--muted)}
.filter-group{border-top:1px solid var(--line)}.filter-group:last-child{border-bottom:1px solid var(--line)}.filter-group summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:15px 0;font-size:.77rem;font-weight:850;text-transform:uppercase;letter-spacing:.12em}.filter-group summary::-webkit-details-marker{display:none}.filter-group summary:after{content:"+";font-size:1.15rem;font-weight:400}.filter-group[open] summary:after{content:"−"}.filter-options{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 17px}.taxonomy-filter{border:1px solid var(--line);background:transparent;border-radius:999px;padding:7px 10px;font-size:.76rem;transition:.22s}.taxonomy-filter:hover{border-color:var(--ink)}.taxonomy-filter.is-active{background:var(--ink);border-color:var(--ink);color:#fff}.taxonomy-filter small{opacity:.55;margin-left:4px}
.filter-loading{font-size:.82rem;color:var(--muted);padding:15px 0}

.results-toolbar{min-height:66px;display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:22px}.results-toolbar .eyebrow{display:block}.results-count{margin:4px 0 0;color:var(--muted)}.results-count strong{color:var(--ink);font-size:1.3rem}.active-filters{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:7px}.active-filter{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 11px;font-size:.75rem}.active-filter span{opacity:.5;margin-left:5px}
.catalogue-status{min-height:360px;border:1px dashed var(--line);border-radius:28px;display:grid;place-items:center;align-content:center;gap:13px;color:var(--muted);text-align:center}.catalogue-spinner{width:42px;height:42px;border-radius:50%;border:2px solid rgba(21,21,19,.12);border-top-color:var(--blue);animation:catalogue-spin .8s linear infinite}@keyframes catalogue-spin{to{transform:rotate(360deg)}}
.catalogue-status.is-error{border-color:rgba(190,70,50,.28);background:#fff4f0;color:#7d382c}.catalogue-status.is-error .catalogue-spinner{display:none}.catalogue-status code{display:block;margin-top:6px;font-size:.75rem;color:inherit}

.catalogue-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.catalogue-card{background:var(--cream);border:1px solid var(--line);border-radius:25px;overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .3s}.catalogue-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(20,20,18,.09);border-color:rgba(21,21,19,.24)}
.catalogue-packshot{height:265px;background:#fff;display:grid;place-items:center;padding:24px;overflow:hidden;position:relative}.catalogue-packshot:after{content:"";position:absolute;left:13%;right:13%;bottom:18px;height:14px;border-radius:50%;background:rgba(0,0,0,.08);filter:blur(11px);transform:scaleX(.78);transition:.4s var(--ease)}.catalogue-packshot img{width:210px;height:210px;object-fit:contain;object-position:center;position:relative;z-index:2;transition:transform .55s var(--ease);filter:drop-shadow(0 15px 14px rgba(0,0,0,.08))}.catalogue-card:hover .catalogue-packshot img{transform:translateY(-7px) rotate(-1.5deg)}.catalogue-card:hover .catalogue-packshot:after{transform:scaleX(.92);opacity:.7}
.catalogue-card-body{padding:20px 20px 18px;display:flex;flex:1;flex-direction:column}.catalogue-card-topline{display:flex;justify-content:space-between;gap:12px;align-items:start}.catalogue-type{font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:800}.catalogue-code{font-size:.67rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 7px}.catalogue-card h3{font-family:Georgia,serif;font-size:1.8rem;font-weight:400;line-height:1.02;margin:13px 0 10px}.catalogue-card-copy{color:var(--muted);font-size:.88rem;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4em}
.catalogue-tags{display:flex;flex-wrap:wrap;gap:5px;margin:16px 0 18px}.catalogue-tag{font-size:.67rem;border-radius:999px;background:#ece8df;padding:5px 8px;color:#4e4b45}.catalogue-card-actions{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.catalogue-card-actions a:first-child{font-size:.8rem;font-weight:800}.catalogue-card-actions a:first-child:hover{text-decoration:underline;text-underline-offset:4px}.catalogue-arrow{width:35px;height:35px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:.3s}.catalogue-card:hover .catalogue-arrow{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(-12deg)}
.empty-results{min-height:420px;border-radius:30px;background:#e9e3d9;display:grid;place-items:center;align-content:center;text-align:center;padding:40px}.empty-results h3{font-family:Georgia,serif;font-size:2.4rem;font-weight:400;margin:15px 0 7px}.empty-results p{max-width:470px;color:var(--muted);margin:0 0 22px}.empty-orb{width:88px;aspect-ratio:1;border-radius:46% 54% 61% 39% / 45% 58% 42% 55%;background:var(--blue);display:block}

.product-help{padding-top:0}.product-help-card{border-radius:32px;background:var(--blue);color:#fff;padding:46px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;overflow:hidden;position:relative}.product-help-card:after{content:"";position:absolute;width:260px;aspect-ratio:1;border-radius:50%;background:var(--lime);right:-120px;top:-130px;opacity:.92}.product-help-card>*{position:relative;z-index:2}.product-help-card h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(2.7rem,5vw,5.2rem);line-height:.92;margin:.12em 0}.product-help-card p{font-size:1.03rem;color:rgba(255,255,255,.78);max-width:580px}.product-help-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}

@media(max-width:1180px){.catalogue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-choices{grid-template-columns:repeat(4,1fr)}.products-hero-grid{gap:35px}.catalogue-layout{grid-template-columns:250px minmax(0,1fr)}}
@media(max-width:900px){.products-hero{min-height:auto;padding-top:140px}.products-hero-grid{grid-template-columns:1fr}.product-lens{width:min(80vw,520px);justify-self:center}.project-choices{grid-template-columns:repeat(2,1fr)}.catalogue-layout{grid-template-columns:1fr}.filter-sticky{position:static}.filter-groups{display:grid;grid-template-columns:repeat(2,1fr);column-gap:24px}.results-toolbar{margin-top:20px}.product-help-card{grid-template-columns:1fr}.section-heading-row{grid-template-columns:1fr}}
@media(max-width:620px){.products-hero{padding:125px 0 65px}.product-lens{width:100%;margin-top:12px}.lens-label{font-size:.62rem;padding:8px 10px}.project-strip{padding:68px 0 78px}.project-choices{grid-template-columns:1fr 1fr}.project-choice{min-height:160px}.project-choice strong{font-size:1.55rem}.catalogue-section{padding:75px 0 90px}.filter-groups{grid-template-columns:1fr}.catalogue-grid{grid-template-columns:1fr}.results-toolbar{display:grid;align-items:start}.active-filters{justify-content:flex-start}.catalogue-packshot{height:240px}.product-help-card{padding:28px}.products-hero-copy .btn{width:100%}}
@media(max-width:390px){.project-choices{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ring-one,.ring-two,.product-lens-core,.catalogue-spinner{animation:none!important}}


/* Hidden state must override the component display rules. */
.catalogue-status[hidden],
.empty-results[hidden],
.results-count[hidden],
.taxonomy-filter[hidden]{
  display:none !important;
}