/* ==========================================================
   Trang thương hiệu "Destello" (destello.html)
   Figma node 79:777 (file dt5I7wF6S9aoBL4810OvMM). Dùng chung layout với
   romar.html/tat-ca-san-pham.html (mega menu, brandbar, toolbar, filter, card,
   footer) - file này chỉ chứa phần thật sự RIÊNG của trang: hình trang trí +
   khoảng cách lưới.
   ========================================================== */

/* Rà soát điều hướng toàn site (2026-09-16): tab "Destello" trong brandbar giờ là
   <span> (active-item, khớp sairo.html) vì đang đứng ở chính trang này - không
   thể tự link về chính nó. Chỉ đổi cursor, style giữ nguyên đồng nhất 3 tab. */
.romar-brandbar-link--current{
  cursor:default;
}

/* Hình trang trí "Subtract" (node 79:789): màu CORAL #FE8170 opacity 100% (khác
   olive #9FC57B của trang Romar - đã đọc đúng fill thật từng trang, không suy
   đoán dùng chung 1 màu), xoay 150° (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 18px,
   right 168px (renderBounds Figma, quy đổi theo mép phải khung 1440). */
.destello-decor{
  display:none;
  position:absolute;
  pointer-events:none;
  z-index:0;
}
@media (min-width:1440px){
  .destello-decor{
    display:block;
    top:18px;
    right:168px;
    width:118px;
    height:135px;
  }
}

/* Khoảng cách toolbar->lưới = 31px (đo node 79:782 Line1 -> Group 16 190:2084);
   lưới->footer = 72px (đo Group 42 190:2128 cuối -> footer 106:2750) - riêng trang
   này, không trùng 40px/54px/17px+72px đã dùng ở 3 trang kia. */
.destello-catalog-list{
  padding-top:2px; /* 31px đo được - 29px padding-bottom sẵn có trong .romar-catalog-toolbar */
  padding-bottom:72px;
}

/* ==========================================================
   Mobile - node 462:1770 (đã export ảnh xem thật, không suy theo tên layer).
   Cùng pattern đã xác nhận ở romar.html (462:1731): header chỉ 1 thanh trắng,
   không brandbar, tiêu đề Bold 700 canh giữa, icon lọc tròn phễu, đường kẻ mảnh.
   ========================================================== */
@media (max-width:1439.98px){
  .destello-page-brand .romar-brandbar{
    display:none;
  }
  .destello-page-brand .romar-catalog-hero .container-xl{
    text-align:center;
  }
  .destello-page-brand .romar-catalog-title{
    font-weight:700;
  }
  .destello-page-brand .romar-catalog-toolbar{
    flex-direction:column;
    align-items:center;
    gap:12px;
    border-bottom:none;
    position:relative;
  }
  .destello-page-brand .romar-catalog-filters{
    justify-content:center;
  }
  .destello-page-brand .romar-catalog-toolbar::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-16px;
    transform:translateX(-50%);
    width:86%;
    max-width:345px;
    height:1px;
    background:#005C6F;
  }
  /* Decor mobile CÙNG hình/tỉ lệ với bản desktop (117.2x134.5 -> 68.2x78.3, đúng
     cùng 1 tỉ lệ khung 1.718 - không phải hình khác), chỉ đổi kích thước/vị trí:
     top 15px, right 25px (renderBounds node 462:1800, quy đổi theo mép phải 402px). */
  .destello-decor{
    display:block;
    top:15px;
    right:25px;
    width:68px;
    height:78px;
  }
}

/* Icon lọc hình phễu tròn - copy nguyên rule từ romar-brand.css (chưa tách thành
   file dùng chung, xem ghi chú tương tự ở đó) vì destello.html không load
   romar-brand.css. */
.romar-mobile-filter-icon{
  display:none;
}
@media (max-width:1439.98px){
  .romar-mobile-filter-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#005C6F;
    border:none;
    padding:0;
    flex:0 0 auto;
  }
  .romar-mobile-filter-icon img{
    width:16px;
    height:auto;
  }
}