/* The Hanna Florist v2: layout desktop baru (>= 1000px).
   Bundle React memakai inline style, jadi override ini butuh !important.
   Urutan section di .hf-shell: 1 hero, 2 kategori, 3 katalog, 4 portfolio, 5 custom order, 6 ulasan. */

@media (min-width: 1000px) {
  :root { --hf-max: 1240px; --hf-gutter: max(56px, calc((100% - var(--hf-max)) / 2)); }

  /* Kanvas: konten dibatasi lebar, hero dan footer tetap full-bleed */
  .hf-shell { padding-left: 0 !important; padding-right: 0 !important; box-shadow: none !important; }
  .hf-hero, .hf-footer { margin-left: 0 !important; margin-right: 0 !important; }
  .hf-shell > section:not(.hf-hero) {
    box-sizing: border-box;
    width: min(var(--hf-max), 100% - 112px);
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 72px !important;
  }

  /* Hero: teks dan tombol di kiri, kolase foto asli di kanan */
  .hf-hero {
    padding: 56px var(--hf-gutter) 64px !important;
    text-align: left !important;
    background: radial-gradient(70% 110% at 82% 20%, #efe1f3 0%, #f7eef5 45%, #faf5f1 75%) !important;
  }
  .hf-hero > div:nth-child(3) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: var(--hf-max);
    min-height: 560px;
    margin: 0 auto;
    padding-right: clamp(440px, 46%, 540px);
  }
  .hf-hero > div:nth-child(3)::before {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(320px, 34%, 400px);
    aspect-ratio: 4 / 5;
    border-radius: 999px 999px 28px 28px;
    background: url('/assets/products/p9_7.jpg') center 30% / cover;
    box-shadow: 0 30px 60px rgb(123 94 146 / .25);
  }
  .hf-hero > div:nth-child(3)::after {
    content: '';
    position: absolute;
    right: calc(clamp(320px, 34%, 400px) - 64px);
    top: calc(50% + 90px);
    width: 168px;
    height: 168px;
    border-radius: 50%;
    border: 8px solid #faf5f1;
    background: url('/assets/products/p6_5.jpg') center / cover;
    box-shadow: 0 18px 40px rgb(123 94 146 / .22);
  }
  .hf-hero-logo { width: 112px !important; height: 112px !important; }
  @media (max-width: 1199px) {
    .hf-hero > div:nth-child(3)::after { width: 136px; height: 136px; right: calc(clamp(320px, 34%, 400px) - 48px); }
  }
  .hf-hero > div:nth-child(3) > p:first-of-type { margin-top: 24px !important; font-size: 13px !important; }
  .hf-hero-h1 { font-size: clamp(56px, 5.4vw, 76px) !important; margin-top: 10px !important; }
  .hf-hero > div:nth-child(3) > p:nth-of-type(2) { margin: 18px 0 0 !important; max-width: 460px !important; font-size: 17px !important; }
  .hf-hero > div:nth-child(3) > div { justify-content: flex-start !important; }
  .hf-hero > div:nth-child(3) > div:nth-of-type(1) { margin-top: 28px !important; gap: 12px !important; }
  .hf-hero > div:nth-child(3) > div:nth-of-type(1) a { padding: 16px 30px !important; font-size: 15px !important; }
  .hf-hero > div:nth-child(3) > div:nth-of-type(2) { margin-top: 24px !important; font-size: 15px !important; }
  .hf-hero > div:nth-child(3) > div:nth-of-type(2) a { display: inline-flex; align-items: center; min-height: 44px; }
  .hf-hero > div:nth-child(3) > div:nth-of-type(3) { margin-top: 8px !important; }
  .hf-hero > div:nth-child(3) > a:last-child { display: none !important; }

  /* Judul section editorial: judul kiri, deskripsi kanan */
  .hf-shell > section:nth-of-type(2) > div:first-child,
  .hf-shell > section:nth-of-type(4) > div:first-child {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 40px;
    align-items: end;
    text-align: left !important;
    margin-bottom: 28px !important;
  }
  .hf-shell > section:nth-of-type(2) > div:first-child > p:last-child,
  .hf-shell > section:nth-of-type(4) > div:first-child > p:last-child {
    grid-column: 2;
    grid-row: 1 / 3;
    max-width: 380px !important;
    margin: 0 !important;
    text-align: right;
    font-size: 15px !important;
  }
  .hf-shell > section:nth-of-type(3) > div:first-child,
  .hf-shell > section:nth-of-type(6) > div:first-child { text-align: left !important; margin-bottom: 24px !important; }
  .hf-h2-big, #catalog h2 { font-size: 44px !important; }

  /* Kategori: 4 x 2, ikon di kiri label agar tidak sempit */
  .hf-cat-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
  .hf-cat-grid button {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px;
    min-height: 88px !important;
    padding: 16px 22px !important;
    text-align: left !important;
  }
  .hf-cat-grid button > span:first-child { margin: 0 !important; font-size: 32px !important; }
  .hf-cat-grid button > span:last-child { flex: 1; font-size: 16px !important; text-align: left !important; }

  /* Katalog: kategori sudah ada tepat di atas, jadi baris chip ganda disembunyikan */
  #catalog { padding-top: 40px !important; }
  #catalog > .hf-scroll { display: none !important; }
  #catalog > div:has(> h3) {
    padding: 48px 24px !important;
    border: 1.5px dashed #dcc8e6;
    border-radius: 24px;
    background: #fff9fd;
  }
  .hf-main-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 22px !important; }
  .hf-more-grid { grid-template-columns: repeat(5, 1fr) !important; }

  /* Portfolio: satu foto besar + dua bertumpuk */
  .hf-decor-list {
    grid-template-columns: 1.35fr 1fr !important;
    grid-template-rows: 260px 260px;
    gap: 20px !important;
    margin-top: 0 !important;
  }
  .hf-decor-list > div { height: auto !important; border-radius: 24px !important; }
  .hf-decor-list > div:first-child { grid-row: 1 / 3; }
  .hf-decor-list > div:first-child h3 { font-size: 36px !important; }
  .hf-shell > section:nth-of-type(4) > p:last-child { font-size: 14px !important; text-align: left !important; }

  /* Custom order: teks kiri, CTA kanan */
  .hf-shell > section:nth-of-type(5) {
    display: grid !important;
    grid-template-columns: 1fr auto;
    column-gap: 48px;
    align-items: center;
    margin-top: 72px !important;
    padding: 56px 64px !important;
    border-radius: 32px !important;
    text-align: left !important;
  }
  .hf-shell > section:nth-of-type(5) > p,
  .hf-shell > section:nth-of-type(5) > h2 { grid-column: 1; }
  .hf-shell > section:nth-of-type(5) > p:first-of-type { font-size: 13px !important; }
  .hf-shell > section:nth-of-type(5) > h2 { font-size: 48px !important; }
  .hf-shell > section:nth-of-type(5) > p:last-of-type { margin: 14px 0 0 !important; max-width: 520px !important; font-size: 17px !important; }
  .hf-shell > section:nth-of-type(5) > a {
    grid-column: 2;
    grid-row: 1 / 4;
    margin: 0 !important;
    padding: 18px 40px !important;
    font-size: 16px !important;
  }
  .hf-shell > section:nth-of-type(5) > div:first-child { width: 280px !important; height: 280px !important; top: -90px !important; right: -60px !important; }

  /* Ulasan */
  .hf-shell > section:nth-of-type(6) { padding-bottom: 80px !important; }
  .hf-testi-list { gap: 20px !important; }

  /* Footer: satu baris lebar */
  .hf-footer {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'logo name btns' 'logo info social' 'copy copy copy';
    column-gap: 24px;
    row-gap: 2px;
    align-items: center;
    padding: 44px var(--hf-gutter) 96px !important;
    text-align: left !important;
  }
  .hf-footer > img { grid-area: logo; width: 84px !important; height: 84px !important; }
  .hf-footer > h3 { grid-area: name; margin: 0 !important; align-self: end; font-size: 32px !important; }
  .hf-footer > p:nth-of-type(1) { grid-area: info; margin: 0 !important; align-self: start; font-size: 15px !important; }
  .hf-footer > div:nth-of-type(1) { grid-area: btns; margin: 0 !important; justify-content: flex-end !important; }
  .hf-footer > div:nth-of-type(2) { grid-area: social; margin: 0 !important; justify-content: flex-end !important; font-size: 15px !important; }
  .hf-footer > div:nth-of-type(2) a { display: inline-flex; align-items: center; min-height: 44px; }
  .hf-footer > p:last-child {
    grid-area: copy;
    margin-top: 28px !important;
    padding-top: 18px;
    border-top: 1px solid rgb(255 255 255 / .35);
    font-size: 13px !important;
    opacity: .9 !important;
  }
}