/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden;background:#fbf4e9;color:#0b3b2d}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 88% 0%,rgba(218,226,211,.82),transparent 34%),linear-gradient(180deg,#fffaf1 0%,#fbf4e9 100%)}button,input{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}:root{--cream:#fffaf1;--card:#fff9ef;--green:#0b3b2d;--sage:#e8ece1;--sage2:#d8dfd1;--orange:#cf6832;--orangeSoft:#f5dcc7;--muted:#5f746c;--line:rgba(11,59,45,.14);--shadow:0 18px 48px rgba(11,59,45,.10)}.wizard-shell{width:min(100%,940px);min-height:100vh;margin:0 auto;padding:34px 56px 146px}.wizard-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:34px;min-width:0}.brand-logo{display:block;width:min(190px,42vw);height:auto;object-fit:contain;flex:0 0 auto}.header-link{font-size:15px;font-weight:900;margin-top:12px}.step-indicator{display:grid;justify-items:end;grid-gap:10px;gap:10px;min-width:190px;margin-top:12px}.step-indicator span{font-size:24px;letter-spacing:-.03em}.step-indicator div{display:flex;gap:8px}.step-indicator i{display:block;width:34px;height:7px;border-radius:999px;background:#d9ddd1}.step-indicator i.on{background:var(--orange)}.wizard-screen{position:relative}.wizard-screen h1,.intro h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(50px,7.2vw,80px);line-height:.94;letter-spacing:-.065em;font-weight:600;color:var(--green);margin:0 0 20px;max-width:740px}.wizard-screen>p,.intro>p{font-size:25px;line-height:1.45;color:var(--muted);margin:0 0 30px;max-width:720px}.eyebrow{display:inline-flex!important;width:auto;max-width:none!important;border-radius:999px;background:var(--orangeSoft);color:#88411f!important;text-transform:uppercase;font-size:13px!important;font-weight:950;letter-spacing:.13em;line-height:1!important;padding:9px 14px;margin:0 0 18px!important}.card,.intro{border:1px solid var(--line);background:rgba(255,249,239,.9);border-radius:28px;padding:26px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.card.compact{margin-top:18px}.question{display:grid;grid-gap:13px;gap:13px;min-width:0}.question>span,.question>span{font-size:22px;font-weight:950;letter-spacing:-.02em;color:var(--green)}.text-input{width:100%;min-width:0;height:68px;border:1px solid rgba(11,59,45,.22);border-radius:16px;background:rgba(255,255,255,.68);padding:0 18px;color:var(--green);font-size:22px;font-weight:700;outline:0}.text-input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(207,104,50,.13)}.divider{border:0;border-top:1px solid rgba(11,59,45,.12);margin:26px 0}.pill-row{display:flex;gap:13px;align-items:center;flex-wrap:wrap}.pill{border:0;border-radius:999px;background:var(--sage);color:var(--green);min-height:54px;padding:0 22px;font-size:19px;font-weight:800;white-space:nowrap}.pill.selected{background:var(--orangeSoft)}.two-inputs{display:grid;grid-template-columns:1fr 1fr;grid-gap:13px;gap:13px;margin-top:13px}.two-columns{display:grid;grid-template-columns:250px minmax(0,1fr);grid-gap:28px;gap:28px;align-items:start}.weight-input{display:grid;grid-template-columns:minmax(0,1fr) 66px;width:100%;max-width:210px;height:68px;border:1px solid rgba(11,59,45,.22);border-radius:16px;background:rgba(255,255,255,.68);overflow:hidden}.weight-input input{min-width:0;border:0;outline:0;background:transparent;padding:0 18px;color:var(--green);font-size:22px;font-weight:700}.weight-input span{display:grid;place-items:center;border-left:1px solid rgba(11,59,45,.13);font-weight:950}.search-box{position:relative}.search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;background:#fffaf1;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.search-results button{display:block;width:100%;border:0;background:transparent;text-align:left;color:var(--green);padding:15px 17px;font-weight:850}.option-panel{margin:0 0 16px;border:1px solid var(--line);background:rgba(255,249,239,.86);border-radius:22px;padding:18px;box-shadow:0 10px 24px rgba(11,59,45,.045)}.option-panel>div{display:flex;gap:10px;flex-wrap:wrap}.chip{border:1px solid var(--line);border-radius:999px;background:#fffaf1;color:var(--green);padding:12px 16px;font-weight:850}.chip.selected{background:var(--green);border-color:var(--green);color:#fff}.chip.muted{color:var(--muted)}.check-line{display:flex;gap:12px;align-items:center;font-weight:850;color:var(--green)}.check-line input{width:20px;height:20px}.progress-status{display:flex;justify-content:space-between;align-items:center;margin:40px 0 12px;font-size:24px}.progress-status strong{font-weight:500}.loading-bar{height:10px;border-radius:999px;background:var(--sage2);overflow:hidden}.loading-bar i{display:block;height:100%;background:var(--orange);border-radius:999px;transition:width .25s ease}.task-list{display:grid;grid-gap:15px;gap:15px;margin-top:42px}.task{display:grid;grid-template-columns:68px minmax(0,1fr) 40px;grid-gap:18px;gap:18px;align-items:center;border:1px solid var(--line);background:rgba(255,249,239,.78);border-radius:20px;padding:20px;box-shadow:0 10px 24px rgba(11,59,45,.055)}.task>span{width:62px;height:62px;border-radius:999px;background:var(--sage);display:grid;place-items:center;font-size:22px}.task strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:27px;letter-spacing:-.035em}.task strong:before{content:"";display:inline-block;width:10px;height:10px;background:var(--orange);border-radius:999px;margin-right:13px;vertical-align:middle}.task p{margin:6px 0 0;color:var(--muted);font-size:18px;line-height:1.35}.task em{width:36px;height:36px;border-radius:999px;background:var(--sage);display:grid;place-items:center;font-style:normal;font-weight:950}.task em:empty{background:conic-gradient(var(--orange) 0 16%,#c7cdbf 16% 28%,transparent 28% 100%);border:7px dotted #c7cdbf}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:12px;gap:12px}.result-card{background:rgba(255,249,239,.84);border:1px solid var(--line);border-radius:18px;padding:17px}.result-card strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:32px;letter-spacing:-.045em}.result-card span{display:block;color:var(--muted);font-size:13px;font-weight:900}.section-title{font-family:Georgia,"Times New Roman",serif;font-size:38px;letter-spacing:-.045em;margin:30px 0 14px}.meal-results{display:grid;grid-template-columns:1fr 1fr;grid-gap:13px;gap:13px}.meal-results article{display:grid;grid-template-columns:132px minmax(0,1fr);grid-gap:14px;gap:14px;align-items:center;border:1px solid var(--line);background:rgba(255,249,239,.84);border-radius:18px;padding:12px;box-shadow:0 10px 24px rgba(11,59,45,.045)}.meal-results img,.image-placeholder{width:128px;height:86px;border-radius:14px;object-fit:contain;background:#fffaf1}.meal-results strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:27px;line-height:1.05}.meal-results span{display:block;color:var(--muted);font-weight:850;margin-top:4px}.notice{margin:0 0 16px;border-radius:16px;background:rgba(232,236,225,.92);border:1px solid var(--line);padding:13px 15px;font-weight:850}.notice.error{background:var(--orangeSoft);color:#843d1d}.sticky-footer{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,940px);z-index:50;padding:15px 56px 19px;background:linear-gradient(180deg,rgba(248,241,231,0),rgba(248,241,231,.98) 28%,#f8f1e7);display:grid;grid-template-columns:auto minmax(0,1fr);grid-gap:11px;gap:11px}.primary,.back{border:0;border-radius:24px;min-height:68px;padding:0 24px;font-size:23px;font-weight:950}.primary{background:#073e2d;color:#fff;box-shadow:0 18px 34px rgba(11,59,45,.2)}.primary.solo{display:inline-flex;align-items:center;justify-content:center;margin-top:12px}.primary span{font-size:31px;margin-left:18px}.primary:disabled,.back:disabled{opacity:.55}.back{min-width:104px;background:rgba(255,249,239,.86);border:1px solid var(--line);color:var(--green)}.sticky-footer .primary:first-child{grid-column:1/-1}.sticky-footer p{grid-column:1/-1;margin:0;text-align:center;color:var(--muted);font-size:14px;font-weight:800}@media(max-width:760px){.wizard-shell{padding:24px 18px 136px}.wizard-header{margin-bottom:26px}.brand-logo{width:min(150px,38vw)}.step-indicator{min-width:auto;gap:8px}.step-indicator span{font-size:18px}.step-indicator div{gap:5px}.step-indicator i{width:26px;height:6px}.wizard-screen h1,.intro h1{font-size:clamp(42px,11vw,62px);margin-bottom:16px}.wizard-screen>p,.intro>p{font-size:20px;margin-bottom:24px}.card,.intro{padding:20px;border-radius:24px}.question>span{font-size:20px}.text-input{height:60px;font-size:18px}.two-columns{grid-template-columns:1fr;gap:22px}.weight-input{height:60px}.pill{min-height:48px;font-size:17px;padding:0 18px}.two-inputs{gap:11px}.result-grid{grid-template-columns:1fr 1fr}.meal-results{grid-template-columns:1fr}.task{grid-template-columns:58px minmax(0,1fr) 36px;padding:16px}.task>span{width:52px;height:52px}.task strong{font-size:23px}.task p{font-size:16px}.sticky-footer{padding:14px 18px 18px}.primary,.back{min-height:62px;font-size:20px}}@media(max-width:430px){.wizard-shell{padding-left:13px;padding-right:13px}.wizard-header{gap:8px}.brand-logo{width:120px}.step-indicator span{font-size:15px}.step-indicator i{width:18px;height:5px}.wizard-screen h1,.intro h1{font-size:35px;line-height:.98}.wizard-screen>p,.intro>p{font-size:16px;line-height:1.45}.card,.intro{padding:16px}.question>span{font-size:18px}.text-input{height:56px}.pill{font-size:15px;padding:0 15px}.two-inputs{grid-template-columns:1fr 1fr}.option-panel{padding:15px}.chip{padding:10px 13px}.result-card strong{font-size:28px}.meal-results article{grid-template-columns:110px 1fr}.meal-results img,.image-placeholder{width:106px;height:74px;object-fit:contain;background:#fffaf1}.sticky-footer{padding-left:13px;padding-right:13px}.back{min-width:82px}.primary,.back{font-size:18px}.sticky-footer p{font-size:12px}}
.bb-meal-mix-editor{margin-top:30px}.bb-meal-mix-editor__intro h2{font-family:Georgia,"Times New Roman",serif;font-size:38px;letter-spacing:-.045em;margin:0 0 10px}.bb-meal-mix-editor__intro p{margin:0 0 12px;color:var(--muted);font-size:17px;line-height:1.45}.bb-meal-mix-editor__notice{display:inline-flex;border-radius:999px;background:var(--orangeSoft);color:#88411f!important;font-weight:900;padding:9px 13px}.bb-meal-mix-editor__grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:13px;gap:13px;margin-top:16px}.bb-meal-card{display:grid;grid-template-columns:122px minmax(0,1fr);grid-gap:12px;gap:12px;align-items:center;border:1px solid var(--line);background:rgba(255,249,239,.84);border-radius:18px;padding:12px;box-shadow:0 10px 24px rgba(11,59,45,.045)}.bb-meal-card__image{width:118px;height:82px;border-radius:14px;object-fit:contain;background:#fffaf1}.bb-meal-card__body h3{font-family:Georgia,"Times New Roman",serif;font-size:25px;line-height:1.05;letter-spacing:-.04em;margin:0 0 5px}.bb-meal-card__body p{margin:0 0 6px;color:var(--muted);font-size:13px;font-weight:800}.bb-meal-card__body strong{display:block;color:var(--green)}.bb-meal-card__controls{grid-column:1/-1;display:flex;align-items:center;gap:10px}.bb-meal-card__controls button,.bb-meal-card__remove{border:1px solid var(--line);background:#fffaf1;color:var(--green);font-weight:950;border-radius:999px}.bb-meal-card__controls button{width:42px;height:42px;font-size:24px}.bb-meal-card__controls span{min-width:32px;text-align:center;font-weight:950}.bb-meal-card__remove{grid-column:1/-1;min-height:42px;padding:0 16px}.bb-meal-mix-editor__add{margin-top:14px;border:1px solid var(--line);background:rgba(255,249,239,.84);border-radius:18px;padding:14px;display:grid;grid-gap:8px;gap:8px}.bb-meal-mix-editor__add label{font-weight:950}.bb-meal-mix-editor__add select{height:52px;border-radius:14px;border:1px solid rgba(11,59,45,.22);background:#fffaf1;color:var(--green);font-weight:800;padding:0 12px}.bb-meal-mix-editor__summary{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:14px;border-radius:18px;background:var(--green);color:#fff;padding:16px 18px;font-size:18px}@media(max-width:760px){.bb-meal-mix-editor__grid{grid-template-columns:1fr}.bb-meal-mix-editor__summary{display:grid}.bb-meal-card{grid-template-columns:108px minmax(0,1fr)}.bb-meal-card__image{width:104px;height:72px}.bb-meal-card__body h3{font-size:22px}}

/* ================================
   Bark & Bowl Dev Checkout
   ================================ */

.checkout-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 88% 0%, rgba(218, 226, 211, 0.65), transparent 34rem),
    linear-gradient(180deg, #fffaf1 0%, #f7efe2 100%);
  color: #073f2e;
  padding: 28px 22px 56px;
}

