/* =========================================================================
   PRODUCT CATALOGUE - family bar + product cards.
   Loaded on the shop and on product category archives only.
   Site tokens throughout; the card language matches the rest of the theme.
   ========================================================================= */

/* WooCommerce ships its own float/width rules for the loop with enough
   specificity to beat a plain override, hence the !important here - measured,
   not guessed: without it the cards render at 25% of their grid cell. */
.woocommerce ul.products{
  list-style:none;margin:0!important;padding:0!important;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none!important}
.woocommerce ul.products li.product{
  width:auto!important;float:none!important;margin:0!important;padding:0!important;
  display:flex;flex-direction:column;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after{content:none!important}

/* The catalogue supplies its own title/description block, and the approved
   design has neither. The heading stays in the document for search engines
   and screen readers, just not on screen. */
.woocommerce-products-header{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.woocommerce .woocommerce-result-count{display:none}

/* Retire the previous loop-card styling. It painted the list item itself and
   gave every image a panel of its own - and its "background:var(--white)"
   resolves to #000 on the dark theme, so the photo sat in a black box inside
   this card's white one. All of it is !important in style.css, so unwinding it
   has to be too. */
.woocommerce ul.products li.product{
  padding:0!important;background:none!important;border:0!important;
  border-radius:0!important;overflow:visible!important;
}
.woocommerce ul.products li.product:hover{background:none!important}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img{
  background:none!important;padding:0!important;margin:0!important;
  height:100%!important;border-radius:0!important;
}
.woocommerce ul.products li.product:hover img{transform:none}
.woocommerce ul.products li.product h2.rits-cat-name{
  font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:500;letter-spacing:-.02em;
  padding:0!important;margin:0 0 10px;
}

/* --- gallery stepping ------------------------------------------------------
   Frames are stacked and crossfaded rather than scrolled: every frame keeps
   its own aspect ratio inside the panel, which a scroller would not allow. */
.rits-cat-shot{position:relative}
.rits-cat-shot-link{display:block;width:100%;height:100%;position:relative}
.woocommerce ul.products li.product .rits-cat-frame{
  position:absolute!important;inset:0;width:100%!important;height:100%!important;
  object-fit:contain;opacity:0;transition:opacity .28s var(--ease);
}
.woocommerce ul.products li.product .rits-cat-frame.is-active{opacity:1}

.rits-cat-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(10,13,17,.14);background:rgba(255,255,255,.92);
  opacity:0;transition:opacity .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.rits-cat-nav.is-prev{left:10px}
.rits-cat-nav.is-next{right:10px}
.rits-cat-nav::before{
  content:"";position:absolute;inset:0;background:#0A0D11;
  -webkit-mask:no-repeat center/13px 13px;mask:no-repeat center/13px 13px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}
.rits-cat-nav.is-prev::before{transform:scaleX(-1)}
.rits-cat-nav:hover{background:#fff;border-color:rgba(10,13,17,.3)}
.rits-cat-shot:hover .rits-cat-nav,
.rits-cat-nav:focus-visible{opacity:1}
.rits-cat-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.rits-cat-count{
  position:absolute;right:12px;bottom:10px;z-index:3;
  font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:.04em;
  color:#3D444C;background:rgba(255,255,255,.9);
  border-radius:999px;padding:3px 9px;
  opacity:0;transition:opacity .2s var(--ease);
}
.rits-cat-shot:hover .rits-cat-count{opacity:1}

/* Touch has no hover, so the controls have to be permanently visible there -
   otherwise the gallery is invisible on exactly the devices that can't
   discover it. */
@media (hover:none){
  .rits-cat-nav,.rits-cat-count{opacity:1}
  .rits-cat-nav{width:38px;height:38px}
}

@media (prefers-reduced-motion: reduce){
  .woocommerce ul.products li.product .rits-cat-frame{transition-duration:.12s!important}
}

/* --- family bar ----------------------------------------------------------
   Horizontal, centred, evenly distributed; becomes a swipe strip on narrow
   screens rather than wrapping to a second row. */
.rits-cat-fams{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--white);position:sticky;top:var(--hdr-h);z-index:30;
}
/* A gathered, centred cluster - the items size to their own labels and sit on
   a shared gap, rather than each stretching to an equal share of the full
   page width, which spreads seven items across 1360px and reads as a toolbar
   instead of a set of choices. */
.rits-cat-fams-in{
  display:flex;justify-content:center;align-items:stretch;
  gap:clamp(8px,1.3vw,22px);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.rits-cat-fams-in::-webkit-scrollbar{display:none}

.rits-cat-fam{
  flex:0 0 auto;max-width:116px;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 12px 14px;position:relative;
  color:var(--ink-3);text-align:center;
  transition:color .2s var(--ease);
}
.rits-cat-fam-ic{
  width:34px;height:34px;display:grid;place-items:center;
  transition:transform .25s var(--ease),color .2s var(--ease);
}
.rits-cat-fam-ic svg{width:100%;height:100%}
.rits-cat-fam-ic img{width:100%;height:100%;object-fit:contain;opacity:.75;transition:opacity .2s var(--ease)}
/* Two of the family names wrap to a second line. Reserving the space keeps
   every count on the same baseline instead of stepping up and down. */
.rits-cat-fam-name{
  font-family:var(--f-body);font-size:13px;font-weight:500;line-height:1.3;
  max-width:15ch;min-height:2.6em;display:flex;align-items:center;
}
.rits-cat-fam:hover{color:var(--ink)}
.rits-cat-fam:hover .rits-cat-fam-ic{transform:translateY(-2px)}
.rits-cat-fam:hover .rits-cat-fam-ic img{opacity:1}
.rits-cat-fam.is-active{color:var(--ink)}
.rits-cat-fam.is-active .rits-cat-fam-ic{color:var(--accent)}
.rits-cat-fam.is-active .rits-cat-fam-ic img{opacity:1}
.rits-cat-fam.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
}
.rits-cat-fam:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:var(--r-sm)}

/* --- groups --------------------------------------------------------------- */
.rits-cat-group{padding:clamp(38px,4.6vw,68px) 0 0}
.rits-cat-group:last-child{padding-bottom:clamp(48px,6vw,88px)}
.rits-cat-group-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:clamp(18px,2.2vw,28px);margin-bottom:clamp(16px,2vw,26px);
  border-bottom:1px solid var(--line);
}
.rits-cat-group-head h2{font-size:clamp(1.4rem,2.1vw,1.95rem);margin:0}
.rits-cat-group-all{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  font-size:14.5px;font-weight:500;color:var(--accent);
}
.rits-cat-group-all:hover{color:var(--accent-hover)}

