/* Sylvana My Account page, from "Sylvana Account Page.dc.html".
   Loaded on the logged-OUT account page only (see sy_account_styles_hashed).
   The site-wide header, white contact strip and footer are left alone. */

/* ---- 0. Kill the page's default padding so the hero can bleed ---- */
body.woocommerce-account .bde-woopageaccount {
  max-width: none !important;
  /* horizontal only: vertical padding is set further down (sections 11 and 18),
     and a blanket `padding: 0 !important` here beat those later rules. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.woocommerce-account .bde-woopageaccount > .woocommerce {
  max-width: none !important;
}

/* ---- 1. Navy help strip ---- */
body.woocommerce-account .sy-acc-help {
  background: #14163F;
  color: #FFFFFF;
  font-size: 16px;
  padding: 10px 24px;
  text-align: center;
  line-height: 1.5;
}
body.woocommerce-account .sy-acc-help a {
  color: #F7C948;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
body.woocommerce-account .sy-acc-help a:hover { text-decoration: underline; }

/* ---- 2. Hero band ---- */
body.woocommerce-account .sy-acc-hero {
  background: linear-gradient(165deg, #DCE6FA 0%, #EDEEFB 50%, #FDF4DC 100%);
  padding: 48px 24px 40px;
  position: relative;
  overflow: hidden;
}
/* the soft gold glow from the design's top-right corner */
body.woocommerce-account .sy-acc-hero::after {
  content: "";
  position: absolute;
  top: -80px; right: -50px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,201,72,0.5), rgba(247,201,72,0) 70%);
  pointer-events: none;
}
body.woocommerce-account .sy-acc-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}
body.woocommerce-account .sy-acc-dashes {
  display: flex;
  gap: 5px;
  margin-bottom: 12px;
  justify-content: center;
}
body.woocommerce-account .sy-acc-dashes span {
  height: 6px;
  border-radius: 3px;
  display: block;
}
body.woocommerce-account .sy-acc-dashes span:first-child { width: 26px; background: #2F2FC9; }
body.woocommerce-account .sy-acc-dashes span:last-child  { width: 14px; background: #F7C948; }

body.woocommerce-account .sy-acc-hero h1 {
  font-family: "Lexend", sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 4.5vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 10px;
  color: #2D3436;
}
body.woocommerce-account .sy-acc-hero p {
  font-size: 19px;
  color: #4B5563;
  margin: 0 auto;
  max-width: 56ch;
  line-height: 1.6;
}

/* ---- 3. Main column ---- */
body.woocommerce-account #customer_login,
body.woocommerce-account .sy-acc-tabs,
body.woocommerce-account .sy-acc-guest {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
body.woocommerce-account .sy-acc-tabs { padding-top: 36px; }

/* ---- 4. Tab switcher.
   Two radios drive it, so the page works with JavaScript disabled. The radios
   themselves are visually hidden but stay focusable for keyboard users. ---- */
body.woocommerce-account .sy-acc-tabs > input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}
body.woocommerce-account .sy-acc-tablist {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
body.woocommerce-account .sy-acc-tab {
  background: #FFFFFF;
  color: #2D3436;
  border: 2px solid #C9CDF2;
  border-radius: 999px;
  padding: 15px 32px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
body.woocommerce-account .sy-acc-tab:hover { border-color: #2F2FC9; }
body.woocommerce-account .sy-acc-tab:focus-visible {
  outline: 3px solid rgba(47,47,201,0.45);
  outline-offset: 2px;
}
/* active states */
body.woocommerce-account #sy-acc-tab-login:checked    ~ .sy-acc-tablist .sy-acc-tab--login,
body.woocommerce-account #sy-acc-tab-register:checked ~ .sy-acc-tablist .sy-acc-tab--register {
  background: #2F2FC9;
  color: #FFFFFF;
  border-color: #2F2FC9;
}

/* ---- 5. Show one column at a time.
   The radios live in .sy-acc-tabs and #customer_login is a LATER sibling of
   that wrapper, so :has() on the body is the reliable way to reach across.
   A :has()-free fallback follows, which simply shows both columns. ---- */
body.woocommerce-account #customer_login {
  display: block;
}
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
  width: 100% !important;
  float: none !important;
  max-width: 560px;
  margin: 0 auto !important;
  background: #FFFFFF;
  border: 1px solid #E6E8E6;
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 1px 3px rgba(45,52,54,0.06);
}
/* the second card only needs spacing when both are visible (no :has()) */
body.woocommerce-account #customer_login .u-column2 { margin-top: 24px !important; }

@supports selector(html:has(a)) {
  body.woocommerce-account:has(#sy-acc-tab-login:checked) #customer_login .u-column2,
  body.woocommerce-account:has(#sy-acc-tab-register:checked) #customer_login .u-column1 {
    display: none;
  }
  body.woocommerce-account #customer_login .u-column2 { margin-top: 0 !important; }
}

/* ---- 6. Card typography ---- */
body.woocommerce-account #customer_login h2 {
  font-family: "Lexend", sans-serif;
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 6px;
  color: #2D3436;
  text-align: left;
}
body.woocommerce-account .sy-acc-intro {
  font-size: 17px;
  color: #4B5563;
  margin: 0 0 26px;
  line-height: 1.6;
}

/* ---- 7. Fields ---- */
body.woocommerce-account #customer_login .form-row {
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
body.woocommerce-account #customer_login label {
  display: block;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #2D3436;
}
/* numbered step chip */
body.woocommerce-account #customer_login .sy-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  margin-right: 8px;
  border-radius: 50%;
  background: #EDEEFB;
  color: #2F2FC9;
  font-size: 14px;
  font-weight: 700;
  vertical-align: 1px;
}
body.woocommerce-account #customer_login .required { color: #B3261E; }

