/* === CART === */
.cart-page{padding:0 5% 4rem}
.cart-layout{display:flex;gap:3rem;margin-top:1.5rem}
.cart-items{flex:1.5}
.cart-item{display:flex;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--cream-deep)}
.cart-item-img{width:140px;height:180px;flex-shrink:0;overflow:hidden;background:var(--cream-dark);border-radius:var(--radius)}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-details{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.cart-item-top{display:flex;justify-content:space-between}
.cart-item-top h4{font-size:1.05rem;margin-bottom:.3rem}
.cart-item-top h4 a{color:var(--dark-soft)}
.cart-meta{font-size:.78rem;color:var(--text-light);margin-top:.2rem}
.remove-btn{background:none;border:none;font-size:1rem;color:var(--text-light);cursor:pointer;transition:color .3s;padding:0}
.remove-btn:hover{color:var(--red-accent)}
.cart-item-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.qty-control{display:flex;align-items:center;border:1px solid var(--cream-deep)}
.qty-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;font-size:1rem;cursor:pointer;color:var(--text)}
.qty-value{width:40px;text-align:center;font-size:.9rem;border-left:1px solid var(--cream-deep);border-right:1px solid var(--cream-deep);padding:.3rem 0}
.cart-item-price{text-align:right}
.continue-shopping{display:inline-block;margin-top:1.5rem;font-size:.8rem;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px}
.order-summary{flex:1;background:var(--cream-dark);padding:2rem;border-radius:var(--radius);position:sticky;top:120px;height:fit-content}
.order-summary h3{font-family:var(--font-display);font-size:1.1rem;letter-spacing:1px;margin-bottom:1.5rem}
.summary-row{display:flex;justify-content:space-between;font-size:.9rem;padding:.5rem 0}
.summary-row.total{font-weight:600;font-size:1.1rem;color:var(--dark)}
.free{color:var(--gold-dark);font-weight:500}
.summary-divider{height:1px;background:var(--cream-deep);margin:1rem 0}
.promo-code{display:flex;gap:0;margin:1rem 0}
.promo-code input{flex:1;padding:.7rem 1rem;border:1px solid var(--cream-deep);background:var(--white);font-size:.85rem;outline:none}
.trust-badges{display:flex;flex-direction:column;gap:.6rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--cream-deep)}
.trust-item{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-light);text-transform:uppercase;letter-spacing:1px}
/* === CHECKOUT === */
.checkout-page{padding:1rem 4% 4rem;max-width:1320px;margin:0 auto}
.checkout-steps{display:flex;align-items:center;justify-content:center;gap:0;margin:2rem 0 3rem;padding:0 10%}
.step{display:flex;align-items:center;gap:.6rem}
.step-number{width:32px;height:32px;border-radius:50%;border:2px solid var(--cream-deep);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;color:var(--text-light);transition:all .3s}
.step.active .step-number{background:var(--gold);color:#fff;border-color:var(--gold)}
.step-label{font-size:.78rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-light)}
.step.active .step-label{color:var(--dark)}
.step-line{flex:1;height:1px;background:var(--cream-deep);margin:0 1rem}
/* Form + summary side-by-side. The form is wider (it carries multiple
   sections), the summary gets a generous fixed width so product names
   don't get squeezed into one-word-per-line. */
