body.gd-site-style-guide .gd-newsletter-page ~ :is(.gd-section--form,.gd-section--tint),
body.gd-site-style-guide .gd-newsletter-page ~ * :is(.gd-section--form,.gd-section--tint) {
  border:var(--gd-section-soft-border);
  border-radius:var(--gd-radius);
  background:var(--gd-section-soft-background);
}
@media (max-width:760px) {
  body.gd-site-style-guide .gd-newsletter-page ~ .gd-section,
  body.gd-site-style-guide .gd-newsletter-page ~ * .gd-section {
    padding:var(--gd-mobile-page-pad);
  }
}

/* Newsletter signup consumes the global control contract, overriding Fluent Forms defaults. */
body.gd-site-style-guide .gd-section--form.gd-newsletter-content .fluentform .ff-el-form-control {
  box-sizing:border-box;
  display:block;
  width:100%;
  min-height:var(--gd-control-min-height);
  padding:var(--gd-control-padding);
  border:var(--gd-control-border);
  border-radius:var(--gd-control-radius);
  background:var(--gd-control-background);
  color:var(--gd-control-color);
  box-shadow:var(--gd-control-shadow);
  font:inherit;
  line-height:1.35;
}
body.gd-site-style-guide .gd-section--form.gd-newsletter-content .fluentform .ff-el-form-control::placeholder {
  color:var(--gd-muted);
  opacity:.82;
}
body.gd-site-style-guide .gd-section--form.gd-newsletter-content .fluentform .ff-el-form-control:focus {
  border-color:var(--gd-brand-lime) !important;
  outline:0 !important;
  box-shadow:var(--gd-control-focus-shadow),var(--gd-control-shadow-raised) !important;
}
body.gd-site-style-guide .gd-section--form.gd-newsletter-content .fluentform .ff-el-input--label {
  margin-bottom:8px;
}
body.gd-site-style-guide .gd-section--form.gd-newsletter-content .fluentform .ff-el-input--label label {
  color:var(--gd-content-navy);
  font-weight:800;
  line-height:1.35;
}
body.gd-site-style-guide .gd-section--form.gd-newsletter-content .fluentform .ff-t-container {
  gap:16px;
}
body.gd-site-style-guide .gd-section--form.gd-newsletter-content .fluentform .ff_submit_btn_wrapper {
  margin-bottom:0;
}
@media (max-width:760px) {
  body.gd-site-style-guide .gd-section--form.gd-newsletter-content .fluentform .ff-t-container {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
}

/* Newsletter signup: compact introduction with the shared small green-dog mark. */
body.gd-site-style-guide .gd-section--form.gd-newsletter-content {
  padding:clamp(26px,3vw,34px);
  padding-bottom:clamp(14px,1.5vw,18px);
}
body.gd-site-style-guide .gd-section--form.gd-newsletter-content .fluentform .ff-el-group {
  margin-bottom:14px;
}

/* The Greener Dog newsletter: signup copy left, product photograph right. */
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-grid {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);
  gap:clamp(24px,3vw,44px);
  align-items:start;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy {
  min-width:0;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy > h2 {
  margin:0 0 14px;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-form-intro {
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin:0 0 20px;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-form-intro__icon {
  flex:0 0 auto;
  width:44px;
  height:44px;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-form-intro .gd-lead {
  margin:0;
}

/* Keep the signup fields directly on the main newsletter panel; the form does not need a second box. */
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy > .fluentform {
  box-sizing:border-box;
  width:100%;
  max-width:520px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* One field per row, full width, so Email matches Last Name. Subscribe closes
   the form on its own row rather than sharing a column with the email box. */
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform fieldset {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  grid-template-columns:none;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform fieldset > legend.ff_screen_reader_title {
  position:absolute;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-name-field-wrapper {
  width:100%;
  max-width:none;
  margin:0;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-t-container {
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  margin:0;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-t-cell {
  width:100%;
  min-width:0;
  padding:0;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff_submit_btn_wrapper {
  display:block;
  width:100%;
  margin:4px 0 0;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-btn-submit {
  min-width:170px;
}

/* FluentForm clears floats with :before/:after on every field group; those
   pseudo-elements would otherwise sit in the row as stray flex items. */
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-el-group:not(.ff_submit_btn_wrapper)::before,
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-el-group:not(.ff_submit_btn_wrapper)::after {
  display:none;
}

/* Label beside its field rather than above it, so the form runs short. */
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-el-group:not(.ff_submit_btn_wrapper) {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-el-input--label {
  flex:0 0 92px;
  width:92px;
  max-width:92px;
  margin:0;
  padding:0;
  text-align:left;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-el-input--label label {
  display:block;
  margin:0;
  color:var(--gd-content-navy);
  font-size:.92rem;
  font-weight:800;
  line-height:1.2;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-el-input--content {
  flex:1 1 auto;
  min-width:0;
  width:auto;
  margin:0;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-el-form-control {
  box-sizing:border-box;
  width:100%;
  min-height:48px;
  padding:10px 14px;
  border:var(--gd-control-border-width) solid rgba(var(--gd-content-navy-rgb),.28);
  border-radius:10px;
  background:var(--gd-surface);
  color:var(--gd-content-navy);
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-el-form-control::placeholder {
  color:var(--gd-muted);
  opacity:1;
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-el-form-control:focus {
  outline:0 !important;
  border-color:var(--gd-brand-lime) !important;
  box-shadow:0 0 0 3px rgba(var(--gd-brand-lime-rgb),.20) !important;
}

/* Grooming-product photo: a portrait frame matching the upright photograph,
   so nothing is cropped away. */
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-media {
  width:100%;
  margin:0;
  overflow:hidden;
  aspect-ratio:3/4;
  border:1px solid rgba(var(--gd-brand-lime-rgb),.4);
  border-radius:var(--gd-shell-radius);
  max-height:360px; /* same cap as other content photos, so the frame never shows below the photo */
  background:var(--gd-canvas);
  box-shadow:var(--gd-shadow);
}
html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-media__image {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

@media (max-width:800px) {
  html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-grid {
    grid-template-columns:minmax(0,1fr);
  }
  html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy > .fluentform {
    max-width:none;
  }
  /* Stacked, a full-width portrait frame would run very tall. */
  html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-media {
    max-width:360px;
    margin-inline:auto;
  }
}

/* Narrow phones: labels return above their fields. */
@media (max-width:520px) {
  html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-el-group:not(.ff_submit_btn_wrapper) {
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  html body.gd-site-style-guide .gd-newsletter-content .gd-newsletter-signup-copy .fluentform .ff-el-input--label {
    flex:0 0 auto;
    width:auto;
    max-width:none;
  }
}