/* ============================================================
   SHOPS — directory + individual storefront
   Loaded AFTER theme.css. Reuses all existing CSS variables,
   fonts and component classes (.chip, .pagination, .btn, .p-grid,
   .empty-state, .trust-row, ssShimmer keyframe, etc).

   Signature: the "shop passport" — the same die-cut ticket
   silhouette as .price-tag, extended into a logo treatment used
   everywhere a shop is represented (directory card + storefront
   hero), so a shop reads as a stamped, verified stall in the
   market rather than a generic profile page.
   ============================================================ */

/* ---------- shared: verified pill + featured ribbon ---------- */
.shop-verified{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:800; color:#fff;
  background:var(--price); padding:2px 9px 2px 7px; border-radius:999px;
  letter-spacing:.2px; white-space:nowrap;
}
.shop-verified i{ font-size:9px; }

.shop-featured-ribbon{
  position:absolute; top:12px; left:-1px; z-index:4;
  background:var(--sun); color:var(--ink);
  font-family:var(--font-mono); font-size:10px; font-weight:800;
  padding:4px 12px 4px 10px; letter-spacing:.4px; text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

/* ============================================================
   SHOP DIRECTORY (shops.html)
   ============================================================ */
.shops-hero{
  background:linear-gradient(160deg,var(--brand-dark),var(--brand) 60%,var(--sun));
  color:#fff; padding:54px 0 74px; position:relative; overflow:hidden;
}
.shops-hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 85% 20%, rgba(255,255,255,.16), transparent 60%);
  pointer-events:none;
}
.shops-hero__inner{ position:relative; z-index:1; max-width:640px; }
.shops-hero h1{ font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.6rem); color:#fff; }
.shops-hero p{ color:rgba(255,255,255,.85); margin-top:10px; font-size:.98rem; line-height:1.6; max-width:56ch; }

.shops-search{
  position:relative; z-index:1;
  margin-top:26px; max-width:480px; display:flex; align-items:center;
  background:#fff; border-radius:30px; padding:4px; box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.shops-search input{ flex:1; border:none; outline:none; padding:12px 16px; font-size:14px; font-family:var(--font-body); background:transparent; min-width:0; }
.shops-search button{ width:46px; height:44px; border:none; border-radius:24px; background:var(--grad-brand-deep); color:#fff; cursor:pointer; flex-shrink:0; }

.shops-toolbar{
  margin-top:-30px; position:relative; z-index:2;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:16px 18px; display:flex; gap:14px; align-items:center;
  flex-wrap:wrap; justify-content:space-between;
}
.shops-toolbar__filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.shops-toolbar__filters .chip{ cursor:pointer; display:inline-flex; align-items:center; }
.shops-toolbar .count{ font-size:.85rem; color:var(--ink-soft); white-space:nowrap; }

.shops-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:22px; padding:30px 0 10px;
}

.shop-card{
  position:relative; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.shop-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card-hover); }

.shop-card__banner{ position:relative; aspect-ratio:16/7; background:var(--paper-dim); overflow:hidden; }
.shop-card__banner img{ width:100%; height:100%; object-fit:cover; }
.shop-card__banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35)); }

.shop-card__logo{
  position:absolute; left:16px; bottom:-28px; width:60px; height:60px; border-radius:16px;
  background:var(--paper-dim); border:3px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.18);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--brand-dark);
  z-index:3;
}
.shop-card__logo img{ width:100%; height:100%; object-fit:cover; }

.shop-card__body{ padding:36px 16px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.shop-card__name-row{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.shop-card__name{ font-family:var(--font-display); font-size:1.02rem; font-weight:600; color:var(--ink); }
.shop-card__category{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--brand-dark); }
.shop-card__desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:36px; margin-top:2px; }
.shop-card__meta{ display:flex; align-items:center; gap:14px; margin-top:6px; font-size:11.5px; color:var(--ink-faint); font-weight:600; }
.shop-card__meta i{ color:var(--brand-dark); margin-right:4px; }

.shop-card__foot{ padding:12px 16px 16px; margin-top:auto; }
.shop-card__foot .btn{ width:100%; }

