/* Sylvana Contact page, from "Sylvana Contact Page.dc.html".
   Loaded on page 31 only (see sy_contact_styles_hashed in sy-auto-discount.php).
   The site-wide header and white contact strip are deliberately left alone. */

/* ---- 1. Hero band: gradient behind the title and lede only ---- */
/* Node 114 is the entire left column (title, lede, wholesalers, details,
   footnote), so the gradient must NOT be painted on it. Instead the kicker,
   title and lede get their own banded wrapper via a bleed background. */
body.page-id-31 .bde-f-container-31-114 {
  position: relative;
  background: transparent !important;
  gap: 0 !important;
}
/* the band itself. Height is driven by the lede's position rather than a fixed
   value, so a title that wraps to two lines still sits inside the gradient. */
body.page-id-31 .bde-f-container-31-114::before {
  content: "";
  position: absolute;
  top: -40px; left: -32px; right: -32px;
  bottom: auto;
  height: calc(var(--sy-hero-h, 210px) + 40px);
  background: linear-gradient(165deg, #DCE6FA 0%, #EDEEFB 50%, #FDF4DC 100%);
  border-radius: 18px;
  z-index: 0;
  pointer-events: none;
}
/* the soft gold glow from the design's top-right corner */
body.page-id-31 .bde-f-container-31-114::after {
  content: "";
  position: absolute;
  top: -70px; right: -30px;
  width: 230px; height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,201,72,0.45), rgba(247,201,72,0) 70%);
  z-index: 0;
  pointer-events: none;
}
body.page-id-31 .bde-f-container-31-114 > * { position: relative; z-index: 1; }

