/* FloraVerse responsive layout
   Breakpoints follow content needs: phone < 768px, tablet 768-1023px. */

*,*::before,*::after{box-sizing:border-box}
img,video,canvas,svg{max-width:100%}
.flex > *,.grid > *{min-width:0}
input,select,textarea{max-width:100%}
.overflow-auto,.no-scrollbar{-webkit-overflow-scrolling:touch}
.plant-match-header{padding-right:48px}
#plantModal .modal{min-height:0}
#plantModal #modalContent{min-height:0; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}

@media (max-width:767px){
  body{font-size:15px}

  /* One shared, predictable page container. */
  .max-w-\[1280px\]{
    width:calc(100% - 32px) !important;
    max-width:none !important;
    margin-inline:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .navbar > div{height:60px !important; min-height:60px; gap:12px}
  .navbar .wordmark{font-size:1.35rem !important; flex-shrink:0}
  .navbar .w-10.h-10,.menu-toggle{width:44px !important; height:44px !important; flex-shrink:0}
  .menu-toggle span:nth-child(1){top:.95rem}
  .menu-toggle span:nth-child(2){top:1.33rem}
  .menu-toggle span:nth-child(3){top:1.71rem}
  .menu-toggle.is-open span:nth-child(1),.menu-toggle.is-open span:nth-child(3){top:1.33rem}
  .mobile-nav-panel{width:min(86vw,320px)}
  .mobile-nav-panel .mobile-nav-header{padding:16px}
  .mobile-nav-panel .mobile-nav-links{padding:12px; gap:6px}
  .mobile-nav-panel .nav-link{min-height:44px; display:flex; align-items:center; padding:10px 14px}

  body > header,body > section,body > main,body > div.max-w-\[1280px\]{margin-top:16px !important}
  body > header:first-of-type,body > section:first-of-type{margin-top:20px !important}
  body > section + section{margin-top:20px !important}
  body > nav + header,body > nav + section{padding-top:0 !important; margin-top:20px !important}

  h1{font-size:clamp(1.85rem,8vw,2.35rem) !important; line-height:1.06 !important; letter-spacing:-.03em}
  h2{font-size:clamp(1.3rem,6vw,1.7rem) !important; line-height:1.12 !important}
  h3{font-size:1.1rem !important; line-height:1.2}
  .display{font-size:clamp(2.35rem,12vw,3.25rem) !important; line-height:.96 !important}
  p{overflow-wrap:anywhere}

  .fv-card{width:100%; max-width:100%; border-radius:18px; overflow:hidden}
  .fv-card.p-7,.fv-card.p-6{padding:18px !important}
  .fv-card.p-5{padding:16px !important}
  .fv-card .fv-card{border-radius:14px}

  .btn{min-width:44px; min-height:44px; width:auto; max-width:100%; padding:10px 16px; white-space:normal; line-height:1.2; text-align:center}
  .btn.w-full{width:100%}
  button:not(.btn){min-height:44px}
  button:not(.btn),a[role="button"]{touch-action:manipulation}
  button.w-8.h-8,button.w-9.h-9{width:44px !important; height:44px !important; min-width:44px; min-height:44px}
  input,select,textarea{font-size:16px !important; min-height:44px}
  input[type="checkbox"],input[type="radio"]{min-height:0}

  /* Hero content reflows on mobile. */
  header > .fv-card,header .fv-card > .flex-col,body > section:first-of-type > .grid{gap:18px !important}header .lg\:w-\[420px\],header .lg\:w-\[380px\]{width:100% !important}
  header .bg-white.rounded-\[24px\]{padding:16px !important; border-radius:16px}
  header .flex-wrap{gap:8px !important}
  header .flex-wrap > .btn{flex:1 1 140px}

  /* Search and filter controls stack naturally. */
  header select,header input[type="search"]{width:100%}
  header .grid.grid-cols-2{gap:8px}
  #catPills,#prodCats,#guideCats,#stagePills{flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding-bottom:6px; scrollbar-width:none}
  #catPills::-webkit-scrollbar,#prodCats::-webkit-scrollbar,#guideCats::-webkit-scrollbar,#stagePills::-webkit-scrollbar{display:none}
  #catPills > *,#prodCats > *,#guideCats > *,#stagePills > *{flex:0 0 auto}.cat-pill,.pcat,.gcat,.commFilter,.feedTab,.levelBtn{min-height:42px}

  /* Product and content catalogues: 2-col compact grid on mobile. */
  #plantsGrid,#productsGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; align-items:stretch !important}
  #guidesGrid,#myPlantsGrid{grid-template-columns:1fr !important; gap:14px !important}
  #guidesGrid .h-32{height:150px !important}
  #plantsGrid .h-40,#productsGrid .h-36{height:auto !important; aspect-ratio:1; overflow:hidden}
  #plantsGrid .p-4,#productsGrid .p-4,#guidesGrid .p-4,#myPlantsGrid .p-4{padding:10px !important}
  #productsGrid .fv-card{display:flex !important; flex-direction:column !important; height:100% !important}
  #productsGrid .fv-card .line-clamp-2{min-height:auto !important; font-size:12px !important; line-height:1.3}
  #productsGrid .fv-card .text-xs.text-muted{display:none !important}
  #productsGrid .fv-card .text-lg.font-black{font-size:13px !important}
  #productsGrid .fv-card .btn{padding:5px 8px !important; font-size:10px !important; min-height:0 !important}
  #productsGrid .fv-card .items-end{gap:6px}
  #productsGrid .fv-card .truncate{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  #plantsGrid .fv-card .line-clamp-2{min-height:auto !important; font-size:12px !important; line-height:1.3}
  #plantsGrid .fv-card > .p-4 > p:first-child{font-size:12px !important; line-height:1.3}
  #plantsGrid .fv-card .flex.flex-wrap.gap-1\.5{display:none !important}
  #plantsGrid .fv-card .text-sm.text-muted{display:none !important}
  #plantsGrid .fv-card .btn{display:none !important}
  #plantsGrid .fv-card .items-center.gap-2{gap:4px !important}

  /* Homepage specific: decorative flora smaller on mobile */
  .display ~ .flex.justify-center.items-end{gap:8px !important; height:80px !important}

  /* Shop and checkout. */
  .checkout-panel,.checkout-summary{padding:14px}
  .checkout-option{min-height:56px}
  #cartModalList > .flex{display:grid; grid-template-columns:48px minmax(0,1fr) 44px; gap:8px 10px; align-items:center}
  #cartModalList > .flex > :first-child{grid-column:1; grid-row:1 / span 2}
  #cartModalList > .flex > :nth-child(2){grid-column:2; grid-row:1}
  #cartModalList > .flex > :nth-child(3){grid-column:2 / 4; grid-row:2; justify-self:start}
  #cartModalList > .flex > :nth-child(4){grid-column:3; grid-row:1; width:44px !important; height:44px !important}
  #cartModalList > .flex > :nth-child(3) button{width:40px !important; height:40px !important}
  #feedList .fv-card > .flex.gap-2.mt-3{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  #feedList .fv-card > .flex.gap-2.mt-3 > button{width:100%; min-height:44px; padding:8px}
  #feedList .pill{white-space:normal}

  /* Garden detail controls and summaries. */
  #pulseList > div{display:grid !important; grid-template-columns:40px minmax(0,1fr); gap:8px 10px; align-items:center}
  #pulseList > div > div:first-child{width:40px !important; height:40px !important}
  #pulseList > div > .pill{grid-column:1 / -1; width:100%; min-height:40px; display:flex; align-items:center; justify-content:center; white-space:normal; text-align:center}
  #myPlantsGrid > .fv-card > .flex.items-center.gap-3{display:grid; grid-template-columns:48px minmax(0,1fr); align-items:start}
  #myPlantsGrid > .fv-card > .flex.items-center.gap-3 > div:first-child{width:48px !important; height:48px !important}
  #myPlantsGrid > .fv-card > .flex.items-center.gap-3 > .pill{grid-column:2; justify-self:start; white-space:normal}
  #taskList label{min-height:48px}
  #newTaskInput + .btn,#journalInput + .btn{flex:0 0 auto}
  #stagePills{padding-bottom:6px}
  .plant-match-header{display:grid; grid-template-columns:40px minmax(0,1fr); align-items:start; column-gap:12px; row-gap:8px}
  .plant-match-header > div:first-child{grid-column:1; grid-row:1}
  .plant-match-header > div:nth-child(2){grid-column:2; grid-row:1; min-width:0}
  .plant-match-header #pmStepNum{grid-column:2; grid-row:2; justify-self:start; margin-left:0 !important}

  /* Garden cards should stack their secondary labels instead of squeezing them. */
  .garden-page header .fv-card.green > .flex-1{justify-content:flex-start; align-items:flex-start}
  .garden-page header .fv-card.green .flex.gap-2.mt-4{flex-wrap:wrap; align-items:stretch}
  .garden-page header .fv-card.green .flex.gap-2.mt-4 > .btn{flex:1 1 170px}
  .garden-page header .fv-card.green .flex.gap-2.mt-4 > .pill{max-width:100%; white-space:normal; text-align:center}
  .garden-page #myPlantsGrid > .fv-card > .flex.items-center.gap-3{align-items:start; gap:10px}
  .garden-page #myPlantsGrid > .fv-card > .flex.items-center.gap-3 > .pill{max-width:100%; white-space:normal; text-align:center; line-height:1.15}
  .garden-page #detailName{line-height:1.2; overflow-wrap:anywhere}
  .garden-page #detailSub{overflow-wrap:anywhere; line-height:1.35}
  .garden-page .fv-card > .flex.items-center.gap-3:has(#detailEmoji){display:grid; grid-template-columns:48px minmax(0,1fr); align-items:start}
  .garden-page #detailHealth{grid-column:2; justify-self:start; margin-left:0 !important}
  .garden-page #taskList label{align-items:flex-start}
  .garden-page #taskList label input{flex:0 0 auto; margin-top:2px}
  .garden-page #taskList label > span{min-width:0; overflow-wrap:anywhere}
  .garden-page #journalList > div > div{min-width:0; overflow-wrap:anywhere}
  .garden-page #newTaskInput + .btn,.garden-page #journalInput + .btn{flex:0 0 auto; white-space:nowrap}
  .garden-page #addPlantList{grid-template-columns:1fr !important; gap:8px !important}
  .garden-page #addPlantList > .fv-card{display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px !important}
  .garden-page #addPlantList > .fv-card > div:first-child{width:48px !important; height:48px !important}
  .garden-page #addPlantList > .fv-card > div:nth-child(2){min-width:0}
  .garden-page #addPlantList > .fv-card > div:nth-child(2) p{overflow-wrap:anywhere; line-height:1.25}
  .garden-page #addPlantList > .fv-card > .pill{max-width:76px; white-space:normal; text-align:center; line-height:1.15}
  .garden-page #storyTitle{overflow-wrap:anywhere; line-height:1.3}
  .garden-page #plantLabRoot{margin-top:16px !important}
  .garden-page section > .fv-card .flex.flex-wrap > select{width:100%; min-width:0}
  .garden-page section > .fv-card .flex.flex-wrap:has(> select){align-items:stretch}
  .garden-page section > .fv-card.blue{align-items:stretch}
  .garden-page section > .fv-card.blue > .flex{width:100%; flex-wrap:wrap}
  .garden-page section > .fv-card.blue > .flex > a{flex:1 1 120px}

  /* Level cards need a full row on phones so names and status badges do not collide. */

  /* Dialogs and cart always remain attached to the viewport. */
  .modal-backdrop{padding:12px; align-items:center; width:100%; height:100dvh}
  .modal{width:100%; max-width:calc(100vw - 24px) !important; max-height:calc(100dvh - 24px); margin:0; border-radius:18px}
  .modal > .p-6,.modal > .p-7,.modal form.p-5{padding:16px !important}
  .drawer{width:min(100%,420px); max-width:100%; height:100dvh}
  #toastBox{bottom:12px; width:calc(100% - 24px)}
  .toast{width:fit-content; max-width:100%; margin-inline:auto; white-space:normal; border-radius:14px}
  .space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:12px !important}
  .space-y-14 > :not([hidden]) ~ :not([hidden]){margin-top:2.25rem !important}
  .mt-8{margin-top:24px !important}
  .pb-10{padding-bottom:24px !important}

  /* Reachable targets: logo and inline links keep their look, gain height. */
  .navbar .wordmark{padding:10px 0}
  .mobile-nav-panel .wordmark{padding:8px 0}
  a.text-\[11px\]{display:inline-flex; align-items:center; min-height:36px}

  /* Shop cards: CTA big enough to hit, product line allowed to wrap. */
  #productsGrid .fv-card .btn{padding:9px 10px !important; font-size:11px !important; min-height:40px !important}
  #productsGrid .fv-card .truncate{white-space:normal !important; overflow:visible !important; text-overflow:clip !important}

  /* Checkbox chips read as one target. */
  label:has(#filterBest),label:has(#filterBeginner){min-height:44px; align-items:center; padding-block:8px}

  /* Garden care stats: values must not break mid-word in a 3-col strip. */
  .garden-page .grid.grid-cols-3 > div{padding:10px 5px !important}
  .garden-page #detailWater,.garden-page #detailLight,.garden-page #detailFert{font-size:12.5px !important; overflow-wrap:normal}
}

@media (max-width:359px){
  .max-w-\[1280px\]{width:calc(100% - 24px) !important}
  .navbar .wordmark{font-size:1.22rem !important}
  .display{font-size:2.2rem !important}
  header .grid.grid-cols-2{grid-template-columns:1fr}
  #feedList .fv-card > .flex.gap-2.mt-3{grid-template-columns:1fr}
}

@media (min-width:768px) and (max-width:1023px){
  .max-w-\[1280px\]{width:calc(100% - 40px) !important; max-width:none !important; padding-left:0 !important; padding-right:0 !important}
  .navbar > div{height:64px !important}
  .navbar .w-10.h-10,.menu-toggle{width:44px !important; height:44px !important}
  .btn{min-width:44px; min-height:44px}
  button:not(.btn){min-height:44px; touch-action:manipulation}
  button.w-8.h-8,button.w-9.h-9{width:44px !important; height:44px !important; min-width:44px; min-height:44px}.cat-pill,.pcat,.commFilter,.feedTab,.gcat,.levelBtn{min-height:42px}
  body > header,body > section,body > main,body > div.max-w-\[1280px\]{margin-top:24px !important}header .lg\:w-\[420px\],header .lg\:w-\[380px\]{width:100% !important}
  #plantsGrid,#productsGrid,#guidesGrid,#myPlantsGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.community-layout{grid-template-columns:1fr !important}
  .modal{max-width:calc(100vw - 40px) !important; max-height:calc(100dvh - 40px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

@media (prefers-contrast:more){.text-muted{color:#4B5563}}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(111,168,255,.65); outline-offset:2px}

/* ===== Mobile rhythm: stack gaps shrink so main content arrives sooner ===== */
@media (max-width:767px){
  /* Category pills keep their words on phones: icon-only rows repeat glyphs. */
  .cat-pill > span,.pcat > span,.gcat > span{display:inline}

  body > header:first-of-type,body > section:first-of-type{margin-top:12px !important}
  body > nav + header,body > nav + section{margin-top:12px !important}
  body > header,body > section,body > main,body > div.max-w-\[1280px\]{margin-top:12px !important}
  body > section + section{margin-top:14px !important}
  body > .max-w-\[1280px\].pt-4{padding-top:8px !important}
  body > main.mt-6,body > main + section,body > div.max-w-\[1280px\] + main{margin-top:14px !important}
}

/* ===== Learn: guides come before the curriculum section on phones ===== */
@media (max-width:767px){
  body:has(#guidesGrid){display:flex; flex-direction:column}
  body:has(#guidesGrid) > *{order:20}
  body:has(#guidesGrid) > nav{order:1}
  body:has(#guidesGrid) > header{order:10}
  body:has(#guidesGrid) > div:has(> .ed-toolbar){order:11}
  body:has(#guidesGrid) > div:has(#guideCats){order:12}
  body:has(#guidesGrid) > main{order:13}
}


/* ===== Ground footer: vertical flow, target sentuh lega, tanpa overflow ===== */
@media (max-width:767px){
  .fv-ground{margin-top:40px; padding-top:32px}
  .fv-ground .fv-row{display:flex; flex-direction:column; align-items:stretch; gap:14px}
  .fv-ground .fv-nav,.fv-ground .fv-social{align-self:auto; justify-self:auto}
  .fv-ground .fv-nav{display:grid; grid-template-columns:repeat(3,1fr); gap:0 8px; justify-items:start}
  .fv-ground .fv-nav a{min-height:44px; font-size:.98rem}
  .fv-ground .fv-status{gap:6px; font-size:.74rem}
  .fv-ground .fv-sep{display:none}
  .fv-ground .fv-status b{letter-spacing:.04em}
  .fv-ground .fv-social a{min-height:44px}
  .fv-ground .fv-base{margin-top:14px; padding-top:12px; gap:2px}
  .fv-ground .fv-edge{height:38px; margin-top:10px; background-size:auto 38px,auto 38px}
}
@media (min-width:768px) and (max-width:1439px){
  .fv-ground .fv-status{grid-area:3/1/4/4}
  .fv-ground .fv-sep{display:none}
}