:root {
  --shop-bg: #f7f5ef;
  --shop-surface: #ffffff;
  --shop-surface-alt: #eee9df;

  --shop-border: #ded7ca;

  --shop-text: #1d211c;
  --shop-muted: #6d7068;
  --shop-faint: #8c9085;

  --shop-accent: #526b3b;
  --shop-accent-dark: #3b4d2b;

  --shop-shadow:
    0 20px 45px rgba(40,35,25,.10);

  --shop-radius: 22px;
  --shop-max: 1180px;

  --font-body: 'Satoshi', Arial, sans-serif;
}



* {
  box-sizing:border-box;
}


html {
  scroll-behavior:smooth;
}


body {

  margin:0;
  padding: 0px !important;
  background:
  linear-gradient(
    180deg,
    #faf9f5,
    var(--shop-bg)
  );

  color:var(--shop-text);

  font-family:var(--font-body);

}



img {
  max-width:100%;
  display:block;
}


a {
  color:inherit;
}



.shell {

 width:min(
  calc(100% - 40px),
  var(--shop-max)
 );

 margin:auto;

}





/* Accessibility */

.skip-link {

 position:absolute;

 top:-60px;
 left:20px;

 background:#111;
 color:white;

 padding:12px 18px;

 border-radius:12px;

}


.skip-link:focus {
 top:20px;
}





/* Main */

.shop-main,
.shop-hero {
  margin-top: 0;
}





/* HERO */

.shop-hero {

 background:
 linear-gradient(
 135deg,
 #ffffff,
 #f3eee4
 );

 border:
 1px solid var(--shop-border);

 border-radius:30px;

 padding:45px;

 box-shadow:
 var(--shop-shadow);

 margin-bottom:35px;

}



.shop-hero__content {

 display:flex;

 align-items:center;

 justify-content:space-between;

 gap:40px;

}



.shop-hero__copy {

 max-width:650px;

}



.shop-hero h1 {

 margin:0;

 font-size:
 clamp(2.5rem,5vw,4.5rem);

 letter-spacing:-.04em;

 line-height:1;

}



.lede {

 margin-top:20px;

 color:var(--shop-muted);

 font-size:1.1rem;

 line-height:1.7;

}





.shop-button {


display:inline-flex;


margin-top:28px;


padding:
14px 26px;


border-radius:999px;


background:
var(--shop-accent);


color:white;


text-decoration:none;


font-weight:700;


transition:.25s ease;


}



.shop-button:hover {

background:
var(--shop-accent-dark);

transform:
translateY(-3px);

}




.shop-hero__logo {

background:white;

padding:30px;

border-radius:25px;

box-shadow:
0 12px 30px rgba(0,0,0,.08);

}



.shop-hero__logo img {

width:260px;

}





/* TRUST CARDS */


.trust-section {

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:20px;

margin-bottom:45px;

}



.trust-card {

background:
var(--shop-surface);

border:
1px solid var(--shop-border);

border-radius:
var(--shop-radius);

padding:28px;

text-align:center;

box-shadow:
var(--shop-shadow);

}



.trust-card span {

font-size:2rem;

}


.trust-card h3 {

margin:
15px 0 8px;

}



.trust-card p {

margin:0;

color:
var(--shop-muted);

}





/* LISTINGS HEADER */


.section-header {

display:flex;

align-items:end;

justify-content:space-between;

margin-bottom:20px;

}



.section-header h2 {

margin:0;

font-size:
clamp(1.8rem,3vw,3rem);

letter-spacing:-.03em;

}



.listing-count {

color:
var(--shop-faint);

}





/* FEEDBACK */


.feedback {

background:white;

border:
1px solid var(--shop-border);

border-radius:18px;

padding:18px;

margin-bottom:22px;

color:var(--shop-muted);

}





/* PRODUCT GRID */


.listing-grid {

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

}




.listing-card {

background:white;

border:
1px solid var(--shop-border);

border-radius:
var(--shop-radius);

overflow:hidden;

box-shadow:
0 10px 25px rgba(0,0,0,.06);

transition:
transform .25s ease,
box-shadow .25s ease;

}



.listing-card:hover {

transform:
translateY(-8px);


box-shadow:
0 25px 50px rgba(0,0,0,.12);

}





.listing-card__image {

aspect-ratio:
1 / 1;

background:
var(--shop-surface-alt);

}



.listing-card__image img {

width:100%;

height:100%;

object-fit:cover;

}





.listing-card__body {

padding:22px;

}



.listing-card__body h3 {

margin:0 0 12px;

font-size:1.25rem;

}



.listing-card__body p {

color:var(--shop-muted);

line-height:1.5;

}




.listing-tag {

display:inline-flex;

padding:
6px 12px;

border-radius:
999px;

background:
#e8efdf;

color:
var(--shop-accent-dark);

font-size:.8rem;

font-weight:700;

margin-bottom:12px;

}





.listing-meta {

display:flex;

justify-content:space-between;

margin-top:18px;

color:var(--shop-faint);

}




.listing-card__actions {

display:flex;

gap:12px;

margin-top:20px;

}



.listing-link,
.listing-shop-link {


flex:1;


padding:
12px;


border-radius:
14px;


text-decoration:none;


font-weight:700;


text-align:center;


}



.listing-link {

background:
var(--shop-accent);

color:white;

}



.listing-shop-link {

background:
var(--shop-surface-alt);

}





/* ETSY NOTICE */


.etsy-note {

margin-top:35px;

text-align:center;

color:
var(--shop-muted);

font-size:.9rem;

}





/* LOADING */


.skeleton {

background:
linear-gradient(
90deg,
#ebe7de,
#f7f4ed,
#ebe7de
);

background-size:
200% 100%;

animation:
shimmer 1.4s infinite;

}



@keyframes shimmer {

from {
background-position:200% 0;
}

to {
background-position:-200% 0;
}

}





/* FOOTER */


.footer-legal {

text-align:center;

padding:30px;

color:white;

}





/* TABLET */


@media(max-width:900px){


.shop-hero__content {

flex-direction:column;

text-align:center;

}



.trust-section {

grid-template-columns:1fr;

}



.listing-grid {

grid-template-columns:
repeat(2,1fr);

}


}




/* MOBILE */


@media(max-width:600px){


.shell {

width:
calc(100% - 24px);

}



.shop-hero {

padding:30px 22px;

}



.listing-grid {

grid-template-columns:1fr;

}



.section-header {

flex-direction:column;

align-items:flex-start;

}



.listing-card__actions {

flex-direction:column;

}



.shop-button {

width:100%;

justify-content:center;

}


}