.shopping-tools-container{margin:var(--component-spacing-above,0) auto var(--component-spacing-below,0);max-inline-size:min(100% - calc(var(--mlp-gutter-spacing) * 2), var(--mlp-max-width))}.shopping-tools-grid{--shopping-tool-border-size:1px;background-color:hsl(from var(--shopping-tools-background-color) h s l);grid-template-columns:repeat(var(--shopping-tool-columns,1), 1fr);border-radius:8px;display:grid;overflow:hidden;&[data-columns]{--shopping-tool-columns:2}@media (width>=48em){&[data-columns="4"]{--shopping-tool-columns:4}&[data-columns="6"]{--shopping-tool-columns:3}}@media (width>=64em){--shopping-tool-columns:3;&[data-columns="6"]{--shopping-tool-columns:6}}& a{--clamp-size:4;background-color:hsl(from var(--shopping-tools-border-color) h s l / var(--shopping-tool-background-alpha,0%));isolation:isolate;text-decoration-color:rgba(0, 0, 0, var(--underline-alpha,0));grid-template-rows:48px 1fr;transition:background-color .3s ease-in-out,text-decoration-color .3s ease-in-out;&:hover{--shopping-tool-background-alpha:100%;--underline-alpha:100%}&:focus-visible{--shopping-tool-focus-opacity:1;--shopping-tool-background-alpha:100%;--underline-alpha:100%}&:before{content:"";opacity:var(--shopping-tool-focus-opacity,0);z-index:-1;border:1px solid #000;border-radius:24px;position:absolute;inset:4px}& vis-typography{align-self:center;max-inline-size:121px}}& .label-text{-webkit-line-clamp:var(--clamp-size,2);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;&::part(vis-typography__base){line-height:1.4}}& .copy-text{-webkit-margin-before:8px;margin-block-start:8px}}.shopping-tools-column{display:grid;position:relative;&:before,&:after{background-color:var(--shopping-tools-border-color);content:"";z-index:1;position:absolute}&:before{inline-size:var(--shopping-tool-border-size);inset-block:0;inset-inline-end:calc(var(--shopping-tool-border-size) * -1)}&:after{block-size:var(--shopping-tool-border-size);inset-block-end:calc(var(--shopping-tool-border-size) * -1);inset-inline:0}}.shopping-tools-item{color:#000;grid-gap:8px;text-align:center;align-content:start;justify-items:center;gap:8px;padding:32px 40px;display:grid;& vis-image{block-size:48px;&::part(vis-image__base){aspect-ratio:unset;block-size:100%}}}