.checkout-page-hero,
.dev-plan-summary,
.checkout-page-card,
.checkout-page-actions {
  width: min(1120px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.checkout-page-hero {
  margin-bottom: 18px;
}

.bb-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #e8903d;
  color: #073f2e;
  padding: 8px 16px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(232, 144, 61, 0.20);
}

.checkout-page-hero h1 {
  margin: 16px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(44px, 5.8vw, 74px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: #073f2e;
}

.checkout-page-hero p {
  max-width: 680px;
  margin: 0;
  color: rgba(7, 63, 46, 0.76);
  font-size: 17px;
  line-height: 1.5;
}

.dev-plan-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  background: rgba(255, 250, 241, 0.94);
  border: 1px solid rgba(7, 63, 46, 0.12);
  border-radius: 30px;
  padding: 26px 30px;
  box-shadow: 0 20px 54px rgba(7, 63, 46, 0.09);
}

.bb-kicker {
  display: block;
  margin: 0 0 8px;
  color: #e8903d !important;
  background: transparent !important;
  padding: 0;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dev-plan-summary h2,
.checkout-page-card h2,
.dev-address-form h3,
.dev-meal-info h3 {
  font-family: Georgia, "Times New Roman", serif;
}

.dev-plan-summary h2,
.checkout-page-card h2 {
  color: rgba(7, 63, 46, 0.75);
}

.dev-plan-summary h2 {
  margin: 0 0 8px;
  font-size: clamp(34px, 4.3vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.dev-plan-summary p {
  margin: 0;
  color: rgba(7, 63, 46, 0.75);
  font-size: 17px;
}

.dev-plan-price {
  min-width: 170px;
  border-radius: 24px;
  background: #073f2e;
  color: #fffaf1;
  padding: 18px 22px;
  text-align: center;
}

.dev-plan-price span {
  display: block;
  margin-bottom: 4px;
  font-weight: 850;
  color: rgba(255, 250, 241, 0.78);
}

.dev-plan-price strong {
  display: block;
  color: #fffaf1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  line-height: 1;
}

.checkout-page-card {
  margin-bottom: 18px;
  background: rgba(255, 250, 241, 0.94);
  border: 1px solid rgba(7, 63, 46, 0.12);
  border-radius: 30px;
  padding: 26px 30px;
  box-shadow: 0 20px 54px rgba(7, 63, 46, 0.09);
}

.dev-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 20px;
}

.dev-section-heading::before {
  content: "";
  display: block;
  width: 54px;
  height: 5px;
  border-radius: 999px;
  background: #e8903d;
  margin-bottom: 12px;
}

.dev-section-heading > div:first-child {
  flex: 1 1;
}

.dev-section-heading h2 {
  margin: 0 0 6px;
  font-size: 33px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.dev-section-heading p {
  margin: 0;
  color: rgba(7, 63, 46, 0.68);
  font-size: 16px;
  line-height: 1.45;
}

.dev-address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
}

.dev-address-form {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.dev-address-form h3 {
  margin: 0 0 6px;
  color: #e8903d;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.035em;
}

.dev-address-form input,
.dev-address-form textarea {
  width: 100%;
  border: 1px solid rgba(7, 63, 46, 0.14);
  border-radius: 16px;
  background: #fffaf1;
  color: #073f2e;
  padding: 13px 16px;
  font: inherit;
  outline: none;
}

.dev-address-form textarea {
  min-height: 100px;
  resize: vertical;
}

.dev-address-form input:focus,
.dev-address-form textarea:focus {
  border-color: rgba(232, 144, 61, 0.72);
  box-shadow: 0 0 0 4px rgba(232, 144, 61, 0.13);
}

.dev-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  gap: 10px;
  border: 1px solid rgba(7, 63, 46, 0.14);
  border-radius: 999px;
  background: #fffaf1;
  color: #073f2e;
  padding: 11px 16px;
  font-weight: 950;
  cursor: pointer;
}

.dev-toggle span {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(7, 63, 46, 0.24);
  border-radius: 999px;
  font-size: 13px;
}

.dev-toggle.active {
  background: #073f2e;
  border-color: #073f2e;
  color: #fffaf1;
}

.dev-toggle.active span {
  background: #e8903d;
  border-color: #e8903d;
  color: #073f2e;
}

.dev-same-address-card {
  min-height: 158px;
  border: 1px dashed rgba(7, 63, 46, 0.24);
  border-radius: 22px;
  background: rgba(7, 63, 46, 0.035);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dev-same-address-card strong {
  margin-bottom: 10px;
  color: #073f2e;
}

.dev-same-address-card p {
  margin: 0 0 6px;
  color: rgba(7, 63, 46, 0.72);
}

.dev-totals.compact {
  display: flex;
  gap: 10px;
  padding: 0;
  white-space: nowrap;
}

.dev-totals.compact strong {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #073f2e;
  color: #fffaf1;
  padding: 12px 18px;
  font-weight: 950;
}

.dev-meal-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 13px;
  gap: 13px;
}

.dev-meal-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  grid-gap: 16px;
  gap: 16px;
  align-items: center;
  min-height: 108px;
  background: #fffaf1;
  border: 1px solid rgba(7, 63, 46, 0.10);
  border-radius: 22px;
  padding: 13px 15px;
}

.dev-meal-card img,
.dev-meal-placeholder {
  width: 108px;
  height: 76px;
  object-fit: cover;
  border-radius: 16px;
  background: rgba(7, 63, 46, 0.07);
}

.dev-meal-placeholder {
  display: grid;
  place-items: center;
  color: rgba(7, 63, 46, 0.55);
  font-weight: 950;
}

.dev-meal-info h3 {
  margin: 0 0 5px;
  color: #073f2e;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.dev-meal-info p {
  margin: 0 0 8px;
  color: rgba(7, 63, 46, 0.7);
  text-transform: capitalize;
}

.dev-meal-info strong {
  color: #073f2e;
}

.dev-meal-controls {
  display: grid;
  grid-template-columns: 38px 28px 38px;
  align-items: center;
  grid-gap: 7px;
  gap: 7px;
}

.dev-meal-controls button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(7, 63, 46, 0.16);
  border-radius: 999px;
  background: #fbf5eb;
  color: #073f2e;
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
}

.dev-meal-controls span {
  text-align: center;
  font-weight: 950;
}

.checkout-page-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 36px;
}