/* skeleton (reuses ssShimmer keyframe already defined in style.css) */
.shop-card.skel{ min-height:230px; }
.shop-card.skel .shop-card__banner{ background:linear-gradient(100deg,var(--line-soft) 30%,#fff 50%,var(--line-soft) 70%); background-size:200% 100%; animation:ssShimmer 1.3s ease-in-out infinite; }

/* ============================================================
   SHOP STOREFRONT (shop-detail.html)
   ============================================================ */
.shop-hero{ position:relative; background:var(--ink); }
.shop-hero__banner{ width:100%; aspect-ratio:21/6; min-height:160px; object-fit:cover; display:block; opacity:.92; }
.shop-hero__banner-fallback{ width:100%; aspect-ratio:21/6; min-height:160px; background:linear-gradient(135deg,var(--brand-dark),var(--sun)); }

.shop-passport{ max-width:1240px; margin:-58px auto 0; padding:0 16px; position:relative; z-index:3; }
.shop-passport__card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:20px 22px; display:flex; gap:18px; align-items:flex-start;
  flex-wrap:wrap;
}
.shop-passport__logo{
  width:88px; height:88px; border-radius:20px; background:var(--paper-dim); border:3px solid #fff;
  box-shadow:0 8px 20px rgba(0,0,0,.14); overflow:hidden; flex-shrink:0; margin-top:-46px;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:700; font-size:2rem; color:var(--brand-dark);
}
.shop-passport__logo img{ width:100%; height:100%; object-fit:cover; }

.shop-passport__info{ flex:1; min-width:220px; }
.shop-passport__name-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.shop-passport__name{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--ink); }
.shop-passport__category{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--brand-dark); margin-top:2px; }
.shop-passport__desc{ margin-top:10px; color:var(--ink-soft); line-height:1.7; max-width:64ch; font-size:.92rem; }

.shop-passport__stats{ display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; }
.shop-passport__stat strong{ display:block; font-family:var(--font-mono); font-size:1.1rem; color:var(--ink); }
.shop-passport__stat span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:700; }

.shop-passport__actions{ display:flex; flex-direction:column; gap:8px; margin-left:auto; }

.shop-hint{
  display:flex; align-items:flex-start; gap:8px; background:var(--paper-dim);
  border:1px solid var(--line); border-radius:var(--radius-s); padding:10px 13px;
  font-size:.78rem; color:var(--ink-soft); line-height:1.5; margin-top:14px; max-width:64ch;
}
.shop-hint i{ color:var(--brand-dark); margin-top:2px; flex-shrink:0; }

.shop-section{ padding:30px 0; }
.shop-section h2{ font-family:var(--font-display); font-size:1.2rem; color:var(--ink); margin-bottom:4px; }

.shop-not-found{ text-align:center; padding:90px 20px; }
.shop-not-found i{ font-size:2.6rem; color:var(--brand); margin-bottom:16px; }

@media(max-width:640px){
  .shops-hero{ padding:40px 0 60px; }
  .shops-toolbar{ margin-top:-24px; padding:14px; }
  .shop-passport{ margin-top:-40px; }
  .shop-passport__card{ padding:16px; }
  .shop-passport__logo{ width:68px; height:68px; margin-top:-36px; }
  .shop-passport__actions{ margin-left:0; width:100%; flex-direction:row; }
  .shop-passport__actions .btn{ flex:1; }
  .shop-hero__banner, .shop-hero__banner-fallback{ aspect-ratio:16/9; }
}










/* ============================================================
   SEARCH BAR — polished, animated focus state
   ============================================================ */
.shops-search{
  position:relative; z-index:1;
  margin-top:26px; max-width:480px; display:flex; align-items:center;
  background:#fff; border-radius:30px; padding:4px;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  border:2px solid transparent;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.shops-search:focus-within{
  border-color:var(--sun);
  box-shadow:0 16px 34px rgba(0,0,0,.22), 0 0 0 4px rgba(255,255,255,.15);
  transform:translateY(-1px);
}
.shops-search input{
  flex:1; border:none; outline:none; padding:12px 18px; font-size:14px;
  font-family:var(--font-body); background:transparent; min-width:0; color:var(--ink);
}
.shops-search input::placeholder{ color:var(--ink-faint); }
.shops-search button{
  width:46px; height:44px; border:none; border-radius:24px;
  background:var(--grad-brand-deep); color:#fff; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.shops-search button:hover{
  transform:scale(1.06);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.shops-search button:active{ transform:scale(.96); }

/* ============================================================
   TOOLBAR — filter chips + sort select
   ============================================================ */
.shops-toolbar{
  margin-top:-30px; position:relative; z-index:2;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:16px 18px; display:flex; gap:14px; align-items:center;
  flex-wrap:wrap; justify-content:space-between;
}

.shops-toolbar__filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.shops-toolbar__filters .chip{
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--paper-dim); font-size:12.5px; font-weight:600; color:var(--ink-soft);
  user-select:none; white-space:nowrap;
  transition:background .18s var(--ease-out), border-color .18s var(--ease-out),
             color .18s var(--ease-out), transform .15s var(--ease-out), box-shadow .18s var(--ease-out);
}
.shops-toolbar__filters .chip:hover{
  border-color:var(--brand);
  color:var(--ink);
  transform:translateY(-1px);
}
.shops-toolbar__filters .chip:active{ transform:translateY(0); }

