/* ==========================================================
   Trang thương hiệu "Sairo" (sairo.html)
   Figma node 79:945 (file dt5I7wF6S9aoBL4810OvMM). Dùng chung layout với
   romar.html/destello.html (mega menu, brandbar, toolbar, filter, footer) - file
   này chỉ chứa phần thật sự riêng: hình trang trí + khoảng trắng thay lưới sản
   phẩm (chưa có dữ liệu) + style tab hiện tại trong brandbar.
   ========================================================== */

/* Tab "Sairo" trong brandbar là <span> (không phải <a>) vì đang đứng ở trang này
   - không thể tự link về chính nó. Giữ nguyên style giống hệt 2 tab kia (đã xác
   nhận không có active state trong Figma), chỉ đổi cursor để không trông như
   bấm được. */
.romar-brandbar-link--current{
  cursor:default;
}

/* Hình trang trí "Subtract" (node 79:957): màu AMBER #EBAC01 (trùng --romar-amber
   đã có - mỗi trang thương hiệu 1 màu decor riêng: olive/Romar, coral/Destello,
   amber/Sairo), xoay -105° (bake sẵn trong SVG export). Vị trí đo từ
   .romar-catalog-hero (không có subbar, hero bắt đầu ngay sau brandbar): top 12px,
   right 187px (renderBounds Figma, quy đổi theo mép phải khung 1440). */
.sairo-decor{
  display:none;
  position:absolute;
  pointer-events:none;
  z-index:0;
}
@media (min-width:1440px){
  .sairo-decor{
    display:block;
    top:12px;
    right:187px;
    width:140px;
    height:155px;
  }
}

/* CHƯA có sản phẩm "brand":"Sairo" nào trong products.json - Figma cũng để trắng
   hoàn toàn khoảng này (không có lưới sản phẩm, không có chữ "Sắp ra mắt"). Giữ
   min-height = 992px đo được (node 79:950 Line1 -> footer 106:2782) để bố cục
   trang khớp đúng Figma dù không có nội dung - XOÁ min-height này khi có dữ liệu
   Sairo thật và render động lưới sản phẩm (JS đã viết sẵn, không cần sửa). */
@media (min-width:1440px){
  .sairo-catalog-list{
    /* ĐÚNG 992px đo được (Line1 -> footer), KHÔNG trừ 29px padding-bottom của
       .romar-catalog-toolbar - toolbarRect.bottom (mép dưới thật của toolbar khi
       render) ĐÃ TÍNH SẴN phần padding đó rồi (là vị trí đường kẻ chia), trừ thêm
       lần nữa là double-subtract - lỗi tìm thấy khi đối chiếu lại, đo được 963px
       thay vì 992px, thiếu đúng 29px. */
    min-height:992px;
  }
}

/* ==========================================================
   Mobile - node 462:1809 (đã export ảnh xem thật, không suy theo tên layer).
   Khác Romar/Destello: Figma mobile trang này KHÔNG có icon lọc/đường kẻ nào cả
   (chỉ header -> tiêu đề -> đếm -> khoảng trắng lớn -> footer) - đã hỏi và xác
   nhận với người dùng (2026-09-16): VẪN GIỮ bộ lọc ở mobile cho nhất quán với
   desktop/2 trang thương hiệu kia, chấp nhận lệch Figma có chủ đích ở điểm này.
   Dùng nguyên pill chữ "Bộ lọc" mặc định (romar-mobile-filter-trigger) - KHÔNG
   thêm icon phễu tròn vì Figma không xác nhận icon đó cho trang này.
   ========================================================== */
@media (max-width:1439.98px){
  .sairo-page-brand .romar-brandbar{
    display:none;
  }
  .sairo-page-brand .romar-catalog-hero .container-xl{
    text-align:center;
  }
  .sairo-page-brand .romar-catalog-title{
    font-weight:700;
  }
  .sairo-page-brand .romar-catalog-toolbar{
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .sairo-page-brand .romar-catalog-filters{
    justify-content:center;
  }
  /* Decor mobile CÙNG hình/tỉ lệ với bản desktop (139.4x154 -> 69.1x76.4, đúng
     cùng tỉ lệ khung ~2.017 - không phải hình khác), chỉ đổi kích thước/vị trí:
     top 19px, right 25px (renderBounds node 462:1813). */
  .sairo-decor{
    display:block;
    top:19px;
    right:25px;
    width:69px;
    height:76px;
  }
  /* Khoảng trắng thay lưới sản phẩm ở mobile: 3120px đo được trong Figma (đáy
     dòng đếm -> đỉnh footer, node 462:1812 -> 462:1810) - số liệu THẬT của bản
     mobile, không copy nguyên 992px của desktop (khác hẳn vì tỉ lệ khung khác). */
  .sairo-catalog-list{
    min-height:3120px;
  }
}