.checkout-layout{display:flex;gap:2.5rem;align-items:flex-start}
.checkout-form{flex:1 1 auto;min-width:0}
.checkout-summary{flex:0 0 360px;background:var(--cream-dark);padding:1.75rem;border-radius:var(--radius);position:sticky;top:120px;height:fit-content}
.checkout-summary h3{font-family:var(--font-display);font-size:1.1rem;letter-spacing:1px;margin-bottom:1.5rem;white-space:nowrap}
.checkout-item{display:flex;gap:.9rem;padding:.8rem 0;border-bottom:1px solid var(--cream-deep);align-items:flex-start}
.checkout-item img{width:64px;height:80px;flex:0 0 64px;object-fit:cover;border-radius:var(--radius)}
.checkout-item > div{flex:1;min-width:0}
.checkout-item h4{font-size:.88rem;line-height:1.35;margin-bottom:.25rem;word-break:break-word}
.checkout-item p{font-size:.75rem;color:var(--text-light)}
.checkout-item span{font-size:.85rem;font-weight:600;margin-top:.3rem;display:block}
/* Saved-address picker cards. */
.saved-address-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}
.saved-address-header h3{margin:0}
.saved-address-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.75rem}
.saved-address-card{position:relative;padding:1rem 1rem 1rem 2.2rem;border:1px solid var(--cream-deep);border-radius:var(--radius);background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.saved-address-card:hover{border-color:var(--gold)}
.saved-address-card.selected{border-color:var(--gold);box-shadow:0 0 0 2px rgba(184,150,78,.18)}
.saved-address-card::before{content:'';position:absolute;left:.85rem;top:1.15rem;width:14px;height:14px;border:2px solid var(--cream-deep);border-radius:50%}
.saved-address-card.selected::before{border-color:var(--gold);background:radial-gradient(circle,var(--gold) 0 4px,transparent 5px)}
.saved-address-card .addr-label{display:inline-block;font-size:.65rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-dark);background:var(--cream);padding:.15rem .5rem;border-radius:999px;margin-bottom:.4rem}
.saved-address-card .addr-name{font-weight:600;font-size:.92rem;margin-bottom:.25rem}
.saved-address-card .addr-detail{font-size:.78rem;line-height:1.45;color:var(--text-light)}
.saved-address-card .addr-default{position:absolute;right:.8rem;top:.8rem;font-size:.6rem;letter-spacing:1px;text-transform:uppercase;color:var(--gold-dark)}
.payment-options{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.5rem}
.payment-option{display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid var(--cream-deep);cursor:pointer;transition:border-color .3s;border-radius:var(--radius)}
.payment-option.selected{border-color:var(--gold);background:rgba(184,150,78,.05)}
.payment-option.is-disabled{opacity:.55;cursor:not-allowed;background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(0,0,0,.02) 8px,rgba(0,0,0,.02) 16px)}
.payment-option.is-disabled:hover{border-color:var(--cream-deep)}
.payment-soon{display:inline-block;margin-left:.5rem;font-size:.65rem;letter-spacing:1px;text-transform:uppercase;background:var(--cream-deep);color:var(--text-light);padding:.15rem .5rem;border-radius:999px;font-weight:500;vertical-align:middle}
/* Custom-styled radio: native radio kept (so labels/keyboard nav work) but
   restyled into a clearly visible gold circle that fills when selected.
   Before this, an "input{display:none}" rule was hiding it entirely — buyers
   couldn't tell that "Online" and "COD" were a choice. */