.shops-toolbar__filters .chip.active{
  background:var(--brand-dark);
  border-color:var(--brand-dark);
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.shops-toolbar__filters .chip.active i{ color:#fff !important; }

.sort-select{
  appearance:none; -webkit-appearance:none;
  padding:9px 34px 9px 14px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--paper-dim) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%234A4A4A" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 14px center;
  font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer;
  transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.sort-select:hover{ border-color:var(--brand); }
.sort-select:focus{
  outline:none;
  border-color:var(--brand-dark);
  box-shadow:0 0 0 3px rgba(0,0,0,.06);
}

.shops-toolbar .count{
  font-size:.85rem; color:var(--ink-soft); white-space:nowrap;
  font-family:var(--font-mono); letter-spacing:.02em;
}

@media(max-width:640px){
  .shops-toolbar{ margin-top:-24px; padding:14px; }
  .shops-toolbar__filters{ width:100%; }
  .shops-toolbar__filters .chip{ flex:1; justify-content:center; padding:9px 10px; }
  .sort-select{ flex:1; min-width:140px; }
}



/* ============================================================
   SHOP REVIEWS
   ============================================================ */
.shop-reviews__header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.shop-rating-summary{ display:flex; align-items:center; }

.shop-review-form{
  background:var(--paper-dim); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:16px; margin-bottom:22px; display:flex; flex-direction:column; gap:10px; max-width:520px;
}
.shop-review-form__stars i{ font-size:20px; color:var(--line); cursor:pointer; margin-right:4px; transition:color .15s; }
.shop-review-form textarea{
  border:1px solid var(--line); border-radius:var(--radius-s); padding:10px 12px; font-family:var(--font-body);
  font-size:13px; min-height:70px; resize:vertical; background:var(--paper);
}

.shop-review-cta{ font-size:13px; color:var(--ink-soft); margin-bottom:18px; }
.shop-review-cta a{ color:var(--brand-dark); font-weight:600; }

.shop-review-item{ border-bottom:1px solid var(--line-soft); padding:14px 0; }
.shop-review-item:last-child{ border-bottom:none; }
.shop-review-item__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.shop-review-item__name{ font-weight:600; font-size:13.5px; color:var(--ink); }
.shop-review-item__comment{ font-size:13px; color:var(--ink-soft); line-height:1.6; margin-top:6px; }
.shop-review-item__date{ font-size:11px; color:var(--ink-faint); display:block; margin-top:6px; }













/* ============================================================
   PRODUCT TOOLBAR — enhanced search + sort
   ============================================================ */
.listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 24px;
}

.listing-toolbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.listing-toolbar > div:first-child h2 {
  margin-bottom: 0;
  font-size: 1.2rem;
}

/* ---------- Search Form (inline in toolbar) ---------- */
#shopProductSearchForm {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--line-soft);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color 0.25s var(--shop-transition), 
              box-shadow 0.25s var(--shop-transition),
              transform 0.2s var(--shop-transition);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

#shopProductSearchForm:focus-within {
  border-color: var(--brand);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 0 0 4px rgba(0,0,0,0.03);
  transform: scale(1.01);
}

#shopProductSearchInput {
  padding: 10px 16px;
  border: none;
  outline: none;
  font-size: 13.5px;
  background: transparent;
  color: var(--ink);
  min-width: 180px;
  font-family: var(--font-body);
}

#shopProductSearchInput::placeholder {
  color: var(--ink-faint);
  font-weight: 400;
}

#shopProductSearchForm button {
  border: none;
  background: transparent;
  padding: 0 16px 0 4px;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 15px;
  transition: color 0.2s ease, transform 0.2s var(--shop-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#shopProductSearchForm button:hover {
  color: var(--brand-dark);
  transform: scale(1.1);
}