.dev-button {
  border: 0;
  border-radius: 999px;
  background: #073f2e;
  color: #fffaf1;
  padding: 16px 28px;
  font-weight: 950;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(7, 63, 46, 0.22);
}

.dev-link {
  color: #073f2e;
  font-weight: 950;
  text-decoration: none;
}

@media (max-width: 900px) {
  .checkout-page {
    padding: 18px 14px 64px;
  }

  .checkout-page-hero h1 {
    font-size: 44px;
  }

  .dev-plan-summary {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
  }

  .dev-plan-price {
    width: 100%;
  }

  .checkout-page-card {
    padding: 20px;
    border-radius: 24px;
  }

  .dev-section-heading {
    flex-direction: column;
    gap: 14px;
  }

  .dev-totals.compact {
    width: 100%;
  }

  .dev-totals.compact strong {
    flex: 1 1;
    justify-content: center;
  }

  .dev-address-grid,
  .dev-meal-cards {
    grid-template-columns: 1fr;
  }

  .dev-toggle {
    width: 100%;
  }

  .dev-meal-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .dev-meal-card img,
  .dev-meal-placeholder {
    width: 92px;
    height: 72px;
  }

  .dev-meal-controls {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }

  .checkout-page-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dev-button,
  .dev-link {
    text-align: center;
  }
}

.dev-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.checkout-created-card h2 {
  color: #e8903d;
}

/* ================================
   Bark & Bowl Dev Account
   ================================ */

.account-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 88% 0%, rgba(218, 226, 211, 0.65), transparent 34rem),
    linear-gradient(180deg, #fffaf1 0%, #f7efe2 100%);
  color: #073f2e;
  padding: 28px 22px 60px;
}

