/* Section titles */
.h2 { 
  font-size: 21px; 
  line-height:1.15; 
  margin: clamp(30px, 5vw, 40px) clamp(18px, 2vw, 20px) 10px; 
  font-weight:700;
  color: #000;
}

/* Horizontal rails */
.rail__track {
	display:grid; 
	grid-auto-flow:column; 
	grid-auto-columns: minmax(260px, 340px);
	gap:clamp(8px, 1.5vw, 14px); 
	overflow:auto; 
	padding:0 clamp(14px, 2vw, 18px) 6px; 
	scroll-snap-type: x mandatory; 
	scroll-padding-left: clamp(14px, 2vw, 18px); /* snap will respect this */

	scrollbar-width: none;         /* Firefox */
	-ms-overflow-style: none;      /* IE / old Edge */
}

.rail__track > * { 
  	scroll-snap-align:start 
}

/* 4-column grid for main list */
.grid3 {
   display:grid; 
	row-gap: 35px;     /* vertical gap */
  	column-gap: clamp(12px, 1vw, 20px);
   grid-template-columns: repeat(4, minmax(0,1fr));
   padding: 0 clamp(14px, 2vw, 18px);
}


.toolbar {
  display:flex; 
  gap:16px; 
  align-items:center; 
  justify-content:flex-start;
  margin: 12px 0 18px;
}

.cats {
  display:flex; 
  gap:clamp(0px, 0.05vw, 5px); 
  overflow:auto; 
  padding:clamp(8px, 2vw, 18px) 0 4px;
  margin: 0 18px;
  -webkit-overflow-scrolling: touch;
}

.cat {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:0px clamp(8px, 2vw, 12px) 10px; 
  border:0;
  background:transparent; 
  cursor:pointer;
  user-select:none;
}

.cat img {
  width:42px; 
  height:42px; 
  display:block; 
  object-fit:contain;
  transition: transform .25s ease, filter .2s ease;
}

.cat span{ 
   font-size:12px; 
   color:#111827; 
}

.cat.is-active img{ 
   transform: rotate(30deg); 
}

.cats::-webkit-scrollbar { 
  display:none 
}
.results-header {
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  gap:12px; 
  margin:10px 20px 14px;
}

.results-left { 
   font-weight:600; 
}

.btn-reset {
  appearance:none; 
  border:0; 
  background:#f1f3f5;
  padding:10px 20px; 
  border-radius:8px; 
  font-size: 15px;
  font-weight: 600;
  cursor:pointer;
}

.btn-reset:hover { 
   background:#e1e3e5; 
}

.card__img {
  position:relative; 
  border:1px solid #e5e7eb; 
  border-radius:20px;  
  width:100%; 
  aspect-ratio: 20/10; 
  overflow:hidden;
}

.card__img img { 
    width:100%; 
    height:100%; 
    object-fit:cover 
}

.card__img--bottom { 
    margin-top:auto 
}

.title-line {
  margin-top: 3px;
  display:flex;
  align-items:center;
  gap:8px; 
}

.cat .icon{
  width:62px; 
  height:62px;
  border-radius:50%;
  display:grid; 
  place-items:center;
  background: transparent; 
  box-shadow: none;
  transition: background-color .18s ease, box-shadow .18s ease;
}

.cat .icon img{
  width:48px; 
  height:48px;
  transform: rotate(0deg);
  transition: transform .25s ease; 
}

.cat.is-active .icon{
  background:#ffe6d7;  
}

.cat.is-active .icon img{
  transform: rotate(30deg);  
}

.cat .label{ 
  font-size:13px; 
  color:#000;
  font-weight: 500; 
}

.cat.is-active .label{ 
  font-weight:600; 
}

.rating {
  white-space:nowrap;
  font-weight:600;
  font-size: 14px;
  color: #000;
}

.card {
  scroll-snap-align: center; 
}


.card__body { 
    padding:0px 7px 0px 7px; 
    display:flex; 
    flex-direction:column; gap:0px 
}

.card__body p { 
    margin:0; 
    color:#556070; 
    flex:1 1 auto 
}

.is-hidden { 
   display: none !important; 
}

[hidden]{ 
   display:none !important; 
}