#shopProductSearchForm button:active {
  transform: scale(0.92);
}

/* ---------- Sort Select ---------- */
.sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 38px 10px 18px;
  border-radius: 999px;
  border: 2px solid var(--line-soft);
  background: var(--surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1.5L6 6.5L11 1.5" stroke="%234A4A4A" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 16px center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.25s var(--shop-transition), 
              box-shadow 0.25s var(--shop-transition),
              transform 0.2s var(--shop-transition);
  font-family: var(--font-body);
  min-width: 150px;
}

.sort-select:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.sort-select:focus {
  outline: none;
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
}

.sort-select option {
  font-weight: 400;
  padding: 6px;
}

/* ============================================================
   PRODUCT GRID — refined cards
   ============================================================ */
.p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  padding: 8px 0 12px;
}

.product-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--shop-transition), 
              box-shadow 0.3s var(--shop-transition),
              border-color 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shop-glow), 0 12px 32px rgba(0,0,0,0.06);
  border-color: var(--line);
}

.product-card__image {
  aspect-ratio: 1/1;
  background: var(--paper-dim);
  overflow: hidden;
  position: relative;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--shop-transition);
}

.product-card:hover .product-card__image img {
  transform: scale(1.05);
}

.product-card__body {
  padding: 16px 18px 18px;
}

.product-card__name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__price {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--price);
  margin: 6px 0 4px;
}

.product-card__meta {
  font-size: 12px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.product-card__meta i {
  color: var(--brand-dark);
  margin-right: 3px;
}

/* ============================================================
   PAGINATION — polished with micro-interactions
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 0 12px;
  flex-wrap: wrap;
}

.pagination button,
.pagination .page-item {
  min-width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--line-soft);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--shop-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  padding: 0 14px;
}

.pagination button:hover:not(.active):not(:disabled) {
  background: var(--paper-dim);
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.pagination button:active:not(.active):not(:disabled) {
  transform: scale(0.94);
}

.pagination .active {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  pointer-events: none;
}

.pagination button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none !important;
}

.pagination .ellipsis {
  color: var(--ink-faint);
  padding: 0 6px;
  font-weight: 400;
}

.pagination .page-nav {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0 18px;
  background: var(--paper-dim);
  border-color: var(--line);
}

.pagination .page-nav:hover:not(:disabled) {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

/* ============================================================
   SHOP REVIEWS — refined
   ============================================================ */
.shop-reviews__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.shop-rating-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-rating-summary .stars {
  display: flex;
  gap: 2px;
}

.shop-rating-summary .stars i {
  color: var(--sun);
  font-size: 18px;
}

.shop-rating-summary .rating-value {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}

.shop-rating-summary .rating-count {
  font-size: 13px;
  color: var(--ink-faint);
}

.shop-review-form {
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 20px;
  margin-bottom: 24px;
  max-width: 560px;
  transition: box-shadow 0.3s var(--shop-transition);
}

.shop-review-form:focus-within {
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.shop-review-form__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
}

.shop-review-form__stars i {
  font-size: 24px;
  color: var(--line);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s var(--shop-transition);
}

.shop-review-form__stars i:hover,
.shop-review-form__stars i.active {
  color: var(--sun);
  transform: scale(1.1);
}

.shop-review-form textarea {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 13.5px;
  min-height: 80px;
  resize: vertical;
  background: var(--paper);
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.shop-review-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.04);
}

.shop-review-form .btn {
  align-self: flex-start;
  margin-top: 8px;
}

.shop-review-cta {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.shop-review-cta a {
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.shop-review-item {
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 0;
  transition: background 0.2s ease;
}

.shop-review-item:hover {
  background: var(--paper-dim);
  margin: 0 -12px;
  padding: 16px 12px;
  border-radius: var(--radius-s);
}

.shop-review-item:last-child {
  border-bottom: none;
}

.shop-review-item__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.shop-review-item__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.shop-review-item__stars i {
  color: var(--sun);
  font-size: 14px;
}

.shop-review-item__comment {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-top: 8px;
}

.shop-review-item__date {
  font-size: 11px;
  color: var(--ink-faint);
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
}

/* ============================================================
   TRUST SECTION
   ============================================================ */
.trust-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  padding: 8px 0;
}

.trust-row > div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}