.account-hero,
.account-login-card,
.account-plan-card,
.account-actions,
.account-card {
  width: min(1120px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.account-hero {
  margin-bottom: 18px;
}

.account-hero h1 {
  margin: 16px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(44px, 5.8vw, 74px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: #073f2e;
}

.account-hero p {
  max-width: 700px;
  margin: 0;
  color: rgba(7, 63, 46, 0.76);
  font-size: 17px;
  line-height: 1.5;
}

.account-login-card,
.account-plan-card,
.account-card {
  margin-bottom: 18px;
  background: rgba(255, 250, 241, 0.94);
  border: 1px solid rgba(7, 63, 46, 0.12);
  border-radius: 30px;
  padding: 26px 30px;
  box-shadow: 0 20px 54px rgba(7, 63, 46, 0.09);
}

.account-login-card {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  grid-gap: 24px;
  gap: 24px;
  align-items: center;
}

.account-login-card h2,
.account-plan-card h2,
.account-card h2,
.account-meal h3 {
  font-family: Georgia, "Times New Roman", serif;
}

.account-login-card h2,
.account-plan-card h2,
.account-card h2 {
  color: #e8903d;
}

.account-login-card h2,
.account-card h2 {
  margin: 0 0 8px;
  font-size: 32px;
  letter-spacing: -0.04em;
}

.account-login-card p,
.account-card p,
.account-plan-card p {
  color: rgba(7, 63, 46, 0.72);
}

.account-email-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 12px;
  gap: 12px;
}

.account-email-row input {
  border: 1px solid rgba(7, 63, 46, 0.14);
  border-radius: 16px;
  background: #fffaf1;
  color: #073f2e;
  padding: 14px 16px;
  font: inherit;
  outline: none;
}

.account-email-row button,
.account-actions button {
  border: 0;
  border-radius: 999px;
  background: #073f2e;
  color: #fffaf1;
  padding: 14px 22px;
  font-weight: 950;
  cursor: pointer;
}

.account-email-row button:disabled,
.account-actions button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.account-plan-card {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}

.account-plan-card h2 {
  margin: 0 0 8px;
  font-size: clamp(34px, 4.3vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.account-price {
  min-width: 170px;
  border-radius: 24px;
  background: #073f2e;
  color: #fffaf1;
  padding: 18px 22px;
  text-align: center;
}

.account-price span {
  display: block;
  margin-bottom: 4px;
  font-weight: 850;
  color: rgba(255, 250, 241, 0.78);
}

.account-price strong {
  color: #fffaf1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.account-actions button.danger {
  background: #9f3b2f;
}

.account-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.account-section-heading h2 {
  margin: 0;
}

.account-section-heading p {
  margin: 0;
}

.account-meal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 13px;
  gap: 13px;
}

.account-meal {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  grid-gap: 16px;
  gap: 16px;
  align-items: center;
  background: #fffaf1;
  border: 1px solid rgba(7, 63, 46, 0.10);
  border-radius: 22px;
  padding: 13px 15px;
}

.account-meal img,
.account-meal-placeholder {
  width: 108px;
  height: 76px;
  object-fit: cover;
  border-radius: 16px;
  background: rgba(7, 63, 46, 0.07);
}

.account-meal-placeholder {
  display: grid;
  place-items: center;
  color: rgba(7, 63, 46, 0.55);
  font-weight: 950;
}

.account-meal h3 {
  margin: 0 0 5px;
  color: #073f2e;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.account-meal p {
  margin: 0 0 8px;
}

.account-error h2 {
  color: #9f3b2f;
}

@media (max-width: 900px) {
  .account-shell {
    padding: 18px 14px 64px;
  }

  .account-login-card,
  .account-plan-card,
  .account-section-heading {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .account-email-row,
  .account-meal-grid {
    grid-template-columns: 1fr;
  }

  .account-price {
    width: 100%;
  }

  .account-actions {
    flex-direction: column;
  }

  .account-actions button {
    width: 100%;
  }
}

.account-form-grid,
.account-address-grid {
  display: grid;
  grid-gap: 13px;
  gap: 13px;
}

.account-form-grid {
  grid-template-columns: repeat(2, 1fr);
}

.account-address-grid {
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.account-form-grid input,
.account-form-grid select,
.account-address-form input,
.account-address-form textarea {
  width: 100%;
  border: 1px solid rgba(7, 63, 46, 0.14);
  border-radius: 16px;
  background: #fffaf1;
  color: #073f2e;
  padding: 13px 16px;
  font: inherit;
  outline: none;
}

.account-address-form {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.account-address-form h3 {
  margin: 0 0 4px;
  color: #e8903d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
}

.account-address-form textarea {
  min-height: 100px;
  resize: vertical;
}

.account-save,
.account-address-form button {
  width: -moz-fit-content;
  width: fit-content;
  border: 0;
  border-radius: 999px;
  background: #073f2e;
  color: #fffaf1;
  padding: 14px 22px;
  font-weight: 950;
  cursor: pointer;
  margin-top: 14px;
}

.account-notice h2 {
  color: #e8903d;
}

@media (max-width: 900px) {
  .account-form-grid,
  .account-address-grid {
    grid-template-columns: 1fr;
  }

  .account-save,
  .account-address-form button {
    width: 100%;
  }
}

.account-tabs {
  width: min(1120px, 100%);
  margin: 0 auto 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.account-tabs button {
  border: 1px solid rgba(7, 63, 46, 0.14);
  border-radius: 999px;
  background: #fffaf1;
  color: #073f2e;
  padding: 12px 18px;
  font-weight: 950;
  cursor: pointer;
}

.account-tabs button.active {
  background: #073f2e;
  border-color: #073f2e;
  color: #fffaf1;
}

@media (max-width: 900px) {
  .account-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .account-tabs button {
    width: 100%;
  }
}

.account-meal.editable {
  grid-template-columns: 108px minmax(0, 1fr) auto;
}

.account-meal-controls {
  display: grid;
  grid-template-columns: 38px 28px 38px;
  align-items: center;
  grid-gap: 7px;
  gap: 7px;
}

.account-meal-controls button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(7, 63, 46, 0.16);
  border-radius: 999px;
  background: #fbf5eb;
  color: #073f2e;
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
}

.account-meal-controls span {
  text-align: center;
  font-weight: 950;
}

.account-meal-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.account-meal-summary strong {
  border-radius: 999px;
  background: #073f2e;
  color: #fffaf1;
  padding: 12px 18px;
}

.account-meal-edit-footer {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  align-items: center;
}

.account-meal-edit-footer select {
  flex: 1 1;
  border: 1px solid rgba(7, 63, 46, 0.14);
  border-radius: 16px;
  background: #fffaf1;
  color: #073f2e;
  padding: 14px 16px;
  font: inherit;
}

.account-meal-edit-footer button {
  border: 0;
  border-radius: 999px;
  background: #073f2e;
  color: #fffaf1;
  padding: 14px 22px;
  font-weight: 950;
  cursor: pointer;
}

.account-meal-edit-footer button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .account-meal.editable {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .account-meal-controls {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }

  .account-meal-edit-footer {
    flex-direction: column;
    align-items: stretch;
  }
}

.account-login-page {
  min-height: 100vh;
  background: #fbf5eb;
  color: #073f2e;
  display: grid;
  place-items: center;
  padding: 28px;
}

.account-login-panel {
  width: min(560px, 100%);
  border-radius: 34px;
  background: #fffaf1;
  border: 1px solid rgba(7, 63, 46, 0.12);
  box-shadow: 0 24px 80px rgba(7, 63, 46, 0.12);
  padding: clamp(28px, 5vw, 52px);
}

.account-login-panel h1 {
  margin: 16px 0 12px;
  color: #073f2e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.account-login-panel p {
  margin: 0;
  color: rgba(7, 63, 46, 0.72);
  font-weight: 750;
  line-height: 1.55;
}

.account-login-form {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  margin-top: 28px;
}

.account-login-form input {
  width: 100%;
  border: 1px solid rgba(7, 63, 46, 0.14);
  border-radius: 18px;
  background: #fbf5eb;
  color: #073f2e;
  padding: 16px 18px;
  font: inherit;
  outline: none;
}

.account-login-form button {
  border: 0;
  border-radius: 999px;
  background: #073f2e;
  color: #fffaf1;
  padding: 17px 22px;
  font-weight: 950;
  cursor: pointer;
}

.account-login-form button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.account-login-error {
  border-radius: 16px;
  background: rgba(178, 64, 41, 0.09);
  color: #9d341f;
  padding: 13px 16px;
  font-weight: 850;
}

.checkout-muted {
  color: rgba(7, 63, 46, 0.68);
  font-weight: 750;
  line-height: 1.55;
}

.checkout-muted {
  color: rgba(7, 63, 46, 0.68);
  font-weight: 750;
  line-height: 1.55;
}

.delivery-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 10px;
}

.delivery-date-option {
  border: 1px solid rgba(29, 74, 55, 0.18);
  border-radius: 18px;
  background: #fffaf0;
  color: #163d2e;
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(20, 53, 40, 0.06);
}

.delivery-date-option strong {
  display: block;
  font-size: 15px;
  line-height: 1.1;
}

.delivery-date-option span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.72;
}

.delivery-date-option.is-selected {
  border-color: #173f2f;
  background: #173f2f;
  color: #fffaf0;
}

@media (min-width: 720px) {
  .delivery-date-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* Wizard weekday-only delivery selector */
.delivery-date-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;gap:10px;margin-top:6px}.delivery-date-option{border:1px solid rgba(11,59,45,.18);border-radius:18px;background:#fffaf1;color:#0b3b2d;padding:14px 12px;text-align:left;cursor:pointer;box-shadow:0 10px 24px rgba(20,53,40,.06)}.delivery-date-option strong{display:block;font-size:15px;line-height:1.1}.delivery-date-option span{display:block;margin-top:4px;font-size:12px;opacity:.72}.delivery-date-option.is-selected{border-color:#073f2e;background:#073f2e;color:#fffaf1}.helper-text{margin:3px 0 0;color:rgba(11,59,45,.68);font-size:14px;line-height:1.35}.dev-address-form input.is-required-missing,.dev-address-form textarea.is-required-missing{border-color:#cf4f32!important;background:#fff1e8!important;box-shadow:0 0 0 4px rgba(207,79,50,.13)!important}.checkout-field-error{display:block;margin-top:-5px;color:#a33b24;font-size:13px;font-weight:850}@media(min-width:720px){.delivery-date-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* Bark & Bowl checkout fixes */
.checkout-required-section {
  border-color: rgba(207, 79, 50, 0.38) !important;
  background: linear-gradient(180deg, rgba(255, 244, 232, 0.96), rgba(255, 250, 241, 0.96)) !important;
  box-shadow: 0 18px 45px rgba(207, 104, 50, 0.10) !important;
}

.checkout-required-badge {
  display: inline-flex;
  width: max-content;
  margin-bottom: 8px;
  border-radius: 999px;
  padding: 7px 11px;
  background: #f2994a;
  color: #173f2f;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.checkout-validation-summary {
  border-color: rgba(207, 79, 50, 0.45) !important;
  background: #fff1e8 !important;
  color: #173f2f;
}

.checkout-validation-summary strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  color: #a33b24;
}

.checkout-validation-summary p {
  margin: 6px 0 0;
  font-weight: 800;
}

.dev-address-form input.is-required-missing,
.dev-address-form textarea.is-required-missing {
  border-color: #cf4f32 !important;
  background: #fff1e8 !important;
  box-shadow: 0 0 0 4px rgba(207, 79, 50, .16) !important;
}

.checkout-field-error {
  display: block;
  margin-top: -5px;
  color: #a33b24;
  font-size: 13px;
  font-weight: 900;
}

.dev-meal-card img,
.bb-meal-card__image,
.meal-results img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #fffaf1;
  object-fit: cover;
  transform: translateZ(0);
}

.delivery-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 6px;
}

.delivery-date-option {
  border: 1px solid rgba(11,59,45,.18);
  border-radius: 18px;
  background: #fffaf1;
  color: #0b3b2d;
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(20,53,40,.06);
}

.delivery-date-option.is-selected {
  border-color: #073f2e;
  background: #073f2e;
  color: #fffaf1;
}

.delivery-date-option strong { display: block; font-size: 15px; line-height: 1.1; }
.delivery-date-option span { display: block; margin-top: 4px; font-size: 12px; opacity: .72; }

@media (min-width: 720px) {
  .delivery-date-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.account-dog-plans {
  margin-top: 22px;
}

.account-dog-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.account-dog-plan-card {
  border: 1px solid rgba(5, 64, 46, 0.16);
  border-radius: 22px;
  background: rgba(255, 250, 240, 0.9);
  color: #053f2e;
  padding: 16px;
  min-height: 128px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(5, 64, 46, 0.06);
}

.account-dog-plan-card span,
.account-dog-plan-card strong,
.account-dog-plan-card small {
  display: block;
}

.account-dog-plan-card span {
  font-weight: 900;
  font-size: 18px;
}

.account-dog-plan-card strong {
  margin-top: 8px;
  font-size: 26px;
}

.account-dog-plan-card small {
  margin-top: 8px;
  opacity: 0.75;
  line-height: 1.35;
}

.account-dog-plan-card.active {
  background: #053f2e;
  color: #fffaf0;
  border-color: #053f2e;
}

/* Fix result screen sticky footer buttons overlapping */
.result-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: center;
}

.result-actions .secondary {
  border: 1px solid var(--line);
  border-radius: 24px;
  min-height: 68px;
  padding: 0 24px;
  background: rgba(255,249,239,.86);
  color: var(--green);
  font-size: 23px;
  font-weight: 950;
}

.result-actions .primary {
  width: 100%;
}

@media (max-width: 760px) {
  .wizard-shell {
    padding-bottom: 230px;
  }

  .result-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .result-actions .secondary {
    min-height: 44px;
    border-radius: 999px;
    font-size: 16px;
    order: 1;
  }

  .result-actions .primary {
    min-height: 62px;
    order: 2;
  }
}

@media (max-width: 430px) {
  .wizard-shell {
    padding-bottom: 245px;
  }

  .result-actions .secondary {
    min-height: 42px;
    font-size: 15px;
  }
}

/* Result screen: checkout CTA only */
.result-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  gap: 10px;
}

.result-actions .primary {
  width: 100%;
}

/* Wizard2: add another dog at the beginning */
.planned-dogs {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 14px;
}

.planned-dog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
}

