/* generated from f_webcust_token — design lives in the DB */
:root{
  --f-border-accent-lg:6px;
  --f-border-accent-md:4px;
  --f-border-accent-sm:2px;
  --f-border-hairline:1px;
  --f-border-standard:2px;
  --f-button-font-family:DM Sans;
  --f-button-font-md:12px;
  --f-button-font-sm:11px;
  --f-button-font-weight:500;
  --f-button-font-xs:10px;
  --f-button-h-md:28px;
  --f-button-h-sm:22px;
  --f-button-h-xs:18px;
  --f-button-max-height:28px;
  --f-button-pad-x-md:12px;
  --f-button-pad-x-sm:10px;
  --f-button-pad-x-xs:8px;
  --f-button-width-mode:hug;
  --f-color-black:#000000;
  --f-color-divider:#DED7DB;
  --f-color-gold:#F5C518;
  --f-color-grey-fill:#F3F3F3;
  --f-color-grey-text:#8A8A8A;
  --f-color-magenta:#FF3D7F;
  --f-color-magenta-dark:#D9266A;
  --f-color-neon:#39FF14;
  --f-color-white:#FFFFFF;
  --f-highlight-brush:svg:turbulence-swipe;
  --f-motion-hover:fill-shift;
  --f-radius-card:16px;
  --f-radius-pill:9999px;
  --f-radius-tile:8px;
  --f-shadow-block-magenta:6px 6px 0 #FF3D7F;
  --f-shadow-block-neon:6px 6px 0 #39FF14;
  --f-shadow-card:0 1px 4px rgba(0,0,0,.05);
  --f-space-1:4px;
  --f-space-12:48px;
  --f-space-16:64px;
  --f-space-2:8px;
  --f-space-3:12px;
  --f-space-4:16px;
  --f-space-6:24px;
  --f-space-8:32px;
  --f-space-unit:4px;
  --f-type-display-card:21px;
  --f-type-display-family:Cormorant Garamond;
  --f-type-display-hero:48px;
  --f-type-display-section:34px;
  --f-type-ui-body:14px;
  --f-type-ui-family:DM Sans;
  --f-type-ui-label:12px;
  --f-type-ui-lead:17px;
  --f-type-ui-micro:10px;
  --f-type-ui-nano:8px;
  --f-type-ui-pico:7px;
  --f-type-ui-subhead:20px;
  --f-type-weight-medium:500;
  --f-type-weight-regular:400;
}

/* ===== shop card — structure fixed, every value a token ===== */
.gp-card{display:grid!important;grid-template-columns:repeat(12,1fr)!important;gap:0!important;padding:0!important;overflow:hidden!important;background:var(--f-color-white)!important;border:var(--f-border-hairline) solid var(--f-color-divider)!important;border-radius:var(--f-radius-card)!important;box-shadow:var(--f-shadow-card)!important;position:relative;transform:none!important}

/* image = 12×12 square block (plot); aspect-ratio keeps the cells square */
.gp-img{position:relative;overflow:hidden;aspect-ratio:1!important;background:var(--f-color-grey-fill);text-decoration:none}
.gp-img img{width:100%;height:100%;object-fit:cover;display:block}

.gp-badge{position:absolute!important;top:var(--f-space-2);left:var(--f-space-2);z-index:2;background:var(--f-color-white);color:var(--f-color-grey-text);border:var(--f-border-hairline) solid var(--f-color-divider);border-radius:var(--f-radius-pill);padding:2px var(--f-space-2);font-family:var(--f-type-ui-family);font-size:var(--f-type-ui-pico);font-weight:var(--f-button-font-weight);letter-spacing:.02em;white-space:nowrap}
.gp-fav{position:absolute!important;top:var(--f-space-2);right:var(--f-space-2);z-index:2;width:24px;height:24px;border-radius:var(--f-radius-pill);background:var(--f-color-white);border:var(--f-border-hairline) solid var(--f-color-divider);color:var(--f-color-grey-text);display:flex;align-items:center;justify-content:center;font-size:var(--f-type-ui-label);cursor:pointer;padding:0}

/* body — every element skinned from tokens; the plot decides where it sits */
.gp-name{align-self:end;font-family:var(--f-type-display-family);font-size:var(--f-type-display-card);font-weight:var(--f-type-weight-medium);line-height:1.08;color:var(--f-color-black);text-decoration:none;padding:var(--f-space-2) var(--f-space-3) 0}
.gp-price{align-self:center;font-family:var(--f-type-display-family);font-style:italic;font-size:var(--f-type-ui-subhead);font-weight:var(--f-type-weight-medium);color:var(--f-color-magenta);padding:2px var(--f-space-3) 0}
.gp-meta{align-self:center;text-align:right;font-family:var(--f-type-ui-family);font-size:var(--f-type-ui-micro);color:var(--f-color-grey-text);padding:2px var(--f-space-3) 0}

.gp-nutriwrap{padding:0 var(--f-space-3)}
.gp-nutri{display:grid!important;grid-template-columns:repeat(6,1fr)!important;gap:0 3px;margin-top:var(--f-space-2)}
.gp-nutri div{text-align:center;min-width:0;overflow:hidden}
.gp-nutri span{display:block;font-family:var(--f-type-ui-family);font-size:var(--f-type-ui-pico);color:var(--f-color-grey-text);text-transform:uppercase;letter-spacing:.02em;line-height:1.2;white-space:nowrap}
.gp-nutri b{display:block;font-family:var(--f-type-ui-family);font-size:var(--f-type-ui-nano);font-weight:var(--f-type-weight-medium);color:var(--f-color-black);line-height:1.3;margin-top:1px;white-space:nowrap}
.gp-208{display:block;font-family:var(--f-type-ui-family);font-size:var(--f-type-ui-nano);font-weight:var(--f-button-font-weight);color:var(--f-color-grey-text);text-decoration:none;margin-top:var(--f-space-2);text-align:center;letter-spacing:.01em}

/* CTA — hug width (spec forbids full-width), magenta, all from button.* tokens */
.gp-cta{justify-self:center;display:inline-flex;align-items:center;justify-content:center;width:auto;margin:var(--f-space-2) var(--f-space-3) var(--f-space-3);padding:0 var(--f-button-pad-x-md);height:var(--f-button-h-sm);background:var(--f-color-magenta);color:var(--f-color-white);border:0;border-radius:var(--f-radius-pill);font-family:var(--f-button-font-family);font-size:var(--f-button-font-sm);font-weight:var(--f-button-font-weight);letter-spacing:.02em;white-space:nowrap;cursor:pointer}
.gp-cta:hover{background:var(--f-color-magenta-dark)}