/* =====================================
   MEMORA CREATIONS
   MY ORDERS PAGE
===================================== */


.orders-body{
  min-height:100vh;

  position:relative;

  background:
    linear-gradient(
      180deg,
      #faf8f5,
      #fffdfb
    );
}


/* WATERMARK */

.orders-watermark{
  position:fixed;

  left:50%;
  top:55%;

  transform:
    translate(-50%,-50%)
    rotate(-22deg);

  width:100%;

  text-align:center;

  white-space:nowrap;

  color:
    rgba(138,90,59,.035);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(55px,10vw,150px);

  font-weight:900;

  letter-spacing:.12em;

  pointer-events:none;

  user-select:none;

  z-index:0;
}


.orders-page{
  position:relative;

  z-index:1;

  padding:
    24px 0 55px;
}


/* =========================
   HERO
========================= */

.orders-hero{
  margin-bottom:30px;

  padding:
    clamp(34px,5vw,58px);

  border:
    1px solid #e8ddd3;

  border-radius:28px;

  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      rgba(242,227,213,.97),
      rgba(255,251,247,.97)
    );

  box-shadow:
    0 18px 44px
    rgba(61,39,23,.065);
}


.orders-hero::after{
  content:"";

  position:absolute;

  right:-80px;
  top:-110px;

  width:260px;
  height:260px;

  border-radius:50%;

  background:
    rgba(183,131,93,.11);
}


.orders-eyebrow{
  position:relative;

  z-index:2;

  margin-bottom:9px;

  color:#9b613c;

  font-size:10px;

  font-weight:900;

  letter-spacing:.23em;
}


.orders-title-row{
  position:relative;

  z-index:2;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:25px;
}


.orders-title-row h1{
  margin:0;

  color:#2b1b12;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(44px,6vw,68px);

  line-height:.98;
}


.orders-title-row p{
  max-width:590px;

  margin:
    15px 0 0;

  color:#756b64;

  font-size:15px;

  line-height:1.6;
}


.orders-count{
  flex-shrink:0;

  padding:
    9px 14px;

  border:
    1px solid #e2d6cb;

  border-radius:999px;

  background:#fff;

  color:#756a62;

  font-size:12px;

  font-weight:800;
}


/* =========================
   HEADING
========================= */

.orders-heading{
  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:15px;

  margin-bottom:16px;
}


.orders-heading span{
  display:block;

  margin-bottom:4px;

  color:#9b613c;

  font-size:9px;

  font-weight:900;

  letter-spacing:.20em;
}


.orders-heading h2{
  margin:0;

  color:#302119;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:29px;
}


.orders-shop-link{
  color:#8a5a3b;

  font-size:12px;

  font-weight:800;
}


/* =========================
   ORDER LIST
========================= */

.orders-list{
  display:flex;

  flex-direction:column;

  gap:16px;
}


.orders-loading{
  padding:60px 20px;

  border:
    1px solid #e8ddd3;

  border-radius:22px;

  background:#fff;

  text-align:center;

  color:#80756e;
}


/* =========================
   ORDER CARD
========================= */

.order-card{
  overflow:hidden;

  border:
    1px solid #e7dbd1;

  border-radius:23px;

  background:
    rgba(255,255,255,.97);

  box-shadow:
    0 11px 30px
    rgba(61,39,23,.06);
}


/* TOP */

.order-card-top{
  padding:
    18px 20px;

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:15px;

  background:
    linear-gradient(
      135deg,
      #fffaf6,
      #faf3ed
    );

  border-bottom:
    1px solid #ece1d8;
}


.order-label{
  display:block;

  margin-bottom:4px;

  color:#9b613c;

  font-size:8px;

  font-weight:900;

  letter-spacing:.17em;
}


.order-card-top h2{
  margin:0;

  color:#2d2018;

  font-size:16px;

  font-weight:900;
}


.order-card-top p{
  margin:
    5px 0 0;

  color:#81766e;

  font-size:11px;
}


/* STATUS */

.order-status{
  flex-shrink:0;

  padding:
    7px 11px;

  border-radius:999px;

  font-size:10px;

  font-weight:900;
}


.order-status.processing{
  background:#fff4de;

  color:#956315;
}


.order-status.shipping{
  background:#eaf2ff;

  color:#315d9e;
}


.order-status.delivered{
  background:#eaf8ef;

  color:#247044;
}


.order-status.cancelled{
  background:#feeceb;

  color:#b42318;
}


/* =========================
   PRODUCTS
========================= */

