/* ── Account pages — Seascooters ─────────────────────────────── */

/* Ocultar breadcrumb y heading de Panda */
#my-account .breadcrumb_spacing,
#identity .breadcrumb_spacing,
.login_page .breadcrumb_spacing,
#addresses .breadcrumb_spacing,
#history .breadcrumb_spacing,
#order-slip .breadcrumb_spacing,
#order-follow .breadcrumb_spacing,
#discount .breadcrumb_spacing { display: none !important; }

#my-account nav.breadcrumb,
#identity nav.breadcrumb,
.login_page nav.breadcrumb,
#addresses nav.breadcrumb,
#history nav.breadcrumb,
#order-slip nav.breadcrumb,
#order-follow nav.breadcrumb,
#discount nav.breadcrumb { display: none !important; }

#main > .page_heading { display: none !important; }

/* Quitar padding/margen del container de Panda */
#my-account #columns,
#identity #columns,
#addresses #columns,
#history #columns,
#order-slip #columns,
#order-follow #columns,
#discount #columns {
  padding: 0 !important;
  max-width: 100% !important;
}

#my-account #columns > .row,
#identity #columns > .row,
#addresses #columns > .row,
#history #columns > .row,
#order-slip #columns > .row,
#order-follow #columns > .row,
#discount #columns > .row { margin: 0 !important; }

#my-account #center_column,
#identity #center_column,
#addresses #center_column,
#history #center_column,
#order-slip #center_column,
#order-follow #center_column,
#discount #center_column { padding: 0 !important; }

/* ── Hero slim — igual que el carrito ───────────────────────── */

.ss-category-hero--slim {
  padding: 28px 40px;
}

.ss-category-hero--slim .ss-category-hero-title {
  font-size: 32px;
  margin: 0;
}

/* ── Color base consistente ─────────────────────────────────── */