.planned-dog-remove,
.add-dog-start {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,249,239,.9);
  color: var(--green);
  font-weight: 950;
}

.planned-dog-remove {
  min-height: 52px;
  padding: 0 18px;
}

.add-dog-start {
  width: -moz-fit-content;
  width: fit-content;
  min-height: 48px;
  padding: 0 20px;
  background: var(--sage);
}

.result-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  gap: 10px;
}

.result-actions .primary {
  width: 100%;
}

@media (max-width: 760px) {
  .planned-dog-row {
    grid-template-columns: 1fr;
  }

  .planned-dog-remove,
  .add-dog-start {
    width: 100%;
  }

  .wizard-shell {
    padding-bottom: 210px;
  }
}

/* Wizard2 refinement: mobile-first sticky footer CTA alignment */
.sticky-footer .primary,
.result-actions .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  line-height: 1.05;
  white-space: nowrap;
}

.sticky-footer .primary span,
.result-actions .primary span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  line-height: 1;
  transform: translateY(1px);
}

@media (max-width: 760px) {
  .sticky-footer {
    align-items: center;
  }

  .sticky-footer .primary,
  .result-actions .primary {
    min-width: 0;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 18px;
    letter-spacing: -0.01em;
  }

  .sticky-footer .primary span,
  .result-actions .primary span {
    font-size: 24px;
  }
}

