:root {
  --pink: #E8336F;      /* the logo's pink */
  --pink-deep: #C4205A; /* hover / pressed */
  --blush: #FFE6EE;
  --brown: #3A2318;     /* text: saddle leather */
  --brown-soft: #6B4A3A;
  --turq: #18A398;      /* western turquoise: delivery only */
  --rope: #E2BF8E;
  --white: #FFFFFF;
  --display: "Rye", Georgia, serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--brown); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--pink-deep); }
:focus-visible { outline: 3px solid var(--turq); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: .01em; }
h2 { font-size: clamp(2rem, 5vw, 2.8rem); color: var(--pink); }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
.small { font-size: .92rem; color: var(--brown-soft); }
.section-lede { margin: 10px 0 0; max-width: 56ch; color: var(--brown-soft); }

/* ---------- buttons */
.btn { display: inline-block; padding: 14px 26px; border-radius: 999px; background: var(--pink); color: var(--white); text-decoration: none; font-weight: 800; border: 2px solid var(--pink); transition: background .15s, transform .15s; }
.btn:hover { background: var(--pink-deep); border-color: var(--pink-deep); }
.btn:active { transform: translateY(1px); }
.btn-line { background: transparent; color: var(--pink-deep); }
.btn-line:hover { background: var(--blush); color: var(--pink-deep); border-color: var(--pink-deep); }
.btn-small { padding: 10px 20px; font-size: .95rem; }

