/* A reusable frame for any uploaded image; original files are never modified. */
:root{--product-photo-bg:#f5f2eb}
.products-grid{align-items:stretch;gap:16px}
.product-card{display:flex;flex-direction:column;border:1px solid #e8e5dc;border-radius:17px;box-shadow:0 5px 24px #283d2c08}
.product-card:hover{box-shadow:0 12px 30px #283d2c16}
.product-picture{aspect-ratio:1;margin:9px 9px 0;border:0;border-radius:11px;background:var(--product-photo-bg);isolation:isolate;overflow:hidden}
.product-picture .product-open{display:block;width:100%;height:100%;background:transparent}
.product-picture img{display:block;width:100%;height:100%;padding:clamp(12px,2vw,24px);object-fit:contain;object-position:center;mix-blend-mode:multiply;filter:none;background:transparent}
.product-picture::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid #e9e2d358;border-radius:inherit}
.product-badge{position:absolute;z-index:2;inset-inline-start:10px;top:10px;border-radius:999px;padding:6px 11px;line-height:1.4;font-size:10px;font-weight:800;box-shadow:0 3px 12px #0002;white-space:nowrap}
.product-badge-sale{background:#233f2eea;color:#fff;border:1px solid #fff8}
.product-badge-popular{background:#f6d795;color:#263d2e;border:1px solid #fff9}
.product-badge-popular i{font-size:9px;margin-inline-end:3px}
.product-card .favorite-button{z-index:3;top:19px;inset-inline-end:19px;background:#fffefafa}
.product-info{display:flex;flex-direction:column;flex:1;padding:14px 16px 17px}
.product-unit{min-height:17px}
.product-price-line{margin-top:auto;padding-top:15px;gap:7px;align-items:baseline}
.product-price{color:#203e2d;font-size:23px}
.product-old{font-size:12px}
.selected-weight{font-size:10px;color:#6c7268;white-space:nowrap}
.product-weight-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px;direction:rtl}
.product-weight-options button{min-height:37px;padding:5px 2px;border:1px solid #deded4;border-radius:8px;background:#fff;color:#314337;font-size:11px;font-weight:700;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.product-weight-options button:hover{border-color:#31543c}
.product-weight-options button[aria-pressed="true"]{background:#21402e;border-color:#21402e;color:#fff;box-shadow:0 2px 7px #21402e24}
.product-weight-options button:focus-visible,.product-add:focus-visible{outline:3px solid #c9a65d;outline-offset:2px}
.product-add{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;margin-top:11px;min-height:41px;background:#1f402d;color:white;border-radius:999px;font-size:12px;font-weight:800;transition:background .15s}
.product-add:hover{background:#325a3b}
.product-add i{font-size:12px}
.product-card .product-quantity{margin-top:12px;padding-top:7px}
.qv-gallery .qv-img{background:var(--product-photo-bg);border-color:#ebe5d9;border-radius:13px;isolation:isolate}
.qv-gallery .qv-img img{border-radius:9px;mix-blend-mode:multiply;object-fit:contain;padding:16px}
.qv-weights{flex:1;min-width:0;max-width:260px}
.qv-weights>span:first-child{display:block;color:#667468;font-size:11px;font-weight:700}
.qv-weights .product-weight-options{margin-top:7px}
.qv-weights .product-weight-options button{min-height:42px}
@media(max-width:540px){
  .products-grid{gap:10px}
  .product-picture{aspect-ratio:1;margin:6px 6px 0;border-radius:9px}
  .product-info{padding:10px 10px 11px}
  .product-price-line{padding-top:10px;flex-wrap:wrap}
  .product-price{font-size:18px}
  .product-old{font-size:10px}
  .product-badge{top:6px;inset-inline-start:6px;padding:4px 7px;font-size:8px}
  .product-card .favorite-button{top:12px;inset-inline-end:12px}
  .product-weight-options{gap:4px;margin-top:9px}
  .product-weight-options button{min-height:31px;font-size:9px;padding:4px 1px}
  .product-add{min-height:37px;margin-top:9px;font-size:10px}
  .qv-weights .product-weight-options button{min-height:39px;font-size:10px}
  .qv-purchase:has(.qv-weights){align-items:flex-end}
  .qv-purchase:has(.qv-weights) .qv-add{flex:1;min-width:0}
  .qv-purchase:has(.qv-weights) .qv-add strong{display:none}
}
@media(max-width:360px){
  .product-info{padding:9px 8px 10px}
  .product-price{font-size:16px}
  .product-weight-options button{font-size:8px}
  .product-badge{font-size:7px}
  .selected-weight{font-size:8px}
}