.ss-account-layout { color: #111; }
.ss-account-layout h1, .ss-account-layout h2, .ss-account-layout h3,
.ss-account-layout h4, .ss-account-layout h5, .ss-account-layout h6 { color: #111; }
.ss-account-layout p, .ss-account-layout span, .ss-account-layout label { color: #555; }
.ss-account-layout a { color: #555; }
.ss-account-layout a:hover { color: #111; }

/* ── Layout cuenta ──────────────────────────────────────────── */

div.ss-account-layout {
  display: grid !important;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 32px 40px 48px 24px;
  align-items: start;
}

/* ── Nav lateral ────────────────────────────────────────────── */

.ss-acc-nav {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.ss-acc-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: background .12s, color .12s;
}

.ss-acc-nav-item:last-child {
  border-bottom: none;
}

.ss-acc-nav-item:hover {
  background: #fafafa;
  color: #111;
  text-decoration: none;
}

.ss-acc-nav-item.active {
  background: #111;
  color: #fff;
}

.ss-acc-nav-item.active:hover {
  background: #222;
  color: #fff;
}

.ss-acc-nav-item i {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.ss-acc-nav-item--signout {
  color: #888;
}

.ss-acc-nav-item--signout:hover {
  color: #c00;
  background: #fff8f8;
}

/* Hook-rendered module links inside the nav (list-group-item > a) */
.ss-acc-nav .list-group-item {
  border: none;
  border-bottom: 1px solid #f0f0f0;
  padding: 0;
  margin: 0;
  background: transparent;
  list-style: none;
  display: block;
}

.ss-acc-nav .list-group-item:last-child {
  border-bottom: none;
}

.ss-acc-nav .list-group-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  transition: background .12s, color .12s;
}

.ss-acc-nav .list-group-item a:hover {
  background: #fafafa;
  color: #111;
  text-decoration: none;
}

.ss-acc-nav .list-group-item a i {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  margin: 0;
}

/* ── Contenido derecho ──────────────────────────────────────── */

.ss-account-content .card,
.ss-account-content .card.card_trans {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  overflow: hidden;
}

.ss-account-content .card-header,
.ss-account-content .card .card-header {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 24px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #111;
}

.ss-account-content .card-block,
.ss-account-content .card .card-block {
  padding: 24px;
}

/* Dashboard links — grid igual que en el diseño de referencia */
.ss-account-content .myacount_dashbord_list {
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ss-account-content .myacount_dashbord_list .list-group-item {
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  background: #fff;
  padding: 0 !important;
  margin: 0 !important;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}

.ss-account-content .myacount_dashbord_list .list-group-item:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  transform: translateY(-3px);
  border-color: #bbb;
  background: #fff;
}

.ss-account-content .myacount_dashbord_list .list-group-item a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 24px 16px !important;
  text-align: center;
  text-decoration: none;
  color: #111;
  font-size: 12px;
  font-weight: 700;
  width: 100%;
  min-height: 130px;
}

.ss-account-content .myacount_dashbord_list .list-group-item a:hover {
  text-decoration: none;
  color: #111;
}

.ss-account-content .myacount_dashbord_list .list-group-item i {
  font-size: 26px !important;
  color: #333;
  width: auto !important;
}

/* Greeting */
.ss-account-content .page_heading {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin-bottom: 20px;
}

/* ── Identity / customer form ───────────────────────────────── */

.ss-account-form .ss-form-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  padding: 24px;
  margin-bottom: 16px;
}

.ss-account-form .ss-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 20px;
}

.ss-account-form .ss-form-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ss-account-form .ss-form-field {
  display: flex;
  flex-direction: column;
}

.ss-account-form .ss-form-extras {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss-account-form .ss-form-extras *,
.ss-account-form .ss-form-extras a,
.ss-account-form .ss-form-extras label,
.ss-account-form .ss-form-extras span,
.ss-account-form .ss-form-extras p,
.ss-account-form .ss-form-extras em,
.ss-account-form .ss-form-extras i {
  color: #555;
  font-style: normal;
}

.ss-account-form .ss-form-extras a {
  text-decoration: underline;
}

.ss-account-form .ss-form-extras a:hover {
  color: #111;
}

.ss-account-form .ss-form-field--full {
  width: 100%;
}

.ss-account-form .form-group {
  margin-bottom: 0;
}

.ss-account-form .form-group label {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.ss-account-form .form-control {
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-size: 13px;
  color: #111;
  height: 42px;
  padding: 0 14px;
  width: 100%;
  transition: border-color .15s;
  background: #fafafa;
}

.ss-account-form .form-control:focus {
  border-color: #111;
  background: #fff;
  box-shadow: none;
  outline: none;
}

/* Password input-group — make it look like a normal input */
.ss-account-form .input-group.input-group-with-border {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
  overflow: hidden;
  transition: border-color .15s;
}

.ss-account-form .input-group.input-group-with-border:focus-within {
  border-color: #111;
  background: #fff;
}

.ss-account-form .input-group.input-group-with-border .form-control {
  border: none;
  background: transparent;
  box-shadow: none;
  flex: 1;
  height: 42px;
}

.ss-account-form .input-group.input-group-with-border .form-control:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

.ss-account-form .input-group-btn {
  display: flex;
  align-items: center;
}

.ss-account-form .input-group-btn .show_password {
  background: none;
  border: none;
  padding: 0 12px;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
}

.ss-account-form .input-group-btn .show_password:hover {
  color: #111;
}

.ss-account-form .radio-inline,
.ss-account-form .form-control-valign {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 4px 0;
}

.ss-account-form .ss-form-footer {
  display: flex;
  align-items: center;
  padding-top: 0;
}

.ss-btn-save {
  background: #111;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  padding: 12px 32px;
  letter-spacing: .4px;
  cursor: pointer;
  transition: background .15s;
}

.ss-btn-save:hover {
  background: #333;
}

/* Full-width field types */
.ss-account-form .field-password-policy,
.ss-account-form .ss-form-field--full {
  grid-column: 1 / -1;
}

.ss-account-form .password-policy-information {
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}

/* Back/home footer links — innecesarios con el nav lateral */
.my_account_page_footer { display: none !important; }

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .ss-category-hero--slim { padding: 20px 16px; }
  .ss-category-hero--slim .ss-category-hero-title { font-size: 24px; }

  div.ss-account-layout {
    grid-template-columns: 1fr;
    padding: 20px 16px 32px;
    gap: 20px;
  }

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

/* ── Login / Authentication page ── */

.ss-auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 40px auto 60px;
  padding: 0 40px;
}

.ss-auth-block {
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  padding: 32px;
}

.ss-auth-block--transparent {
  background: transparent;
  border: none;
  padding: 0;
}

.ss-auth-block--transparent .from_blcok,
.ss-auth-block--transparent .block,
.ss-auth-block--transparent .login_form_block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.ss-auth-heading {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin-bottom: 20px;
}

.ss-auth-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
}

.ss-auth-btn-register {
  display: block;
  width: 100%;
  padding: 14px;
  background: #111;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  box-sizing: border-box;
}

.ss-auth-btn-register:hover {
  background: #333;
  color: #fff;
  text-decoration: none;
}

/* override Panda form buttons inside login block */
.ss-auth-block .btn-primary,
.ss-auth-block .btn-primary:visited {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

.ss-auth-block .btn-primary:hover {
  background: #333 !important;
  border-color: #333 !important;
}

.ss-auth-block .form-control:focus {
  border-color: #111 !important;
  box-shadow: none !important;
}

.ss-auth-wrap--single {
  grid-template-columns: 1fr;
  max-width: 560px;
}

.ss-register-wrap {
  max-width: 1200px;
  align-items: start;
}

.ss-register-benefits {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #fff;
  border: 1.5px solid #e8e8e8;
}

.ss-register-benefits .ss-auth-btn-back {
  background: #111;
  color: #fff;
  border-color: #111;
  font-weight: 800;
}

.ss-register-benefits .ss-auth-btn-back:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}

.ss-register-perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss-register-perks li {
  font-size: 14px;
  color: #333;
  padding-left: 24px;
  position: relative;
}

.ss-register-perks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 800;
  color: #111;
}

.ss-register-login-cta {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.ss-register-login-cta p {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

.ss-auth-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.ss-auth-btn-back {
  display: block;
  width: 100%;
  padding: 13px;
  background: #fff;
  color: #111;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  border: 1.5px solid #ddd;
  text-decoration: none;
  box-sizing: border-box;
}

.ss-auth-btn-back:hover {
  border-color: #111;
  color: #111;
  text-decoration: none;
}

@media (max-width: 767px) {
  .ss-auth-wrap {
    grid-template-columns: 1fr;
    margin: 24px auto 40px;
    padding: 0 16px;
  }
}

/* ── GDPR page ── */

.ss-gdpr-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ss-gdpr-wrap .psgdprinfo17 p {
  font-size: 15px;
}

.ss-gdpr-wrap .psgdprgetdatabtn17,
.ss-gdpr-wrap .psgdprgetdatabtn17:visited {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  font-size: 14px;
}

.ss-gdpr-wrap .psgdprgetdatabtn17:hover {
  background: #333 !important;
  border-color: #333 !important;
  color: #fff !important;
}

/* ── SSA accessories in order detail ── */

.ssa-order-detail-accs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.ssa-order-detail-acc {
  display: block;
  font-size: 12px;
  color: #777;
}
.ssa-order-detail-acc em {
  font-style: normal;
  font-weight: 600;
  color: #555;
  margin-left: 4px;
}