.trust-row > div i {
  font-size: 18px;
  color: var(--brand-dark);
  opacity: 0.7;
}

/* ============================================================
   RESPONSIVE REFINEMENTS
   ============================================================ */
@media (max-width: 768px) {
  .shop-passport {
    margin-top: -40px;
    padding: 0 14px;
  }
  
  .shop-passport__card {
    padding: 18px 18px 20px;
    gap: 14px;
  }
  
  .shop-passport__logo {
    width: 72px;
    height: 72px;
    margin-top: -40px;
    font-size: 1.6rem;
    border-radius: 18px;
  }
  
  .shop-passport__name {
    font-size: 1.3rem;
  }
  
  .shop-passport__stats {
    gap: 18px;
  }
  
  .shop-passport__actions {
    margin-left: 0;
    width: 100%;
    flex-direction: row;
    min-width: unset;
  }
  
  .shop-passport__actions .btn {
    flex: 1;
    text-align: center;
  }
  
  .shop-hero__banner,
  .shop-hero__banner-fallback {
    aspect-ratio: 16/9;
    min-height: 120px;
  }
  
  .listing-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .listing-toolbar > div:first-child {
    flex-wrap: wrap;
  }
  
  #shopProductSearchForm {
    width: 100%;
  }
  
  #shopProductSearchInput {
    min-width: unset;
    width: 100%;
  }
  
  .sort-select {
    width: 100%;
  }
  
  .p-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }
  
  .pagination button,
  .pagination .page-item {
    min-width: 38px;
    height: 38px;
    font-size: 13px;
    border-radius: 10px;
    padding: 0 10px;
  }
  
  .trust-row {
    gap: 16px;
    justify-content: center;
  }
  
  .trust-row > div {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .shop-passport__card {
    padding: 14px;
  }
  
  .shop-passport__logo {
    width: 60px;
    height: 60px;
    margin-top: -34px;
    font-size: 1.2rem;
    border-radius: 14px;
    border-width: 3px;
  }
  
  .shop-passport__name {
    font-size: 1.1rem;
  }
  
  .shop-passport__desc {
    font-size: 0.85rem;
  }
  
  .shop-passport__stats {
    gap: 12px;
  }
  
  .shop-passport__stat strong {
    font-size: 0.95rem;
  }
  
  .p-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
  
  .product-card__body {
    padding: 12px 14px;
  }
  
  .product-card__name {
    font-size: 0.85rem;
  }
  
  .product-card__price {
    font-size: 0.95rem;
  }
  
  .shop-section {
    padding: 24px 0;
  }
  
  .shop-section h2 {
    font-size: 1.1rem;
  }
  
  .pagination {
    gap: 4px;
    padding: 20px 0 8px;
  }
  
  .pagination button,
  .pagination .page-item {
    min-width: 34px;
    height: 34px;
    font-size: 12px;
    border-radius: 8px;
    padding: 0 8px;
  }
  
  .pagination .page-nav {
    padding: 0 12px;
    font-size: 12px;
  }
  
  .shop-review-form {
    padding: 14px;
  }
  
  .shop-review-form__stars i {
    font-size: 20px;
  }
}

/* ============================================================
   ANIMATIONS — smooth loading states
   ============================================================ */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.shop-passport__card {
  animation: fadeSlideUp 0.6s var(--shop-transition) both;
}

.p-grid > * {
  animation: fadeSlideUp 0.5s var(--shop-transition) both;
}

.p-grid > *:nth-child(1) { animation-delay: 0.04s; }
.p-grid > *:nth-child(2) { animation-delay: 0.08s; }
.p-grid > *:nth-child(3) { animation-delay: 0.12s; }
.p-grid > *:nth-child(4) { animation-delay: 0.16s; }
.p-grid > *:nth-child(5) { animation-delay: 0.20s; }
.p-grid > *:nth-child(6) { animation-delay: 0.24s; }

/* ============================================================
   EMPTY STATE — shop not found / no products
   ============================================================ */
.shop-not-found {
  text-align: center;
  padding: 100px 20px;
  animation: fadeSlideUp 0.5s var(--shop-transition) both;
}

.shop-not-found i {
  font-size: 3rem;
  color: var(--brand);
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
}

.empty-state i {
  font-size: 2.4rem;
  color: var(--line);
  margin-bottom: 16px;
}

.empty-state h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin-bottom: 6px;
}