.payment-option input[type="radio"]{
    appearance:none;
    -webkit-appearance:none;
    width:22px;
    height:22px;
    flex:0 0 22px;
    margin:0;
    border:2px solid var(--cream-deep);
    border-radius:50%;
    cursor:pointer;
    background:#fff;
    position:relative;
    transition:border-color .2s;
}
.payment-option input[type="radio"]:checked{border-color:var(--gold)}
.payment-option input[type="radio"]:checked::after{
    content:'';
    position:absolute;
    inset:4px;
    border-radius:50%;
    background:var(--gold);
}
.payment-option input[type="radio"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.payment-label{display:flex;align-items:center;gap:1rem;flex:1}
.payment-icon{font-size:1.3rem}
.payment-label strong{font-size:.85rem;display:block}
.payment-label p{font-size:.75rem;color:var(--text-light)}
.card-fields{margin-top:1rem}
/* === WISHLIST === */
.wishlist-page{padding:0 5% 4rem}
.wishlist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:1.5rem}
.wishlist-card{background:var(--white);border:1px solid var(--cream-deep);border-radius:var(--radius);overflow:hidden}
.wishlist-img{position:relative;height:350px;overflow:hidden}
.wishlist-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.wishlist-card:hover .wishlist-img img{transform:scale(1.04)}
.remove-wishlist{position:absolute;top:.8rem;right:.8rem;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.85);border:none;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .3s}
.remove-wishlist:hover{background:var(--red-accent);color:#fff}
.wishlist-info{padding:1rem}
.wishlist-info h4{font-size:.95rem;margin-bottom:.3rem}
.wishlist-info .move-to-bag{margin-top:.8rem;width:100%}
/* === ACCOUNT === */
.account-page{padding:0 5% 4rem}
.account-layout{display:flex;gap:3rem;margin-top:1.5rem}
.account-sidebar{width:260px;flex-shrink:0}
.account-avatar{text-align:center;padding:2rem 1rem;background:var(--cream-dark);border-radius:var(--radius);margin-bottom:1.5rem}
.avatar-circle{width:70px;height:70px;border-radius:50%;background:var(--gold);color:#fff;font-family:var(--font-display);font-size:1.5rem;display:flex;align-items:center;justify-content:center;margin:0 auto .8rem}
.account-avatar h3{font-size:1rem;margin-bottom:.2rem}
.account-avatar p{font-size:.78rem;color:var(--text-light)}
.account-nav{display:flex;flex-direction:column;gap:.3rem}
.acct-link{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;font-size:.85rem;color:var(--text);border-radius:var(--radius);transition:all .3s}
.acct-link:hover,.acct-link.active{background:var(--cream-dark);color:var(--gold)}
.acct-link.logout{color:var(--red-accent);margin-top:1rem}
.account-main{flex:1;min-width:0}
.acct-tab{display:none}
.acct-tab.active{display:block}
.acct-tab h2{font-family:var(--font-display);font-size:1.5rem;margin-bottom:1.5rem;color:var(--dark-soft)}
.profile-form .btn-gold{margin-top:1rem}
.order-list{display:flex;flex-direction:column;gap:1.5rem}
.order-card{border:1px solid var(--cream-deep);border-radius:var(--radius);overflow:hidden}
.order-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:var(--cream-dark)}
.order-header p{font-size:.78rem;color:var(--text-light);margin-top:.2rem}
.order-status{font-size:.68rem;text-transform:uppercase;letter-spacing:1.5px;padding:.3rem .8rem;border-radius:20px;font-weight:600}
.order-status.delivered{background:#d4edda;color:#155724}
.order-status.shipped{background:#cce5ff;color:#004085}
.order-status.processing{background:#fff3cd;color:#856404}
.order-items{padding:1rem 1.5rem}
.order-item-row{display:flex;align-items:center;gap:1rem;padding:.5rem 0}
.order-item-row img{width:50px;height:65px;object-fit:cover;border-radius:var(--radius)}
.order-item-row h4{font-size:.9rem}
.order-item-row p{font-size:.75rem;color:var(--text-light)}
.order-item-row span{margin-left:auto;font-weight:600;font-size:.9rem}
.order-footer{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-top:1px solid var(--cream-deep)}
.order-actions{display:flex;gap:.5rem}
.address-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.address-card{border:1px solid var(--cream-deep);border-radius:var(--radius);padding:1.5rem;position:relative}
.address-card.default{border-color:var(--gold)}
.default-badge{position:absolute;top:1rem;right:1rem;font-size:.6rem;text-transform:uppercase;letter-spacing:1.5px;padding:.2rem .6rem;background:var(--gold);color:#fff;border-radius:2px}
.address-card h4{font-family:var(--font-display);font-size:.9rem;margin-bottom:.8rem;letter-spacing:1px}
.address-card p{font-size:.85rem;line-height:1.6;color:var(--text-light)}
.address-actions{display:flex;gap:1rem;margin-top:1rem}
.address-actions button{background:none;border:none;font-size:.78rem;color:var(--gold);text-transform:uppercase;letter-spacing:1px;cursor:pointer}
.address-card.add-new{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border-style:dashed;transition:border-color .3s}
.address-card.add-new:hover{border-color:var(--gold)}
.add-icon{font-size:2rem;color:var(--gold);margin-bottom:.5rem}

/* Profile status banner (inline confirmation/error for the profile form) */
.profile-status {
  padding: 0.65rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  background: #f0f7ec;
  border: 1px solid #cbe3b9;
  color: #2f5d18;
}
.profile-status.is-error {
  background: #fdecec;
  border-color: #f3b9b9;
  color: #7a1f1f;
}
.profile-status.is-success {
  background: #f0f7ec;
  border-color: #cbe3b9;
  color: #2f5d18;
}

/* ============ Addresses tab ============ */
.addresses-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}
.addresses-header h2 { margin: 0; }

/* Address add/edit form — hidden by default; opens via .open class. */
.address-add-form {
  display: none;
  background: #fff;
  border: 1px solid var(--cream-deep, #e8dfd0);
  border-radius: 10px;
  padding: 1.6rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 18px rgba(0,0,0,0.04);
  animation: addressFormSlide 220ms ease;
}
.address-add-form.open { display: block; }
@keyframes addressFormSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.address-add-form h4 {
  margin: 0 0 1.2rem;
  font-family: var(--font-display, serif);
  font-size: 1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dark-soft, #1f1d1a);
}

/* Two-column grid for the address fields */
.address-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}
.address-form-grid .form-group { display: flex; flex-direction: column; }
.address-form-grid .form-group label {
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-light, #6b6360);
  margin-bottom: 0.35rem;
  font-weight: 500;
}
.address-form-grid .form-group .req { color: #b54848; font-weight: 600; }
.address-form-grid input {
  border: 1px solid var(--cream-deep, #e8dfd0);
  background: #fff;
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--dark-soft, #1f1d1a);
  transition: border-color 160ms ease, box-shadow 160ms ease;
  width: 100%;
}
.address-form-grid input:focus {
  outline: none;
  border-color: var(--gold, #cda274);
  box-shadow: 0 0 0 3px rgba(205, 162, 116, 0.15);
}
.address-form-grid input::placeholder { color: #b3a99a; }
.address-form-grid .form-group--full { grid-column: 1 / -1; }

.address-default-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-light, #6b6360);
  margin-bottom: 0.8rem;
}
.address-default-toggle input { width: auto; margin: 0; }

.address-form-status {
  margin-bottom: 0.8rem;
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  font-size: 0.82rem;
  background: #fdecec;
  border: 1px solid #f3b9b9;
  color: #7a1f1f;
}

.address-form-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--cream-deep, #e8dfd0);
}

/* Saved address cards (slight refresh on top of existing rules) */
.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.address-card {
  background: #fff;
  border: 1px solid var(--cream-deep, #e8dfd0);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  position: relative;
  transition: border-color 160ms ease;
}
.address-card.default { border-color: var(--gold, #cda274); }
.address-card .default-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--gold, #cda274);
  color: #fff;
  font-size: 0.65rem;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.address-card h4 { font-family: var(--font-display, serif); font-size: 0.95rem; margin: 0 0 0.6rem; letter-spacing: 1px; }
.address-card p  { font-size: 0.85rem; line-height: 1.55; color: var(--text-light, #6b6360); margin: 0 0 0.8rem; }
.address-card .address-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--cream-deep, #e8dfd0);
}
.address-card .address-actions button {
  background: transparent;
  border: 1px solid var(--cream-deep, #e8dfd0);
  color: var(--dark-soft, #1f1d1a);
  font-size: 0.72rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 160ms ease;
  font-family: inherit;
}
.address-card .address-actions button:hover { border-color: var(--gold, #cda274); color: var(--gold, #cda274); }

@media (max-width: 540px) {
  .address-form-grid { grid-template-columns: 1fr; }
}