body.woocommerce-account #customer_login input.input-text {
  width: 100%;
  border: 2px solid #C9CDF2;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 18px;
  background: #F9F9F9;
  color: #2D3436;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.woocommerce-account #customer_login input.input-text:focus {
  outline: none;
  border-color: #2F2FC9;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(47,47,201,0.14);
}
body.woocommerce-account #customer_login .sy-hint {
  display: block;
  font-size: 15px;
  color: #6B7280;
  margin: 8px 0 0;
  line-height: 1.5;
}

/* the password-visibility eye WooCommerce injects */
body.woocommerce-account #customer_login .woocommerce-password-hint,
body.woocommerce-account #customer_login .show-password-input {
  color: #2F2FC9;
}
body.woocommerce-account #customer_login .password-input {
  display: block;
  width: 100%;
  position: relative;
}

/* ---- 8. Remember me ---- */
body.woocommerce-account #customer_login .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  margin: 0 0 20px;
}
body.woocommerce-account #customer_login .woocommerce-form-login__rememberme input {
  width: 22px; height: 22px;
  accent-color: #2F2FC9;
  margin: 0;
  flex-shrink: 0;
}

/* ---- 9. Buttons ---- */
body.woocommerce-account #customer_login button[type="submit"] {
  width: 100%;
  display: block;
  background: #2F2FC9;
  color: #FFFFFF;
  border: none;
  border-radius: 14px;
  padding: 18px;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(47,47,201,0.28);
  transition: background-color .15s ease;
}
body.woocommerce-account #customer_login button[type="submit"]:hover { background: #2626A8; }

/* ---- 10. Footer links inside the cards ---- */
body.woocommerce-account #customer_login .lost_password {
  border-top: 1px solid #E6E8E6;
  margin: 26px 0 0;
  padding: 20px 0 0;
  font-size: 17px;
}
body.woocommerce-account #customer_login .lost_password a {
  color: #2F2FC9;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.5;
}
body.woocommerce-account #customer_login .lost_password a:hover { text-decoration: underline; }

