/* RITE CLOTHING — shop page
   layout: Arte-style catalogue. Title + count, category row, then a
   4-up (desktop) / 2-up (phone) grid of 2:3 photos on product-grey.
   Hover swaps the name for the sizes. */

:root{
  --photo-bg:#E5E5E5;   /* matches the product photo backdrop */
  --size-off:#B9BAB8;
  --grid-gap-x:18px;
  --grid-gap-y:64px;
}
@media (max-width:899px){
  :root{ --grid-gap-x:10px; --grid-gap-y:36px; }
}

/* one continuous grey, the same as the photo backdrop */
body.shop-page{background:var(--photo-bg)}

/* ---------- head ---------- */
.shop-head{padding:44px var(--gutter) 0;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.shop-all{text-underline-offset:3px}
.shop-title{
  margin:0;font-size:var(--fs);font-weight:400;
  display:flex;align-items:flex-start;gap:6px;
}
.shop-count{font-size:var(--fs-s);color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.6}

/* ---------- grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--grid-gap-y) var(--grid-gap-x);
  padding:40px var(--gutter) 0;
}
@media (max-width:899px){
  .shop-head{padding-top:28px}
  .grid{grid-template-columns:repeat(2, minmax(0,1fr));padding-top:24px}
}
.grid-empty{grid-column:1/-1;color:var(--muted);margin:24px 0}

/* ---------- product card ---------- */
.card{position:relative;min-width:0}
.card-media{
  display:block;position:relative;aspect-ratio:2/3;max-width:100%;
  background:var(--photo-bg);overflow:hidden;
}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-media:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.card-info{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-top:10px;line-height:18px;
}
.card-main{position:relative;flex:1 1 auto;min-width:0;height:18px}
.card-name{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;
  transition:opacity .15s ease;
}
.card-price{white-space:nowrap;font-variant-numeric:tabular-nums}

.card-sizes,
.card-added{
  position:absolute;left:0;top:0;
  display:flex;align-items:center;gap:12px;white-space:nowrap;
  opacity:0;visibility:hidden;
  transition:opacity .15s ease, visibility 0s linear .15s;
}
.size{
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  line-height:18px;color:var(--ink);
  text-underline-offset:4px;text-decoration-thickness:1px;
}
.size:hover,
.size:focus-visible{text-decoration:underline;outline:0}
.size:disabled{color:var(--size-off);cursor:default;text-decoration:none}
.card-added{color:var(--navy);font-weight:500}

/* sold out */
.card.is-soldout .card-name,
.card.is-soldout .card-price{color:var(--muted)}

/* options visible on hover (mouse) or keyboard focus. Touch devices open the product page instead. */
@media (hover:hover){
  .card.has-sizes:hover .card-name{opacity:0}
  .card:hover .card-sizes{opacity:1;visibility:visible;transition:opacity .15s ease}
}
/* keyboard (separate rules so browsers without :has ignore just these) */
.card.has-sizes:has(:focus-visible) .card-name{opacity:0}
.card:has(:focus-visible) .card-sizes{opacity:1;visibility:visible}

/* just added: short confirmation replaces sizes */
.card.is-added .card-name,
.card.is-added .card-sizes{opacity:0;visibility:hidden}
.card.is-added .card-added{opacity:1;visibility:visible;transition:opacity .15s ease}

@media (max-width:899px){
  .card-info{font-size:var(--fs-s);margin-top:8px}
  .card-sizes{gap:11px}
  .size{font-size:var(--fs-s)}
}

.shop ~ .site-footer{margin-top:64px}