:root {
  --ink: #241b30;
  --muted: #635b6b;
  --paper: #fffbf7;
  --card: #fff;
  --border: #e8e1e9;
  --pink: #9e295b;
  --pink-dark: #7d1744;
  --blue: #245b84;
  --blue-soft: #eaf4fb;
}

[hidden] { display: none !important; }
html { scroll-padding-top: 1rem; }
.icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.muted { color: var(--muted); }
.visually-hidden, .skip-link:not(:focus) { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip-link { position: absolute; z-index: 5; top: .5rem; left: .5rem; padding: .6rem; background: white; }
.wrap { width: min(1200px, calc(100% - 3rem)); }
.utility { background: #33243d; color: #fff; font-size: .79rem; }
.utility .wrap { display: flex; justify-content: space-between; gap: .6rem; padding-block: .35rem; }
.utility a { color: inherit; }
.utility .icon { margin-right: .15rem; }
.top-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(.8rem, 4vw, 3.3rem); padding-block: .95rem; }
.brand { display: inline-flex; align-items: center; gap: .66rem; color: #3c2848; width: fit-content; }
.brand-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; color: var(--pink); background: #fce6ee; }
.brand-icon .icon { width: 1.4rem; height: 1.4rem; }
.brand-type { display: grid; gap: .15rem; }
.brand strong { font-size: 1.75rem; }
.brand-tag { font-size: .57rem; letter-spacing: .15em; }
.top .account-nav { grid-column: 3; justify-content: flex-end; font-size: .875rem; gap: .85rem; }
.account-nav a, .account-nav .link { font-weight: 650; color: #4e355a; }
.header-search { display: flex; align-items: stretch; max-width: 580px; background: #faf5f9; border: 1px solid var(--border); border-radius: .7rem; }
.header-search input { border: 0; background: transparent; padding: .68rem .85rem; }
.header-search button { background: transparent; color: var(--pink); padding: .55rem .85rem; }
.header-search button:hover { background: #f8e5ee; }
main { padding-block: 1.4rem 3rem; }
footer { background: #f7f0f5; }
.footer-inner { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline; }
.button .icon { margin-left: .15rem; }

.shop-hero {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center;
  overflow: hidden; background: radial-gradient(ellipse at 90% 14%, #fbe1e6 0, transparent 40%), linear-gradient(105deg, #f8eaf3, #fff4df);
  border: 1px solid #eedce4; border-radius: 1.45rem; min-height: clamp(310px, 34vw, 430px);
}
.hero-copy { position: relative; z-index: 1; padding: clamp(1.4rem, 5vw, 4.1rem); padding-right: 0; }
.hero-copy .eyebrow { font-size: .68rem; }
.hero-copy .eyebrow span { display: inline-block; margin-right: .25rem; width: .5rem; height: .5rem; border-radius: 50%; background: #b84777; }
.hero-copy h1 { font: 700 clamp(2.15rem, 4.2vw, 3.65rem)/.99 Georgia, serif; letter-spacing: -.065em; margin-bottom: 1rem; }
.hero-copy h1 em { color: var(--pink); font-weight: 500; }
.hero-copy p:not(.eyebrow) { color: #5d4b61; font-size: clamp(1rem, 1.6vw, 1.15rem); margin-bottom: 1.35rem; max-width: 34ch; }
.hero-copy .button { padding: .68rem 1rem; }
.hero-art { display: block; width: 100%; height: auto; }
.shop-categories { margin: 1.65rem 0 2.25rem; }
.shop-categories h2 { font-size: 1.1rem; }
.shop-categories nav { display: flex; gap: .5rem; overflow-x: auto; padding: .26rem .26rem .55rem; margin-inline: -.26rem; }
.shop-categories a { color: #493850; white-space: nowrap; padding: .49rem .96rem; border: 1px solid var(--border); background: white; border-radius: 2rem; font-weight: 650; text-decoration: none; }
.shop-categories a:hover, .shop-categories a[aria-current] { color: var(--pink-dark); background: #fbe6ef; border-color: #ebc8d9; }
.catalog-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .5rem 1rem; }
.catalog-heading h2 { font: 700 clamp(1.7rem, 4vw, 2.55rem)/1.08 Georgia, serif; letter-spacing: -.035em; margin-bottom: .25rem; }
.catalog-heading .eyebrow, .catalog-heading .muted { margin-bottom: .3rem; }
.catalog-filters { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; padding-block: .65rem; border-block: 1px solid var(--border); margin: .65rem 0 1rem; }
.inline-check, .order-control { display: inline-flex; gap: .4rem; align-items: center; }
.inline-check input { margin: 0; width: 1.05rem; height: 1.05rem; }
.order-control { margin-left: auto; font-size: .9rem; }
.order-control select { width: auto; }
.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.product-media { position: relative; aspect-ratio: 1.16; background: #faf3f5; overflow: hidden; }
.product-photo { aspect-ratio: auto; height: 100%; mix-blend-mode: multiply; }
.product-placeholder { display: grid; place-items: center; height: 100%; min-height: 11rem; color: #975d80; background: radial-gradient(circle, #fffcf3, #f4e4ee); }
.product-placeholder .icon { width: 3rem; height: 3rem; }
.stock-out { position: absolute; left: .65rem; top: .65rem; background: #fff; color: #61455e; }
.product-caption { padding: .85rem; }
.product-category { color: var(--muted); font-size: .75rem; font-weight: 650; }
.product h3 { font-size: 1rem; line-height: 1.25; margin: .2rem 0 .45rem; overflow-wrap: anywhere; }
.product a:hover h3 { text-decoration: underline; }
.product .price { font-size: 1.05rem; }
.product .price small { font-size: .75rem; }
.product-link { display: inline-block; margin-top: .6rem; color: var(--blue); font-size: .83rem; font-weight: 650; }
.empty-state { grid-column: 1 / -1; text-align: center; background: white; border: 1px dashed #d6c4d1; border-radius: 1rem; padding: 2rem 1rem; }
.empty-state h3 { margin: .65rem 0 .3rem; }
.empty-state p { color: var(--muted); }
.empty-icon { display: inline-grid; place-items: center; border-radius: 50%; width: 2.9rem; height: 2.9rem; color: var(--pink); background: #fce9ef; }
.shop-services { margin-top: 2.1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.shop-services > div { display: flex; gap: .8rem; align-items: center; padding: 1rem; border: 1px solid var(--border); border-radius: .85rem; background: #fff; }
.shop-services > div > .icon { width: 1.6rem; height: 1.6rem; color: var(--blue); }
.shop-services h3 { margin: 0; font-size: .95rem; }
.shop-services p { margin: 0; color: var(--muted); font-size: .88rem; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; color: var(--muted); font-size: .86rem; }
.breadcrumb > * + *::before { content: "/"; display: inline-block; margin-right: .45rem; color: var(--muted); }
.product-detail { gap: clamp(1rem, 4vw, 3rem); }
.detail-media { display: grid; border: 1px solid var(--border); border-radius: 1rem; min-height: 17rem; overflow: hidden; }
.detail-photo { border: 0; max-height: 520px; }
.detail-content h1 { font-family: Georgia, serif; overflow-wrap: anywhere; }
.product-description { color: var(--muted); overflow-wrap: anywhere; }
.detail-delivery { display: inline-block; margin-top: 1rem; }
.in-stock { background: #e5f5ea; color: #26553c; }
.neutral-badge { background: #f1ebf3; color: #57475a; }

.ops-body { background: #f8f6fa; }
.ops-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 1.4rem; }
.ops-nav { padding-block: 1.5rem; }
.ops-nav nav { display: grid; gap: .3rem; padding: .7rem; border: 1px solid var(--border); border-radius: .9rem; background: #fff; }
.nav-caption { color: var(--muted); font-size: .72rem; text-transform: uppercase; font-weight: 750; letter-spacing: .06em; margin: .3rem .55rem; }
.ops-nav a { display: flex; gap: .5rem; align-items: center; color: #47354e; padding: .48rem .57rem; border-radius: .5rem; font-weight: 650; text-decoration: none; }
.ops-nav a:hover, .ops-nav a[aria-current] { background: #f5e9f1; color: var(--pink-dark); }
.ops-heading { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ops-heading h1 { font-size: clamp(1.7rem, 4vw, 2.55rem); margin-bottom: .4rem; }
.ops-heading .muted, .heading .muted { margin-bottom: 0; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.summary { display: grid; gap: .2rem; align-content: start; padding: .95rem; }
.summary span { color: var(--muted); font-size: .88rem; }
.summary strong { font-size: 1.45rem; overflow-wrap: anywhere; }
.summary a { font-weight: 700; }
.category-grid { margin-top: .8rem; }
.category { display: grid; gap: .2rem; background: #f8f2f7; border: 1px solid #eee5ec; padding: .55rem; }
.category .category-load { font-weight: 700; }
.category .category-settings { font-size: .78rem; margin-left: .1rem; }
.editor-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; }
.editor-fields .field { margin-top: .75rem; }
.editor-variant { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .8rem; }
.editor-photo { display: grid; place-items: center; min-height: 10rem; border: 1px dashed #d1bdd0; border-radius: .7rem; background: #fbf7fb; overflow: hidden; }
.editor-photo img { display: block; width: 100%; max-height: 230px; object-fit: contain; }
#photo-placeholder { display: grid; justify-items: center; gap: .55rem; color: var(--muted); padding: 1rem; text-align: center; }
#photo-placeholder .icon { width: 2rem; height: 2rem; color: var(--pink); }
.field-note { margin: .55rem 0 0; font-size: .82rem; }
.editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; padding-top: .35rem; }
@media (max-width: 920px) {
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ops-shell { grid-template-columns: minmax(0, 1fr); }
  .ops-nav { padding: .7rem 0 0; }
  .ops-nav nav { display: flex; flex-wrap: wrap; padding: .28rem; }
  .nav-caption { display: none; }
}
@media (max-width: 650px) {
  .wrap { width: calc(100% - 1.5rem); }
  .top-inner { grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; }
  .top .account-nav { grid-column: 2; grid-row: 1; }
  .header-search { grid-row: 2; grid-column: 1 / -1; max-width: none; }
  .shop-hero, .editor-columns { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding: 1.35rem 1.35rem .4rem; }
  .hero-art { width: min(85%, 285px); margin: -.5rem .2rem -.6rem auto; }
  .shop-categories { margin: 1.35rem 0 1.6rem; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .shop-services, .summary-grid { grid-template-columns: minmax(0, 1fr); }
  .catalog-filters { align-items: center; }
  .order-control { margin-left: 0; }
  .editor-columns { gap: 0; }
  .ops-heading .button { white-space: normal; }
}
@media (max-width: 360px) {
  .utility a { display: none; }
  .brand-icon { display: none; }
  .editor-variant { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .utility, .ops-nav, .skip-link, .top, footer { display: none !important; }
  .wrap, .ops-shell { width: auto; display: block; }
  .ops-body { background: #fff; }
}

.quick-load-grid { margin-block: 1.2rem; }
.quick-load-grid .button { display: flex; gap: .5rem; align-items: center; min-height: 3.2rem; }
.capture-action { margin-top: .5rem; min-height: 2.75rem; }
.capture-action[data-capture="description"] { margin-bottom: .25rem; }
[data-price-note] { color: var(--blue); }

.photo-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .7rem; }
.photo-actions label { cursor: pointer; }
.photo-actions input:focus-visible + label { outline: 3px solid #0078a4; outline-offset: 3px; }
.danger-link { color: #9a2736; }
.danger-button { background: #9a2736; }
.lookup-form .actions, .lookup-form > button { margin-top: .7rem; }
.lookup-results { list-style: none; padding: 0; margin: .75rem 0 0; }
.lookup-results li { padding: .65rem 0; border-bottom: 1px solid var(--border); }
.lookup-results small { display: block; }
.lookup-photo-result { display: flex; gap: .65rem; align-items: center; }
.lookup-photo-result img { flex: none; object-fit: contain; }

.utility-actions { display: flex; flex: none; align-items: center; gap: .8rem; }
.utility .pwa-install { color: #fff; background: transparent; border-color: #a78baf; padding: .14rem .55rem; font-size: .79rem; white-space: nowrap; }
.utility .pwa-install:hover { background: #573d61; }
.pwa-dialog { box-sizing: border-box; width: min(28rem, calc(100% - 2rem)); color: var(--ink); background: var(--paper); padding: 1.5rem; border: 1px solid var(--border); border-radius: 1rem; }
.pwa-dialog::backdrop { background: #241b3090; }
.pwa-dialog h3 { margin-bottom: .35rem; }
.pwa-dialog form { margin-top: 1rem; }
.customer-app.pwa-standalone .account-nav { display: none; }
@media (max-width: 480px) {
  .customer-app .utility .wrap > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .customer-app .utility-actions { gap: .5rem; }
}
@media (display-mode: standalone) {
  .customer-app .account-nav, .customer-app .pwa-install { display: none; }
}
