/* ============================================================
   Be Yourself Flower Shoppe — extends the BYG stylesheet
   (load AFTER ../styles.css). Adds floral accents + components.
   ============================================================ */
:root{
  --leaf:#5E8C5A; --leaf-deep:#47713f;
  --blush:#E8A6A1; --blush-deep:#D98A86;
  --petal:#FBEFF0;
}

/* floral hero wash (gold + blush + leaf) */
.fhero{
  background:
    radial-gradient(820px 420px at 85% -10%,rgba(244,180,0,.26),transparent 60%),
    radial-gradient(680px 460px at -6% 28%,rgba(232,166,161,.30),transparent 60%),
    radial-gradient(620px 520px at 50% 125%,rgba(94,140,90,.16),transparent 60%),
    var(--cream);
}
.hero__tagline.bloom{color:var(--leaf-deep)}
.hero h1 .hl-bloom{color:var(--blush-deep)}
.hero__photo-wrap .badge.badge--leaf{background:var(--leaf);color:#fff}

/* ---- how it works steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px}
.step{background:var(--card);border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow-sm);border-top:6px solid var(--leaf);text-align:center}
.step__n{width:48px;height:48px;border-radius:50%;background:var(--leaf);color:#fff;font-family:var(--font-head);font-weight:800;font-size:1.35rem;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.step h3{margin:.2em 0}
.step p{color:var(--ink-soft);font-size:1rem;margin:0}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* ---- product cards ---- */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px}
@media(max-width:900px){.prods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.prods{grid-template-columns:1fr}}
.prod{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.prod:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* .prod__img is a placeholder tile until real photos drop in (set as <img> later) */
.prod__img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:3rem;background:linear-gradient(150deg,var(--petal),var(--cream-2));object-fit:cover}
.prod--gold  .prod__img{background:linear-gradient(150deg,#fff4d6,var(--cream-2))}
.prod--sky   .prod__img{background:linear-gradient(150deg,#e3f4f8,var(--cream-2))}
.prod--blush .prod__img{background:linear-gradient(150deg,var(--petal),var(--cream-2))}
.prod--leaf  .prod__img{background:linear-gradient(150deg,#e6f0e3,var(--cream-2))}
.prod__b{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:1.15rem;margin:0 0 .15em}
.prod .price{font-family:var(--font-head);font-weight:700;color:var(--leaf-deep);font-size:1rem}
.prod p{color:var(--ink-soft);font-size:.93rem;margin:.45em 0 14px}
.prod .btn{margin-top:auto;align-self:flex-start;font-size:.92rem;padding:10px 20px}

/* occasion chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.chip{font-family:var(--font-head);font-weight:600;font-size:.92rem;background:#fff;color:var(--ink);padding:9px 18px;border-radius:999px;box-shadow:var(--shadow-sm)}

/* ---- order request form ---- */
.form-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:start}
@media(max-width:900px){.form-wrap{grid-template-columns:1fr}}
.form-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-head);font-weight:700;font-size:.95rem;margin-bottom:6px;color:var(--ink)}
.field .req{color:var(--coral-deep)}
.field input,.field select,.field textarea{width:100%;font-family:var(--font-body);font-size:1rem;padding:12px 14px;border:2px solid #e7e0cb;border-radius:12px;background:var(--cream);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(244,180,0,.18)}
.field textarea{min-height:96px;resize:vertical}
.field .hint{font-size:.85rem;color:var(--ink-soft);margin-top:5px}
.grid-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:520px){.grid-fields{grid-template-columns:1fr}}
.checkrow{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;color:var(--ink-soft);line-height:1.45}
.checkrow input{width:auto;margin-top:5px;flex:0 0 auto}
.hp{position:absolute;left:-9999px} /* honeypot */

/* info aside */
.aside-box{background:var(--cream-2);border-radius:var(--radius);padding:24px 26px;margin-bottom:22px}
.aside-box h3{margin-top:0}
.aside-box ul{margin:0;padding-left:1.1em;color:var(--ink-soft)}
.aside-box li{margin-bottom:8px}
.aside-step{display:flex;gap:12px;margin-bottom:14px}
.aside-step b{font-family:var(--font-head);color:var(--leaf-deep)}

/* org links row */
.orglinks{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* floating "request" button (reuses .float-donate position) */
.float-bloom{background:var(--leaf)}
.float-bloom:hover{background:var(--leaf-deep);color:#fff}

/* FAQ accordion (native details) */
.faq{max-width:820px;margin:34px auto 0}
.faq details{background:var(--card);border-radius:14px;box-shadow:var(--shadow-sm);margin-bottom:12px;padding:2px 22px}
.faq summary{font-family:var(--font-head);font-weight:700;cursor:pointer;padding:16px 0;list-style:none;position:relative;padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;color:var(--gold-deep);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{color:var(--ink-soft);padding-bottom:16px;margin:0}

/* wedding photo row */
.wedrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.wedrow a{display:block;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:4/5}
.wedrow img{width:100%;height:100%;object-fit:cover;transition:transform .3s;display:block}
.wedrow a:hover img{transform:scale(1.05)}
@media(max-width:600px){.wedrow{grid-template-columns:1fr 1fr}}

/* "made by our team" process grid */
.makegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
@media(max-width:760px){.makegrid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.makegrid{grid-template-columns:1fr}}
.makegrid figure{margin:0;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
.makegrid figure:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.makegrid img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.makegrid figcaption{padding:13px 16px 15px;font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:.96rem}
.makegrid figcaption span{display:block;font-family:var(--font-body);font-weight:400;color:var(--ink-soft);font-size:.85rem;margin-top:2px}

/* confirmation (thanks) */
.confirm{max-width:680px;margin:0 auto;text-align:center}
.confirm .big{font-size:3.4rem;margin-bottom:6px}