/* the round arrow already used by the category cards on /boutique/ */
.rits-cat-arrow{
  width:22px;height:22px;flex:none;border-radius:50%;
  background:var(--accent);position:relative;
  transition:transform .22s var(--ease),background .22s var(--ease);
}
.rits-cat-arrow::before{
  content:"";position:absolute;inset:0;background:#fff;
  -webkit-mask:no-repeat center/11px 11px;mask:no-repeat center/11px 11px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}
.rits-cat-group-all:hover .rits-cat-arrow{transform:translateX(3px);background:var(--accent-hover)}

/* --- grid ----------------------------------------------------------------- */
/* Three per row, fixed - auto-fit would slip to four at wide viewports and
   the cards would stop being scannable. */
.woocommerce ul.products{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.6vw,40px);align-items:stretch;
}
.woocommerce ul.products li.product{display:flex;flex-direction:column}

/* The panel is white on purpose, not decoration: 11 of our 13 product photos
   are JPGs shot on a white background, so on the dark ground each one renders
   as a hard white rectangle. A white plinth absorbs that seam, and a genuinely
   transparent PNG sits on it just as well.
   object-fit:contain keeps every product at its own true proportions - a pole
   display and a cash drawer are not the same shape and shouldn't be cropped
   to pretend otherwise. */
/* White panel behind every product: the photos are shot on white, so on the
   dark ground each would otherwise render as a hard white rectangle. The
   panel absorbs that seam and gives the grid one consistent treatment.
   object-fit:contain keeps each product at its own true proportions - a pole
   display and a cash drawer are not the same shape and shouldn't be cropped
   to pretend otherwise. */
.rits-cat-shot{
  display:block;height:clamp(190px,17vw,250px);
  background:#fff;border-radius:var(--r-card);overflow:hidden;
  padding:clamp(14px,1.6vw,24px);
  margin-bottom:clamp(14px,1.6vw,20px);
}
.rits-cat-shot img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  transition:transform .32s var(--ease);
}
.woocommerce ul.products li.product:hover .rits-cat-shot img{transform:scale(1.035)}

