/* ---- jackeys-manos-etsy-widget.html line 42 ---- */
/* Everything is scoped under #jm-etsy-widget / jm-*.
FONTS AND COLOURS ARE THE SITE'S OWN. Squarespace publishes the theme as
CSS variables on every section (heading font, body font, text colour, link
colour) and this reads them, so a change in Site Styles, or a different
colour theme on the section, carries through with no edit here. The value
after each comma is today's theme; it is only used where the variable is
missing, i.e. when this file is opened from Finder.
No h1-h4 or p tags anywhere in the widget: the site's fade-in animation
takes those over inside a Code Block (it had hold of the old title and
subtitle). Headings are divs with role="heading", set in the heading font
by the rules below. */
#jm-etsy-widget.jm-etsy{
--jm-ink:var(--paragraphMediumColor,#f3ede5); /* body text (cream on the maroon section) */
--jm-head:var(--headingLargeColor,#f3ede5); /* headings */
--jm-accent:var(--paragraphLinkColor,#d9b783); /* the site's link / button gold */
--jm-soft:color-mix(in srgb,var(--jm-ink) 12%,transparent); /* tile backing + loading shimmer */
--jm-line:color-mix(in srgb,var(--jm-ink) 30%,transparent); /* the rule between the two shops */
font-family:var(--body-font-font-family,"Helvetica Neue",Arial,sans-serif);
font-weight:var(--body-font-font-weight,400);
font-style:normal;
letter-spacing:normal;
line-height:1.4;
color:var(--jm-ink);
width:100%;max-width:none;margin:0 auto;padding:0;
box-sizing:border-box;
text-align:left;
}
#jm-etsy-widget.jm-etsy *{box-sizing:border-box;}
/* ---- headings: the site's heading font, at the site's own sizes ---- */
.jm-etsy__title,.jm-etsy__subhead{
font-family:var(--heading-font-font-family,Georgia,"Times New Roman",serif);
font-weight:var(--heading-font-font-weight,500);
font-style:var(--heading-font-font-style,normal);
letter-spacing:var(--heading-font-letter-spacing,-.03em);
line-height:var(--heading-font-line-height,1.2);
text-transform:var(--heading-font-text-transform,none);
color:var(--jm-head);
margin:0;
}
/* Same formula Squarespace sizes its own headings with: (size - 1) * 1.2vw + 1rem.
Title = the site's Heading 2, row heading = its Heading 4. */
.jm-etsy__title{font-size:clamp(2rem,calc((var(--heading-2-size-value,2.8) - 1) * 1.2vw + 1rem),2.9rem);}
.jm-etsy__subhead{
font-size:clamp(1.35rem,calc((var(--heading-4-size-value,1.6) - 1) * 1.2vw + 1rem),1.65rem);
margin:44px 0 18px;
}
.jm-etsy__sub{margin:8px 0 0;font-size:1.05rem;line-height:1.4;color:var(--jm-ink);opacity:.86;}
/* ---- section header: title + line on the left, the site's button on the right ---- */
.jm-etsy__head{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:16px 28px;margin:0 0 30px;
}
.jm-etsy__headtext{flex:1 1 320px;min-width:0;}
.jm-etsy__head--rows{margin-bottom:0;} /* the row headings below bring their own space */
/* The button carries Squarespace's own button classes, so it IS the site's
button (outline, pill, its font). These zero-specificity rules only dress
it when those classes mean nothing (Finder). */
.jm-etsy__cta{flex:0 0 auto;white-space:nowrap;text-align:center;text-decoration:none;}
:where(.jm-etsy__cta){
display:inline-block;padding:.6em 1.2em;border:2px solid var(--jm-accent);border-radius:300px;
color:var(--jm-accent);font-weight:600;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;
}
/* ---- the cards: a picture and its name, nothing else ---- */
.jm-etsy__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 24px;}
.jm-card{display:block;color:inherit;text-decoration:none;}
.jm-card__imgwrap{
position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
border-radius:15px; /* the site's image corners */
background:var(--jm-soft);
}
.jm-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
/* min-height = the two clamped lines, so a loading card and a real one are the same size */
.jm-card__name{
margin:12px 2px 0;font-size:1rem;line-height:1.35;min-height:2.7em;color:var(--jm-ink);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
transition:color .15s ease;
}
.jm-card:hover .jm-card__img,.jm-card:focus-visible .jm-card__img{transform:scale(1.04);}
.jm-card:hover .jm-card__name,.jm-card:focus-visible .jm-card__name{color:var(--jm-accent);}
.jm-card:focus-visible{outline:2px solid var(--jm-accent);outline-offset:6px;border-radius:15px;}
/* ---- the second shop ---- */
.jm-etsy__section{margin-top:64px;padding-top:60px;border-top:1px solid var(--jm-line);}
/* ---- loading cards: same box as a real card, shown only until the first data arrives ---- */
.jm-card--skel{pointer-events:none;}
.jm-card--skel .jm-card__imgwrap,
.jm-card--skel .jm-card__name{
background:linear-gradient(90deg,var(--jm-soft) 25%,color-mix(in srgb,var(--jm-ink) 20%,transparent) 37%,var(--jm-soft) 63%);
background-size:400% 100%;animation:jm-shimmer 1.3s ease infinite;
}
.jm-card--skel .jm-card__name{border-radius:6px;width:80%;}
@keyframes jm-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
.jm-card__img{transition:none;}
.jm-card:hover .jm-card__img,.jm-card:focus-visible .jm-card__img{transform:none;}
.jm-card--skel .jm-card__imgwrap,.jm-card--skel .jm-card__name{animation:none;}
}
/* Narrower cards (tablet, phone): let a long name run to a third line
instead of cutting it off. */
@media (max-width:1100px){
.jm-card__name{-webkit-line-clamp:3;}
}
/* Squarespace's own phone breakpoint. Two across; every row count here is a
multiple of four, so no row is ever left with a stray card. */
@media (max-width:767px){
.jm-etsy__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;}
.jm-etsy__head{margin-bottom:22px;}
.jm-etsy__headtext{flex-basis:100%;}
.jm-etsy__subhead{margin:34px 0 14px;}
.jm-etsy__section{margin-top:44px;padding-top:40px;}
.jm-card__name{font-size:.95rem;margin-top:9px;}
}