body.woocommerce-account #customer_login .woocommerce-privacy-policy-text {
  margin: 22px 0 0;
}
body.woocommerce-account #customer_login .woocommerce-privacy-policy-text p {
  font-size: 15px;
  color: #6B7280;
  line-height: 1.6;
  margin: 0;
}
body.woocommerce-account #customer_login .woocommerce-privacy-policy-link {
  color: #2F2FC9;
  font-weight: 600;
}

/* ---- 11. Amber guest card ---- */
body.woocommerce-account .sy-acc-guest {
  background: #FFF6DC;
  border: 1px solid #F2DFA4;
  border-radius: 16px;
  padding: 22px 26px;
  max-width: 560px;
  margin: 26px auto 0;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
body.woocommerce-account .sy-acc-guest svg { flex-shrink: 0; }
body.woocommerce-account .sy-acc-guest > div {
  flex: 1;
  min-width: 220px;
  font-size: 16px;
  color: #5C4400;
  line-height: 1.6;
}
body.woocommerce-account .sy-acc-guest a {
  color: #8A6400;
  font-weight: 700;
}

/* the page needs bottom air, the design has 72px */
body.woocommerce-account .bde-woopageaccount { padding-bottom: 72px !important; }

/* ---- 12. Notices sit above the hero, keep them readable ---- */
body.woocommerce-account .woocommerce-notices-wrapper:not(:empty) {
  max-width: 880px;
  margin: 24px auto 0;
  padding: 0 24px;
}

/* ---- 13. Mobile ---- */
@media (max-width: 767px) {
  body.woocommerce-account .sy-acc-hero { padding: 36px 16px 30px; }
  body.woocommerce-account .sy-acc-hero p { font-size: 17px; }
  body.woocommerce-account #customer_login .u-column1,
  body.woocommerce-account #customer_login .u-column2 { padding: 24px; }
  body.woocommerce-account #customer_login,
  body.woocommerce-account .sy-acc-tabs,
  body.woocommerce-account .sy-acc-guest {
    padding-left: 16px;
    padding-right: 16px;
  }
  body.woocommerce-account .sy-acc-tab {
    padding: 14px 20px;
    font-size: 16px;
    flex: 1 1 100%;
    text-align: center;
  }
  body.woocommerce-account .sy-acc-guest { margin-left: 16px; margin-right: 16px; }
}

/* ---- 14. Escape the Breakdance section wrapper.
   Measured on the live page: .woocommerce is display:flex (so a block child
   shrink-to-fits instead of filling), and .section-container caps width at
   1120px with 100px vertical padding. Both must be neutralised or the help
   strip and hero cannot span the viewport. ---- */
body.woocommerce-account .bde-code-block-1336-101 { max-width: none !important; }
body.woocommerce-account .bde-code-block-1336-101 > .section-container,
body.woocommerce-account .bde-section-1336-100 .section-container {
  max-width: none !important;
  padding: 0 !important;
  display: block !important;
}
body.woocommerce-account .bde-woopageaccount > .woocommerce {
  display: block !important;
  width: 100% !important;
}
body.woocommerce-account .sy-acc-help,
body.woocommerce-account .sy-acc-hero { width: 100%; }

/* The card already provides the panel, so drop the inner form border that
   WooCommerce/Breakdance draws around the field group. */
body.woocommerce-account #customer_login form.login,
body.woocommerce-account #customer_login form.register {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
/* Headings are left-aligned in the design, not centred. */
body.woocommerce-account #customer_login h2,
body.woocommerce-account .sy-acc-intro { text-align: left !important; }

/* ---- 15. Breakdance gives forms inside the account block a fixed 360px width
   and auto margins, which made the heading LOOK centred (text-align was
   already left: the element itself was narrow and offset) and left stray
   rules from the field-group borders. Measured on the live page. ---- */
body.woocommerce-account #customer_login .u-column1 > *,
body.woocommerce-account #customer_login .u-column2 > * {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.woocommerce-account #customer_login form.login,
body.woocommerce-account #customer_login form.register {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}
body.woocommerce-account #customer_login form > *,
body.woocommerce-account #customer_login .form-row {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* stray horizontal rules from Breakdance's field-group styling */
body.woocommerce-account #customer_login form .form-row,
body.woocommerce-account #customer_login form p {
  border: none !important;
}
/* the card's own hairline top/bottom border is not wanted either */
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
  border: 1px solid #E6E8E6 !important;
}
/* keep the deliberate divider above the lost-password link */
body.woocommerce-account #customer_login .lost_password {
  border-top: 1px solid #E6E8E6 !important;
}