.order-products{
  padding:
    4px 20px;
}


.order-product{
  display:grid;

  grid-template-columns:
    86px minmax(0,1fr) auto;

  gap:15px;

  align-items:center;

  padding:
    16px 0;

  border-bottom:
    1px solid #eee5de;
}


.order-product:last-child{
  border-bottom:0;
}


.order-product-image{
  width:86px;
  height:86px;

  overflow:hidden;

  border-radius:14px;

  background:#f5f1ed;

  border:
    1px solid #eee4dc;
}


.order-product-image img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}


.order-product-info h3{
  margin:
    0 0 9px;

  color:#302219;

  font-size:15px;

  line-height:1.4;
}


.order-product-meta{
  display:flex;

  gap:15px;

  flex-wrap:wrap;

  color:#81766e;

  font-size:11px;
}


.order-product-meta strong{
  color:#49382d;
}


.order-product-total{
  color:#281b13;

  font-size:16px;

  font-weight:900;

  white-space:nowrap;
}


.order-no-product{
  padding:25px;

  text-align:center;

  color:#82776f;
}


/* =========================
   ORDER INFO
========================= */

.order-info-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid #eee3db;

  border-bottom:
    1px solid #eee3db;

  background:#fffdfb;
}


.order-info-grid > div{
  padding:15px;

  border-right:
    1px solid #eee3db;
}


.order-info-grid > div:last-child{
  border-right:0;
}


.order-info-grid span{
  display:block;

  margin-bottom:5px;

  color:#8a817a;

  font-size:9px;

  font-weight:800;

  text-transform:uppercase;

  letter-spacing:.06em;
}


.order-info-grid strong{
  color:#35261d;

  font-size:12px;
}


.order-grand-total{
  color:#8a5a3b !important;

  font-size:16px !important;
}


/* PAYMENT */

.payment-state{
  display:inline-flex;

  padding:
    4px 7px;

  border-radius:999px;
}


.payment-state.paid{
  background:#eaf8ef;

  color:#247044;
}


.payment-state.pending{
  background:#fff3da;

  color:#956315;
}


.payment-state.failed{
  background:#feeceb;

  color:#b42318;
}


/* =========================
   ACTIONS
========================= */

.order-actions{
  padding:
    15px 20px;

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:10px;

  flex-wrap:wrap;
}


.order-track-btn,
.order-cancel-btn{
  min-height:42px;

  padding:
    0 15px;

  border-radius:11px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  font:inherit;

  font-size:11px;

  font-weight:900;

  cursor:pointer;
}


.order-track-btn{
  border:0;

  background:
    linear-gradient(
      180deg,
      #9b613c,
      #7e492a
    );

  color:#fff;
}


.order-cancel-btn{
  border:
    1px solid #f0cfcc;

  background:#fff2f1;

  color:#ad3026;
}


.order-cancel-btn:disabled{
  opacity:.6;

  cursor:not-allowed;
}


/* =========================
   EMPTY
========================= */

.orders-empty{
  padding:
    65px 20px;

  border:
    1px dashed #d9cabd;

  border-radius:23px;

  background:
    rgba(255,255,255,.94);

  text-align:center;
}


.orders-empty-icon{
  margin-bottom:12px;

  font-size:45px;
}


.orders-empty h2{
  margin:
    0 0 7px;

  color:#302119;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:27px;
}


.orders-empty p{
  margin:
    0 0 18px;

  color:#81766f;

  font-size:13px;
}


.orders-empty a{
  display:inline-flex;

  padding:
    12px 18px;

  border-radius:999px;

  background:#8a5a3b;

  color:#fff;

  font-size:12px;

  font-weight:900;
}


/* =========================
   SUPPORT
========================= */

.orders-support{
  margin-top:35px;

  padding:
    clamp(25px,4vw,42px);

  border-radius:25px;

  display:grid;

  grid-template-columns:
    1fr auto;

  gap:25px;

  align-items:center;

  background:
    linear-gradient(
      135deg,
      #2d1d14,
      #71462d
    );

  color:#fff;

  box-shadow:
    0 20px 45px
    rgba(54,31,16,.14);
}


.orders-support small{
  display:block;

  margin-bottom:7px;

  color:#e7c8ae;

  font-size:9px;

  font-weight:900;

  letter-spacing:.20em;
}


.orders-support h2{
  margin:
    0 0 8px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(27px,4vw,40px);
}


.orders-support p{
  margin:0;

  color:#dfd2ca;

  font-size:13px;
}


