/* ARCA live inventory grid.
   Loaded only by the material landing pages. Kept out of main.css so the other
   35 pages carry none of this weight and are not exposed to the change. */

.inv-controls{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;margin:0 0 26px}
.inv-filter{display:flex;flex-direction:column;gap:7px;min-width:172px;flex:0 1 auto}
.inv-filter-label{font-family:var(--font-head);font-size:.62rem;font-weight:600;letter-spacing:1.7px;text-transform:uppercase;color:var(--gray-text)}
.inv-select{appearance:none;-webkit-appearance:none;width:100%;padding:12px 40px 12px 16px;border:1px solid var(--gray-mid);border-radius:var(--r-sm,1.3rem);background-color:var(--white);color:var(--text);font-family:var(--font-body);font-size:.9rem;line-height:1.2;cursor:pointer;transition:border-color .22s ease,box-shadow .22s ease;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238b867b' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.inv-select:hover{border-color:var(--green-soft)}
.inv-select:focus-visible{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(97,107,83,.16)}

.inv-reset{align-self:flex-end;padding:12px 20px;border:1px solid var(--gray-mid);border-radius:var(--r-sm,1.3rem);background:transparent;color:var(--gray-text);font-family:var(--font-head);font-size:.65rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:color .22s,border-color .22s}
.inv-reset:hover{color:var(--green);border-color:var(--green)}

.inv-count{margin:0 0 22px;font-size:.86rem;color:var(--gray-text);letter-spacing:.2px}

.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:clamp(18px,2.2vw,32px)}

.inv-card{margin:0;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--gray-light);border-radius:var(--r,1.8rem);overflow:hidden;transition:transform .32s var(--ease-out,ease),box-shadow .32s var(--ease-out,ease),border-color .32s ease}
.inv-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--gray-mid)}

.inv-media{position:relative;aspect-ratio:1/1;background:var(--cream);overflow:hidden}
.inv-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out,ease)}
.inv-card:hover .inv-media img{transform:scale(1.045)}
/* Some catalog rows carry no image. Show the stone, not a broken icon. */
.inv-media-fallback{background:linear-gradient(135deg,var(--cream) 0%,var(--gray-light) 52%,var(--green-pale) 100%)}
.inv-media-fallback::after{content:"ARCA";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:.7rem;font-weight:600;letter-spacing:3.4px;color:var(--green-soft);opacity:.5}

.inv-badge{position:absolute;top:12px;left:12px;padding:6px 13px;border-radius:40px;background:var(--green);color:#fff;font-family:var(--font-head);font-size:.56rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}

.inv-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:7px;flex:1}
.inv-name{margin:0;font-family:var(--font-head);font-size:1rem;font-weight:600;line-height:1.28;color:var(--dark);letter-spacing:.1px}
.inv-meta{margin:0;font-size:.78rem;color:var(--gray-text);line-height:1.45}
.inv-series{margin:0;font-size:.72rem;font-style:italic;color:var(--green-soft)}
.inv-stock{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.3px;color:var(--green);display:flex;align-items:center;gap:7px}
.inv-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto}

.inv-card .stone-cta{margin-top:auto;align-self:flex-start;padding:9px 18px;border:1.5px solid var(--green);border-radius:40px;background:transparent;color:var(--green);font-family:var(--font-head);font-size:.62rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s}
.inv-card .stone-cta:hover{background:var(--green);color:#fff}

.inv-more{display:block;margin:38px auto 0}

@media (max-width:600px){
  .inv-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .inv-body{padding:14px 14px 18px;gap:6px}
  .inv-name{font-size:.87rem}
  .inv-meta{font-size:.71rem}
  .inv-card .stone-cta{font-size:.58rem;padding:8px 14px;letter-spacing:1.2px}
  .inv-filter{min-width:0;flex:1 1 calc(50% - 9px)}
  .inv-controls{gap:12px}
}

@media (prefers-reduced-motion:reduce){
  .inv-card,.inv-media img{transition:none}
  .inv-card:hover{transform:none}
  .inv-card:hover .inv-media img{transform:none}
}

/* Zero-match filter state. Never a dead end for a paid visitor. */
.inv-empty{text-align:center;padding:44px 24px;border:1px dashed var(--gray-mid);border-radius:var(--r,1.8rem);background:var(--off-white)}
.inv-empty-title{margin:0 0 10px;font-family:var(--font-head);font-size:1.05rem;font-weight:600;color:var(--dark)}
.inv-empty-sub{margin:0 auto 22px;max-width:52ch;font-size:.88rem;line-height:1.6;color:var(--gray-text)}

/* A class rule with display: wins over the UA [hidden] rule, so .inv-grid
   (display:grid) and .inv-more (display:block) stayed visible when hidden was
   set. Equal-specificity resolves by source order, so these go last. */
.inv-grid[hidden],
.inv-more[hidden],
.inv-empty[hidden],
.inv-reset[hidden],
.inv-filter[hidden]{display:none !important}

/* The stock dot must sit on the first line when the label wraps (it does at
   375px), not float centred against two lines. */
.inv-stock{align-items:flex-start}
.inv-stock::before{margin-top:.42em}
/* Comfortable tap targets on touch, per the 60+ usability standard. */
@media (max-width:600px){
  .inv-select{padding-top:14px;padding-bottom:14px}
  .inv-card .stone-cta{padding:11px 14px}
}