/* ---- 16. Align WooCommerce notices with the 560px card ---- */
body.woocommerce-account .woocommerce-notices-wrapper:not(:empty) {
  max-width: 560px !important;
  margin: 0 auto 20px !important;
  padding: 0 !important;
}
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info {
  border-radius: 12px;
  margin: 0;
}
@media (max-width: 767px) {
  body.woocommerce-account .woocommerce-notices-wrapper:not(:empty) {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}

/* ---- 17. Lost-password screen.
   Zeroing .section-container padding (needed so the hero can bleed) also
   removed this page's top spacing, and it has no hero to replace it. It
   reuses the card styling but needs its own breathing room. ---- */
body.woocommerce-account .woocommerce-ResetPassword.lost_reset_password {
  max-width: 560px;
  margin: 56px auto;
  background: #FFFFFF;
  border: 1px solid #E6E8E6;
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 1px 3px rgba(45,52,54,0.06);
}
body.woocommerce-account .woocommerce-ResetPassword p:first-child {
  font-size: 17px;
  color: #4B5563;
  line-height: 1.6;
  margin: 0 0 24px;
}
body.woocommerce-account .woocommerce-ResetPassword label {
  display: block;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}
body.woocommerce-account .woocommerce-ResetPassword input.input-text {
  width: 100%;
  border: 2px solid #C9CDF2;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 18px;
  background: #F9F9F9;
}
body.woocommerce-account .woocommerce-ResetPassword input.input-text:focus {
  outline: none;
  border-color: #2F2FC9;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(47,47,201,0.14);
}
body.woocommerce-account .woocommerce-ResetPassword button[type="submit"] {
  width: 100%;
  background: #2F2FC9;
  color: #FFFFFF;
  border: none;
  border-radius: 14px;
  padding: 18px;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(47,47,201,0.28);
}
body.woocommerce-account .woocommerce-ResetPassword button[type="submit"]:hover { background: #2626A8; }

@media (max-width: 767px) {
  body.woocommerce-account .woocommerce-ResetPassword.lost_reset_password {
    margin: 32px 16px;
    padding: 24px;
  }
}

/* ---- 18. Top spacing for hero-less account screens (lost password, reset).
   breakdance-zero is a VIRTUAL theme with no directory on disk and the
   body_class filter never reached the markup, so this keys off .sy-acc-hero,
   which only the login screen renders. Browsers without :has() simply keep
   the padding on both, which is harmless (the hero just sits lower). ---- */
body.woocommerce-account .bde-woopageaccount { padding-top: 56px !important; }
@supports selector(html:has(a)) {
  body.woocommerce-account .bde-woopageaccount:has(.sy-acc-hero) {
    padding-top: 0 !important;
  }
}
body.woocommerce-account .woocommerce-ResetPassword.lost_reset_password {
  display: block !important;
  margin: 0 auto !important;
}
@media (max-width: 767px) {
  body.woocommerce-account .bde-woopageaccount { padding-top: 32px !important; }
}

/* Breakdance pads the form element directly (24px), which doubled up inside
   the card and squashed the label. The card supplies the padding instead. */
body.woocommerce-account .woocommerce-ResetPassword.lost_reset_password > * {
  margin-top: 0;
}
body.woocommerce-account .woocommerce-ResetPassword.lost_reset_password label {
  margin-top: 4px;
}