@media (max-width: 430px) {
  .sticky-footer .primary,
  .result-actions .primary {
    font-size: 16px;
    gap: 10px;
  }
}

.account-field-error {
  margin: 8px 0 14px;
  color: #9f2d20;
  font-size: 14px;
  font-weight: 700;
}

.account-inline-error {
  margin: 12px 0 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(159, 45, 32, 0.28);
  background: #fff1ee;
  color: #9f2d20;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.account-inline-error strong {
  color: #9f2d20;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.1;
}

.account-inline-error span {
  color: #9f2d20;
  font-size: 14px;
  font-weight: 700;
}


/* Account form inline validation errors */
.account-inline-error {
  margin: 12px 0 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(159, 45, 32, 0.28);
  background: #fff1ee;
  color: #9f2d20;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.account-inline-error strong {
  color: #9f2d20;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.1;
}

.account-inline-error span {
  color: #9f2d20;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

/* --- Account orders panel --- */
.account-orders-card {
  overflow: hidden;
}

.account-orders-heading {
  align-items: flex-start;
}

.account-orders-summary-pill {
  min-width: 145px;
  border-radius: 22px;
  background: #073f2e;
  color: #fffaf1;
  padding: 14px 18px;
  text-align: center;
}

.account-orders-summary-pill span {
  display: block;
  color: rgba(255, 250, 241, 0.78);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.account-orders-summary-pill strong {
  color: #fffaf1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.1;
}

.account-empty-state {
  border: 1px dashed rgba(7, 63, 46, 0.22);
  border-radius: 22px;
  padding: 24px;
  background: rgba(251, 245, 235, 0.72);
}

.account-empty-state h3 {
  margin: 0 0 6px;
  color: #073f2e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
}

.account-empty-state p {
  margin: 0;
}

.account-orders-list {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.account-order-card {
  border: 1px solid rgba(7, 63, 46, 0.12);
  border-radius: 26px;
  background: #fffaf1;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(7, 63, 46, 0.055);
}

.account-order-main {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.account-order-label {
  display: inline-flex;
  width: max-content;
  margin-bottom: 8px;
  border-radius: 999px;
  background: #f7dfc8;
  color: #073f2e;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.account-order-card h3 {
  margin: 0;
  color: #073f2e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 3.5vw, 42px);
  line-height: .95;
  letter-spacing: -.045em;
}

.account-order-total {
  min-width: 128px;
  border-radius: 20px;
  background: #073f2e;
  color: #fffaf1;
  padding: 13px 16px;
  text-align: center;
}

.account-order-total span {
  display: block;
  color: rgba(255, 250, 241, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.account-order-total strong {
  color: #fffaf1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.05;
}

.account-order-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 14px;
}

.account-order-meta-grid > div {
  border-radius: 16px;
  background: #fbf5eb;
  border: 1px solid rgba(7, 63, 46, 0.08);
  padding: 12px;
}

.account-order-meta-grid span {
  display: block;
  margin-bottom: 3px;
  color: rgba(7, 63, 46, 0.56);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.account-order-meta-grid strong {
  color: #073f2e;
  font-size: 14px;
}

.account-order-meta-grid strong.is-paid {
  color: #0f6b48;
}

.account-order-meta-grid strong.is-pending {
  color: #9f6a16;
}

.account-order-items {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid rgba(7, 63, 46, 0.10);
  padding-top: 12px;
}

.account-order-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  color: #073f2e;
  font-size: 14px;
}

.account-order-item span {
  font-weight: 850;
}

.account-order-item strong {
  color: rgba(7, 63, 46, 0.72);
}

.account-order-item em {
  color: #073f2e;
  font-style: normal;
  font-weight: 950;
}

.account-order-tracking {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
  border-radius: 16px;
  background: #eef4df;
  padding: 12px 14px;
  color: #073f2e;
  font-weight: 850;
}

.account-order-tracking a {
  color: #073f2e;
  text-decoration: underline;
  font-weight: 950;
}

@media (max-width: 900px) {
  .account-orders-heading,
  .account-order-main,
  .account-order-tracking {
    flex-direction: column;
  }

  .account-orders-summary-pill,
  .account-order-total {
    width: 100%;
  }

  .account-order-meta-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .account-order-meta-grid,
  .account-order-item {
    grid-template-columns: 1fr;
  }
}

/* --- Account orders collapsible contents --- */
.account-order-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(7, 63, 46, 0.10);
}

.account-order-toggle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 999px;
  background: #073f2e;
  color: #fffaf1;
  padding: 12px 18px;
  cursor: pointer;
  font-weight: 950;
  font-size: 14px;
  box-shadow: 0 12px 24px rgba(7, 63, 46, 0.14);
}

.account-order-toggle:hover {
  transform: translateY(-1px);
}

.account-order-items {
  margin-top: 14px;
  border: 1px solid rgba(7, 63, 46, 0.10);
  border-radius: 20px;
  background: #fbf5eb;
  padding: 14px;
}

.account-order-items-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(7, 63, 46, 0.10);
  color: #073f2e;
}

.account-order-items-heading strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1;
}

.account-order-items-heading span {
  color: rgba(7, 63, 46, 0.62);
  font-size: 13px;
  font-weight: 900;
}

.account-order-tracking-inline {
  margin: 0;
  min-width: 220px;
}

@media (max-width: 900px) {
  .account-order-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .account-order-toggle,
  .account-order-tracking-inline {
    width: 100%;
  }
}


/* --- Account payment panel --- */
.account-payment-card {
  overflow: hidden;
}

.account-payment-heading {
  align-items: flex-start;
}

.account-payment-pill {
  min-width: 150px;
  border-radius: 22px;
  background: #073f2e;
  color: #fffaf1;
  padding: 14px 18px;
  text-align: center;
}

.account-payment-pill span {
  display: block;
  color: rgba(255, 250, 241, 0.78);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.account-payment-pill strong {
  color: #fffaf1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.1;
}

.account-payment-body {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(300px, 1.14fr);
  grid-gap: 18px;
  gap: 18px;
  margin-top: 18px;
}

.account-payment-copy,
.account-payment-points > div {
  border: 1px solid rgba(7, 63, 46, 0.10);
  border-radius: 22px;
  background: #fbf5eb;
  padding: 20px;
}

.account-payment-copy h3 {
  margin: 0 0 10px;
  color: #073f2e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: .95;
  letter-spacing: -.04em;
}

.account-payment-copy p,
.account-payment-points p {
  margin: 0;
}

.account-payment-points {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.account-payment-points > div {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
}

.account-payment-points span {
  width: max-content;
  border-radius: 999px;
  background: #f7dfc8;
  color: #073f2e;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 950;
}

.account-payment-points strong {
  color: #073f2e;
  font-size: 15px;
}

.account-payment-button {
  margin-top: 18px;
}

@media (max-width: 900px) {
  .account-payment-heading,
  .account-payment-body {
    grid-template-columns: 1fr;
  }

  .account-payment-pill,
  .account-payment-button {
    width: 100%;
  }
}

/* --- Customer dog profile editor --- */
.account-dog-profile-panel {
  display: grid;
  grid-gap: 18px;
  gap: 18px;
}

.account-field {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
}

.account-field span {
  color: var(--forest);
  font-size: 13px;
  font-weight: 850;
}

.account-field input,
.account-field select {
  width: 100%;
}

.dog-profile-grid {
  align-items: start;
}

.account-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.account-checkbox-row label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: var(--cream-2);
  color: var(--forest);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 850;
}

.account-checkbox-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--forest);
}