/* the two accent dashes above the title */
body.page-id-31 .bde-f-container-31-102 {
  display: flex !important;
  flex-direction: row !important;
  gap: 5px !important;
  margin-bottom: 12px !important;
}
body.page-id-31 .bde-f-text-31-100,
body.page-id-31 .bde-f-text-31-101 {
  height: 6px !important;
  border-radius: 3px;
  font-size: 0 !important;
  line-height: 0 !important;
}
body.page-id-31 .bde-f-text-31-100 { width: 26px !important; background: #F7C948; }
body.page-id-31 .bde-f-text-31-101 { width: 14px !important; background: #2F2FC9; }

body.page-id-31 .bde-f-text-31-103 {
  font-family: "Lexend", sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(36px, 4.5vw, 52px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin: 0 0 10px !important;
  color: #2D3436 !important;
}
body.page-id-31 .bde-f-text-31-104 {
  font-size: 19px !important;
  color: #4B5563 !important;
  line-height: 1.6 !important;
  margin: 0 0 32px !important;
  max-width: 58ch;
}

/* ---- 2. Two-column body ---- */
@media (min-width: 900px) {
  body.page-id-31 .bde-f-container-31-116 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 32px !important;
    align-items: start !important;
    max-width: 1200px;
    margin: 0 auto;
  }
  /* 114 is the left column, the form is the right column, both on row 1 */
  body.page-id-31 .bde-f-container-31-114 {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  body.page-id-31 .bde-form-builder-31-117 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-top: 0 !important;
  }
}

/* ---- 3. The form, wrapped as a white card ---- */
body.page-id-31 .bde-form-builder-31-117 {
  background: #FFFFFF;
  border: 1px solid #E6E8E6;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(45,52,54,0.06);
}
/* card heading, added via ::before so no tree edit is needed */
body.page-id-31 .bde-form-builder-31-117::before {
  content: "Send us a message";
  display: block;
  font-family: "Lexend", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #2D3436;
  margin-bottom: 18px;
}
body.page-id-31 .bde-form-builder-31-117 .breakdance-form-field__label {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #2D3436 !important;
  margin-bottom: 6px !important;
}
body.page-id-31 .bde-form-builder-31-117 .breakdance-form-field__input {
  width: 100% !important;
  border: 1px solid #C9CDF2 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 17px !important;
  background: #F9F9F9 !important;
  color: #2D3436 !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.page-id-31 .bde-form-builder-31-117 .breakdance-form-field__input:focus {
  outline: none !important;
  border-color: #2F2FC9 !important;
  box-shadow: 0 0 0 3px rgba(47,47,201,0.14) !important;
  background: #FFFFFF !important;
}
body.page-id-31 .bde-form-builder-31-117 textarea.breakdance-form-field__input {
  min-height: 132px;
  resize: vertical !important;
}
/* the submit button, full width as the design has it */
body.page-id-31 .bde-form-builder-31-117 .breakdance-form-button,
body.page-id-31 .bde-form-builder-31-117 button[type="submit"] {
  width: 100% !important;
  background: #2F2FC9 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 17px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(47,47,201,0.28) !important;
  transition: background-color .15s ease;
}
body.page-id-31 .bde-form-builder-31-117 .breakdance-form-button:hover,
body.page-id-31 .bde-form-builder-31-117 button[type="submit"]:hover {
  background: #2626A8 !important;
}
/* privacy reassurance line from the design, under the button.
   The form is a CSS grid, so this must span the full track or it wraps. */
body.page-id-31 .bde-form-builder-31-117 form { grid-template-columns: 1fr !important; }
body.page-id-31 .bde-form-builder-31-117 form::after {
  content: "We only use your details to reply, never for marketing lists.";
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.5;
  color: #4B5563;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231B7F4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
  background-repeat: no-repeat;
  background-position: left 1px;
  padding-left: 28px;
}

/* ---- 4. Wholesalers card: amber, per the design ---- */
body.page-id-31 .bde-f-container-31-107 {
  background: #FFF6DC !important;
  border: 1px solid #F2DFA4 !important;
  border-radius: 16px !important;
  padding: 24px 26px !important;
  margin: 0 0 24px !important;
}
body.page-id-31 .bde-f-text-31-105 {
  font-family: "Lexend", sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #5C4400 !important;
  margin: 0 0 6px !important;
}
body.page-id-31 .bde-f-text-31-106 {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #5C4400 !important;
  margin: 0 !important;
}

/* ---- 5. Company details card ---- */
body.page-id-31 .bde-f-container-31-112 {
  background: #FFFFFF !important;
  border: 1px solid #E6E8E6 !important;
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow: 0 1px 3px rgba(45,52,54,0.06);
}
body.page-id-31 .bde-f-text-31-108 {
  font-family: "Lexend", sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  margin: 0 0 16px !important;
  color: #2D3436 !important;
}
body.page-id-31 .bde-f-text-31-109,
body.page-id-31 .bde-f-text-31-110,
body.page-id-31 .bde-f-text-31-111 {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #2D3436 !important;
  margin: 0 0 12px !important;
  padding-left: 32px;
  background-repeat: no-repeat;
  background-position: left 2px;
  background-size: 20px 20px;
}
/* map pin, phone, envelope, matching the design's icon set */
body.page-id-31 .bde-f-text-31-109 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F2FC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/><circle cx='12' cy='10' r='3'/></svg>");
}
body.page-id-31 .bde-f-text-31-110 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F2FC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}
body.page-id-31 .bde-f-text-31-111 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F2FC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>");
  margin-bottom: 0 !important;
}
body.page-id-31 .sy-details-link {
  color: #2F2FC9 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
body.page-id-31 .sy-details-link:hover { text-decoration: underline !important; }

/* ---- 6. Small print ---- */
body.page-id-31 .bde-f-text-31-113 {
  font-size: 14px !important;
  color: #6B7280 !important;
  line-height: 1.7 !important;
  margin-top: 20px !important;
}

/* ---- 7. Mobile ---- */
@media (max-width: 899px) {
  body.page-id-31 .bde-f-container-31-114 { --sy-hero-h: 200px; }
  body.page-id-31 .bde-f-container-31-114::before { left: -16px; right: -16px; top: -24px; }
  body.page-id-31 .bde-f-container-31-114::after { width: 170px; height: 170px; }
  body.page-id-31 .bde-form-builder-31-117 { padding: 22px !important; }
  body.page-id-31 .bde-form-builder-31-117::before { font-size: 21px; }
  body.page-id-31 .bde-f-container-31-112 { padding: 22px !important; }
  body.page-id-31 .bde-f-text-31-104 { font-size: 17px !important; }
}

/* between 900 and 1180 the title wraps to two lines, so the band grows */
@media (min-width: 900px) and (max-width: 1180px) {
  body.page-id-31 .bde-f-container-31-114 { --sy-hero-h: 262px; }
}