/* ------------------------------ Shared (Logged out & Logged in) ------------------------------ */

.my-account-title {
  margin: 0 0 15px;
  line-height: 1.214;
  font-size: 2.617924em;
  letter-spacing: -1px;
  font-family: Oswald;
  font-weight: 400;
}

.my-account-input-field {
  width: 100%;
  /* Make it look nice */
  padding: 0.5180469716em;
  border: 1px solid #d2d6dc;
  border-radius: 0.3rem;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}

.my-account-radio-container {
  display: flex;
  gap: 1rem;
}
.my-account-radio-container > .my-account-radio {
  width: 100%;
}

.my-account-radio.my-account-radio { /* @HACK Specificity hack */
  display: inline-block;
  padding: 0.5rem;
  border-radius: 0.375rem;
  text-align: center;
  color: var(--theme__text_color);
  background-color: #e5e7eb;
  cursor: pointer;
}
.my-account-radio:has(:checked),
.my-account-radio:hover {
  color: var(--theme__text_color_light);
  background-color: #EA580B;
}

.my-account-form h2 {
  font-size: 2em;
  font-weight: 400;
}
.my-account-form legend {
  margin-left: -30px;
  padding: 10px 30px 10px;
  color: #111;
  font-size: 1.5em;
  font-weight: 600;
}
.my-account-form p,
.my-account-form button {
  margin: 0 0 1.41575em;
}
.my-account-form label {
  display: block;
  margin-bottom: 5px;
  color: #111;
  font-size: 14px;
  font-weight: 600;
}
.my-account-form em {
  opacity: .65;
  font-size: 13px;
  font-style: normal;
  display: inline-block;
  margin-top: 5px;
}

/* ------------------------------ Login & Register ------------------------------ */


.login-register-temporary {
  text-align: center;
}
.login-register-temporary p {
  margin: auto;
}

/* ------------------------------ Login & Register ------------------------------ */

.login-register {
  flex: 1;
}

/* ------------------------------ Logged in ------------------------------ */

.my-account-main {
  overflow: hidden; /* So "float" in the children won't overflow this element. */
  padding-bottom: 4rem;
}

/* ----- Nav ----- */

.my-account-nav {
  padding-bottom: 2rem;
}

.my-account-nav-item {
  --icon: '';
  --opacity: .4;
  --color: var(--theme__text_color_faded);
  border-bottom: 1px solid rgba(0,0,0,.05);
  color: var(--color);
  transition-property: color, background;
  transition-duration: .2s;
  transition-timing-function: ease;
}
.my-account-nav-item--selected,
.my-account-nav-item:hover {
  --opacity: 1;
  --color: #222;
}
.my-account-nav-item a {
  display: block;
  padding: .675em 0 .775em 0;
  font-size: 1rem;
}
.my-account-nav-item a::before {
  position: relative;
  top: 1px;
  float: right;
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  opacity: var(--opacity);
  background: var(--color);
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  transition: .2s all;
}
.my-account-nav-item--selected {
  font-weight: 600;
  color: var(--theme__main-color);
}
.my-account-nav-item--admin {
  --icon: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5C4 4.44772 4.44772 4 5 4H19C19.5523 4 20 4.44772 20 5V7C20 7.55228 19.5523 8 19 8H5C4.44772 8 4 7.55228 4 7V5Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 13C4 12.4477 4.44772 12 5 12H11C11.5523 12 12 12.4477 12 13V19C12 19.5523 11.5523 20 11 20H5C4.44772 20 4 19.5523 4 19V13Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 13C16 12.4477 16.4477 12 17 12H19C19.5523 12 20 12.4477 20 13V19C20 19.5523 19.5523 20 19 20H17C16.4477 20 16 19.5523 16 19V13Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.my-account-nav-item--orders {
  --icon: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15M9 5C9 6.10457 9.89543 7 11 7H13C14.1046 7 15 6.10457 15 5M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5M12 12H15M12 16H15M9 12H9.01M9 16H9.01' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.my-account-nav-item--downloads {
  --icon: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 16L4 17C4 18.6569 5.34315 20 7 20L17 20C18.6569 20 20 18.6569 20 17L20 16M16 12L12 16M12 16L8 12M12 16L12 4' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.my-account-nav-item--edit-adress {
  --icon: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 12L5 10M5 10L12 3L19 10M5 10V20C5 20.5523 5.44772 21 6 21H9M19 10L21 12M19 10V20C19 20.5523 18.5523 21 18 21H15M9 21C9.55228 21 10 20.5523 10 20V16C10 15.4477 10.4477 15 11 15H13C13.5523 15 14 15.4477 14 16V20C14 20.5523 14.4477 21 15 21M9 21H15' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.my-account-nav-item--edit-account {
  --icon: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.12104 17.8037C7.15267 16.6554 9.4998 16 12 16C14.5002 16 16.8473 16.6554 18.879 17.8037M15 10C15 11.6569 13.6569 13 12 13C10.3431 13 9 11.6569 9 10C9 8.34315 10.3431 7 12 7C13.6569 7 15 8.34315 15 10ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.my-account-nav-item--logout {
  --icon: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 16L21 12M21 12L17 8M21 12L7 12M13 16V17C13 18.6569 11.6569 20 10 20H6C4.34315 20 3 18.6569 3 17V7C3 5.34315 4.34315 4 6 4H10C11.6569 4 13 5.34315 13 7V8' stroke='%23374151' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ----- Content ----- */

.my-account-content {
  width: 76%;
  float: right;
}

/* ------------------------------ Address ------------------------------ */

.my-account-address-box-container {
  gap: 4rem;
  margin-top: 1.5rem;
}

.my-account-address-box {
}
.my-account-address-box header {
  overflow: hidden;
}
.my-account-address-box header h3 {
  float: left;
  font-size: 1.6rem;
  font-weight: bold;
}
.my-account-address-box header a {
  float: right;
  margin-top: 5px;
  padding: 3px 12px;
  border-radius: 1.5rem;
  color: var(--theme__text_color_faded);
  background-color: #f6f6f6;
  font-size: .85rem;
  font-weight: 700;
}
.my-account-address-box address {
  font-style: normal;
  margin-bottom: 1.4rem;
}

/* ------------------------------ Orders ------------------------------ */

.my-account-orders {
}
.my-account-orders__order {
  margin-bottom: 1rem;
  background-color: rgb(221, 221, 221);
  padding: 0.5rem;
  border-radius: 2px;
}
.my-account-orders__order-header {
  font-weight: bold;
}
.my-account-orders__order-lines {
}
.my-account-orders__order-line {
  border-radius: 2px;
  background-color: rgb(246, 246, 246);
  padding: 0.2rem;
  margin-bottom: 0.1rem;
}
.item-header {
  font-weight: bold;
}

/* ------------------------------ ... ------------------------------ */