.fav {
    position:absolute; 
    right:10px; 
    top:10px; 
    width:40px; 
    height:40px; 
    border-radius:999px; 
    display:grid; 
    place-items:center;
    background:rgba(0,0,0,.35); 
    color:#fff; 
    font-size:20px;
}

.meta { 
    color:#444; 
    display:flex; 
    gap:10px; 
    font-size: 13px; 
    flex-wrap:wrap 
}

.title {
  flex:1;          
  min-width:0;           
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  color: #000;
  text-overflow:ellipsis;
}

.rdKitchenMedia{
  position:relative;
  overflow:hidden;          /* keeps it within rounded corners */
}

.rdFavBtn{
  position:absolute;
  top:5px;
  right:5px;
  width:40px;
  height:40px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.70);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.rdFavBtn .rdFavIcon{
  width:19px;
  height:19px;
  display:block;
  margin-top: 2px;
  filter: brightness(0) invert(1);
}

.rdFavBtn.is-disabled,
.rdFavBtn:disabled{
  cursor:default;
  pointer-events:none;      /* not clickable when logged out */
}

.metaTime{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.metaCarIcon{
  width:14px;
  height:14px;
  display:block;
  margin-bottom: 1px;
}


@media (max-width: 1200px) { 
   .grid3 { 
      grid-template-columns: 
      repeat(3, minmax(0,1fr)); 
   } 

  .cats {
      padding:clamp(8px, 2vw, 18px) clamp(12px, 3vw, 18px) 4px;
      margin: 0 0;
   }
}

@media (max-width: 900px) { 
  .grid3 { 
    grid-template-columns: 
    repeat(2, minmax(0,1fr)); 
  } 
}

@media (max-width: 600px) {  
  .grid3 { 
    grid-template-columns: 1fr; 
  } 
}

/* accessibility: reduce motion if user prefers */
@media (prefers-reduced-motion: reduce) {
  .cat .icon img { 
    transition:none; 
  }
}

/* ===== Fullscreen skeleton overlay (search boot) ===== */
.rdSearchSkeleton{
  position: fixed;
  left: 0;
  right: 0;

  /* start BELOW the fixed header */
  top: clamp(60px, 10vw, 66px);
  height: calc(100vh - clamp(60px, 10vw, 66px));

  /* keep it under the header even if heights differ slightly */
  z-index: 90;

  background: #fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}


.rdSearchSkeleton__wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 14px 40px;
}

/* base shimmer */
.rd-skel{
  background: linear-gradient(90deg, #f1f2f4 0%, #e7e9ec 40%, #f1f2f4 80%);
  background-size: 200% 100%;
  animation: rdShimmer 1.15s ease-in-out infinite;
  border-radius: 14px;
}

@keyframes rdShimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce){
  .rd-skel{ animation: none; }
}

/* Fake header */
.rdSkTopbar{
  height: clamp(60px, 10vw, 66px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px;
}
.rdSkLogo{ width: 44px; height: 44px; border-radius: 999px; }
.rdSkSearch{ flex: 1; height: 42px; border-radius: 999px; }
.rdSkPill{ width: 42px; height: 42px; border-radius: 999px; }

/* Fake categories */
.rdSkCatsRow{
  display: flex;
  gap: 14px;
  overflow: hidden;
  padding: 18px 2px 10px;
}
.rdSkCat{ width: 62px; height: 62px; border-radius: 999px; flex: 0 0 auto; }

/* Sections */
.rdSkSection{ padding: 16px 2px 6px; }
.rdSkH2{ width: 180px; height: 18px; border-radius: 8px; margin-bottom: 12px; }

/* Rail */
.rdSkRail{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  gap: 14px;
  overflow: hidden;
}

/* Grid */
.rdSkGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .rdSkGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .rdSkGrid{ grid-template-columns: 1fr; }
}

/* Card bits */
.rdSkCard{ border-radius: 18px; overflow: hidden; }
.rdSkCardImg{ width: 100%; height: 150px; border-radius: 18px; }
.rdSkCardBody{ padding: 10px 2px 0; display: grid; gap: 8px; }
.rdSkLine{ height: 12px; border-radius: 8px; }
.rdSkLineLg{ width: 78%; }
.rdSkLineSm{ width: 48%; }