.orders-support-actions{
  display:flex;

  gap:10px;

  flex-wrap:wrap;
}


.orders-support-actions a{
  padding:
    13px 16px;

  border:
    1px solid
    rgba(255,255,255,.17);

  border-radius:13px;

  background:
    rgba(255,255,255,.09);

  color:#fff;

  font-size:12px;

  font-weight:800;
}


/* =========================
   CANCEL POPUP
========================= */

.cancel-popup-overlay{
  position:fixed;

  inset:0;

  z-index:9999;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:20px;

  background:
    rgba(24,15,10,.68);

  backdrop-filter:
    blur(5px);
}


.cancel-popup{
  width:
    min(400px,94vw);

  padding:
    30px 24px 24px;

  border:
    1px solid #eadfd5;

  border-radius:24px;

  background:#fffaf6;

  text-align:center;

  box-shadow:
    0 25px 70px
    rgba(0,0,0,.25);
}


.cancel-popup-icon{
  width:66px;
  height:66px;

  margin:
    0 auto 15px;

  border-radius:50%;

  background:#feeceb;

  color:#b42318;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:30px;

  font-weight:900;
}


.cancel-popup h2{
  margin:
    0 0 8px;

  color:#2d1f17;

  font-size:24px;
}


.cancel-popup p{
  margin:
    0 0 22px;

  color:#766c65;

  font-size:13px;

  line-height:1.55;
}


.cancel-popup-actions{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:8px;
}


.cancel-popup-actions button{
  min-height:47px;

  border-radius:12px;

  font:inherit;

  font-size:12px;

  font-weight:900;

  cursor:pointer;
}


.cancel-popup-back{
  border:
    1px solid #ded2c8;

  background:#f5eee8;

  color:#38281f;
}


.cancel-popup-confirm{
  border:0;

  background:#b42318;

  color:#fff;
}


/* =========================
   FOOTER
========================= */

.orders-footer{
  position:relative;

  z-index:2;

  margin-top:35px;

  padding:
    35px 15px 105px;

  background:#21160f;

  color:#b8aca4;

  text-align:center;
}


.orders-footer strong{
  display:block;

  margin-bottom:7px;

  color:#fff;

  font-size:15px;

  letter-spacing:.09em;
}


.orders-footer p{
  margin:0;

  font-size:12px;
}


/* =========================
   TABLET
========================= */

@media(max-width:850px){

  .order-info-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .order-info-grid > div:nth-child(2){
    border-right:0;
  }


  .order-info-grid > div:nth-child(1),
  .order-info-grid > div:nth-child(2){
    border-bottom:
      1px solid #eee3db;
  }


  .orders-support{
    grid-template-columns:1fr;
  }

}


/* =========================
   MOBILE
========================= */

@media(max-width:600px){

  .orders-page{
    padding-top:12px;
  }


  .orders-hero{
    padding:
      31px 20px;

    border-radius:21px;
  }


  .orders-title-row{
    flex-direction:column;

    align-items:flex-start;

    gap:13px;
  }


  .orders-title-row h1{
    font-size:42px;
  }


  .orders-heading{
    align-items:flex-start;

    flex-direction:column;
  }


  .order-card{
    border-radius:18px;
  }


  .order-card-top{
    padding:15px;

    flex-direction:column;
  }


  .order-status{
    align-self:flex-start;
  }


  .order-products{
    padding:
      0 13px;
  }


  .order-product{
    grid-template-columns:
      72px 1fr;

    gap:11px;
  }


  .order-product-image{
    width:72px;
    height:72px;
  }


  .order-product-info h3{
    font-size:13px;
  }


  .order-product-meta{
    gap:8px;

    font-size:9px;
  }


  .order-product-total{
    grid-column:
      2 / -1;

    font-size:14px;
  }


  .order-info-grid{
    grid-template-columns:
      1fr 1fr;
  }


  .order-info-grid > div{
    padding:12px;
  }


  .order-actions{
    padding:
      13px;

    display:grid;

    grid-template-columns:1fr;
  }


  .order-track-btn,
  .order-cancel-btn{
    width:100%;
  }


  .orders-support{
    padding:22px;

    border-radius:20px;
  }


  .orders-support-actions{
    width:100%;

    display:grid;

    grid-template-columns:1fr;
  }


  .orders-support-actions a{
    text-align:center;
  }


  .orders-watermark{
    color:
      rgba(138,90,59,.03);

    font-size:
      clamp(42px,15vw,80px);
  }

}