.page{max-width:1160px;margin:0 auto;padding:56px 40px 80px;}

  /* "Load more" / "View all" — the one row that follows a grid. Numbered pages
     used to sit here; a feed you scroll is revealed, not turned. */
  .grid-more{display:flex;justify-content:center;margin-top:48px;}
  .grid-more__btn{text-decoration:none;}
  /* How many stays are still unrevealed, on the button itself. */
  .grid-more__count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:var(--color-primary);color:#fff;font-size:12px;font-weight:700;line-height:1;}

  .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap;}
  .page-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin:0 0 10px;}
  .page-title{font-family:var(--font-display);font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0;}
  .page-sub{margin:10px 0 0;font-size:15px;color:var(--color-text-secondary);max-width:46ch;}
  .page-count{font-size:13px;font-weight:600;color:var(--color-text-secondary);white-space:nowrap;padding-bottom:6px;}

  /* Category filter row (?category=camp|chalet|farm) */
  .page-filters{display:flex;flex-wrap:wrap;gap:10px;margin:-20px 0 32px;}
  /* On a phone the row no longer fits on one line, and a wrapped row aligned to
     the start leaves the last line short and hanging off one edge. Centred, the
     lines read as one block under the heading.

     767px, the site's own phone boundary (the nav pill in styles/app.css turns
     on at the same width), rather than a width measured off this row: the chips
     are category names, so where they wrap moves with the language and with
     whatever categories exist. Measured, the row stops wrapping between 700 and
     760px in BOTH Arabic and English, so 767 covers every wrapping width in
     both and leaves only a narrow band where a single line is centred instead
     of pushed to the ends — which reads fine.

     Paired with the .sortp-btn margin reset in styles/sort-panel.css: its auto
     margin would otherwise still shove the tail of the row out to the edge. */
  @media (max-width:767px){.page-filters{justify-content:center;}}
  /* The applied search (?where / ?from&to / ?guests), directly under it. */
  .page-filters + .page-search{margin-top:-20px;}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  @media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:680px){.grid{grid-template-columns:1fr;}.page{padding:40px 22px 64px;}}

  /* ── CARD ───────────────────────────────────────────────── */
  .prop-card{
    position:relative;background:#fff;border-radius:var(--card-radius,22px);
    box-shadow:0 8px 32px rgba(58,30,14,.11),0 2px 8px rgba(58,30,14,.06);
    overflow:hidden;transition:transform .2s,box-shadow .2s;
  }
  .prop-card:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(58,30,14,.15),0 3px 10px rgba(58,30,14,.07);}

  .g-wrap{position:relative;width:100%;height:218px;border-radius:var(--card-radius,22px) var(--card-radius,22px) 0 0;overflow:hidden;background:var(--color-neutral-200);cursor:grab;user-select:none;}
  .g-wrap:active{cursor:grabbing;}
  .g-track{display:flex;height:100%;transition:transform .36s cubic-bezier(.4,0,.2,1);will-change:transform;}
  .g-slide{flex:0 0 100%;height:100%;background-size:cover;background-position:center;}
  /* Slider arrows — one on each side of the card, glass discs over the photo,
     the same chrome the property page's own gallery uses (.pd-arrow). Placed
     logically: "previous" sits at the inline start, so in Arabic the pair and
     its chevrons mirror without a second rule. z-index 5 clears the gradient
     the full-image layout lays over the photo (.g-wrap::after, z-index 1).
     Revealed on hover so a resting feed stays photographs rather than buttons;
     a touch screen has no hover to reveal them with, so there they stay up. */
  .g-arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:5;
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;padding:0;border:none;border-radius:50%;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    box-shadow:0 2px 10px rgba(38,37,34,.22);
    color:var(--color-text-primary);font-size:13px;cursor:pointer;
    opacity:0;transition:opacity .18s,background .18s;
  }
  .prop-card:hover .g-arrow,
  .g-arrow:focus-visible{opacity:1;}
  .g-arrow:hover{background:#fff;}
  .g-arrow--prev{inset-inline-start:10px;}
  .g-arrow--next{inset-inline-end:10px;}
  [dir="rtl"] .g-arrow i{transform:scaleX(-1);}
  @media (hover:none){.g-arrow{opacity:1;}}

  .heart-btn{position:absolute;top:12px;left:12px;z-index:3;width:38px;height:38px;border-radius:12px;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(58,30,14,.22);font-size:16px;color:var(--color-neutral-300);transition:color .18s,transform .1s;}
  .heart-btn.on{color:var(--color-primary);}
  .heart-btn:active{transform:scale(.88);}
  .heart-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .heart-btn.on svg{fill:currentColor;stroke:currentColor;}

  /* Overall score, beside the save button and wearing its chrome — the two sit
     inline-start of the image and read as a pair. */
  .rating-badge{position:absolute;top:12px;left:58px;z-index:3;height:38px;padding:0 11px;border-radius:12px;background:#fff;display:flex;align-items:center;gap:5px;box-shadow:0 2px 10px rgba(58,30,14,.22);font-size:14px;font-weight:700;line-height:1;color:var(--color-text-primary);}
  .rating-badge i{font-size:13px;color:#F5A623;}

  /* The price and, for a paid Featured listing (migration 0153), the tag
     hung beneath it — one column in the top end corner. */
  .price-stack{position:absolute;top:12px;right:12px;z-index:3;display:flex;flex-direction:column;align-items:center;}
  .price-badge{height:34px;padding:0 12px;border-radius:10px;background:rgba(38,37,34,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;display:flex;align-items:center;gap:4px;box-shadow:0 2px 8px rgba(0,0,0,.22);}
  .featured-tag{height:22px;padding:0 10px;border-radius:0 0 8px 8px;background:rgba(201,162,39,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.22);}
  .featured-tag i{font-size:11px;}
  .price-from{font-size:10px;font-weight:500;opacity:.75;line-height:1;}
  .price-amt{font-family:var(--font-display);font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1;}
  /* Promotion (migration 0041): the base price is struck through inside the
     badge and the saving is named on a pill directly beneath it, so the tile
     shows what the guest pays AND what it usually costs. */
  .price-was{font-size:11px;font-weight:600;opacity:.7;line-height:1;text-decoration:line-through;}
  /* The saving, named on a pill directly ABOVE THE TITLE. It hung under the
     price badge until the Featured tag (0153) took that spot. */
  .promo-pill{align-self:flex-start;height:26px;padding:0 10px;border-radius:8px;background:var(--color-primary,#B5651D);color:#fff;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.22);}
  .promo-pill i{font-size:12px;}
  .c-price-was{font-size:13px;color:var(--color-text-secondary);text-decoration:line-through;}
  .c-price-off{font-size:12px;font-weight:700;color:var(--color-primary,#B5651D);}

  .c-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:12px;}
  .c-title{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .c-meta{display:flex;align-items:center;justify-content:space-between;}
  .c-loc{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--color-text-secondary);}
  .c-loc i{font-size:14px;color:var(--color-primary);}
  .c-rating{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--color-text-primary);}
  .c-rating i{font-size:13px;color:#F5A623;}
  .c-divider{height:1px;background:var(--color-border);margin:2px 0;}
  .c-feats-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-secondary);}

  .c-feats-wrap{position:relative;margin:0 -4px;}
  .c-feats{display:flex;align-items:center;overflow-x:auto;scroll-behavior:smooth;padding:2px 4px;-ms-overflow-style:none;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none;}
  .c-feats::-webkit-scrollbar{display:none;}
  .c-feats:active{cursor:grabbing;}
  .fi{display:inline-flex;align-items:center;gap:9px;padding:3px 16px;flex:0 0 auto;font-size:14px;font-weight:500;color:var(--color-text-secondary);white-space:nowrap;}
  .fi:first-child{padding-inline-start:4px;}
  .fi + .fi{border-inline-start:1px solid var(--color-border);}
  .fi i{font-size:17px;color:var(--color-primary);}
  .c-feats-wrap::after{content:"";position:absolute;top:0;right:0;width:30px;height:100%;pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,0),#fff);}

  /* category pill + overlay price — only shown in full-image layout */
  .cat-pill{display:none;}
  .c-price{display:none;}

  /* ── FULL-IMAGE LAYOUT (Tweak) ─────────────────────────── */
  .grid[data-layout="full"] .prop-card{background:transparent;border-radius:var(--card-radius,22px);}
  .grid[data-layout="full"] .g-wrap{height:var(--full-h,420px);border-radius:var(--card-radius,22px);}
  .grid[data-layout="full"] .g-wrap::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(20,12,6,.82) 0%,rgba(20,12,6,.42) 42%,rgba(20,12,6,0) 72%);}
  .grid[data-layout="full"] .cat-pill{display:none;}
  .grid[data-layout="full"] .heart-btn{top:14px;right:auto;left:14px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.6);box-shadow:none;color:#fff;z-index:5;}
  .grid[data-layout="full"] .heart-btn.on{color:#fff;}
  .grid[data-layout="full"] .heart-btn.on svg{fill:#fff;stroke:#fff;}
  .grid[data-layout="full"] .rating-badge{top:14px;left:62px;border-radius:99px;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.6);box-shadow:none;color:#fff;z-index:5;}
  .grid[data-layout="full"] .rating-badge i{color:#fff;}
  .grid[data-layout="full"] .price-stack{top:14px;right:14px;}
  .grid[data-layout="full"] .price-badge{white-space:nowrap;}
  .grid[data-layout="full"] .promo-pill{grid-area:promo;justify-self:start;}
  .grid[data-layout="full"] .c-body{position:absolute;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:1fr;grid-template-areas:"promo" "title" "meta" "feats";align-items:end;column-gap:16px;row-gap:9px;padding:26px 22px 22px;}
  .grid[data-layout="full"] .c-body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);background:linear-gradient(to top,rgba(20,12,6,.34) 0%,rgba(20,12,6,.10) 55%,rgba(20,12,6,0) 100%);-webkit-mask-image:linear-gradient(to top,#000 38%,transparent 100%);mask-image:linear-gradient(to top,#000 38%,transparent 100%);}
  .grid[data-layout="full"] .c-divider,
  .grid[data-layout="full"] .c-feats-label,
  .grid[data-layout="full"] .c-rating{display:none;}
  .grid[data-layout="full"] .c-title{grid-area:title;min-width:0;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:26px;text-shadow:0 1px 14px rgba(0,0,0,.35);}
  .grid[data-layout="full"] .c-feats-wrap{grid-area:feats;display:block;min-width:0;margin:8px 0 0 -4px;}
  .grid[data-layout="full"] .c-feats-wrap::after{display:none;}
  .grid[data-layout="full"] .c-feats{overflow-x:auto;flex-wrap:nowrap;cursor:grab;}
  .grid[data-layout="full"] .fi{color:rgba(255,255,255,.92);font-weight:500;}
  .grid[data-layout="full"] .fi i{color:#fff;}
  .grid[data-layout="full"] .fi + .fi{border-inline-start-color:rgba(255,255,255,.34);}
  .grid[data-layout="full"] .c-meta{grid-area:meta;display:block;}
  .grid[data-layout="full"] .c-loc{color:rgba(255,255,255,.92);}
  .grid[data-layout="full"] .c-loc i{color:#fff;}
  .grid[data-layout="full"] .c-price{display:none;}
  .grid[data-layout="full"] .c-price .amt{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.01em;color:#fff;line-height:1;}
  .grid[data-layout="full"] .c-price .per{font-size:12px;color:rgba(255,255,255,.82);}

/* Empty feed. The grid is backed by live listings only, so "nothing published
   yet" is a state a visitor can actually reach — it reads as a deliberate
   message rather than a gap where cards failed to load. */
.grid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 72px 24px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-surface);
}
.grid-empty i {
  font-size: 30px;
  color: var(--color-primary-600, var(--color-primary));
  margin-bottom: 4px;
}
.grid-empty h3 {
  margin: 0;
  font: 700 20px/26px var(--font-display, var(--font-sans));
  color: var(--color-text-primary);
}
.grid-empty p {
  margin: 0;
  max-width: 420px;
  font: 400 15px/23px var(--font-sans);
  color: var(--color-text-secondary);
}