/* Opti Plaza own theme: cart page, cart totals and the add to cart popup. */

.own-cart,
.own-cart-foot {
  --own-ink: 20, 19, 16;
  max-width: 140rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media screen and (min-width: 750px) {
  .own-cart,
  .own-cart-foot {
    padding: 0 5rem;
  }
}

/* Buttons used by the cart and the popup */
.own-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 5.2rem;
  padding: 0 3rem;
  border: 0;
  border-radius: 0;
  background: rgb(var(--own-ink, 20, 19, 16));
  color: #faf9f6;
  font: inherit;
  font-family: var(--op-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.own-btn:hover {
  opacity: 0.84;
}

.own-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.own-btn--outline {
  background: transparent;
  border: 1px solid #141310;
  color: #141310;
}

.own-btn--outline:hover {
  opacity: 1;
  background: #141310;
  color: #faf9f6;
}

.own-btn--full {
  width: 100%;
}

.own-btn:focus-visible,
.own-qty__btn:focus-visible,
.own-line__remove:focus-visible,
.own-pop__close:focus-visible {
  outline: 2px solid rgba(20, 19, 16, 0.5);
  outline-offset: 2px;
}

/* ---- cart page: header and empty state ---------------------------------------------------------------- */

.own-cart {
  padding-top: calc(var(--own-pt, 36px) * 0.75);
  padding-bottom: calc(var(--own-pb, 36px) * 0.75);
}

@media screen and (min-width: 750px) {
  .own-cart {
    padding-top: var(--own-pt, 36px);
    padding-bottom: var(--own-pb, 36px);
  }
}

.own-cart.is-empty {
  padding-top: 0;
  padding-bottom: 0;
}

.own-cart__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin: 3rem 0;
}

.own-cart__title {
  margin: 0;
}

.own-cart__continue {
  display: block;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3rem;
}

.own-cart__continue:hover {
  text-decoration-thickness: 2px;
}

.own-cart.is-empty .own-cart__head,
.own-cart.is-empty .own-cart__form,
.own-cart:not(.is-empty) .own-cart__empty {
  display: none;
}

.own-cart__empty {
  padding: 3rem 0 1rem;
  text-align: center;
}

.own-cart__empty-title {
  margin: 4.5rem 0 2rem;
  font-size: clamp(2.8rem, 4.6vw, 4.6rem);
}

.own-cart__login-title {
  margin: 5.5rem 0 0.5rem;
}

.own-cart__login {
  margin: 0.8rem 0 1em;
}

.own-cart__login a {
  display: inline-block;
  color: rgba(20, 19, 16, 0.85);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3rem;
}

@media screen and (min-width: 750px) {
  .own-cart__head {
    align-items: center;
  }

}

/* ---- cart page: line items ---------------------------------------------------------------------------- */

.own-cart__items {
  position: relative;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(20, 19, 16, 0.08);
}

.own-lines {
  display: block;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.own-lines thead,
.own-lines tbody {
  display: block;
}

.own-lines thead tr {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4rem;
  border-bottom: 1px solid rgba(20, 19, 16, 0.08);
}

.own-lines__th {
  padding: 0 0 1.8rem;
  font-family: var(--op-sans, sans-serif);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(20, 19, 16, 0.58);
  opacity: 0.85;
}

.own-lines__th--qty,
.own-lines__th--total {
  display: none;
}

.own-lines__th--total-sm {
  text-align: right;
}

.own-line {
  display: grid;
  grid-template-columns: 10.2rem repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.own-line:last-child {
  margin-bottom: 0;
}

.own-line td {
  padding: 0;
}

.own-line__media {
  position: relative;
  grid-row: 1 / 3;
}

.own-line__cover {
  position: absolute;
  inset: 0;
}

.own-line__frame {
  display: inline-flex;
  align-items: flex-start;
  border: 1px solid transparent;
  background: #faf9f6;
}

.own-line__img {
  display: block;
  width: 100%;
  max-width: 10rem;
  height: auto;
}

.own-line__details {
  grid-column: 2 / 4;
  font-size: 1.6rem;
  line-height: 1.4;
}

.own-line__name {
  display: block;
  max-width: 30rem;
  margin: 0;
  color: #141310;
  text-decoration: none;
  word-break: break-word;
}

.own-line__name:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.own-line__opt {
  max-width: 30rem;
  margin-top: 0.6rem;
  font-size: 1.4rem;
  line-height: 1.5;
  word-break: break-all;
}

.own-line__dl {
  max-width: 30rem;
  margin: 0.6rem 0 0;
}

.own-line__dl .own-line__opt {
  margin-top: 0;
}

.own-line__dl dt,
.own-line__dl dd {
  display: inline;
  margin: 0;
}

.own-line__total {
  display: none;
  text-align: right;
}

.own-line__total--sm {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.own-line__price {
  display: block;
  font-family: var(--op-serif, 'Didot', 'Bodoni MT', Georgia, serif);
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #141310;
}

.own-line__qty {
  grid-column: 2 / 5;
}

.own-line__qty-row {
  display: flex;
}

.own-qty {
  position: relative;
  display: flex;
  width: 14.2rem;
  min-height: 4.7rem;
  box-sizing: border-box;
  border: 1px solid rgba(20, 19, 16, 0.55);
  color: #141310;
}

.own-qty__btn {
  display: flex;
  flex: 0 0 4.5rem;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.own-qty__btn[data-min] {
  opacity: 0.5;
  cursor: default;
}

.own-qty__btn svg {
  display: block;
  pointer-events: none;
}

.own-qty__input {
  flex: 1 1 auto;
  width: 5rem;
  min-width: 0;
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.own-qty__input::-webkit-outer-spin-button,
.own-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.own-qty__input:focus-visible {
  outline: 1px solid rgba(20, 19, 16, 0.5);
  outline-offset: -2px;
}

.own-line__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.6rem;
  margin: 0 0 0 1rem;
  color: #141310;
}

.own-line__remove svg {
  display: block;
}

.own-line__error {
  display: flex;
  margin-top: 1rem;
  font-size: 1.2rem;
  line-height: 1.8;
  color: #8e1b1b;
}

.own-line__error small {
  font-size: inherit;
}

.own-line.is-loading .own-line__price,
.own-line.is-loading .own-qty__input {
  opacity: 0.4;
}

@media screen and (min-width: 750px) {
  .own-cart__items {
    padding-bottom: 4rem;
  }

  .own-lines {
    display: table;
  }

  .own-lines thead {
    display: table-header-group;
  }

  .own-lines tbody {
    display: table-row-group;
  }

  .own-lines thead tr,
  .own-line {
    display: table-row;
    margin: 0;
    border: 0;
  }

  .own-lines__th {
    display: table-cell;
    border-bottom: 1px solid rgba(20, 19, 16, 0.08);
  }

  .own-lines__th--qty {
    padding-left: 6rem;
  }

  .own-lines__th--total {
    padding-left: 4rem;
    text-align: right;
  }

  .own-lines__th--total-sm,
  .own-line td.own-line__total--sm {
    display: none;
  }

  .own-line td {
    display: table-cell;
    padding-top: 4rem;
    vertical-align: top;
  }

  /* column shares measured on the live cart: 1/9, 7/18, 35 %, 15 % below 990 px */
  .own-line__media {
    width: 11.11%;
  }

  .own-line__qty {
    width: 35%;
  }

  .own-line__total {
    width: 15%;
  }

  .own-line__img {
    max-width: 100%;
  }

  .own-line__details {
    width: 38.89%;
    padding-left: 4rem !important;
  }

  .own-line__qty {
    padding-left: 6rem !important;
  }

  .own-line__total {
    padding-left: 4rem !important;
  }

  .own-line__total .own-line__price {
    margin-top: 1rem;
  }

  .own-line__remove {
    width: 3.5rem;
    height: 4.1rem;
    margin: 0.5rem 0 0 1.5rem;
  }
}

/* 990 px and up: 10 %, 50 %, 28.37 %, 11.63 % */
@media screen and (min-width: 990px) {
  .own-cart__head {
    margin: 5rem 0 3rem;
  }

  .own-cart__empty {
    padding: 7rem 0 1rem;
  }

  .own-cart__empty-title {
    margin: 0 0 3rem;
  }

  .own-line__media {
    width: 10%;
  }

  .own-line__details {
    width: 50%;
  }

  .own-line__qty {
    width: 28.37%;
  }

  .own-line__total {
    width: 11.63%;
  }
}

/* ---- cart page: totals -------------------------------------------------------------------------------- */

.own-cart-foot.is-empty .own-cart-foot__inner {
  display: none;
}

.own-cart-foot__inner {
  padding-top: 4rem;
}

.own-totals {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.own-totals__label {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 1.6rem;
  line-height: 1;
}

.own-totals__value {
  margin: 0 0 0 2rem;
  font-size: 1.8rem;
  line-height: 1;
}

.own-totals .op-freeship {
  margin: 0.6rem 0 0;
  font-size: 1.25rem;
  line-height: 1.5;
  color: rgba(20, 19, 16, 0.58);
}

.own-cart-foot__tax {
  display: block;
  margin: 2.2rem 0 1.6rem;
  font-size: 1.3rem;
  line-height: 1.72;
  letter-spacing: 0.04rem;
  text-align: center;
}

.own-cart-foot__tax a {
  color: rgba(20, 19, 16, 0.85);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3rem;
}

.own-cart-foot__ctas {
  margin-top: 1rem;
  text-align: center;
}

.own-btn--wide {
  width: 100%;
  max-width: 36rem;
}

.own-cart-foot__errors:not(:empty) {
  margin-top: 1rem;
  font-size: 1.3rem;
  color: #8e1b1b;
  text-align: center;
}

@media screen and (min-width: 750px) {
  .own-cart-foot__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .own-cart-foot__totals,
  .own-cart-foot__ctas {
    width: 35rem;
  }

  .own-totals {
    justify-content: flex-end;
  }

  .own-cart-foot__tax {
    margin: 2.2rem 0;
    text-align: right;
  }

  .own-cart-foot__ctas {
    display: flex;
    gap: 1rem;
    margin-top: 0;
  }
}

/* ---- add to cart popup -------------------------------------------------------------------------------- */

.own-pop-anchor {
  position: fixed;
  top: var(--own-pop-top, 0px);
  left: 0;
  right: 0;
  height: 0;
  z-index: 4;
}

.own-pop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 2.5rem 3.5rem;
  border: 0 solid rgba(20, 19, 16, 0.1);
  border-bottom-width: 1px;
  background: #faf9f6;
  color: rgba(20, 19, 16, 0.75);
  opacity: 0;
  transform: translateY(-1.5rem);
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.own-pop[hidden] {
  display: none;
}

.own-pop.is-open {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .own-pop {
    transition: none;
  }
}

@media screen and (min-width: 750px) {
  .own-pop {
    border-width: 1px;
    left: auto;
    right: calc(max(0px, (100% - 140rem) / 2) + 4rem);
    width: 36.8rem;
  }
}

.own-pop__head {
  display: flex;
  align-items: flex-start;
}

.own-pop__heading {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  margin: 0;
  font-family: var(--op-sans, sans-serif);
  font-size: 1.3rem;
  line-height: 1.5;
  letter-spacing: 0.04rem;
  color: #141310;
}

.own-pop__heading svg {
  flex: 0 0 auto;
  margin-right: 1rem;
}

.own-pop__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 4.4rem;
  height: 4.4rem;
  margin: -2rem -3rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #141310;
  cursor: pointer;
}

.own-pop__product {
  padding: 2rem 0 3rem;
}

.own-pop__item {
  display: flex;
  align-items: flex-start;
}

.own-pop__item[hidden] {
  display: none;
}

.own-pop__item + .own-pop__item:not([hidden]) {
  margin-top: 1.5rem;
}

.own-pop__frame {
  display: flex;
  flex: 0 0 auto;
  width: 7.2rem;
  margin: 0.5rem 1.5rem 0 0;
  border: 1px solid transparent;
  background: #faf9f6;
}

.own-pop__frame img {
  display: block;
  width: 7rem;
  height: auto;
}

.own-pop__name {
  margin: 0 0 0.5rem;
}

.own-pop__dl {
  margin: 0;
  word-break: break-all;
}

.own-pop__opt {
  font-size: 1.4rem;
  line-height: 1.5;
}

.own-pop__opt dt,
.own-pop__opt dd {
  display: inline;
  margin: 0;
}

.own-pop__links {
  text-align: center;
}

.own-pop__links > * {
  margin-top: 1rem;
}

.own-pop__links form {
  margin-bottom: 0;
}

.own-pop__continue {
  display: inline-block;
  padding: 1px 6px;
  border: 0;
  background: transparent;
  color: #141310;
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 1px;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  cursor: pointer;
}

/* Arabic: the live cart runs the line table right to left (the page grid stays left to right) */
html[lang='ar'] .own-lines {
  direction: rtl;
}