:root {
  --shop-ink: #12251a;
  --shop-forest: #173d2d;
  --shop-deep: #0d2118;
  --shop-cream: #fbf8f1;
  --shop-sand: #f1eadb;
  --shop-gold: #e5b64c;
  --shop-gold-light: #f8df9a;
  --shop-cinnamon: #b8522d;
  --shop-muted: #657268;
  --shop-line: rgba(23, 61, 45, .13);
  --shop-shadow: 0 18px 46px rgba(19, 46, 31, .11);
}

.shop-body { min-height: 100vh; background: var(--shop-cream); color: var(--shop-ink); }

.shop-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(13, 33, 24, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px);
}

.shop-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 40px));
  min-height: 76px;
  margin: 0 auto;
  gap: 20px;
}

.shop-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 11px;
  color: #fffdf8;
  text-decoration: none;
}

.shop-brand img { width: 42px; height: 42px; object-fit: contain; }
.shop-brand__text { display: grid; line-height: 1.05; }
.shop-brand__name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.22rem; letter-spacing: .01em; }
.shop-brand__tag { margin-top: 4px; color: var(--shop-gold-light); font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

.shop-nav { display: flex; align-items: center; justify-content: center; gap: 5px; margin-left: auto; }
.shop-nav a { padding: 10px 12px; border-radius: 8px; color: rgba(255,253,248,.82); font-family: 'DM Sans', Arial, sans-serif; font-size: .91rem; font-weight: 600; text-decoration: none; transition: .2s ease; }
.shop-nav a:hover, .shop-nav a[aria-current='page'] { color: #fffdf8; background: rgba(255,255,255,.1); }

.shop-actions { display: flex; align-items: center; gap: 9px; }
.shop-icon-link, .shop-profile-button, .shop-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 9px;
  color: #fffdf8;
  background: transparent;
  font: inherit;
  text-decoration: none;
  transition: .2s ease;
}
.shop-icon-link:hover, .shop-profile-button:hover, .shop-menu-toggle:hover { border-color: var(--shop-gold); color: var(--shop-gold-light); }
.shop-icon-link { position: relative; }
.shop-icon-link svg, .shop-profile-button svg, .shop-menu-toggle svg { width: 20px; height: 20px; }
.shop-cart-badge { position: absolute; top: -8px; right: -8px; display: grid; min-width: 20px; height: 20px; padding: 0 4px; place-items: center; border: 2px solid var(--shop-deep); border-radius: 999px; color: var(--shop-deep); background: var(--shop-gold); font-size: .68rem; font-weight: 800; }
.shop-account { position: relative; }
.shop-profile-button { gap: 7px; max-width: 180px; color: var(--shop-gold-light); }
.shop-profile-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 700; }
.shop-account-menu { position: absolute; top: calc(100% + 9px); right: 0; display: none; min-width: 178px; padding: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #10271c; box-shadow: 0 18px 35px rgba(0,0,0,.3); }
.shop-account-menu.is-open { display: grid; }
.shop-account-menu a { padding: 10px; border-radius: 6px; color: rgba(255,255,255,.8); font-size: .87rem; text-decoration: none; }
.shop-account-menu a:hover { color: #fff; background: rgba(255,255,255,.1); }
.shop-account-menu .shop-logout { color: #ffb2a2; }
.shop-login { min-width: auto; padding: 0 14px; color: var(--shop-gold-light); font-size: .88rem; font-weight: 700; }
.shop-menu-toggle { display: none; }

.shop-mobile-nav { display: none; }

.shop-page { min-height: 70vh; }
.shop-hero { position: relative; overflow: hidden; padding: 78px 0 68px; color: #fffdf8; background: #133623 url('/images/dark-pattern.png') center/cover; isolation: isolate; }
.shop-hero::before { position: absolute; inset: 0; z-index: -1; content: ''; background: linear-gradient(100deg, rgba(8,29,19,.95), rgba(16,55,35,.88)); }
.shop-hero::after { position: absolute; right: -9rem; bottom: -13rem; z-index: -1; width: 32rem; height: 32rem; border: 1px solid rgba(229,182,76,.32); border-radius: 50%; content: ''; }
.shop-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.shop-breadcrumb { display: inline-flex; gap: 8px; margin: 0 0 22px; color: rgba(255,255,255,.65); font-size: .82rem; }
.shop-breadcrumb a { color: inherit; text-decoration: none; }
.shop-breadcrumb a:hover { color: var(--shop-gold-light); }
.shop-hero__eyebrow { margin: 0 0 16px; color: var(--shop-gold-light); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.shop-hero h1 { max-width: 690px; margin: 0; color: #fffdf8; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.7rem, 6vw, 5.2rem); font-weight: 600; line-height: 1.05; letter-spacing: -.045em; }
.shop-hero p:not(.shop-hero__eyebrow) { max-width: 630px; margin: 20px 0 0; color: rgba(255,255,255,.78); font-size: 1.07rem; }

.catalog-section { padding: 55px 0 102px; background: var(--shop-cream); }
.catalog-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.catalog-toolbar h2 { margin: 0; color: var(--shop-deep); font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; }
.catalog-summary { margin: 8px 0 0; color: var(--shop-muted); font-size: .92rem; }
.catalog-clear { display: none; min-height: 40px; padding: 0 13px; border: 1px solid var(--shop-line); border-radius: 7px; color: var(--shop-forest); background: #fffdf8; font-size: .84rem; font-weight: 700; }
.catalog-clear:hover { border-color: var(--shop-forest); background: var(--shop-sand); }
.catalog-clear.is-visible { display: inline-flex; align-items: center; }

.catalog-filters { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(150px, .65fr) minmax(150px, .65fr); gap: 13px; padding: 18px; border: 1px solid var(--shop-line); border-radius: 12px; background: #fffdf8; box-shadow: 0 10px 28px rgba(18,37,26,.055); }
.filter-field { position: relative; }
.filter-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.filter-field svg { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; color: var(--shop-muted); pointer-events: none; transform: translateY(-50%); }
.filter-field input { width: 100%; height: 50px; padding: 0 13px; border: 1px solid var(--shop-line); border-radius: 8px; outline: none; color: var(--shop-ink); background: #fffdf8; font-size: .91rem; transition: border .18s ease, box-shadow .18s ease; }
.filter-field input[type='search'] { padding-left: 43px; }
.filter-field input:focus { border-color: var(--shop-gold); box-shadow: 0 0 0 3px rgba(229,182,76,.22); }
.filter-field input::placeholder { color: #8b958d; }

.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; margin-top: 32px; }
.catalog-card { display: flex; flex-direction: column; min-height: 100%; overflow: hidden; border: 1px solid var(--shop-line); border-radius: 14px; background: #fffdf8; box-shadow: 0 10px 25px rgba(18,37,26,.06); transition: transform .2s ease, box-shadow .2s ease; }
.catalog-card:hover { box-shadow: var(--shop-shadow); transform: translateY(-5px); }
.catalog-card__image { position: relative; aspect-ratio: 1.08 / 1; overflow: hidden; background: var(--shop-sand); }
.catalog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.catalog-card:hover .catalog-card__image img { transform: scale(1.045); }
.catalog-stock { position: absolute; top: 13px; right: 13px; z-index: 2; display: inline-flex; align-items: center; min-height: 27px; padding: 0 9px; border-radius: 999px; color: #fff; background: #2b6b46; box-shadow: 0 3px 10px rgba(0,0,0,.16); font-size: .71rem; font-weight: 800; }
.catalog-stock--low { color: #532e1e; background: #f8df9a; }
.catalog-stock--out { background: #a63e2a; }
.catalog-card__sold { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #fff; background: rgba(10,22,15,.52); font-size: .83rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.catalog-card__body { display: flex; flex: 1; flex-direction: column; padding: 22px; }
.catalog-card h3 { margin: 0; color: var(--shop-deep); font-family: 'Playfair Display', Georgia, serif; font-size: 1.48rem; line-height: 1.15; }
.catalog-card h3 mark { padding: 0 2px; color: inherit; background: var(--shop-gold-light); }
.catalog-price { margin: 8px 0 0; color: var(--shop-cinnamon); font-size: .91rem; font-weight: 800; }
.catalog-description { display: -webkit-box; margin: 13px 0 0; overflow: hidden; color: var(--shop-muted); font-size: .91rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.catalog-actions { display: grid; grid-template-columns: 1fr 1.28fr; gap: 9px; margin-top: auto; padding-top: 23px; }
.catalog-button { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 0 9px; border: 1px solid var(--shop-forest); border-radius: 7px; color: var(--shop-forest); background: transparent; font-size: .84rem; font-weight: 800; text-decoration: none; transition: .18s ease; }
.catalog-button:hover { color: #fffdf8; background: var(--shop-forest); }
.catalog-button--gold { border-color: var(--shop-gold); color: var(--shop-deep); background: var(--shop-gold); }
.catalog-button--gold:hover { color: var(--shop-deep); background: #f2c95e; }
.catalog-button:disabled { cursor: not-allowed; color: #8d958f; background: #e8e6df; border-color: #dfddd7; }
.catalog-button:disabled:hover { color: #8d958f; background: #e8e6df; }

.catalog-skeleton { overflow: hidden; border: 1px solid var(--shop-line); border-radius: 14px; background: #fffdf8; }
.catalog-skeleton__image, .catalog-skeleton__line { position: relative; overflow: hidden; background: #ece8dc; }
.catalog-skeleton__image { aspect-ratio: 1.08 / 1; }
.catalog-skeleton__body { padding: 22px; }
.catalog-skeleton__line { height: 13px; margin-top: 13px; border-radius: 5px; }
.catalog-skeleton__line--title { width: 65%; height: 25px; margin-top: 0; }
.catalog-skeleton__line--short { width: 42%; }
.catalog-skeleton__actions { display: grid; grid-template-columns: 1fr 1.28fr; gap: 9px; margin-top: 28px; }
.catalog-skeleton__button { height: 43px; border-radius: 7px; background: #ece8dc; }
.catalog-skeleton__image::after, .catalog-skeleton__line::after, .catalog-skeleton__button::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); content: ''; animation: shop-skeleton 1.35s infinite; transform: translateX(-100%); }
@keyframes shop-skeleton { 100% { transform: translateX(100%); } }

.catalog-state { grid-column: 1 / -1; padding: 62px 24px; border: 1px dashed rgba(23,61,45,.35); border-radius: 13px; text-align: center; background: #fffdf8; }
.catalog-state__icon { display: grid; width: 52px; height: 52px; margin: 0 auto 19px; place-items: center; border-radius: 50%; color: var(--shop-forest); background: var(--shop-sand); }
.catalog-state__icon svg { width: 25px; height: 25px; }
.catalog-state h3 { margin: 0; color: var(--shop-deep); font-family: 'Playfair Display', Georgia, serif; font-size: 1.8rem; }
.catalog-state p { max-width: 430px; margin: 10px auto 0; color: var(--shop-muted); }
.catalog-state button { margin-top: 22px; }
.catalog-state--error { border-color: rgba(166,62,42,.35); }
.catalog-state--error .catalog-state__icon { color: #9a351f; background: #f8ded7; }

.shop-toast { position: fixed; right: 22px; bottom: 22px; z-index: 70; display: flex; align-items: flex-start; gap: 13px; max-width: min(400px, calc(100vw - 44px)); padding: 16px; border: 1px solid var(--shop-line); border-radius: 11px; color: var(--shop-deep); background: #fffdf8; box-shadow: 0 18px 46px rgba(18,37,26,.2); opacity: 0; pointer-events: none; transform: translateY(18px); transition: .22s ease; }
.shop-toast.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.shop-toast--error { border-color: rgba(166,62,42,.4); }
.shop-toast__icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--shop-deep); background: var(--shop-gold); }
.shop-toast--error .shop-toast__icon { color: #fff; background: #a63e2a; }
.shop-toast__icon svg { width: 17px; height: 17px; }
.shop-toast strong { display: block; font-size: .9rem; }
.shop-toast p { margin: 2px 0 0; color: var(--shop-muted); font-size: .82rem; }
.shop-toast a { color: var(--shop-cinnamon); font-size: .82rem; font-weight: 800; text-decoration: none; }
.shop-toast a:hover { text-decoration: underline; }

.shop-wa { position: fixed; right: 22px; bottom: 22px; z-index: 50; }
.shop-wa--with-toast { bottom: 104px; }
.shop-wa__button { display: inline-flex; align-items: center; gap: 8px; min-height: 45px; padding: 0 15px; border: 0; border-radius: 999px; color: #fff; background: #238c58; box-shadow: 0 10px 22px rgba(16,71,43,.25); font-size: .83rem; font-weight: 800; }
.shop-wa__button:hover { background: #1a7447; }
.shop-wa__button svg { width: 19px; height: 19px; }
.shop-wa__panel { position: absolute; right: 0; bottom: calc(100% + 10px); display: none; width: 270px; overflow: hidden; border: 1px solid rgba(23,61,45,.13); border-radius: 12px; background: #fffdf8; box-shadow: var(--shop-shadow); }
.shop-wa__panel.is-open { display: block; }
.shop-wa__top { padding: 16px; color: #fff; background: #238c58; }
.shop-wa__top strong { display: block; }
.shop-wa__top span { display: block; margin-top: 2px; opacity: .78; font-size: .75rem; }
.shop-wa__panel p { margin: 0; padding: 16px; color: var(--shop-muted); font-size: .86rem; }
.shop-wa__panel a { display: block; margin: 0 16px 16px; padding: 10px; border-radius: 7px; color: #fff; background: #238c58; font-size: .84rem; font-weight: 800; text-align: center; text-decoration: none; }
.shop-wa__panel a:hover { background: #1a7447; }

@media (max-width: 850px) {
  .shop-nav { display: none; }
  .shop-menu-toggle { display: inline-flex; }
  .shop-mobile-nav { display: grid; grid-template-rows: 0fr; overflow: hidden; background: var(--shop-deep); transition: grid-template-rows .22s ease; }
  .shop-mobile-nav.is-open { grid-template-rows: 1fr; border-top: 1px solid rgba(255,255,255,.1); }
  .shop-mobile-nav__inner { min-height: 0; overflow: hidden; }
  .shop-mobile-nav__links { display: grid; width: min(100% - 40px, 1180px); gap: 4px; margin: 0 auto; padding: 15px 0 19px; }
  .shop-mobile-nav a { padding: 11px; border-radius: 7px; color: rgba(255,253,248,.82); font-size: .92rem; font-weight: 700; text-decoration: none; }
  .shop-mobile-nav a:hover, .shop-mobile-nav a[aria-current='page'] { color: #fff; background: rgba(255,255,255,.1); }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .shop-header__inner, .shop-container { width: min(100% - 30px, 1180px); }
  .shop-header__inner { min-height: 66px; }
  .shop-brand img { width: 37px; height: 37px; }
  .shop-brand__name { font-size: 1.07rem; }
  .shop-brand__tag { font-size: .57rem; }
  .shop-profile-button { min-width: 40px; width: 40px; padding: 0; }
  .shop-profile-button span { display: none; }
  .shop-login { display: none; }
  .shop-hero { padding: 58px 0 55px; }
  .shop-hero h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
  .catalog-section { padding: 42px 0 72px; }
  .catalog-toolbar { align-items: flex-start; flex-direction: column; gap: 14px; }
  .catalog-filters { grid-template-columns: 1fr; padding: 13px; }
  .catalog-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
  .catalog-card__image { aspect-ratio: 1.35 / 1; }
  .shop-wa { right: 15px; bottom: 15px; }
  .shop-wa--with-toast { bottom: 100px; }
  .shop-toast { right: 15px; bottom: 15px; max-width: calc(100vw - 30px); }
}

@media (prefers-reduced-motion: reduce) { .catalog-skeleton__image::after, .catalog-skeleton__line::after, .catalog-skeleton__button::after { animation: none; } }