.x-grid,.x-grid *,.x-grid *:before,.x-grid *:after{box-sizing:border-box}.x-grid{--x-paper-2: var(--paper-2, #ebe4d4);--x-night: var(--night, #14120f);--x-ink: rgb(var(--color-foreground, 28, 25, 23));--x-ink-2: var(--ink-2, #3a3833);--x-ink-3: var(--ink-3, #857b6b);--x-rule: var(--rule, #cdc3ad);--x-green: var(--green, #00834e);--x-green-deep: var(--green-deep, #045236);--x-serif: var(--serif, "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif);--x-sans: var(--sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);display:grid;grid-template-columns:repeat(var(--x-cols-mobile, 2),minmax(0,1fr));gap:14px 9px;margin:0;padding:0;list-style:none}.x-card{position:relative;display:flex;flex-direction:column}.x-card[hidden]{display:none}.x-card__shot{position:relative;display:block;overflow:hidden;border:1px solid var(--x-rule);background:var(--x-paper-2)}.x-card__shot img,.x-card__shot svg{width:100%;height:auto;aspect-ratio:1 / .84;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.3,1)}.x-card:hover .x-card__shot img{transform:scale(1.05)}.x-card.is-out .x-card__shot img{filter:grayscale(.55) brightness(.82)}.x-card__rank{position:absolute;left:10px;top:10px;z-index:2;background:var(--x-green-deep);color:#fff;font-family:var(--x-sans);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:999px;pointer-events:none}.x-card__flag{position:absolute;left:10px;top:10px;z-index:2;background:var(--x-night);color:#fff;font-family:var(--x-sans);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border-radius:999px;pointer-events:none}.x-card__rank~.x-card__flag{top:44px}.x-card__body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name  name" "price add";align-items:end;row-gap:5px;column-gap:6px;margin-top:11px;flex:1}.x-card__name{grid-area:name;align-self:start;display:block;font-family:var(--x-serif);font-size:15px;line-height:1.25;letter-spacing:.012em;color:var(--x-ink);text-decoration:none}.x-card__name:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.x-card:hover .x-card__name{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--x-rule);text-underline-offset:4px}.x-card__name:focus-visible{outline:2px solid var(--x-green);outline-offset:3px}.x-card__price{grid-area:price;display:block;font-family:var(--x-serif);font-size:15px;line-height:1.25;color:var(--x-ink-2)}.x-card__price i{font-style:normal;font-family:var(--x-sans);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-ink-3);margin-right:5px}.x-card__price s{color:var(--x-ink-3);text-decoration-thickness:1px;margin-right:6px}.x-card__add{grid-area:add;align-self:end;position:relative;z-index:2;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--x-ink);border-radius:0;background:transparent;color:var(--x-ink);cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease}.x-card__add svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.x-card__add:hover,.x-card__add.is-done{background:var(--x-green);border-color:var(--x-green);color:#fff}.x-card__add:focus-visible{outline:2px solid var(--x-green);outline-offset:2px}.x-card__add[disabled]{border-color:var(--x-rule);color:var(--x-ink-3);cursor:not-allowed;background:transparent}@media(min-width:381px){.x-grid{gap:18px 10px}.x-card__body{column-gap:8px}}@media(min-width:621px){.x-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px) clamp(10px,1.5vw,22px)}.x-card__body{grid-template-areas:"name  add" "price add";row-gap:3px;column-gap:10px}.x-card__name,.x-card__price{font-size:clamp(16px,1.5vw,19px)}.x-card__shot img,.x-card__shot svg{aspect-ratio:1}.x-card__add{width:44px;height:44px}.x-card__add svg{width:16px;height:16px;stroke-width:1.6}}@media(min-width:1024px){.x-grid{grid-template-columns:repeat(var(--x-cols-desktop, 4),minmax(0,1fr))}}@media(min-width:1500px){.x-grid{grid-template-columns:repeat(var(--x-cols-wide, 5),minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.x-card__shot img,.x-card__add{transition-duration:.01ms!important}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/x-card-product.css.map */