.dog-profile-options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.dog-profile-option-group {
  border: 1px solid var(--line);
  background: var(--cream-2);
  border-radius: 20px;
  padding: 16px;
}

.dog-profile-option-group h3 {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.1;
}

.dog-profile-option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dog-profile-option-list label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(6, 59, 45, 0.14);
  background: #fffaf1;
  color: var(--forest);
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.dog-profile-option-list label.active {
  background: #dbeabf;
  border-color: rgba(6, 59, 45, 0.28);
}

.dog-profile-option-list input {
  width: 15px;
  height: 15px;
  accent-color: var(--forest);
}

@media (max-width: 900px) {
  .dog-profile-options-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Account dog breed search --- */
.account-breed-search-field {
  position: relative;
}

.account-breed-search {
  position: relative;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.account-breed-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffaf1;
  box-shadow: var(--shadow);
}

.account-breed-results button {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(6, 59, 45, 0.08);
  background: transparent;
  color: var(--forest);
  text-align: left;
  padding: 13px 15px;
  font-weight: 850;
}

.account-breed-results button:hover,
.account-breed-results button:focus {
  background: rgba(232, 144, 61, 0.12);
  outline: none;
}

.account-selected-breed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(6, 59, 45, 0.13);
  border-radius: 999px;
  background: rgba(219, 234, 191, 0.62);
  padding: 8px 10px 8px 13px;
}

.account-selected-breed span {
  font-size: 13px;
  font-weight: 850;
}

.account-selected-breed button {
  border: 0;
  border-radius: 999px;
  background: var(--forest);
  color: #fffaf1;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 850;
}

.account-field-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

/* --- Add another dog account flow --- */
.account-add-dog-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.account-add-dog-strip h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.account-add-dog-strip p {
  margin: 0;
  color: var(--muted);
}

.account-add-dog-strip button,
.account-secondary-button {
  border: 1px solid rgba(6, 59, 45, 0.16);
  border-radius: 999px;
  background: #fffaf1;
  color: var(--forest);
  padding: 12px 17px;
  font-weight: 900;
  cursor: pointer;
}

.account-add-dog-strip button:hover,
.account-secondary-button:hover {
  background: rgba(219, 234, 191, 0.65);
}

.account-dog-plan-card-muted {
  opacity: 0.94;
  border-style: dashed;
}

.account-dog-plan-add {
  border-style: dashed;
  background: rgba(219, 234, 191, 0.36);
}

.account-dog-plan-add strong {
  font-size: 26px;
  line-height: 1;
}

.account-soft-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(232, 144, 61, 0.28);
  border-radius: 18px;
  background: rgba(232, 144, 61, 0.09);
  color: var(--forest);
  padding: 13px 15px;
}

.account-soft-warning strong {
  flex: 0 0 auto;
  font-weight: 950;
}

.account-soft-warning span {
  color: var(--muted);
  font-weight: 750;
}

.account-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

@media (max-width: 760px) {
  .account-add-dog-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .account-add-dog-strip button,
  .account-action-row .account-save,
  .account-action-row .account-secondary-button {
    width: 100%;
  }
}


/* --- Add another dog compact account flow --- */
.account-add-dog-panel {
  border-color: rgba(6, 59, 45, 0.14);
}

.account-add-dog-heading {
  align-items: flex-start;
}

.account-add-dog-basic-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-add-dog-extra-grid {
  border-top: 1px solid rgba(6, 59, 45, 0.1);
  padding-top: 16px;
}

.account-compact-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.account-compact-toggle-row button {
  border: 1px dashed rgba(6, 59, 45, 0.2);
  border-radius: 999px;
  background: rgba(219, 234, 191, 0.35);
  color: var(--forest);
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}

.account-compact-toggle-row button:hover,
.account-compact-toggle-row button:focus {
  background: rgba(219, 234, 191, 0.65);
  outline: none;
}

.account-add-dog-picky-row {
  align-self: end;
}

.account-add-dog-options-grid {
  border-top: 1px solid rgba(6, 59, 45, 0.1);
  padding-top: 16px;
}

@media (max-width: 760px) {
  .account-add-dog-basic-grid {
    grid-template-columns: 1fr;
  }

  .account-compact-toggle-row button,
  .account-add-dog-heading .account-secondary-button {
    width: 100%;
  }
}


.account-planless-dog-card {
  cursor: default;
}

.account-dog-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.account-dog-card-actions button,
.account-remove-dog-confirm button {
  border: 1px solid rgba(5, 64, 46, 0.18);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.9);
  color: #053f2e;
  font-weight: 900;
  padding: 9px 13px;
  cursor: pointer;
}

.account-dog-card-actions button:hover,
.account-remove-dog-confirm button:hover {
  background: rgba(219, 234, 191, 0.65);
}

.account-dog-card-actions button.danger,
.account-remove-dog-confirm button.danger {
  border-color: rgba(170, 58, 49, 0.24);
  color: #a33a31;
}

.account-remove-dog-confirm {
  margin-top: 12px;
  border-top: 1px solid rgba(5, 64, 46, 0.12);
  padding-top: 12px;
}

.account-remove-dog-confirm p {
  margin: 0 0 10px;
  font-weight: 850;
}

.account-remove-dog-confirm div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


/* --- Cleaned add-dog/no-plan cards --- */
.account-planless-dog-card {
  min-height: 128px;
  background: rgba(255, 250, 240, 0.84);
  border-style: solid;
  border-color: rgba(5, 64, 46, 0.14);
  box-shadow: 0 10px 24px rgba(5, 64, 46, 0.045);
}

.account-planless-dog-card strong {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.05;
}