.rits-cat-card{
  flex:1;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:clamp(20px,2.2vw,28px);
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.woocommerce ul.products li.product:hover .rits-cat-card{
  border-color:var(--line-2);transform:translateY(-3px);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.9);
}
.rits-cat-name{
  font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:500;letter-spacing:-.02em;
  margin:0 0 10px;
}
.rits-cat-name a{color:var(--ink)}
.rits-cat-name a:hover{color:var(--accent)}
.rits-cat-desc{
  font-size:14.5px;line-height:1.6;color:var(--ink-2);
  margin:0 0 clamp(18px,2vw,24px);
}

/* Label/value pairs, kept visually lighter than the product name. */
.rits-cat-specs{margin:0 0 clamp(18px,2vw,24px);border-top:1px solid var(--line)}
.rits-cat-specs>div{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.rits-cat-specs dt{font-size:13px;color:var(--ink-3);white-space:nowrap}
.rits-cat-specs dd{
  margin:0;font-size:13.5px;font-weight:500;color:var(--ink);text-align:right;
}
.rits-cat-cta{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:500;color:var(--accent);align-self:flex-start;
}
.rits-cat-cta:hover{color:var(--accent-hover)}
.rits-cat-cta:hover .rits-cat-arrow{transform:translateX(3px);background:var(--accent-hover)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
/* Once the cluster no longer fits, it stops being centred and becomes a strip
   you swipe - centring a scrolled row hides its first items off the left edge. */
@media(max-width:900px){
  .rits-cat-fams-in{justify-content:flex-start;gap:18px}
}
@media(max-width:980px){
  .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  /* one product per row - two would make both the image and the spec values
     too small to read */
  .woocommerce ul.products{grid-template-columns:1fr;gap:30px}
  .rits-cat-shot{height:210px}
  .rits-cat-fam{min-width:96px;padding:14px 8px 12px}
  .rits-cat-fam-ic{width:28px;height:28px}
  .rits-cat-fam-name{font-size:12px}
  .rits-cat-group-head{flex-direction:column;align-items:flex-start;gap:10px}
  .rits-cat-specs dt{white-space:normal}
}

/* The site-wide reduced-motion rule zeroes every transition. The hover lift
   and arrow nudge are feedback on what is clickable, so they stay - shortened
   rather than removed. */
@media (prefers-reduced-motion: reduce){
  .rits-cat-card,.rits-cat-arrow,.rits-cat-shot img,.rits-cat-fam-ic{transition-duration:.12s!important}
  .woocommerce ul.products li.product:hover .rits-cat-shot img{transform:none}
}

/* Light mode: the family bar inverts to dark like the other highlight bars,
   so it reads as a distinct navigation band rather than dissolving into the
   white page. Rescoping the tokens is enough - the label, icon, hover and
   active-underline rules above all draw from them. */
:root[data-theme="light"] .rits-cat-fams{
  --white:#000000;--paper:#161616;--paper-2:#1F1F1F;
  --ink:#FFFFFF;--ink-2:#C9C9C9;--ink-3:#9A9A9A;
  --line:#1F1F1F;--line-2:#2E2E2E;
  --accent:#5B8CFF;--accent-hover:#7BA3FF;
  background:#0D0D0D;
  border-top-color:#0D0D0D;border-bottom-color:#0D0D0D;
}

/* =========================================================================
   PRODUCT PHOTOGRAPHY - catalogue cards
   A fixed-height panel with a fixed padding meant the product filled nearly
   the whole panel on narrow cards (and on phones, where the panel stretches
   to full width but kept its height). The panel now keeps one proportion
   everywhere and insets the product by a share of its size, so a tall pole
   display and a flat cash drawer both sit with the same margin around them.
   No hover zoom: enlarging a photo that is already tight is exactly the
   cropped look this removes.
   ========================================================================= */
.rits-cat-shot{
  height:auto;aspect-ratio:4/3;padding:0;
}
.woocommerce ul.products li.product .rits-cat-frame{
  top:9%!important;left:13%!important;right:auto!important;bottom:auto!important;
  width:74%!important;height:82%!important;max-width:none!important;padding:0!important;object-fit:contain!important;
}
.woocommerce ul.products li.product:hover .rits-cat-shot img{transform:none}
:root[data-theme="light"] .rits-cat-shot{box-shadow:inset 0 0 0 1px var(--line)}

/* view + quote actions at the foot of each card */
.rits-cat-actions{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rits-cat-actions .rits-cat-cta{margin-top:0}
.rits-cat-quote{
  position:relative;z-index:2;
  font-size:13.5px;font-weight:600;color:var(--ink);
  padding:8px 16px;border:1px solid var(--line-2);border-radius:999px;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.rits-cat-quote:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.rits-cat-quote:focus-visible{outline:2px solid var(--accent);outline-offset:2px}