/* ---------- header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px max(16px, calc((100% - 1080px) / 2)); border-bottom: 3px dashed var(--rope); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pink); font-family: var(--display); font-size: 1.2rem; }
.top nav { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.top nav a { color: var(--brown); text-decoration: none; font-weight: 700; font-size: .98rem; padding: 4px 0; }
.top nav a:hover { color: var(--pink-deep); text-decoration: underline; text-underline-offset: 4px; }
.top nav .ig { color: var(--pink-deep); }

/* ---------- hero */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 24px; width: min(1080px, 100% - 32px); margin: 0 auto; padding: 48px 0 64px; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); color: var(--brown); }
.lede { font-size: 1.2rem; max-width: 40ch; margin: 18px 0 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-art { position: relative; display: grid; place-items: center; }
.hero-logo { width: min(420px, 100%); mix-blend-mode: multiply; } /* white JPEG background disappears on white; colors unchanged */
.brand img, .foot img { mix-blend-mode: multiply; }
.swing { position: absolute; top: -40px; left: 0; width: clamp(72px, 13vw, 120px); transform-origin: 50% 0; animation: swing 2.6s cubic-bezier(.36,.07,.19,.97) .4s 1 both; }
@keyframes swing { 0% { transform: rotate(18deg); } 25% { transform: rotate(-12deg); } 50% { transform: rotate(7deg); } 75% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
.cord { stroke: var(--brown); stroke-width: 2; }

/* ---------- felt freshies */
.felt { fill: var(--pink); }
.stitch { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-dasharray: 5 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hole { fill: var(--white); stroke: var(--brown); stroke-width: 1.5; }

/* ---------- shop: tags hanging from a rope */
.shop { background: var(--blush); padding: 56px 0 48px; }
.rope { height: 14px; margin: 36px 0 0; background: repeating-linear-gradient(-45deg, var(--rope) 0 7px, #C99A62 7px 10px); border-radius: 7px; box-shadow: inset 0 -2px 0 rgba(58,35,24,.18); }
.tags { list-style: none; margin: 0 auto; padding: 0; width: min(1080px, 100% - 32px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tag { position: relative; text-align: center; padding: 64px 22px 26px; }
.tag .string { position: absolute; top: 0; left: calc(50% - 1px); width: 2px; height: 100px; background: var(--brown); z-index: 0; }
.felt-art { position: relative; z-index: 1; width: 150px; margin: 0 auto 12px; }
.felt-art { transform-origin: 50% 22%; }
.tag:nth-child(2) .felt-art { transform: rotate(4deg); }
.tag:nth-child(3) .felt-art { transform: rotate(-3deg); }
.tag h3 { font-size: 1.6rem; color: var(--brown); }
.price { font-weight: 800; font-size: 1.35rem; color: var(--pink-deep); margin: 4px 0 8px; }
.tag p:not(.price) { max-width: 30ch; margin: 0 auto 18px; }
.shop-note { margin-top: 18px; text-align: center; color: var(--brown-soft); }

/* ---------- custom */
.custom { padding: 72px 0; }
.custom-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.custom p { max-width: 58ch; }
.custom-ask { padding: 28px; border: 3px dashed var(--pink); border-radius: 22px; text-align: center; }

/* ---------- delivery */
.delivery { background: var(--brown); color: var(--white); padding: 64px 0; }
.delivery h2 { color: var(--white); }
.delivery .section-lede { color: #E9D7CB; }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 32px 0 0; }
.ways div { border-top: 4px solid var(--turq); padding-top: 14px; }
.ways dt { font-family: var(--display); font-size: 1.45rem; color: #7FE0D6; }
.ways dd { margin: 8px 0 0; color: #F4E9E2; }

/* ---------- policies */
.policies { padding: 64px 0; }
.policies ul { margin: 22px 0 0; padding-left: 1.2em; max-width: 70ch; }
.policies li { margin: 0 0 12px; }

/* ---------- footer */
.foot { text-align: center; padding: 40px 16px 48px; border-top: 3px dashed var(--rope); }
.foot p { margin: 6px 0 0; }

/* ---------- small screens */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 28px; text-align: left; }
  .hero-art { order: -1; }
  .hero-logo { width: min(300px, 80%); }
  .swing { top: -16px; left: 4%; }
  .tags, .ways, .custom-grid { grid-template-columns: 1fr; }
  .tags { gap: 8px; }
  .tag:not(:first-child) { padding-top: 26px; }
  .tag:not(:first-child) .string { display: none; }
  .top nav { gap: 4px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .swing { animation: none; }
  .btn { transition: none; }
}

/* ---------- scents: her flyer's list, set like a menu board */
.scents { padding: 64px 0 24px; }
.scent-list { list-style: none; margin: 28px 0 0; padding: 0; columns: 3 220px; column-gap: 40px; }
.scent-list li { break-inside: avoid; padding: 9px 0 9px 26px; border-bottom: 2px dotted var(--rope); font-weight: 700; font-size: 1.08rem; position: relative; }
.scent-list li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: var(--pink);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.foot .social { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.foot .social span { color: var(--brown-soft); }

/* ---------- photos of her freshies */
.gallery { padding: 64px 0 8px; }
.photos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.photos li { margin: 0; }
.photos img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; background: var(--blush); }
.photos span { display: block; margin-top: 8px; font-size: .92rem; font-weight: 700; color: var(--brown-soft); }
@media (max-width: 820px) { .photos { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.more-wrap { text-align: center; margin: 28px 0 0; }
button.btn { font: inherit; font-weight: 800; cursor: pointer; }

/* shop items with her real photos: a photo "tag" on the string */
.tag-photo { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; border: 4px solid var(--white); box-shadow: 0 6px 16px rgba(58, 35, 24, .18); }
.tag:has(.tag-photo) .string { height: 70px; }
.felt-art:has(.tag-photo) { width: 190px; transform-origin: 50% 0; }

/* ---------- fan favorites page (fan-favorites.html) */
.fan { padding-top: 48px; padding-bottom: 56px; }
.fan-h { font-size: clamp(2.2rem, 6vw, 3.4rem); color: var(--pink); }
.fan-cta { margin: 22px 0 0; }
.disclaimer { margin: 40px 0 0; padding: 20px 24px; border: 2px dashed var(--rope); border-radius: 16px; background: #FFF8F2; max-width: 75ch; }
.disclaimer h2 { font-size: 1.3rem; color: var(--brown); }
.disclaimer p { margin: 10px 0 0; font-size: .95rem; color: var(--brown-soft); }

/* ---------- about: her letter, set like a note pinned up */
.about { background: var(--blush); padding: 72px 0; }
.note { position: relative; max-width: 68ch; margin: 0 auto; padding: 44px clamp(22px, 5vw, 56px) 40px; background: var(--white); border-radius: 18px; border: 3px dashed var(--pink); box-shadow: 0 10px 28px rgba(58, 35, 24, .10); }
.note::before { content: ""; position: absolute; top: -12px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--turq); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); } /* the pin */
.note h2 { margin-bottom: 14px; }
.note p { margin: 0 0 16px; font-size: 1.06rem; line-height: 1.75; }
.note .signoff { margin-top: 26px; font-style: italic; color: var(--brown-soft); }
.note .sig { margin: 0; font-family: var(--display); font-size: 1.9rem; color: var(--pink); line-height: 1.2; }
.note .sig-title { margin: 4px 0 0; font-size: .95rem; font-weight: 700; color: var(--brown-soft); }
.pickup { list-style: none; margin: 12px 0 0; padding: 0; }
.pickup li { margin: 0 0 8px; }
.pickup b { display: block; color: #7FE0D6; }
.pickup a { color: #F4E9E2; text-decoration: underline; text-underline-offset: 3px; }
.pickup a:hover { color: var(--white); }

/* =================================================================== store (shop.js) */
.top { position: sticky; top: 0; z-index: 20; background: var(--white); } /* no backdrop-filter: it would trap the phone's fixed cart button inside the header */
@media (max-width: 820px) { .top { position: static; } section[id], .catalog { scroll-margin-top: 12px; } }
.cart-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--pink); background: var(--white); color: var(--pink-deep); font: 800 .98rem var(--body); cursor: pointer; }
.cart-btn:hover { background: var(--blush); }
.cart-count { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--blush); color: var(--pink-deep); display: inline-grid; place-items: center; font-size: .85rem; }
.cart-btn.has .cart-count { background: var(--pink); color: var(--white); }
@media (max-width: 820px) { .cart-btn { position: fixed; right: 16px; bottom: 16px; z-index: 30; box-shadow: 0 8px 22px rgba(58, 35, 24, .25); padding: 12px 18px; } }

.tags button.btn { font: inherit; font-weight: 800; cursor: pointer; }

/* catalog */
.catalog { margin-top: 36px; }
.catalog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.catalog-head h3 { font-size: 1.7rem; color: var(--brown); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 8px 16px; border-radius: 999px; border: 2px solid var(--pink); background: var(--white); color: var(--pink-deep); font: 700 .95rem var(--body); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--pink); color: var(--white); }
.designs { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.designs-loading { grid-column: 1 / -1; color: var(--brown-soft); }
.design { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.design img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; border: 3px solid var(--white); box-shadow: 0 4px 12px rgba(58, 35, 24, .12); transition: transform .15s; }
.design:hover img { transform: translateY(-3px); }
.design-name { display: block; margin-top: 10px; font-weight: 800; font-size: 1.05rem; }
.design-meta { display: block; font-size: .9rem; color: var(--brown-soft); }
.shop-note { margin-top: 26px; text-align: center; color: var(--brown-soft); }
@media (max-width: 820px) { .designs { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* sheets (product + cart dialogs) */
.sheet { width: min(860px, 100% - 24px); max-height: calc(100dvh - 24px); padding: 28px; border: 0; border-radius: 22px; color: var(--brown); background: var(--white); box-shadow: 0 30px 80px rgba(58, 35, 24, .35); }
.sheet::backdrop { background: rgba(58, 35, 24, .55); }
.sheet-x { position: absolute; top: 10px; right: 10px; margin: 0; }
.sheet-x button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--blush); color: var(--brown); font-size: 1.1rem; cursor: pointer; }
.pd { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pd-photos img#pdPhoto { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; background: var(--blush); }
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pd-thumbs button { padding: 0; width: 56px; border: 3px solid transparent; border-radius: 10px; background: none; cursor: pointer; overflow: hidden; }
.pd-thumbs button[aria-current="true"] { border-color: var(--pink); }
.pd-thumbs img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pd-form h2 { color: var(--brown); font-size: clamp(1.6rem, 4vw, 2.1rem); padding-right: 36px; }
.pd-form label, .contact label { display: block; margin: 16px 0 0; font-weight: 700; }
.pd-form select, .pd-form textarea, .contact input, .contact textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 2px solid #E9C9D3; border-radius: 12px; font: 400 1rem var(--body); color: var(--brown); background: var(--white); }
.pd-form select:focus, .pd-form textarea:focus, .contact input:focus, .contact textarea:focus { outline: none; border-color: var(--pink); }
.opt { font-weight: 400; color: var(--brown-soft); }
.qty { display: inline-flex; align-items: center; margin-top: 6px; border: 2px solid #E9C9D3; border-radius: 12px; overflow: hidden; }
.qty button { width: 44px; height: 44px; border: 0; background: var(--blush); color: var(--brown); font-size: 1.3rem; cursor: pointer; }
.qty input { width: 56px; height: 44px; border: 0; text-align: center; font: 700 1.05rem var(--body); color: var(--brown); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; }
.qty.small button { width: 34px; height: 34px; font-size: 1.1rem; }
.qty.small span[aria-label] { min-width: 34px; text-align: center; font-weight: 800; }
#pdAdd { width: 100%; margin-top: 22px; font: inherit; font-weight: 800; cursor: pointer; }
@media (max-width: 680px) { .pd { grid-template-columns: 1fr; gap: 16px; } .sheet { padding: 22px 18px; } .pd-photos img#pdPhoto { aspect-ratio: 4 / 3; } }

/* cart */
.cart { width: min(560px, 100% - 24px); }
.cart h2 { color: var(--brown); font-size: 1.9rem; }
.cart-empty { margin: 18px 0; color: var(--brown-soft); }
.cart-items { list-style: none; margin: 18px 0 0; padding: 0; }
.cart-items li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 2px dotted var(--rope); }
.cart-items img { width: 64px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; }
.ci-text { display: flex; flex-direction: column; gap: 2px; font-size: .95rem; }
.ci-text span { color: var(--brown-soft); }
.ci-note { font-style: italic; }
.ci-text .qty { margin-top: 8px; align-self: flex-start; }
.ci-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.link { padding: 0; border: 0; background: none; color: var(--pink-deep); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ways-pick { margin: 20px 0 0; padding: 0; border: 0; }
.ways-pick legend { font-weight: 800; margin-bottom: 8px; }
.ways-pick label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0 0 8px; border: 2px solid #F1D9E1; border-radius: 12px; cursor: pointer; }
.ways-pick label:has(input:checked) { border-color: var(--turq); background: #EFFAF8; }
.ways-pick input { margin-top: 4px; accent-color: var(--turq); }
.ways-pick em { font-style: normal; font-weight: 800; color: var(--pink-deep); margin-left: 6px; }
.ways-pick small { display: block; color: var(--brown-soft); }
.totals { margin: 16px 0 0; }
.totals div { display: flex; justify-content: space-between; padding: 4px 0; }
.totals dt, .totals dd { margin: 0; }
.totals .grand { margin-top: 6px; padding-top: 10px; border-top: 2px solid var(--brown); font-weight: 800; font-size: 1.15rem; }
.cart-err { min-height: 1.2em; margin: 10px 0 0; color: #B3261E; font-weight: 700; }
.btn-wide { display: block; width: 100%; margin-top: 12px; text-align: center; font: inherit; font-weight: 800; cursor: pointer; }
.btn:disabled { opacity: .7; cursor: progress; }
.center { text-align: center; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--brown); color: var(--white); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); font-weight: 600; }
.toast button { flex: none; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--pink); color: var(--white); font: 800 .9rem var(--body); cursor: pointer; }
@media (max-width: 820px) { .toast { bottom: 84px; } }

/* thanks page */
.thanks { max-width: 560px; margin: 0 auto; padding: 56px 16px; text-align: center; }
.thanks img { width: 220px; mix-blend-mode: multiply; }
.thanks h1 { color: var(--pink); font-size: clamp(2rem, 6vw, 2.8rem); margin: 18px 0 12px; }

/* anchors land below the sticky header */
section[id], .catalog { scroll-margin-top: 84px; }
.toast[hidden] { display: none; }