.commerce-page{
  padding:88px 0;
  background:#111111;
  border-top:1px solid rgba(201,150,61,.32);
}
.commerce-head{max-width:780px;margin-bottom:30px}
.commerce-head h1{
  font:800 clamp(36px,4vw,54px)/1.12 "Playfair Display",serif;
  margin:8px 0 12px;
  color:#ffffff;
}
.commerce-head p{color:#c7c7c7;margin:0;line-height:1.72}
.price-note{
  padding:16px 18px;
  border-left:4px solid #c9963d;
  background:#181818;
  color:#d4d4d4;
  font-size:13px;
  margin:24px 0;
  border-radius:8px;
}
.commerce-tools{display:flex;justify-content:space-between;gap:14px;margin:24px 0}
.commerce-filter{display:flex;flex-wrap:wrap;gap:8px}
.commerce-filter button{
  border:1px solid #3e3220;
  background:#1a1a1a;
  color:#efefef;
  border-radius:18px;
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:all .22s ease;
}
.commerce-filter button.active,.commerce-filter button:hover{
  background:#c9963d;
  color:#111111;
  border-color:#c9963d;
}
.commerce-search{
  width:min(320px,100%);
  border:1px solid #3a3a3a;
  border-radius:8px;
  padding:10px 12px;
  background:#1b1b1b;
  color:#ffffff;
  outline:0;
}
.commerce-search:focus{
  border-color:#c9963d;
  box-shadow:0 0 0 4px rgba(201,150,61,.2);
}
.commerce-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.commerce-card{
  padding:20px;
  background:#181818;
  border:1px solid #2f2f2f;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  min-height:250px;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.commerce-card:hover{
  transform:translateY(-4px) scale(1.01);
  border-color:rgba(201,150,61,.5);
  box-shadow:0 14px 28px rgba(0,0,0,.27);
}
.commerce-art{
  height:120px;
  margin:-20px -20px 16px;
  display:grid;
  place-items:center;
  background:#121212;
  color:#c9963d;
  font-size:38px;
  border-bottom:1px solid #2f2f2f;
}
.commerce-art img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.commerce-card small{
  color:#d2bf99;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:700;
}
.commerce-card h2{
  font:700 20px/1.3 "Playfair Display",serif;
  margin:8px 0 12px;
  color:#ffffff;
}
.commerce-meta{display:grid;gap:5px;color:#c8c8c8;font-size:13px;line-height:1.65}
.commerce-price{
  font:800 20px "Inter",sans-serif;
  color:#ffffff;
  margin:16px 0 4px;
}
.commerce-price span{font:600 13px "Inter",sans-serif;color:#c8c8c8}
.commerce-card .btn{
  margin-top:auto;
  align-self:flex-start;
  background:#1f1f1f;
  color:#f5f5f5;
  min-height:40px;
  font-size:12px;
  border:1px solid #3b3b3b;
  border-radius:7px;
  transition:all .22s ease;
}
.commerce-card .btn:hover{
  transform:translateY(-1px);
  border-color:#c9963d;
}
.quote-banner{
  display:none;
  position:sticky;
  bottom:12px;
  z-index:4;
  margin:20px auto 0;
  width:min(640px,calc(100% - 28px));
  padding:12px 14px;
  background:#161616;
  color:#ffffff;
  border:1px solid #3c301f;
  border-radius:8px;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
}
.quote-banner.show{display:flex}
.quote-banner a{
  background:#c9963d;
  color:#111111;
  border-radius:6px;
  padding:8px 10px;
  font-weight:800;
  font-size:12px;
}
.price-calculator{
  background:#181818;
  border:1px solid #2f2f2f;
  border-radius:10px;
  padding:16px;
  margin:18px 0;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.price-calculator h3{margin:0 0 8px;font:700 22px "Playfair Display",serif;color:#ffffff}
.price-calculator .calc-note{font-size:12px;color:#d1d1d1;margin-bottom:10px}
.price-calculator .calc-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.price-calculator .calc-row select,
.price-calculator .calc-row input{
  flex:1;
  padding:10px;
  border:1px solid #3a3a3a;
  border-radius:7px;
  background:#121212;
  color:#ffffff;
}
.price-calculator .calc-row select:focus,
.price-calculator .calc-row input:focus{
  outline:2px solid rgba(201,150,61,.7);
  outline-offset:1px;
}
.price-calculator .calc-row .calc-unit{min-width:54px;color:#c8c8c8;font-size:13px}
.price-calculator .calc-row .calc-price{min-width:140px;color:#ffffff;font-weight:700}
.price-calculator .calc-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.price-calculator .calc-total{display:flex;gap:8px;align-items:center;color:#f0f0f0}
.price-calculator .calc-total b{font-size:20px;color:#ffffff}

@media(max-width:850px){
  .commerce-grid{grid-template-columns:repeat(2,1fr)}
  .commerce-tools{flex-direction:column}
  .commerce-search{width:100%}
}
@media(max-width:700px){
  .price-calculator .calc-row{flex-direction:column;align-items:stretch}
  .price-calculator .calc-row .calc-unit,.price-calculator .calc-row .calc-price{min-width:unset;text-align:left}
}
@media(max-width:560px){
  .commerce-page{padding:56px 0}
  .commerce-grid{grid-template-columns:1fr}
  .commerce-card{min-height:220px}
}

@media(max-width:480px){
  .commerce-page{padding:50px 0}
  .commerce-head h1{font-size:clamp(30px,9.5vw,38px);line-height:1.14}
  .commerce-head p{font-size:15px;line-height:1.72}
  .price-note{padding:14px;border-radius:7px}
  .commerce-tools{margin:18px 0}
  .commerce-filter{gap:6px}
  .commerce-filter button{padding:8px 10px;font-size:11px}
  .commerce-search{padding:10px;font-size:14px}
  .commerce-card{padding:16px;border-radius:9px}
  .commerce-art{height:108px;margin:-16px -16px 14px}
  .commerce-card h2{font-size:19px}
  .commerce-card .btn{min-height:38px;border-radius:7px}
  .price-calculator{padding:14px;border-radius:9px}
  .price-calculator h3{font-size:20px}
  .price-calculator .calc-row select,
  .price-calculator .calc-row input{min-height:42px}
  .quote-banner{border-radius:7px;font-size:12px;padding:10px 12px}
}