﻿/* Final-row CTA, measured against the current theme's real grid or flex layout. */
.usersite-category-fill[hidden] { display:none !important; }
[data-product-category-grid] > .usersite-category-fill { display:flex; min-width:0; min-height:0; align-self:stretch; box-sizing:border-box; }
.usersite-category-fill-link { position:relative; isolation:isolate; overflow:hidden; display:flex; flex:1; align-items:center; justify-content:space-between; gap:20px; padding:24px; border:1px solid var(--dt-border,#D6DDD2); border-radius:var(--category-fill-radius,var(--dt-radius,4px)); background:var(--dt-soft,#F0F3EA); color:var(--dt-text,#26352B); text-decoration:none; font-family:var(--dt-font,Arial,sans-serif); font-size:clamp(18px,2vw,28px); font-weight:600; line-height:1.3; }
.usersite-category-fill-link::before { content:''; position:absolute; z-index:-1; inset:0; opacity:.13; background:repeating-linear-gradient(130deg,transparent 0 34px,currentColor 35px 36px,transparent 37px 68px); mask-image:linear-gradient(90deg,transparent,#000); }
.usersite-category-fill-arrow { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border:1px solid currentColor; border-radius:50%; font-size:28px; }
.usersite-category-fill-link:hover { color:var(--dt-accent,#486A4C); border-color:currentColor; text-decoration:none; }
.usersite-category-fill-link:focus-visible { outline:3px solid var(--dt-accent,#486A4C); outline-offset:3px; }
.usersite-layout01-body .usersite-category-fill-link { background:#101827; color:#F8FAFC; }
.usersite-layout02-body .usersite-category-fill-link { background:#142208; color:#B4F731; }
.usersite-layout03-body .usersite-category-fill-link { background:#EAF1FC; color:#153B6B; }
.usersite-layout04-body .usersite-category-fill-link { background:#25142A; color:#FFABD3; }
.usersite-layout05-body .usersite-category-fill-link { background:#151C28; color:#E2BD67; }
.usersite-layout06-body .usersite-category-fill-link { background:#EDE3FC; color:#4A267D; }
.usersite-layout07-body .usersite-category-fill-link { background:#F0F0E9; color:#242424; }
.usersite-layout08-body .usersite-category-fill-link { background:#EEE3CF; color:#692E32; }
@media(max-width:767.98px) { .usersite-category-fill-link { flex-direction:column; justify-content:center; gap:12px; padding:16px 10px; text-align:center; font-size:18px; } .usersite-category-fill-arrow { flex-basis:36px; width:36px; height:36px; font-size:22px; } }