.shop{
  --shop-card: var(--card);
  --shop-text: var(--text);
  --shop-muted: var(--muted);
  --shop-line: var(--line);
  --shop-accent: var(--accent);
  --shop-radius:16px;
  --shop-pad:16px;
  color: var(--shop-text);
  color-scheme: dark;
}

.shop a{color:inherit;text-decoration:none}

.shop .hero{padding:8px 0 18px 0}

.shop .shop-surface{
  margin-top: 16px;
  background: var(--card);
  border: 1px solid rgba(184,115,51,.18);
  border-radius: var(--shop-radius);
  padding: var(--shop-pad);
  box-shadow: var(--shadow);
}

/* Let the wrapper be the "field" — keep controls/cart as content blocks */
.shop .shop-surface > .controls.card,
.shop .shop-surface > #cartCard.card{
  background: transparent;
  border: 0;
  padding: 0;
}

.shop .shop-surface > #cartCard.cart{ margin-top: 16px; }
.shop .shop-surface > .grid{ margin-top: 16px; }

/* The global .hero becomes a 2-column layout on wide screens.
   Shop's hero has no side logo column, so keep it single-column and centered. */
@media (min-width: 900px){
  .shop .hero{grid-template-columns:1fr;text-align:center}
  .shop .hero h1{grid-column:1}
}

.shop .card{
  background:var(--shop-card);
  border:1px solid var(--shop-line);
  border-radius:var(--shop-radius);
  padding:var(--shop-pad);
}

.shop .controls{display:flex;gap:14px;align-items:end;flex-wrap:wrap}

.shop .shop-actions{margin-left:auto;display:flex;gap:10px;align-items:end}
.shop .shop-actions .badge{min-width:1.8em;text-align:center}

.shop label{display:flex;flex-direction:column;gap:6px;color:var(--shop-muted);font-size:14px}

.shop input,
.shop select{
  background: var(--card2);
  border:1px solid var(--shop-line);
  color:var(--shop-text);
  padding:10px 12px;
  border-radius:12px;
  min-width:220px;
  color-scheme: dark;
}

/* Dropdown list (opened menu) — best-effort across browsers */
.shop select option{
  background: var(--card2);
  color: var(--shop-text);
}

.shop .grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
  align-items:stretch;
}

/* List layout: one product card per row (minimal change, keeps card internals the same) */
.shop .grid.is-list{
  grid-template-columns: 1fr;
}

.shop .cart{margin-top:0}

.shop .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--shop-line);
  background: var(--card2);
  color:var(--shop-text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
}

.shop .btn:hover{border-color:var(--shop-accent)}
.shop .btn:active{transform:translateY(1px)}

.shop .btn.primary{border-color:var(--shop-accent); color:var(--shop-accent)}

.shop .cart-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--shop-line)}
.shop .cart-row:first-of-type{border-top:none;padding-top:0}
.shop .cart-row:last-of-type{padding-bottom:0}
.shop .cart-title{font-weight:800}
.shop .cart-actions{display:flex;align-items:center;gap:10px}
.shop .qty{
  width:74px;
  min-width:74px;
  background: var(--card2);
  border:1px solid var(--shop-line);
  color:var(--shop-text);
  padding:10px 12px;
  border-radius:12px;
}

.shop .product{
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform .12s ease;
  height:100%;
}

.shop .product-link{display:flex;flex-direction:column;gap:10px; flex:1}

.shop .product-thumb-wrap{position:relative}

.shop .product-badge-new{
  position:absolute;
  top:10px;
  left:10px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--brass-main);
  background: var(--card2);
  color: var(--brass-light);
  font-weight:800;
  font-size:13px;
  line-height:1;
}

.shop .product-body{flex:1; display:flex; flex-direction:column; gap:6px}
.shop .product-title{font-weight:800; line-height:1.25}
.shop .product-title,
.shop .product-excerpt{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.shop .product-title{-webkit-line-clamp:2; min-height:calc(1.25em * 2); max-height:calc(1.25em * 2)}
.shop .product-excerpt{-webkit-line-clamp:2; min-height:calc(1.55em * 2); max-height:calc(1.55em * 2)}

.shop .product-excerpt-empty{visibility:hidden}

.shop .product-meta{margin-top:auto; align-items:flex-end}

.shop .product-meta > .badge:first-child{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 62%;
}

.shop .product > .btn{margin-top:auto; width:100%; white-space:nowrap}

.shop .product:hover{transform:translateY(-2px)}

.shop .thumb{
  width:100%;
  aspect-ratio:4/3;
  border-radius:14px;
  border:1px solid var(--shop-line);
  background: var(--card2);
  display:block;
  object-fit:cover;
}

/* Product grid thumbnails: fit entire image without cropping */
.shop .product .thumb{object-fit:contain}

.shop .meta{display:flex;justify-content:space-between;gap:10px}
.shop .price{color:var(--shop-accent);font-weight:700}
.shop .badge{font-size:12px;color:var(--shop-muted)}
.shop .back{display:inline-block;margin:8px 0 14px 0;color:var(--shop-muted)}
.shop h1,
.shop h2,
.shop h3{margin:0}

/* Product detail gallery */
.shop .product-gallery{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop .product-main-wrap{
  position: relative;
  width: 100%;
  max-width: 520px;
}

.shop .product-image-main{
  width: 100%;
  max-width: 520px;
  border-radius: 14px;
  border: 1px solid var(--shop-line);
  background: var(--card2);
  display: block;
  object-fit: contain;
}

.shop .product-gallery-grid{
  max-width: 520px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.shop .product-image-thumb{
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 14px;
  border: 1px solid var(--shop-line);
  background: var(--card2);
  display: block;
  object-fit: contain;
  cursor: pointer;
}

.shop .product-image-thumb.is-active{
  border-color: var(--shop-accent);
}