.account-planless-dog-card small {
  margin-top: 5px;
}

.account-planless-dog-card .account-dog-card-actions {
  margin-top: 12px;
}

.account-remove-dog-link {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #a33a31 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-remove-dog-link:hover {
  background: transparent !important;
  color: #842d27 !important;
}

.account-dog-plan-add {
  min-height: 128px;
  background: rgba(219, 234, 191, 0.42);
}

.account-dog-plan-add strong {
  margin-top: 10px;
  font-size: 24px;
}

.account-add-dog-panel {
  max-width: 1120px;
}

.account-add-dog-panel .account-section-heading h2 {
  font-size: clamp(28px, 3vw, 40px);
}

@media (max-width: 760px) {
  .account-dog-plan-grid {
    grid-template-columns: 1fr 1fr;
  }

  .account-dog-plan-card {
    min-height: 116px;
    border-radius: 18px;
    padding: 14px;
  }

  .account-dog-plan-card strong {
    font-size: 22px;
  }
}

.account-planless-dog-card {
  gap: 0.85rem;
}

.account-planless-dog-card.active-planless {
  border-color: rgba(232, 144, 61, 0.55);
  box-shadow: 0 16px 36px rgba(0, 62, 42, 0.1);
}

.account-planless-dog-main {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0;
  text-align: left;
  width: 100%;
}

.account-planless-dog-main span {
  color: var(--bb-green);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
}

.account-planless-dog-main strong {
  color: var(--bb-green);
  font-size: 1.45rem;
}

.account-planless-dog-main small {
  color: rgba(0, 62, 42, 0.72);
}

.account-small-primary-action {
  background: rgba(0, 62, 42, 0.08);
  border: 1px solid rgba(0, 62, 42, 0.18);
  border-radius: 999px;
  color: var(--bb-green);
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  padding: 0.55rem 0.85rem;
}

.account-new-plan-panel {
  border-color: rgba(232, 144, 61, 0.35);
}

.account-next-step-list {
  display: grid;
  grid-gap: 0.65rem;
  gap: 0.65rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.3rem 0;
}

.account-next-step-list span {
  background: rgba(0, 62, 42, 0.06);
  border: 1px solid rgba(0, 62, 42, 0.12);
  border-radius: 18px;
  color: var(--bb-green);
  font-weight: 800;
  padding: 0.85rem;
}

@media (max-width: 760px) {
  .account-next-step-list {
    grid-template-columns: 1fr;
  }
}

/* Account add-plan flow */
.account-add-plan-scroll-anchor {
  scroll-margin-top: 24px;
}

.account-add-plan-panel {
  border: 1px solid rgba(0, 68, 44, 0.12);
}

.account-add-plan-heading {
  align-items: flex-start;
  gap: 20px;
}

.account-plan-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 22px;
}

.account-plan-steps button {
  border: 1px solid rgba(0, 68, 44, 0.14);
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.88);
  color: #003f2b;
  cursor: pointer;
  font-weight: 800;
  padding: 12px 18px;
}

.account-plan-steps button.active {
  background: #003f2b;
  border-color: #003f2b;
  color: #fffaf0;
}

.account-add-plan-step {
  display: grid;
  grid-gap: 20px;
  gap: 20px;
}

.account-add-plan-summary-card {
  background: rgba(232, 144, 61, 0.08);
  border: 1px solid rgba(232, 144, 61, 0.22);
  border-radius: 22px;
  padding: 18px;
}

.account-add-plan-summary-card h3 {
  color: #003f2b;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 3vw, 2rem);
  margin: 0 0 6px;
}

.account-add-plan-summary-card p {
  margin: 0 0 12px;
}

.account-add-plan-summary-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-add-plan-summary-card span,
.account-add-plan-helper,
.account-dev-note {
  background: rgba(242, 247, 224, 0.82);
  border: 1px dashed rgba(0, 68, 44, 0.16);
  border-radius: 999px;
  color: #174b3a;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 8px 12px;
}

.account-add-plan-helper {
  border-radius: 20px;
  padding: 16px 18px;
}

.account-add-plan-helper h3 {
  color: #003f2b;
  margin: 0 0 4px;
}

.account-add-plan-helper p {
  margin: 0;
}

.account-add-plan-meal-grid {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.account-add-plan-meal {
  align-items: flex-start;
  background: rgba(255, 252, 244, 0.92);
  border: 1px solid rgba(0, 68, 44, 0.14);
  border-radius: 22px;
  color: #003f2b;
  cursor: pointer;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  padding: 13px;
  text-align: left;
}

.account-add-plan-meal.active {
  background: rgba(242, 247, 224, 0.95);
  border-color: rgba(0, 68, 44, 0.35);
  box-shadow: 0 14px 30px rgba(0, 68, 44, 0.08);
}

.account-add-plan-meal img {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  object-fit: cover;
  width: 100%;
}

.account-add-plan-meal span {
  font-weight: 900;
}

.account-add-plan-meal small {
  color: #48685d;
}

.account-add-plan-meal strong {
  color: #e8903d;
}

.account-add-plan-review {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.account-add-plan-review h3 {
  color: #003f2b;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  margin: 0 0 6px;
}

.account-add-plan-review p {
  margin: 0;
}

.account-add-plan-price {
  min-width: 170px;
}

.account-add-plan-review-items {
  border: 1px solid rgba(0, 68, 44, 0.1);
  border-radius: 20px;
  overflow: hidden;
}

.account-add-plan-review-items div {
  align-items: center;
  border-bottom: 1px solid rgba(0, 68, 44, 0.08);
  display: flex;
  justify-content: space-between;
  padding: 13px 16px;
}

.account-add-plan-review-items div:last-child {
  border-bottom: 0;
}

.account-dev-note {
  align-items: center;
  border-radius: 18px;
  display: flex;
  gap: 10px;
}

.account-dev-note strong {
  color: #003f2b;
}

@media (max-width: 720px) {
  .account-add-plan-heading,
  .account-add-plan-review,
  .account-dev-note {
    align-items: stretch;
    flex-direction: column;
  }

  .account-plan-steps button {
    flex: 1 1 auto;
    padding: 11px 12px;
  }

  .account-add-plan-meal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Remove draft dog/profile action --- */
.account-remove-current-dog-card {
  border-color: rgba(170, 58, 49, 0.18);
  padding: 1rem 1.2rem;
}

.account-remove-current-dog-row {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.account-remove-current-dog-row h2 {
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
}

.account-remove-current-dog-row p {
  margin: 0;
}

.account-remove-current-dog-confirm {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 760px) {
  .account-remove-current-dog-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Bark & Bowl embedded Stripe payment form */
.bb-payment-section {
  border: 1px solid rgba(23, 63, 53, 0.12);
  background: linear-gradient(180deg, #fffaf1 0%, #fff7eb 100%);
}

.bb-embedded-payment-form {
  display: grid;
  grid-gap: 18px;
  gap: 18px;
}

.bb-payment-element-shell {
  border: 1px solid rgba(23, 63, 53, 0.14);
  border-radius: 20px;
  background: #fffdf7;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(23, 63, 53, 0.08);
}

.bb-pay-button {
  width: 100%;
  justify-content: center;
}

.bb-payment-note {
  margin: 0;
  text-align: center;
}

.inline-actions {
  align-items: center;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}