/* Homepage category cards (includes/Storefront/HomeCategories.php, templates/woocommerce/rt-home-categories.php): front
   page only, while the category navigation is on. They sit right below the white search card, at its full width.
   Colours and corners follow the homepage search panel (home-search.css): #e1e5e9 lines, #1f2429 text, #5f656c secondary
   text, #ff9933 / #e8821a accent; 5 px like the white search card. Orange is never text colour (contrast). The product
   photos are white-background cut-outs on a white card (Karl 07.10: no grey square behind them). */
.rt-home-cats { margin:20px 0 0; }
.rt-home-cats .rt-home-cats-list { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.rt-home-cats .rt-home-cats-item { margin:0; padding:0; list-style:none; }
.rt-home-cats .rt-home-cats-item::before { content:none; }
.rt-home-cats .rt-home-cat { box-sizing:border-box; display:grid; grid-template-columns:128px minmax(0, 1fr); grid-template-areas:"media label" "media more"; align-items:center; column-gap:18px; row-gap:6px; height:100%; padding:10px 16px 10px 10px; border:1px solid #e1e5e9; border-radius:5px; background:#fff; color:#1f2429; text-decoration:none; box-shadow:0 2px 6px rgba(31, 36, 41, .05); transition:border-color .15s ease, box-shadow .15s ease; }
.rt-home-cats .rt-home-cat:hover { border-color:#ff9933; color:#1f2429; box-shadow:0 8px 20px rgba(31, 36, 41, .1); }
.rt-home-cats .rt-home-cat:focus-visible { outline:2px solid #1f2429; outline-offset:2px; border-color:#ff9933; }
.rt-home-cats .rt-home-cat-media { grid-area:media; display:block; aspect-ratio:4 / 3; overflow:hidden; background:#fff; }
.rt-home-cats .rt-home-cat-media img { display:block; width:100%; height:100%; max-width:none; margin:0; object-fit:contain; transition:transform .25s ease; }
.rt-home-cats .rt-home-cat:hover img { transform:scale(1.05); }
.rt-home-cats .rt-home-cat-label { grid-area:label; align-self:end; overflow-wrap:break-word; hyphens:manual; font:600 22px/1.15 var(--wd-title-font, sans-serif); color:#1f2429; }
.rt-home-cats .rt-home-cat-more { grid-area:more; align-self:start; display:inline-flex; align-items:center; gap:8px; font:500 13px/1.3 var(--wd-text-font, sans-serif); color:#5f656c; }
.rt-home-cats .rt-home-cat-more::after { content:""; flex:0 0 auto; width:7px; height:7px; border:solid #e8821a; border-width:2px 2px 0 0; transform:rotate(45deg); transition:transform .15s ease; }
.rt-home-cats .rt-home-cat:hover .rt-home-cat-more { color:#1f2429; }
.rt-home-cats .rt-home-cat:hover .rt-home-cat-more::after { transform:translateX(3px) rotate(45deg); }

/* Narrow desktop: a smaller image so "Mootorrattarehvid" keeps to one line where it can (it breaks after "Mootorratta-"). */
@media (min-width:1025px) and (max-width:1199px) {
  .rt-home-cats .rt-home-cat { grid-template-columns:104px minmax(0, 1fr); column-gap:14px; }
  .rt-home-cats .rt-home-cat-label { font-size:20px; }
}

/* Tablet: the image on top, label and link line below it. */
@media (max-width:1024px) {
  .rt-home-cats .rt-home-cats-list { gap:16px; }
  .rt-home-cats .rt-home-cat { grid-template-columns:minmax(0, 1fr); grid-template-areas:"media" "label" "more"; row-gap:4px; padding:8px 8px 14px; }
  .rt-home-cats .rt-home-cat-media { aspect-ratio:16 / 10; margin:0 0 6px; }
  .rt-home-cats .rt-home-cat-label { align-self:start; padding:0 6px; font-size:20px; }
  .rt-home-cats .rt-home-cat-more { padding:0 6px; }
}

/* Phone: three compact tiles in one row, the label centred; the link line is left out (the whole tile is the link). */
@media (max-width:600px) {
  .rt-home-cats { margin-top:16px; }
  .rt-home-cats .rt-home-cats-list { gap:8px; }
  .rt-home-cats .rt-home-cat { grid-template-areas:"media" "label"; align-content:start; row-gap:0; padding:5px 5px 10px; }
  .rt-home-cats .rt-home-cat-media { aspect-ratio:4 / 3; margin:0 0 8px; }
  .rt-home-cats .rt-home-cat-label { padding:0 2px; text-align:center; font-size:15px; line-height:1.2; }
  .rt-home-cats .rt-home-cat-more { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .rt-home-cats .rt-home-cat,.rt-home-cats .rt-home-cat-media img,.rt-home-cats .rt-home-cat-more::after { transition:none; }
  .rt-home-cats .rt-home-cat:hover img { transform:none; }
  .rt-home-cats .rt-home-cat:hover .rt-home-cat-more::after { transform:rotate(45deg); }
}