/* ─── VARIABLES ─── */


:root {
  --navy: #0a1628;
  --navy-mid: #112240;
  --navy-light: #1a3460;
  --gold: #c9a84c;
  --gold-light: #e8c97a;
  --gold-pale: #f5e9c8;
  --white: #ffffff;
  --off-white: #f8f6f1;
  --gray: #8a9ab5;
  --text-dark: #0a1628;
}


/* ─── RESET ─── */
.ReqMessage{
    color:red;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text-dark);
  background: #f4f6fa;
  overflow-x: hidden;
}
.ratelist_row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.ratelist-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

    .ratelist-card div {
        margin-bottom: 6px;
        font-size: 14px;
    }
.ratelist-dot {
    width: 6px;
    height: 6px;
    background-color: black;
    border-radius: 50%;
    display: inline-block;
    margin:0 5px 1px 0;
}
.multicol-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.multicol-field {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}
.search-box {
    position: relative;
    margin:0 10px 0 0;
    display:none;
}

    .search-box input {
        width: 90%;
        padding: 10px 40px 10px 10px;
        margin:0 10px 0 0;
    }

.search-btn {
    position: absolute;
    right: 12%;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
}

    .search-btn img {
        width: 18px;
        height: 18px;
        object-fit: contain;
        background: transparent;
    }
    .multicol-field a {
        color: #141D2D;
    }

/* ─── ANIMATIONS ─── */

.MyCalendar1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}


@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}


@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ═══════════════════════════════════════════
   NAV
═══════════════════════════════════════════ */


nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  background: rgba(10, 22, 40, 0.96);
  backdrop-filter: blur(12px);
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}


.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}


.nav-logo img {
  height: 36px;
  width: auto;
  display: block;
}
.nav-logoF {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}


    .nav-logoF img {
        height: 36px;
        width: auto;
        display: block;
    }

.nav-logo1 {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    display:none;
}


    .nav-logo1 img {
        height: 36px;
        width: auto;
        display: block;
    }


.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}


.nav-links a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: color 0.3s;
}


.nav-links a:hover {
  color: var(--gold);
}


.nav-links a.active {
  color: var(--gold);
}


.nav-cta {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy) !important;
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: 600 !important;
  transition: opacity 0.3s !important;
}


.nav-cta:hover {
  opacity: 0.9;
  color: var(--navy) !important;
}


/* ══════════════════════════════════════════
       NAV DROPDOWN
    ══════════════════════════════════════════ */


.nav-links li {
  position: relative;
}


.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: color 0.25s;
  user-select: none;
}


.nav-dropdown-toggle:hover {
  color: var(--gold);
}


.nav-dropdown-toggle .caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.24s;
  margin-top: 1px;
  flex-shrink: 0;
}


.nav-links li.open .nav-dropdown-toggle .caret {
  transform: rotate(180deg);
}


.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(8,18,34,0.99);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 14px;
  padding: 10px 0;
  min-width: 210px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
  z-index: 2100;
}


.nav-dropdown::before {
  content: \'\';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(201,168,76,0.22);
}


.nav-links li.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}


.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.72) !important;
  text-decoration: none;
  transition: color 0.18s, background 0.18s;
  white-space: nowrap;
}


.nav-dropdown a:hover {
  color: var(--gold) !important;
  background: rgba(201,168,76,0.07);
}
.table-responsive {
    width: 100%;
    overflow-x: auto; /* 🔥 allows horizontal scroll */
    -webkit-overflow-scrolling: touch;
}

.nav-dropdown a .cat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.5;
  flex-shrink: 0;
  transition: opacity 0.2s;
}


.nav-dropdown a:hover .cat-dot {
  opacity: 1;
}


.nav-dropdown-divider {
  height: 1px;
  background: rgba(201,168,76,0.1);
  margin: 5px 14px;
}


.nav-dropdown-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  padding: 6px 18px 4px;
  font-family: \'DM Sans\', sans-serif;
}


/* ════════════════════════════════════════
   NAV SEARCH — icon, overlay, mobile
════════════════════════════════════════ */


/* Desktop search button */


.nav-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: rgba(255,255,255,0.78);
  transition: color 0.25s;
}


.nav-search-btn:hover {
  color: var(--gold);
}


/* Search overlay */


.nav-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,22,40,0.88);
  backdrop-filter: blur(10px);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}


.nav-search-overlay.open {
  display: flex;
}


.nav-search-box {
  width: 100%;
  max-width: 620px;
  margin: 0 24px;
  position: relative;
}


.nav-search-input {
  width: 100%;
  padding: 18px 56px 18px 22px;
  background: #fff;
  border: none;
  border-radius: 14px;
  outline: none;
  font-size: 18px;
  font-family: 'DM Sans', sans-serif;
  color: var(--navy);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  box-sizing: border-box;
}


.nav-search-input::placeholder {
  color: #9fb0c2;
}


.nav-search-icon {
  position: absolute;
  right: 16px;
  top: 35%;
  transform: translateY(-50%);
  color: var(--mute);
  /*pointer-events: none;*/
  cursor:pointer;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 4px 6px 4px 4px;
  border-radius: 0 12px 12px 0;
}


.nav-search-close {
  position: absolute;
  top: -48px;
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  font-size: 28px;
  line-height: 1;
  transition: color 0.2s;
  padding: 4px;
}


.nav-search-close:hover {
  color: #fff;
}


.nav-search-hint {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  font-family: 'DM Sans', sans-serif;
}


/* Mobile search button */


.mob-btn-search {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 0;
  width: 100%;
  background: rgba(201,168,76,0.07);
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0;
  color: var(--gold);
  font-size: 22px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}


.mob-btn-search:hover {
  background: rgba(201,168,76,0.14);
}

.RuppeeBig {
    font-family: Segoe UI, Noto Sans, Roboto, Arial, sans-serif;
    font-size: 20pt;
    color: green;
}
.RuppeeSmall {
    font-family: Segoe UI, Noto Sans, Roboto, Arial, sans-serif;
    font-size: 12pt;
    color: green;
}
/* ══════════════════════════════════════════
       SHOP PAGE HERO
    ══════════════════════════════════════════ */
.shop-page-hero {
    background: linear-gradient(135deg, var(--navy) 0%, #112240 60%, #1a3460 100%);
    padding: 120px 5% 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}


.shop-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(201,168,76,0.10) 0%, transparent 70%);
  pointer-events: none;
}


.shop-page-hero-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 18px;
}


.shop-page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 14px;
}


.shop-page-hero h1 span {
  color: var(--gold);
}


.shop-page-hero p {
  font-size: 16px;
  color: rgba(255,255,255,0.65);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}


/* ══════════════════════════════════════════
       SHOP CONTENT WRAPPER
    ══════════════════════════════════════════ */


.shop-page-content {
  background: #f4f6fa;
  padding: 64px 5% 80px;
}


.shop-section {
  margin-bottom: 60px;
}


.shop-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}


.shop-section-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}


.shop-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
}


.shop-section-divider {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(201,168,76,0.4), transparent);
  margin: 0 24px 6px;
}


.shop-section-count {
  font-size: 13px;
  font-weight: 600;
  color: #9aacbe;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}


/* ══════════════════════════════════════════
       PRODUCT GRID
    ══════════════════════════════════════════ */


.shop-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}


.shop-products-grid.grid-8 {
  grid-template-columns: repeat(4, 1fr);
}


/* ── Product Card ── */


.sp-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e8edf5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}


.sp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(10,22,40,0.11);
}


/* Product image placeholder */


.sp-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  position: relative;
  flex-shrink: 0;
  background: #ffffff !important;
  border-bottom: 1px solid #f0f3f8;
}


/* Badge */


.sp-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 20px;
}


.sp-badge.featured {
  background: var(--gold);
  color: #0a1628;
}


.sp-badge.new {
  background: #1a7a4a;
  color: #fff;
}


.sp-badge.hot {
  background: #c0392b;
  color: #fff;
}


/* Card body */


.sp-body {
  padding: 15px 15px 17px;
  display: flex;
  flex-direction: column;
  flex: 1;
}


.sp-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}


.sp-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.4;
  margin-bottom: 8px;
  flex: 1;
}


.sp-moq {
  font-size: 12px;
  color: #9aacbe;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 14px;
}


.sp-moq strong {
  color: #5a6a82;
}


.sp-enquire-btn {
  display: block;
  width: 100%;
  padding: 11px;
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  letter-spacing: 0.03em;
}


.sp-enquire-btn:hover {
  background: transparent;
  color: var(--navy);
}


/* ══════════════════════════════════════════
       TOAST
    ══════════════════════════════════════════ */


.sp-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--navy);
  color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 8px 32px rgba(10,22,40,0.25);
  border-left: 4px solid var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  transform: translateY(80px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s;
  max-width: 320px;
}


.sp-toast.show {
  transform: translateY(0);
  opacity: 1;
}


/* ══════════════════════════════════════════
       PAGE FADE ANIMATION
    ══════════════════════════════════════════ */


@keyframes pageFadeIn {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }


.page-fade {
  animation: pageFadeIn 0.32s ease both;
}


/* ══════════════════════════════════════════
       PAGINATION BAR
    ══════════════════════════════════════════ */


.shop-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 48px 0 12px;
  flex-wrap: wrap;
}


.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1.5px solid #dde3ef;
  background: #fff;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  text-decoration: none;
}


.pg-btn:hover:not(.pg-active):not(.pg-disabled) {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201,168,76,0.06);
}


.pg-btn.pg-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  cursor: default;
  box-shadow: 0 4px 14px rgba(10,22,40,0.18);
}


.pg-btn.pg-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}


.pg-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}


.pg-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.pg-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 42px;
  color: #9aacbe;
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  pointer-events: none;
  letter-spacing: 0.05em;
}


/* Page info strip */


.shop-page-info {
  text-align: center;
  font-size: 13px;
  color: #9aacbe;
  font-family: 'DM Sans', sans-serif;
  margin-top: 10px;
  padding-bottom: 60px;
}


.shop-page-info strong {
  color: var(--navy);
}
.rma_item_bg_top {
    width: 98%;
    float: left;
    margin: 10px 0 0 0;
    padding: 2px 0 0 10px;
    background: #f8f8f8;
    font: normal 10pt Arial, Helvetica, sans-serif;
    color: #333;
}

.rma_item_bg {
    width: 98%;
    float: left;
    margin: 10px 0 3px 0;
    padding: 2px 0 2px 10px;
    border-bottom: solid 1px #eee;
    font: normal 10pt Arial, Helvetica, sans-serif;
    color: #333;
}

    .rma_item_bg span a {
        text-decoration: underline;
        color: #004885;
    }

.rma_item_bigbox {
    width: 35%;
    float: left;
    margin: 0px 10px 0px 10px;
    padding: 2px 0 2px 0;
}

    .rma_item_bigbox span {
        width: 100%;
        float: left;
        margin: 0 0 0 0;
        padding: 0;
    }

.rma_item_medbox {
    width: 28%;
    float: left;
    margin: 0px 0 3px 57%;
    padding: 2px 0 2px 0;
}

.rma_item_smallbox {
    width: 18%;
    float: left;
    margin: 0px 0 3px 0;
    padding: 2px 0 2px 0;
}

.request_rma_btn {
    width: auto;
    float: left;
    margin: 20px 0 0 33%;
    padding: 5px 30px 5px 30px;
    background: #eee;
    cursor: pointer;
}

.rma_form_bg {
    width: 100%;
    margin: 0 0 0 0;
    float: left;
}

    .rma_form_bg select {
        width: auto;
        margin: 10px 20px 8px 0;
        padding: 7px 10px;
        float: left;
        font: normal 10pt Arial, Helvetica, sans-serif;
        color: #333;
        border: solid 3px #f2f2f2;
    }

.rma_form_input {
    width: 70%;
    padding: 8px 0 10px 0;
    margin: 0 0 5px 0;
    float: left;
    font: normal 10pt Arial, Helvetica, sans-serif;
    color: #333;
    border: solid 3px #f2f2f2;
}

.rma_form_bg textarea {
    width: 70%;
    padding: 8px 0 10px 0;
    margin: 0 0 5px 0;
    float: left;
    font: normal 10pt Arial, Helvetica, sans-serif;
    color: #333;
    border: solid 3px #f2f2f2;
}

.shipping_item_total {
    width: 28%;
    float: left;
    margin: 0px 0 3px 42%;
    padding: 2px 0 2px 0;
}

/* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */


@media (max-width: 1100px) {


  .shop-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }


}


@media (max-width: 800px) {


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


  .shop-section-divider,
      .shop-section-count {
    display: none;
  }


}


@media (max-width: 480px) {

    .ratelist_row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
        gap: 16px;
    }
  .shop-products-grid {
    grid-template-columns: 1fr 1fr; gap: 13px;
  }


  .sp-img {
    font-size: 38px;
  }


  .shop-page-content {
    padding: 40px 4% 20px;
  }


  .pg-btn {
    min-width: 36px; height: 36px; font-size: 13px;
  }


  .pg-arrow {
    padding: 0 10px; font-size: 12px;
  }
    .nav-logo{
        display:block;
    }
    .nav-logo1 {
        display: block;
    }
    

}


/* ─── HAMBURGER ─── */


.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  padding: 0;
  z-index: 1100;
  align-items: center;
  border-radius: 9px;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}


.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s, width 0.3s;
  transform-origin: center;
}


.nav-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  width: 20px;
}


.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}


.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  width: 20px;
}


/* ─── MOBILE MENU ─── */


.nav-mobile-menu {
  display: flex;
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #080f1e;
  z-index: 999;
  flex-direction: column;
  align-items: unset;
  justify-content: unset;
  gap: 0;
  padding: 0 0 40px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.26s ease, visibility 0.26s;
}


.nav-mobile-menu.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}


.nav-mobile-menu a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 18px 0;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color 0.2s;
}


.nav-mobile-menu a:last-child {
  border-bottom: none;
}


.nav-mobile-menu a:hover {
  color: var(--gold);
}


/* ── Cart + My Account centred in mobile menu ── */


.nav-mobile-menu .nav-cart-link,
.nav-mobile-menu .nav-user-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-align: center;
  color: rgba(255,255,255,0.85) !important;
}


.nav-mobile-menu .nav-cta-mobile {
  margin-top: 32px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy) !important;
  padding: 16px 40px;
  border-radius: 8px;
  font-weight: 700 !important;
  font-size: 16px !important;
  border-bottom: none !important;
  width: auto !important;
}


/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */


footer {
  background: var(--navy);
  color: rgba(255,255,255,0.6);
  padding: 64px 5% 36px;
}


.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}


.footer-brand p {
  font-size: 14px;
  line-height: 1.75;
  margin-top: 16px;
  max-width: 280px;
}


.footer-col h4 {
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}


.footer-col ul {
  list-style: none;
}


.footer-col ul li {
  margin-bottom: 10px;
}


.footer-col ul a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}


.footer-col ul a:hover {
  color: var(--gold);
}


.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 28px;
}


.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}


.footer-bottom a {
  color: var(--gold);
  text-decoration: none;
}


/* ═══════════════════════════════════════════
   SHARED / GLOBAL
═══════════════════════════════════════════ */


section {
  padding: 100px 5%;
}


.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}


.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.15;
  max-width: 600px;
}


.section-title.white {
  color: var(--white);
}


.section-sub {
  font-size: 17px;
  color: #4a5a72;
  line-height: 1.75;
  max-width: 560px;
  margin-top: 16px;
}


.section-sub.white {
  color: rgba(255,255,255,0.65);
}


.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy);
  padding: 16px 36px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 24px rgba(201,168,76,0.3);
}


.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201,168,76,0.45);
}


.btn-outline {
  border: 1.5px solid rgba(255,255,255,0.3);
  color: var(--white);
  padding: 16px 36px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.3s, background 0.3s;
}


.btn-outline:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.08);
}


.gold {
  color: var(--gold);
}


/* ═══════════════════════════════════════════
   INDEX — HERO
═══════════════════════════════════════════ */


.hero {
  min-height: 100vh;
  background: var(--navy);
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
  padding-top: 72px;
  background-image: linear-gradient(rgba(212,160,23,.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(212,160,23,.06) 1px, transparent 1px);
  background-size: 60px 60px;
}


.hero-image-side {
  position: relative;
  overflow: hidden;
}


.hero-image-side img {
  width: 100%;
  height: 90%;
  object-fit: cover;
  display: block;
  margin-top: 50px;
}


.hero-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.20) 100%);
}


.hero-image-tag {
  position: absolute;
  bottom: 32px;
  left: 28px;
  background: rgba(10,22,40,0.85);
  border: 1px solid rgba(201,168,76,0.3);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}


.hero-image-tag .dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse 2s infinite;
}


.hero-image-tag span {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}


.hero-glow {
  position: absolute;
  top: -200px;
  right: -100px;
  z-index: 0;
  width: 700px;
  height: 700px;
  background: radial-gradient(ellipse, rgba(26,140,255,.14) 0%, transparent 70%);
  pointer-events: none;
}


.hero-content-side {
  display: flex;
  align-items: center;
  padding: 80px 60px 80px 56px;
  position: relative;
  z-index: 2;
}


.hero-grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.03;
}


.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}


.hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2s infinite;
}


.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.08;
  margin-bottom: 24px;
}


.hero h1 .gold {
  color: var(--gold);
}


.hero p {
  font-size: 18px;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: 40px;
}


.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}


/* ═══════════════════════════════════════════
   INDEX — PLATFORMS
═══════════════════════════════════════════ */


.platforms {
  background: var(--off-white);
  padding: 60px 5%;
  overflow: hidden;
}


.platforms-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 36px;
}


.platforms-track {
  display: flex;
  gap: 48px;
  align-items: center;
  animation: scroll 30s linear infinite;
  width: max-content;
}


.platform-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid #e0ddd5;
  border-radius: 10px;
  padding: 14px 24px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}


.platform-badge .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}


/*Payment Page*/


.payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 24px;
}


.payment-card {
    background: var(--off-white);
    border: 1px solid #e8e4db;
    border-radius: 16px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}


    .payment-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 48px rgba(10,22,40,0.1);
    }


    .payment-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--gold), var(--gold-light));
        opacity: 0;
        transition: opacity 0.3s;
    }


    .payment-card:hover::before {
        opacity: 1;
    }


.payment-icon {
    
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 24px;
}


.payment-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 12px;
}


.payment-card p {
    font-size: 15px;
    color: #5a6a82;
    line-height: 1.7;
}


/* ═══════════════════════════════════════════
   INDEX — SERVICES
═══════════════════════════════════════════ */


.services {
  background: var(--white);
}


.services-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}





.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}


.service-card {
  background: var(--off-white);
  border: 1px solid #e8e4db;
  border-radius: 16px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}


.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(10,22,40,0.1);
}


.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  opacity: 0;
  transition: opacity 0.3s;
}


.service-card:hover::before {
  opacity: 1;
}


.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
}


.service-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}


.service-card p {
  font-size: 15px;
  color: #5a6a82;
  line-height: 1.7;
}


/* ═══════════════════════════════════════════
   INDEX — HOW IT WORKS
═══════════════════════════════════════════ */


.how-it-works {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}


.how-it-works::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(201,168,76,0.06) 0%, transparent 70%);
}


.hiw-header {
  margin-bottom: 72px;
  position: relative;
  z-index: 1;
}


.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  position: relative;
  z-index: 1;
}


.step {
  position: relative;
}


.step-number {
  font-family: 'Playfair Display', serif;
  font-size: 72px;
  font-weight: 900;
  color: rgba(201,168,76,0.12);
  line-height: 1;
  margin-bottom: -16px;
}


.step-content {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: 14px;
  padding: 28px 24px;
}


.step-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}


.step-content p {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}


/* ═══════════════════════════════════════════
   INDEX — WHY US
═══════════════════════════════════════════ */


.why-us {
  background: var(--off-white);
}


.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}


.why-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 36px;
}


.why-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}


.why-check {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--navy);
  font-weight: 700;
}


.why-item h4 {
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 4px;
}


.why-item p {
  font-size: 14px;
  color: #5a6a82;
  line-height: 1.65;
}


.why-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}


.why-card {
  background: var(--white);
  border: 1px solid #e0ddd5;
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
}


.why-card .big {
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  font-weight: 900;
  color: var(--navy);
}


.why-card .big span {
  color: var(--gold);
}


.why-card small {
  display: block;
  font-size: 12px;
  color: var(--gray);
  margin-top: 4px;
}


.why-card.featured {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: var(--white);
  border-color: transparent;
}


.why-card.featured .big {
  color: var(--white);
}


.why-card.featured small {
  color: rgba(255,255,255,0.5);
}


.why-card.featuredwhite {
  grid-column: span 2;
  background: var(--white);
  color: var(--text-dark);
  border-color: transparent;
  font-weight: normal;
  font-size: 18px;
}


/* ═══════════════════════════════════════════
   INDEX — CONTACT SECTION
═══════════════════════════════════════════ */


.contact {
  background: var(--white);
}


.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}


.contact-info h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 20px;
  line-height: 1.15;
}


.contact-info p {
  font-size: 16px;
  color: #4a5a72;
  line-height: 1.75;
  margin-bottom: 36px;
}


.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}


.contact-detail-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  background: var(--gold-pale);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}


.contact-detail h4 {
  font-size: 13px;
  color: var(--gray);
  font-weight: 500;
}


.contact-detail p {
  font-size: 15px;
  color: var(--navy);
  font-weight: 600;
  margin: 0;
}


.contact-form {
  background: var(--off-white);
  border: 1px solid #e8e4db;
  border-radius: 20px;
  padding: 48px 40px;
}


.mapimg {
  width: 100%;
  margin: 100px 0 0 0;
  float: left;
  border-radius: 10px;
}


.mapimg img {
  width: 100%;
  margin: 0;
  float: left;
  border-radius: 10px;
}


/* ─── FORMS (shared across index + contact page) ─── */


.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}


.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}


.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.3px;
  font-family: 'DM Sans', sans-serif;
}


.form-group input,
.form-group select,
.form-group textarea {
  background: var(--white);
  border: 1.5px solid #d8d4cb;
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  color: var(--navy);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.08);
}


.form-group textarea {
  resize: vertical;
  min-height: 90px;
}


.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aacbe' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
  appearance: none;
}


.form-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  margin-top: 8px;
}


.form-submit:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}


.form-note {
  font-size: 12px;
  color: var(--gray);
  text-align: center;
  margin-top: 14px;
  line-height: 1.6;
}


/* ═══════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════ */


.about-hero {
  background: var(--navy);
  padding: 140px 5% 100px;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(rgba(212,160,23,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(212,160,23,.06) 1px,transparent 1px);
  background-size: 60px 60px;
}


.about-hero-glow {
  position: absolute;
  top: -150px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse,rgba(201,168,76,0.12) 0%,transparent 70%);
  pointer-events: none;
}


.about-hero-glow2 {
  position: absolute;
  bottom: -200px;
  left: -50px;
  width: 500px;
  height: 500px;
  background: radial-gradient(ellipse,rgba(26,140,255,0.08) 0%,transparent 70%);
  pointer-events: none;
}


.about-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
}


.about-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}


.about-hero-breadcrumb a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
}


.about-hero-breadcrumb a:hover {
  color: var(--gold);
}


.about-hero-breadcrumb span {
  color: rgba(255,255,255,0.25);
  font-size: 13px;
}


.about-hero-breadcrumb .current {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
}


.about-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(38px,5.5vw,68px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.08;
  margin-bottom: 28px;
}


.about-hero h1 .gold {
  color: var(--gold);
}


.about-hero-lead {
  font-size: 19px;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  line-height: 1.8;
  max-width: 720px;
}


.about-hero-badges {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}


.about-hero-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}


.about-divider {
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), transparent);
}


.about-website-strip {
  background: var(--off-white);
  border-bottom: 1px solid #ede9e0;
  padding: 20px 5%;
  display: flex;
  align-items: center;
  gap: 16px;
}


.about-website-strip .ws-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray);
}


.about-website-strip .ws-url {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}


.about-website-strip .ws-url:hover {
  color: var(--gold);
}


.about-website-strip .ws-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2s infinite;
}


.about-who {
  padding: 100px 5%;
  background: var(--white);
}


.about-who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}


.about-who-content p {
  font-size: 17px;
  color: #4a5a72;
  line-height: 1.9;
  margin-bottom: 24px;
}


.about-who-content p:last-child {
  margin-bottom: 0;
}


.about-stat-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.about-stat-card {
  background: var(--navy);
  border-radius: 16px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  border: 1px solid rgba(201,168,76,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}


.about-stat-card:hover {
  transform: translateX(6px);
  box-shadow: 0 8px 40px rgba(10,22,40,0.2);
}


.about-stat-card.gold-card {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-color: transparent;
}


.about-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 44px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  white-space: nowrap;
}


.about-stat-card.gold-card .about-stat-num {
  color: var(--navy);
}


.about-stat-label {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}


.about-stat-card.gold-card .about-stat-label {
  color: var(--navy);
}


.about-stat-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
  font-weight: 400;
}


.about-stat-card.gold-card .about-stat-sub {
  color: rgba(10,22,40,0.55);
}


.about-pillars {
  background: var(--off-white);
  padding: 80px 5%;
  border-top: 1px solid #ede9e0;
  border-bottom: 1px solid #ede9e0;
}


.about-pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}


.pillar-card {
  background: var(--white);
  border: 1px solid #e0ddd5;
  border-radius: 16px;
  padding: 40px 32px;
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
}


.pillar-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}


.pillar-card:hover {
  box-shadow: 0 10px 40px rgba(10,22,40,0.08);
  transform: translateY(-4px);
}


.pillar-card:hover::after {
  transform: scaleX(1);
}


.pillar-icon {
  width: 56px;
  height: 56px;
  background: var(--gold-pale);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 22px;
}


.pillar-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.3;
}


.pillar-card p {
  font-size: 15px;
  color: #5a6a82;
  line-height: 1.8;
}


.about-story {
  padding: 100px 5%;
  background: var(--navy);
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(rgba(212,160,23,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(212,160,23,.04) 1px,transparent 1px);
  background-size: 60px 60px;
}


.about-story-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse,rgba(201,168,76,0.08) 0%,transparent 70%);
  pointer-events: none;
}


.about-story-inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}


.about-story-inner .section-label {
  text-align: center;
}


.about-story-inner h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px,4vw,46px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.15;
  margin: 0 auto 48px;
  max-width: 720px;
}


.about-story-inner h2 .gold {
  color: var(--gold);
}


.about-story-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  text-align: left;
  margin-bottom: 52px;
}


.story-block {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: 14px;
  padding: 32px;
}


.story-block:first-child {
  grid-column: span 2;
}


.story-block-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}


.story-block p {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  line-height: 1.9;
  font-weight: 300;
}


.about-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}


.about-values {
  padding: 100px 5%;
  background: var(--white);
}


.about-values-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  flex-wrap: wrap;
  gap: 24px;
}


.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}


.value-card {
  border: 1.5px solid #e0ddd5;
  border-radius: 16px;
  padding: 36px 28px;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}


.value-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}


.value-card:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 40px rgba(201,168,76,0.08);
}


.value-card:hover::after {
  transform: scaleX(1);
}


.value-num {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 20px;
  display: block;
}


.value-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.3;
}


.value-card p {
  font-size: 14px;
  color: #5a6a82;
  line-height: 1.75;
}


.about-cta-banner {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  padding: 80px 5%;
  text-align: center;
  border-top: 1px solid rgba(201,168,76,0.2);
}


.about-cta-banner h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px,3.5vw,42px);
  font-weight: 900;
  color: var(--white);
  margin-bottom: 18px;
}


.about-cta-banner h2 .gold {
  color: var(--gold);
}


.about-cta-banner p {
  font-size: 17px;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  margin-bottom: 40px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}


/* ═══════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════ */


.contact-hero {
  background: var(--navy);
  padding: 140px 5% 100px;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(rgba(212,160,23,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(212,160,23,.06) 1px,transparent 1px);
  background-size: 60px 60px;
}


.contact-hero-glow {
  position: absolute;
  top: -150px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse,rgba(201,168,76,0.12) 0%,transparent 70%);
  pointer-events: none;
}


.contact-hero-glow2 {
  position: absolute;
  bottom: -200px;
  left: -50px;
  width: 500px;
  height: 500px;
  background: radial-gradient(ellipse,rgba(26,140,255,0.08) 0%,transparent 70%);
  pointer-events: none;
}


.contact-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}


.contact-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}


.contact-hero-breadcrumb a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
}


.contact-hero-breadcrumb a:hover {
  color: var(--gold);
}


.contact-hero-breadcrumb span {
  color: rgba(255,255,255,0.25);
  font-size: 13px;
}


.contact-hero-breadcrumb .current {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
}


.contact-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px,5vw,62px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 24px;
}


.contact-hero h1 .gold {
  color: var(--gold);
}


.contact-hero-lead {
  font-size: 18px;
  font-weight: 300;
  color: rgba(255,255,255,0.65);
  line-height: 1.8;
  max-width: 640px;
}


.contact-divider {
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), transparent);
}


.contact-body {
  padding: 80px 5%;
  background: var(--white);
}


.contact-body .contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
}


.contact-info-col h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px,3.2vw,38px);
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 16px;
  line-height: 1.2;
}


.contact-info-col > p {
  font-size: 16px;
  color: #4a5a72;
  line-height: 1.8;
  margin-bottom: 40px;
}


.contact-detail-text h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 4px;
}


.contact-detail-text p {
  font-size: 15px;
  color: var(--navy);
  font-weight: 600;
}


.contact-detail-text a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: color 0.2s;
}


.contact-detail-text a:hover {
  color: var(--gold);
}


.info-divider {
  border: none;
  border-top: 1px solid #ede9e0;
  margin: 36px 0;
}


.contact-quick-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}


.quick-card {
  background: var(--navy);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(201,168,76,0.12);
}


.quick-card .qc-num {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}


.quick-card .qc-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}


.quick-card.qc-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-color: transparent;
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
}


.quick-card.qc-gold .qc-num {
  color: var(--navy);
  font-size: 24px;
}


.quick-card.qc-gold .qc-label {
  color: rgba(10,22,40,0.6);
}


.contact-map {
  margin-top: 36px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e8e4db;
}


.contact-map img {
  width: 100%;
  display: block;
}


.contact-form-col {
  background: var(--off-white);
  border: 1px solid #e8e4db;
  border-radius: 20px;
  padding: 48px 44px;
}


.form-header {
  margin-bottom: 32px;
}


.form-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: var(--navy);
  font-weight: 700;
  margin-top: 6px;
}


.contact-why {
  background: var(--navy);
  padding: 72px 5%;
  border-top: 1px solid rgba(201,168,76,0.1);
  background-image: linear-gradient(rgba(212,160,23,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(212,160,23,.04) 1px,transparent 1px);
  background-size: 60px 60px;
}


.contact-why-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}


.contact-why-inner h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px,3.5vw,38px);
  font-weight: 900;
  color: var(--white);
  margin-bottom: 48px;
}


.contact-why-inner h2 .gold {
  color: var(--gold);
}


.contact-why .why-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}


.why-item-icon {
  font-size: 26px;
  margin-bottom: 14px;
}


.contact-why .why-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,168,76,0.1);
  border-radius: 14px;
  padding: 28px 22px;
  text-align: left;
  display: block;
}


.contact-why .why-item h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}


.contact-why .why-item p {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
}


/* ═══════════════════════════════════════════
   PRIVACY PAGE
═══════════════════════════════════════════ */


.privacy-hero {
  background: var(--navy);
  padding: 140px 5% 100px;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(rgba(212,160,23,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(212,160,23,.06) 1px,transparent 1px);
  background-size: 60px 60px;
}


.privacy-hero-glow {
  position: absolute;
  top: -150px;
  right: -80px;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse,rgba(201,168,76,0.1) 0%,transparent 70%);
  pointer-events: none;
}


.privacy-hero-glow2 {
  position: absolute;
  bottom: -200px;
  left: -60px;
  width: 500px;
  height: 500px;
  background: radial-gradient(ellipse,rgba(26,140,255,0.07) 0%,transparent 70%);
  pointer-events: none;
}


.privacy-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
}


.privacy-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}


.privacy-hero-breadcrumb a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
}


.privacy-hero-breadcrumb a:hover {
  color: var(--gold);
}


.privacy-hero-breadcrumb span {
  color: rgba(255,255,255,0.25);
  font-size: 13px;
}


.privacy-hero-breadcrumb .current {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
}


.privacy-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px,5vw,60px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 24px;
}


.privacy-hero h1 .gold {
  color: var(--gold);
}


.privacy-hero-lead {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
  max-width: 700px;
}


.privacy-hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}


.privacy-meta-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}


.privacy-divider {
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), transparent);
}


.privacy-body {
  padding: 80px 5%;
  background: var(--white);
}


.privacy-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  align-items: start;
}


.privacy-toc {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}


.privacy-toc::-webkit-scrollbar {
  width: 3px;
}


.privacy-toc::-webkit-scrollbar-thumb {
  background: var(--gold-pale);
  border-radius: 3px;
}


.privacy-toc-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}


.privacy-toc ul {
  list-style: none;
}


.privacy-toc ul li {
  margin-bottom: 3px;
}


.privacy-toc ul a {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: #5a6a82;
  text-decoration: none;
  padding: 6px 12px;
  border-left: 2px solid #e8e4db;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  border-radius: 0 6px 6px 0;
  line-height: 1.4;
}


.privacy-toc ul a:hover, .privacy-toc ul a.active {
  color: var(--navy);
  border-left-color: var(--gold);
  background: var(--gold-pale);
}


.privacy-content {
  min-width: 0;
}


.privacy-intro-card {
  background: var(--navy);
  border-radius: 16px;
  padding: 36px 40px;
  margin-bottom: 56px;
  border: 1px solid rgba(201,168,76,0.2);
  background-image: linear-gradient(rgba(212,160,23,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(212,160,23,.04) 1px,transparent 1px);
  background-size: 40px 40px;
}


.privacy-intro-card .intro-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}


.privacy-intro-card p {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.85;
  font-weight: 300;
}


.promise-card {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-radius: 14px;
  padding: 36px 40px;
  margin-top: 16px;
  border: 1px solid rgba(201,168,76,0.15);
}


.promise-card p {
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  line-height: 1.9;
  font-weight: 300;
  margin-bottom: 14px;
}


.promise-card p:last-child {
  margin-bottom: 0;
}


.promise-card strong {
  color: var(--gold);
}


.privacy-cta {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-radius: 16px;
  padding: 48px 44px;
  margin-top: 64px;
  text-align: center;
  border: 1px solid rgba(201,168,76,0.15);
}


.privacy-cta h3 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}


.privacy-cta h3 .gold {
  color: var(--gold);
}


.privacy-cta p {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 28px;
  line-height: 1.7;
}


/* ═══════════════════════════════════════════
   TERMS PAGE
═══════════════════════════════════════════ */


.terms-hero {
  background: var(--navy);
  padding: 140px 5% 100px;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(rgba(212,160,23,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(212,160,23,.06) 1px,transparent 1px);
  background-size: 60px 60px;
}


.terms-hero-glow {
  position: absolute;
  top: -150px;
  right: -80px;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse,rgba(201,168,76,0.1) 0%,transparent 70%);
  pointer-events: none;
}


.terms-hero-glow2 {
  position: absolute;
  bottom: -200px;
  left: -60px;
  width: 500px;
  height: 500px;
  background: radial-gradient(ellipse,rgba(26,140,255,0.07) 0%,transparent 70%);
  pointer-events: none;
}


.terms-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
}


.terms-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}


.terms-hero-breadcrumb a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
}


.terms-hero-breadcrumb a:hover {
  color: var(--gold);
}


.terms-hero-breadcrumb span {
  color: rgba(255,255,255,0.25);
  font-size: 13px;
}


.terms-hero-breadcrumb .current {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
}


.terms-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px,5vw,60px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 24px;
}


.terms-hero h1 .gold {
  color: var(--gold);
}


.terms-hero-lead {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
  max-width: 700px;
}


.terms-hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}


.terms-meta-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}


.terms-divider {
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), transparent);
}


.terms-body {
  padding: 80px 5%;
  background: var(--white);
}


.terms-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  align-items: start;
}


.terms-toc {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}


.terms-toc::-webkit-scrollbar {
  width: 3px;
}


.terms-toc::-webkit-scrollbar-thumb {
  background: var(--gold-pale);
  border-radius: 3px;
}


.terms-toc-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}


.terms-toc ul {
  list-style: none;
}


.terms-toc ul li {
  margin-bottom: 3px;
}


.terms-toc ul a {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: #5a6a82;
  text-decoration: none;
  padding: 6px 12px;
  border-left: 2px solid #e8e4db;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  border-radius: 0 6px 6px 0;
  line-height: 1.4;
}


.terms-toc ul a:hover, .terms-toc ul a.active {
  color: var(--navy);
  border-left-color: var(--gold);
  background: var(--gold-pale);
}


.terms-content {
  min-width: 0;
}


.terms-warning-card {
  background: var(--navy);
  border-radius: 16px;
  padding: 36px 40px;
  margin-bottom: 56px;
  border: 1px solid rgba(201,168,76,0.2);
  background-image: linear-gradient(rgba(212,160,23,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(212,160,23,.04) 1px,transparent 1px);
  background-size: 40px 40px;
}


.terms-warning-card .warn-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}


.terms-warning-card p {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.85;
  font-weight: 300;
}


.terms-warning-card p + p {
  margin-top: 12px;
}


.terms-cta {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-radius: 16px;
  padding: 48px 44px;
  margin-top: 64px;
  text-align: center;
  border: 1px solid rgba(201,168,76,0.15);
}


.terms-cta h3 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}


.terms-cta h3 .gold {
  color: var(--gold);
}


.terms-cta p {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 28px;
  line-height: 1.7;
}


/* ═══════════════════════════════════════════
   SHARED POLICY SECTION STYLES (privacy + terms)
═══════════════════════════════════════════ */


.policy-section {
  margin-bottom: 52px;
  padding-bottom: 52px;
  border-bottom: 1px solid #f0ece3;
}


.policy-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}


.policy-section-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}


.policy-section-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--gold-pale);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-top: 2px;
}


.policy-section-num {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 4px;
}


.policy-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}


.policy-section p {
  font-size: 15px;
  color: #4a5a72;
  line-height: 1.85;
  margin-bottom: 14px;
}


.policy-section p:last-child {
  margin-bottom: 0;
}


.policy-list {
  list-style: none;
  margin: 14px 0;
}


.policy-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: #4a5a72;
  line-height: 1.75;
  margin-bottom: 10px;
}


.policy-list li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 9px;
}


.policy-highlight {
  background: var(--off-white);
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  margin: 16px 0;
}


.policy-highlight p {
  font-size: 14px;
  color: #4a5a72;
  margin: 0 0 8px 0;
  line-height: 1.75;
}


.policy-highlight p:last-child {
  margin: 0;
}


.policy-highlight strong {
  color: var(--navy);
}


.policy-warning {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 16px 0;
}


.policy-warning p {
  font-size: 13.5px;
  color: #4a5a72;
  margin: 0;
  line-height: 1.75;
}


.policy-warning strong {
  color: var(--navy);
}


.policy-caps {
  background: var(--navy);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 16px 0;
}


.policy-caps p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
  margin: 0;
}


.policy-subsection {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f0ece3;
}


.policy-subsection h3 {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}


.policy-subsection p {
  font-size: 15px;
  color: #4a5a72;
  line-height: 1.85;
  margin-bottom: 12px;
}


.policy-subsection p:last-child {
  margin-bottom: 0;
}


.bellwether-block {
  background: var(--off-white);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 14px 0;
}


.bellwether-block h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}


.bellwether-block p {
  font-size: 14px;
  color: #4a5a72;
  line-height: 1.8;
  margin: 0;
}


/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */


@media (max-width: 960px) {


  .about-values-grid {
    grid-template-columns: 1fr 1fr;
  }


  .privacy-layout, .terms-layout {
    grid-template-columns: 1fr;
  }


  .privacy-toc, .terms-toc {
    display: none;
  }


  .contact-body .contact-wrap {
    grid-template-columns: 1fr; gap: 48px;
  }


  .contact-why .why-grid {
    grid-template-columns: 1fr 1fr;
  }


}


@media (max-width: 768px) {

    .search-box {
        display:block;
    }
    .nav-links {
        display: none;
    }


  .nav-hamburger {
    display: flex;
  }


  .hero {
    grid-template-columns: 1fr;
  }


  .hero-image-side {
    min-height: 300px;
  }


  .hero-content-side {
    padding: 48px 28px;
  }


  .why-grid {
    grid-template-columns: 1fr;
  }


  .contact-wrap {
    grid-template-columns: 1fr; gap: 40px;
  }


  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }


  .form-row {
    grid-template-columns: 1fr;
  }


  .contact-form {
    padding: 32px 24px;
  }


  .about-who-grid {
    grid-template-columns: 1fr; gap: 48px;
  }


  .about-pillars-grid {
    grid-template-columns: 1fr;
  }


  .about-story-blocks {
    grid-template-columns: 1fr;
  }


  .story-block:first-child {
    grid-column: span 1;
  }


  .about-values-header {
    flex-direction: column; align-items: flex-start;
  }


  .about-values-grid {
    grid-template-columns: 1fr;
  }


  .about-website-strip {
    flex-direction: column; align-items: flex-start; gap: 8px;
  }


  .contact-form-col {
    padding: 32px 24px;
  }


  .contact-quick-cards {
    grid-template-columns: 1fr;
  }


  .quick-card.qc-gold {
    grid-column: span 1;
  }


  .contact-why .why-grid {
    grid-template-columns: 1fr;
  }


  .privacy-intro-card, .terms-warning-card {
    padding: 24px 20px;
  }


  .privacy-cta, .terms-cta {
    padding: 32px 24px;
  }


}


@media (max-width: 480px) {


  .footer-grid {
    grid-template-columns: 1fr;
  }


}


/* ═══════════════════════════════════════════
   CART BADGE (used in nav across all pages)
═══════════════════════════════════════════ */


.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 1px 7px;
  background: var(--gold);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  line-height: 1;
}


/* Cart nav link */


.nav-cart-link {
  color: var(--gold) !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}


.nav-cart-link:hover {
  color: var(--gold) !important;
  opacity: 0.85;
}


.nav-user-link {
  color: var(--gold) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.25s;
}


.nav-user-link:hover {
  color: var(--gold) !important;
  opacity: 0.85;
}


.nav-user-link svg {
  flex-shrink: 0;
  transition: stroke 0.25s;
}


/* ═══════════════════════════════════════════
   FORMS — CAPTCHA / SUCCESS (index + contact)
═══════════════════════════════════════════ */


.req {
  color: var(--gold);
  font-weight: 700;
}


.recaptcha-wrap {
  margin: 4px 0 20px 0;
}


.recaptcha-wrap iframe {
  border-radius: 8px;
}


.form-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}


.captcha-error {
  display: none;
  color: #f87171;
  font-size: 13px;
  margin-top: -12px;
  margin-bottom: 16px;
  font-weight: 500;
}


/* Index page success block */


#indexSuccessMsg {
  display: none;
  margin-top: 24px;
  background: linear-gradient(135deg, #0a1628, #1a3460);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 14px;
  padding: 32px;
  text-align: center;
}


#indexSuccessMsg .si {
  font-size: 44px;
  margin-bottom: 16px;
}


#indexSuccessMsg h4 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #e8c97a;
  margin-bottom: 10px;
}


#indexSuccessMsg p {
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  line-height: 1.75;
}


#indexSuccessMsg a {
  color: #e8c97a;
  text-decoration: none;
}


/* Contact page success banner */


.success-banner {
  display: none;
  margin-top: 24px;
  background: linear-gradient(135deg, #0a1628, #1a3460);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 14px;
  padding: 36px 32px;
  text-align: center;
}


.success-banner .success-icon {
  font-size: 44px;
  margin-bottom: 16px;
}


.success-banner h4 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #e8c97a;
  margin-bottom: 10px;
}


.success-banner p {
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  line-height: 1.75;
}


.success-banner a {
  color: #e8c97a;
  text-decoration: none;
}


/* ════════════════════════════════════════════════════════════════
   UTILITY & EXTRACTED INLINE-STYLE CLASSES
   Consolidated from page-level inline style="..." attributes.
   All classes prefixed by purpose group.
════════════════════════════════════════════════════════════════ */


/* ── Visibility ── */


.u-hidden {
  display: none;
}


.u-overflow-hidden {
  overflow: hidden;
}


.u-no-underline,
.u-no-underline:hover {
  text-decoration: none;
}


/* ── Spacing ── */


.u-mb-0 {
  margin-bottom: 0;
}


.u-mb-16 {
  margin-bottom: 16px;
}


.u-mb-18 {
  margin-bottom: 18px;
}


.u-mb-20 {
  margin-bottom: 20px;
}


.u-mb-28 {
  margin-bottom: 28px;
}


.u-mt-8 {
  margin-top: 8px;
}


.u-mt-16 {
  margin-top: 16px;
}


/* ── Layout ── */


.u-flex-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}


.u-flex-center-label {
  display: flex;
  justify-content: center;
}


.avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}


/* ── Animation ── */


.anim-fade-up {
  animation: fadeUp 0.9s ease both;
}


/* ── Typography — colours ── */


.text-gold {
  color: var(--gold);
}


.text-gold-bold {
  color: var(--gold);
  font-weight: 600;
}


.text-muted-white {
  color: rgba(255,255,255,0.5);
}


.hint-highlight {
  color: rgba(255,255,255,0.55);
}


/* ── Links ── */


.link-gold {
  color: var(--gold);
  text-decoration: none;
}


.link-gold-bold {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}


/* ── Social brand letters (login / register) ── */


.social-letter-google {
  font-weight: 800;
  color: #4285F4;
}


.social-letter-linkedin {
  font-weight: 800;
  color: #0077B5;
}


/* ── Platform badge dot colours (index.html ticker) ── */


.dot-amazon {
  background: #FF9900;
}


.dot-walmart {
  background: #0071CE;
}


.dot-homedepot {
  background: #F96302;
}


.dot-wayfair {
  background: #E55000;
}


.dot-ebay {
  background: #C0392B;
}


.dot-shopify {
  background: #96BF48;
}


.dot-lowes {
  background: #007DC6;
}


.dot-target {
  background: #0033A0;
}


.dot-etsy {
  background: #8B5CF6;
}


.dot-overstock {
  background: #2563EB;
}


/* ── Hero section (index.html) ── */


.hero-content-inner {
  position: relative;
  z-index: 2;
  animation: fadeUp 0.9s ease both;
}


.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
}


.hero-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--gold);
}


.hero-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}


.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a1628;
}


/* ── Index form ── */


.index-form-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: var(--navy);
  font-weight: 700;
}


.form-note-sm {
  font-size: 12px;
  color: var(--gray);
  text-align: center;
  margin-top: 14px;
  line-height: 1.6;
}


.honeypot {
  display: none;
}


/* ── Error banners (forms) ── */


.form-error-banner {
  display: none;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
  color: #991b1b;
  font-size: 14px;
  font-weight: 500;
}


.form-error-msg {
  display: none;
  background: #fff3f3;
  border: 1px solid #ffbebe;
  color: #c0392b;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  margin-top: 16px;
}


/* ── About page — pillars section ── */


.section-heading-center {
  text-align: center;
  margin-bottom: 48px;
}


.pillars-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.15;
  max-width: 600px;
  margin: 0 auto;
}


.values-lead {
  font-size: 17px;
  color: #4a5a72;
  line-height: 1.75;
  max-width: 420px;
  margin-top: 0;
}


/* ── All-categories stat units ── */


.stat-unit {
  font-size: 20px;
  color: var(--mute);
}


.stat-num-lg {
  font-size: 28px;
}


/* ── Cart / product-detail ── */


.qty-hint {
  font-size: 11px;
  color: var(--mute);
  font-family: 'DM Sans', sans-serif;
}


/* ── Checkout ── */


.success-page-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 12px;
}


.success-page-body {
  font-size: 16px;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.7;
  max-width: 500px;
  margin: 0 auto;
}


/* ── Contact page ── */


.qc-note {
  font-size: 13px;
  color: rgba(10,22,40,0.65);
  line-height: 1.6;
  flex: 1;
}


/* ── My-orders ── */


.orders-new-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}


.orders-new-link:hover {
  text-decoration: underline;
}


/* ── Product-detail image placeholder ── */


.img-placeholder-label {
  text-align: center;
  color: #c8d5e2;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
}


.img-placeholder-hint {
  font-size: 11px;
  opacity: 0.7;
}


/* ── Refund-request ── */


.table-hint {
  font-size: 12px;
  color: var(--mute);
  font-family: 'DM Sans', sans-serif;
}


.td-bold {
  font-weight: 600;
  color: var(--navy);
}


.label-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  color: var(--mute);
}


/* ════════════════════════════════════════════════════════════════
   SHOP STYLES  (formerly shop.css)
   Covers: shop, all-products, all-categories, product-detail,
           cart, checkout pages
════════════════════════════════════════════════════════════════ */


/* ─── Shop page light-grey background ─── */


/* ═══════════════════════════════════════════
   ENHANCED NAV HAMBURGER (overrides styles.css)
═══════════════════════════════════════════ */


.nav-hamburger:hover {
  background: rgba(201,168,76,0.12);
  border-color: rgba(201,168,76,0.3);
}


.nav-hamburger span:nth-child(3) {
  width: 14px;
}


@media (max-width: 900px) {


  .nav-links {
    display: none !important;
  }


  .nav-hamburger {
    display: flex !important;
  }


}


/* ═══════════════════════════════════════════
   ADVANCED MOBILE DRAWER (overrides styles.css)
═══════════════════════════════════════════ */


/* Override the old simple links style */


.nav-mobile-menu a:not(.mob-link):not(.mob-btn-cart):not(.mob-btn-cta) {
  font-size: 16px;
  padding: 16px 24px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.82) !important;
  display: flex;
}


.mob-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  padding: 22px 24px 8px;
  font-family: 'DM Sans', sans-serif;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}


.nav-mobile-menu a.mob-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,0.82) !important;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.2s, background 0.2s;
}


.nav-mobile-menu a.mob-link:hover {
  color: var(--gold) !important;
  background: rgba(255,255,255,0.03);
}


.mob-shop-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,0.82);
  font-size: 16px;
  font-weight: 500;
  padding: 16px 24px;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s, background 0.2s;
}


.mob-shop-toggle:hover,
.mob-shop-toggle.open {
  color: var(--gold);
  background: rgba(201,168,76,0.04);
}


.mob-chevron {
  transition: transform 0.25s;
  display: flex;
}


.mob-shop-toggle.open .mob-chevron {
  transform: rotate(180deg);
}


.mob-chevron svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.mob-cat-drawer {
  display: none;
  background: rgba(255,255,255,0.025);
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 6px 0 8px;
}


.mob-cat-drawer.open {
  display: block;
}


.mob-cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}


.mob-cat-grid a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 14px 24px !important;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  transition: color 0.18s, background 0.18s;
}


.mob-cat-grid a:last-child {
  border-bottom: none !important;
}


.mob-cat-grid a:hover {
  color: var(--gold) !important;
  background: rgba(201,168,76,0.08);
}


.mob-cat-grid .cat-dot {
  background: var(--gold);
  opacity: 0.35;
}


.mob-cat-grid a:hover .cat-dot {
  opacity: 1;
}


.mob-actions {
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}


.mob-btn-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 24px;
  width: 100%;
  background: rgba(201,168,76,0.07);
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0;
  color: var(--gold) !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.2s;
}


.mob-btn-cart:hover {
  background: rgba(201,168,76,0.18) !important;
  color: var(--gold) !important;
}


.mob-btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  width: 100%;
  background: linear-gradient(135deg, var(--gold), #e8c97a);
  border-radius: 0;
  color: var(--navy) !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  transition: opacity 0.2s;
  border-bottom: none !important;
}


.mob-btn-cta:hover {
  opacity: 0.9;
}


/* ═══════════════════════════════════════════
   SHOP PAGE — shop.html (plp-*)
═══════════════════════════════════════════ */


.plp-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 96px 24px 80px;
}


.plp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 36px;
  flex-wrap: wrap;
}


.plp-breadcrumb a {
  color: #9fb0c2;
  text-decoration: none;
  transition: color 0.2s;
}


.plp-breadcrumb a:hover {
  color: var(--gold);
}


.plp-breadcrumb .sep {
  color: #c8d2de;
}


.plp-breadcrumb .current {
  color: var(--navy);
  font-weight: 600;
}


.plp-header {
  margin-bottom: 52px;
}


.plp-header-inner {
    background:  url('images/backheader.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 52px 56px;
    position: relative;
    overflow: hidden;
    /*background: linear-gradient(135deg, var(--navy) 0%, #112240 60%, #1a3460 100%);
    border-radius: 20px;
    padding: 52px 56px;
    position: relative;
    overflow: hidden;*/
}


.plp-header-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 100% 50%, rgba(201,168,76,0.10) 0%, transparent 65%);
  pointer-events: none;
}


.plp-header-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,168,76,0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}


.plp-header-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 16px;
  font-family: 'DM Sans', sans-serif;
  position: relative;
  z-index: 1;
}


.plp-header-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  color: #fff;
  line-height: 1.18;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}


.plp-header-title span {
  color: var(--gold);
}


.plp-header-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  font-family: 'DM Sans', sans-serif;
  max-width: 600px;
  line-height: 1.7;
  position: relative;
  z-index: 1;
  margin: 0;
}


.plp-header-count {
  position: absolute;
  top: 52px;
  right: 56px;
  z-index: 2;
  text-align: right;
}


.plp-count-num {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 900;
  color: rgba(255,255,255,0.08);
  line-height: 1;
}


.plp-count-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


.plp-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}


.plp-filter-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin-right: 4px;
  white-space: nowrap;
}


.plp-pill {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid #e4eaf3;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  white-space: nowrap;
}


.plp-pill:hover {
  border-color: var(--gold);
  color: var(--navy);
  background: rgba(201,168,76,0.10);
}


.plp-pill.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}


.plp-cat-section {
  margin-bottom: 60px;
}


.plp-cat-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}


.plp-cat-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 5px;
}


.plp-cat-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
}


.plp-cat-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(201,168,76,0.35), transparent);
  margin: 0 24px 5px;
}


.plp-cat-count {
  font-size: 13px;
  font-weight: 600;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}


.plp-cat-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
}


.plp-cat-see-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: #fff;
  color: var(--navy);
  border: 1.5px solid #e4eaf3;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.18s;
}


.plp-cat-see-all:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.10);
  transform: translateY(-1px);
}


.plp-cat-see-all .arr {
  transition: transform 0.2s;
}


.plp-cat-see-all:hover .arr {
  transform: translateX(4px);
}


.plp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}


.plp-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e4eaf3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}


.plp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(10,22,40,0.11);
}


.plp-card-img {
  width: 100%;
  aspect-ratio: 1/1;
  background: #fff;
  border-bottom: 1px solid #f0f3f8;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}


.plp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.plp-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  z-index: 2;
}


.plp-badge.featured {
  background: var(--gold);
  color: var(--navy);
}


.plp-badge.new {
  background: #1a7a4a;
  color: #fff;
}


.plp-badge.hot {
  background: #c0392b;
  color: #fff;
}


.plp-card-body {
  padding: 15px 15px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}


.plp-card-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 5px;
}


.plp-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.4;
  margin-bottom: 8px;
  flex: 1;
}


.plp-card-moq {
  font-size: 12px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 14px;
}


.plp-card-moq strong {
  color: #5a6a82;
}

.plp-card-packdetail {
    font-size: 10pt;
    color: #000000;
    font-family: Arial;
    margin-bottom: 5px;
} 



.plp-card-btn {
  display: block;
  width: 100%;
  padding: 11px;
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}


.plp-card-btn:hover {
  background: transparent;
  color: var(--navy);
}


.plp-pagination-wrap {
  margin-top: 12px;
  padding: 48px 0 0;
  border-top: 1px solid #e4eaf3;
}


.plp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}


.pg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s, box-shadow 0.18s;
  user-select: none;
  line-height: 1;
}


.pg:hover:not(.pg-active):not(.pg-disabled):not(.pg-off) {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201,168,76,0.10);
}


.pg.pg-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  cursor: default;
  box-shadow: 0 3px 12px rgba(10,22,40,0.16);
}


.pg.pg-disabled,.pg.pg-off {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}


.pg.pg-arrow {
  gap: 5px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
}


.pg.pg-arrow svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.plp-pg-info {
  text-align: center;
  font-size: 13px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
}


.plp-pg-info strong {
  color: var(--navy);
}


.plp-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 44px 0 0;
  flex-wrap: wrap;
}


.plp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 32px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3460 100%);
  color: #fff;
  border: 2px solid transparent;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s;
}


.plp-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(10,22,40,0.22);
}


.plp-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 32px;
  background: #fff;
  color: var(--navy);
  border: 2px solid #e4eaf3;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}


.plp-btn-outline:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.10);
  transform: translateY(-2px);
}


/* ═══════════════════════════════════════════
   ALL PRODUCTS — all-products.html (sap-*)
═══════════════════════════════════════════ */


.sap-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 96px 24px 80px;
}


.sap-bc {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 36px;
}


.sap-bc a {
  color: #9fb0c2;
  text-decoration: none;
  transition: color 0.2s;
}


.sap-bc a:hover {
  color: var(--gold);
}


.sap-bc .sep {
  color: #c8d2de;
}


.sap-bc .cur {
  color: var(--navy);
  font-weight: 600;
}


.sap-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #112240 55%, #1a3460 100%);
  border-radius: 20px;
  padding: 56px 60px;
  margin-bottom: 44px;
  position: relative;
  overflow: hidden;
}


.sap-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 100% 50%, rgba(201,168,76,0.10) 0%, transparent 65%);
  pointer-events: none;
}


.sap-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,168,76,0.10) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}


.sap-hero-content {
  position: relative;
  z-index: 1;
}


.sap-hero-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 16px;
  font-family: 'DM Sans', sans-serif;
}


.sap-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 12px;
}


.sap-hero h1 em {
  color: var(--gold);
  font-style: normal;
}


.sap-hero p {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  font-family: 'DM Sans', sans-serif;
  max-width: 500px;
  line-height: 1.7;
  margin: 0;
}


.sap-hero-num {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Playfair Display', serif;
  font-size: 120px;
  font-weight: 900;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}


.sap-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}


.sap-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}


.sap-pill-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin-right: 4px;
}


.sap-pill {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid #e4eaf3;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  white-space: nowrap;
}


.sap-pill:hover {
  border-color: var(--gold);
  color: var(--navy);
  background: rgba(201,168,76,0.10);
}


.sap-pill.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}


.sap-count {
  font-size: 13px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}


.sap-count strong {
  color: var(--navy);
}


.sap-group {
  margin-bottom: 52px;
}


.sap-group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}


.sap-group-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 4px;
}


.sap-group-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
}


.sap-group-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(201,168,76,0.35), transparent);
  margin: 0 20px 4px;
}


.sap-group-count {
  font-size: 13px;
  font-weight: 600;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}


.sap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}


.sap-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e4eaf3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
}


.sap-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(10,22,40,0.11);
}


.sap-card-img {
  width: 100%;
  aspect-ratio: 1/1;
  background: #fff;
  border-bottom: 1px solid #f0f3f8;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}


.sap-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.sap-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  z-index: 2;
}


.sap-badge.featured {
  background: var(--gold);
  color: var(--navy);
}


.sap-badge.new {
  background: #1a7a4a;
  color: #fff;
}


.sap-badge.hot {
  background: #c0392b;
  color: #fff;
}


.sap-card-body {
  padding: 15px 15px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}


.sap-card-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 5px;
}


.sap-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.4;
  margin-bottom: 8px;
  flex: 1;
}


.sap-card-moq {
  font-size: 12px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 14px;
}


.sap-card-moq strong {
  color: #5a6a82;
}


.sap-card-btn {
  display: block;
  width: 100%;
  padding: 11px;
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}


.sap-card-btn:hover {
  background: transparent;
  color: var(--navy);
}


.sap-pg-wrap {
  padding: 44px 0 0;
  border-top: 1px solid #e4eaf3;
  margin-top: 8px;
}


.sap-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}


.sap-pg-info {
  text-align: center;
  font-size: 13px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
}


.sap-pg-info strong {
  color: var(--navy);
}


.sap-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 44px 0 0;
  flex-wrap: wrap;
}


.sap-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 34px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3460 100%);
  color: #fff;
  border: 2px solid transparent;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s;
}


.sap-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(10,22,40,0.22);
}


.sap-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 34px;
  background: #fff;
  color: var(--navy);
  border: 2px solid #e4eaf3;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}


.sap-btn-outline:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.10);
  transform: translateY(-2px);
}


/* ═══════════════════════════════════════════
   ALL CATEGORIES — all-categories.html (sac-*)
═══════════════════════════════════════════ */


.sac-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 96px 24px 80px;
}


.sac-bc {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 36px;
}


.sac-bc a {
  color: #9fb0c2;
  text-decoration: none;
  transition: color 0.2s;
}


.sac-bc a:hover {
  color: var(--gold);
}


.sac-bc .sep {
  color: #c8d2de;
}


.sac-bc .cur {
  color: var(--navy);
  font-weight: 600;
}


.sac-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #112240 55%, #1a3460 100%);
  border-radius: 20px;
  padding: 56px 60px;
  margin-bottom: 52px;
  position: relative;
  overflow: hidden;
}


.sac-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 100% at 100% 50%, rgba(201,168,76,0.09) 0%, transparent 65%);
  pointer-events: none;
}


.sac-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,168,76,0.10) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}


.sac-hero-content {
  position: relative;
  z-index: 1;
}


.sac-hero-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 16px;
  font-family: 'DM Sans', sans-serif;
}


.sac-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 12px;
}


.sac-hero h1 em {
  color: var(--gold);
  font-style: normal;
}


.sac-hero p {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  font-family: 'DM Sans', sans-serif;
  max-width: 500px;
  line-height: 1.7;
  margin: 0;
}


.sac-hero-stat {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  z-index: 1;
}


.sac-hero-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 64px;
  font-weight: 900;
  color: rgba(255,255,255,0.07);
  line-height: 1;
}


.sac-hero-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.25);
  font-family: 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


.sac-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}


.sac-bar-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
}


.sac-bar-count {
  font-size: 13px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
}


.sac-bar-count strong {
  color: var(--navy);
}


.sac-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}


.sac-cat-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e4eaf3;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
  cursor: pointer;
}


.sac-cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(10,22,40,0.12);
}


.sac-cat-cover {
  width: 100%;
  aspect-ratio: 16/9;
  background: #fff;
  border-bottom: 1px solid #f0f3f8;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}


.sac-cat-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.sac-cover-badge {
  position: absolute;
  bottom: 12px;
  right: 14px;
  background: rgba(10,22,40,0.75);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.04em;
}


.sac-cat-body {
  padding: 20px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}


.sac-cat-number {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 6px;
}


.sac-cat-name {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 8px;
}


.sac-cat-desc {
  font-size: 13px;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 18px;
}


.sac-cat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}


.sac-tag {
  font-size: 11px;
  font-weight: 600;
  color: #4a5a72;
  background: #f4f6fa;
  border: 1px solid #e4eaf3;
  border-radius: 20px;
  padding: 3px 10px;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}


.sac-cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: var(--navy);
  color: #fff;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  transition: background 0.2s;
}


.sac-cat-card:hover .sac-cat-btn {
  background: #0f2040;
}


.sac-cat-btn-arrow {
  font-size: 16px;
  transition: transform 0.2s;
}


.sac-cat-card:hover .sac-cat-btn-arrow {
  transform: translateX(4px);
}


.sac-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e4eaf3;
  overflow: hidden;
  margin-bottom: 44px;
}


.sac-stat {
  padding: 28px 24px;
  text-align: center;
  border-right: 1px solid #e4eaf3;
}


.sac-stat:last-child {
  border-right: none;
}


.sac-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 6px;
}


.sac-stat-num em {
  color: var(--gold);
  font-style: normal;
}


.sac-stat-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
}


.sac-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}


.sac-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 34px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3460 100%);
  color: #fff;
  border: 2px solid transparent;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s;
}


.sac-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(10,22,40,0.22);
}


.sac-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 34px;
  background: #fff;
  color: var(--navy);
  border: 2px solid #e4eaf3;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}


.sac-btn-outline:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.10);
  transform: translateY(-2px);
}


/* ═══════════════════════════════════════════
   PRODUCT DETAIL — product-detail.html (pdp-*)
═══════════════════════════════════════════ */


.pdp-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 96px 24px 80px;
}


.pdp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #7a8ba0;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 36px;
  flex-wrap: wrap;
}


.pdp-breadcrumb a {
  color: #7a8ba0;
  text-decoration: none;
  transition: color 0.2s;
}


.pdp-breadcrumb a:hover {
  color: var(--gold);
}


.pdp-breadcrumb .sep {
  color: #c8d2de;
}


.pdp-breadcrumb .current {
  color: var(--navy);
  font-weight: 600;
}


.pdp-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
  margin-bottom: 80px;
}


.pdp-img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e4eaf3;
  box-shadow: 0 4px 32px rgba(10,22,40,0.07);
  overflow: hidden;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.pdp-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.pdp-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--gold);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 20px;
  z-index: 2;
}


.pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}


.pdp-thumb {
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid #e4eaf3;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}


.pdp-thumb:hover {
  border-color: var(--gold);
}


.pdp-thumb.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.18);
}


.pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.pdp-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: 20px;
  padding: 4px 13px;
  margin-bottom: 14px;
  font-family: 'DM Sans', sans-serif;
}


.pdp-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.18;
  margin-bottom: 18px;
}


.pdp-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}


.pdp-stars {
  color: #f59e0b;
  font-size: 15px;
  letter-spacing: 2px;
}


.pdp-rating-count {
  font-size: 13px;
  color: #7a8ba0;
  font-family: 'DM Sans', sans-serif;
}


.pdp-price {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 8px;
}


.pdp-moq {
  display: inline-block;
  background: #f0f3f9;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 6px;
}


.pdp-sku {
  font-size: 12px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}


.pdp-divider {
  height: 1px;
  background: #e8edf5;
  margin: 24px 0;
}


.pdp-qty-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 12px;
}


.pdp-qty-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}


.pdp-qty-ctrl {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid #dae0ec;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(10,22,40,0.05);
}


.qty-btn {
  width: 46px;
  height: 50px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  font-weight: 300;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}


.qty-btn:hover {
  background: #f4f6fa;
  color: var(--gold);
}


.qty-input {
  width: 68px;
  height: 50px;
  border: none;
  border-left: 1.5px solid #dae0ec;
  border-right: 1.5px solid #dae0ec;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  background: #fff;
  outline: none;
}


.qty-input::-webkit-inner-spin-button,.qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}


.pdp-qty-hint {
  font-size: 12px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.5;
}
.pdp-pack-detail {
    font-size: 12pt;
    color: #000000;
    font-family: 'DM Sans', sans-serif;
}


.pdp-enquire-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 18px 24px;
  background: linear-gradient(135deg, #0a1628 0%, #1a3460 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 12px;
}


.pdp-enquire-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(10,22,40,0.22);
}


.pdp-cta-sub {
  font-size: 12px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  text-align: center;
  margin-bottom: 26px;
}


.pdp-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}


.pdp-trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #f8fafc;
  border: 1px solid #edf0f7;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 12px;
  font-weight: 600;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
}


.pdp-trust-item .trust-icon {
  font-size: 17px;
  flex-shrink: 0;
}


.pdp-desc-section {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e4eaf3;
  box-shadow: 0 2px 16px rgba(10,22,40,0.05);
  padding: 44px 52px;
  margin-bottom: 80px;
}


.pdp-desc-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 10px;
}


.pdp-desc-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 20px;
  line-height: 1.25;
}


.pdp-desc-body {
  font-size: 15px;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.85;
  margin-bottom: 32px;
  max-width: 760px;
}


.pdp-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
  padding-top: 28px;
  border-top: 1px solid #f0f3f8;
}


.pdp-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.55;
}


.pdp-feature .feat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 6px;
}


.pdp-more {
  margin-bottom: 72px;
}


.pdp-more-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}


.pdp-more-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 6px;
}


.pdp-more-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
}


.pdp-see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  transition: gap 0.2s;
  padding-bottom: 4px;
}


.pdp-see-all:hover {
  gap: 10px;
}


.pdp-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}


.pdp-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e4eaf3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s;
}


.pdp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(10,22,40,0.11);
}


.pdp-card-img {
  width: 100%;
  aspect-ratio: 1/1;
  background: #fff;
  border-bottom: 1px solid #f0f3f8;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}


.pdp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.pdp-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
}


.pdp-card-badge.featured {
  background: var(--gold);
  color: var(--navy);
}


.pdp-card-badge.new {
  background: #1a7a4a;
  color: #fff;
}


.pdp-card-badge.hot {
  background: #c0392b;
  color: #fff;
}


.pdp-card-body {
  padding: 15px 15px 17px;
  display: flex;
  flex-direction: column;
  flex: 1;
}


.pdp-card-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 5px;
}


.pdp-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.4;
  margin-bottom: 8px;
  flex: 1;
}


.pdp-card-moq {
  font-size: 12px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 13px;
}


.pdp-card-moq strong {
  color: #5a6a82;
}


.pdp-card-btn {
  display: block;
  width: 100%;
  padding: 11px;
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}


.pdp-card-btn:hover {
  background: transparent;
  color: var(--navy);
}


/* ═══════════════════════════════════════════
   CART — cart.html
═══════════════════════════════════════════ */


.cart-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 96px 24px 80px;
}


.cart-bc {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 36px;
}


.cart-bc a {
  color: #9fb0c2;
  text-decoration: none;
  transition: color 0.2s;
}


.cart-bc a:hover {
  color: var(--gold);
}


.cart-bc .sep {
  color: #c8d2de;
}


.cart-bc .cur {
  color: var(--navy);
  font-weight: 600;
}


.cart-heading {
  margin-bottom: 40px;
}


.cart-heading-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 10px;
}


.cart-heading h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 8px;
}


.cart-heading h1 em {
  color: var(--gold);
  font-style: normal;
}


.cart-heading p {
  font-size: 15px;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
  margin: 0;
}


.cart-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 32px;
  align-items: start;
}


.cart-items-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e4eaf3;
  box-shadow: 0 2px 16px rgba(10,22,40,0.05);
  overflow: hidden;
}


.cart-items-header {
  padding: 22px 28px;
  border-bottom: 1px solid #e4eaf3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}


.cart-items-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 900;
  color: var(--navy);
  margin: 0;
}


.cart-item-count {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
}


.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid #f4f6fa;
  transition: background 0.15s;
}


.cart-item:last-child {
  border-bottom: none;
}


.cart-item:hover {
  background: #fafbfc;
}


.cart-item-img {
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e4eaf3;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


.cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.cart-item-img-placeholder {
  font-size: 11px;
  color: #c8d5e2;
  font-family: 'DM Sans', sans-serif;
  text-align: center;
  padding: 8px;
}


.cart-item-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 5px;
}


.cart-item-name {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 8px;
}


.cart-item-sku {
  font-size: 11px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}


.cart-item-qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
}


.cart-item-qty-label {
  font-size: 12px;
  font-weight: 600;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
}


.cart-item-qty-ctrl {
  display: flex;
  align-items: center;
  border: 1.5px solid #e4eaf3;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.cart-item.loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease;
    position: relative;
}

    .cart-item.loading::after {
        content: "Updating...";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0,0,0,0.2);
    }

.login-right.loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease;
    position: relative;
}

    .login-right.loading::after {
        content: "Wait...";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0,0,0,0.2);
    }
.loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease;
    position: relative;
}

 .loading::after {
        content: "Processing...";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0,0,0,0.2);
    }

.ci-qty-btn {
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 300;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}


.ci-qty-btn:hover {
  background: #f4f6fa;
  color: var(--gold);
}


.ci-qty-input {
  width: 48px;
  height: 34px;
  border: none;
  border-left: 1.5px solid #e4eaf3;
  border-right: 1.5px solid #e4eaf3;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  background: #fff;
  outline: none;
}


.ci-qty-input::-webkit-inner-spin-button,.ci-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}


.cart-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}


.cart-item-price {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--navy);
  white-space: nowrap;
}


.cart-item-remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s;
}


.cart-item-remove:hover {
  color: #c0392b;
}


.cart-continue {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 16px 28px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  border-top: 1px solid #e4eaf3;
  background: #fafbfc;
  transition: color 0.2s;
}


.cart-continue:hover {
  color: var(--gold);
}


.cart-right-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.cart-summary-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e4eaf3;
  box-shadow: 0 2px 16px rgba(10,22,40,0.05);
  overflow: hidden;
}


.cart-summary-header {
  padding: 20px 24px 18px;
  border-bottom: 1px solid #e4eaf3;
}


.cart-summary-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--navy);
  margin: 0;
}


.cart-summary-body {
  padding: 20px 24px;
}


.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  color: #4a5a72;
  padding: 6px 0;
}


.cart-summary-row.total {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  border-top: 1px solid #e4eaf3;
  margin-top: 10px;
  padding-top: 16px;
}


.cart-summary-row.total .val {
  color: var(--gold);
  font-weight: 900;
}


.cart-trust-list {
  border-top: 1px solid #f0f3f8;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}


.cart-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
  padding: 8px 0;
  border-bottom: 1px solid #f4f6fa;
}


.cart-trust-item:last-child {
  border-bottom: none;
}


.cart-trust-icon {
  font-size: 16px;
  flex-shrink: 0;
}


.cart-form-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e4eaf3;
  box-shadow: 0 2px 16px rgba(10,22,40,0.05);
  overflow: hidden;
}


.cart-form-header {
  padding: 20px 24px 18px;
  border-bottom: 1px solid #e4eaf3;
}


.cart-form-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 4px;
}


.cart-form-header p {
  font-size: 12px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin: 0;
}


.cart-form-body {
  padding: 20px 24px 24px;
}


.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}


.cf-row.full {
  grid-template-columns: 1fr;
}


.cf-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}


.cf-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
}


.cf-label .req {
  color: var(--gold);
}


.cf-input,.cf-select,.cf-textarea {
  border: 1.5px solid #dde3ef;
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  color: var(--navy);
  background: #f9fbfd;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}


.cf-input:focus,.cf-select:focus,.cf-textarea:focus {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}


.cf-textarea {
  resize: vertical;
  min-height: 80px;
}


.cf-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aacbe' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}


.cart-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #0a1628 0%, #1a3460 100%);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 16px;
  text-decoration: none;
  text-align: center;
}


.cart-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(10,22,40,0.22);
}


.cart-submit-sub {
  text-align: center;
  font-size: 12px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin-top: 10px;
}


.cart-success {
  display: none;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e4eaf3;
  box-shadow: 0 2px 16px rgba(10,22,40,0.05);
  padding: 48px 36px;
  text-align: center;
}


.cart-success.visible {
  display: block;
}


.success-circle {
  width: 76px;
  height: 76px;
  background: linear-gradient(135deg, #e8f5ee, #c8ecd7);
  border-radius: 50%;
  font-size: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 8px 28px rgba(26,122,74,0.15);
}


.success-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 10px;
}


.success-body {
  font-size: 14px;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.75;
  max-width: 420px;
  margin: 0 auto 28px;
}


.success-ref {
  display: inline-block;
  background: #f4f6fa;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: var(--navy);
  letter-spacing: 0.06em;
  margin-bottom: 28px;
}


.success-ref em {
  color: var(--gold);
  font-style: normal;
}


.success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}


.success-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: linear-gradient(135deg, #0a1628 0%, #1a3460 100%);
  color: #fff;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}


.success-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(10,22,40,0.18);
}


.success-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: #fff;
  color: var(--navy);
  border: 2px solid #e4eaf3;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}


.success-btn-outline:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.10);
}


/* ═══════════════════════════════════════════
   CHECKOUT — checkout.html
═══════════════════════════════════════════ */


/* ── Checkout page wrapper — same pattern as .cart-page ── */


.checkout-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 96px 24px 80px;
}


/* Keep .checkout-wrap as alias for backward compat */


.checkout-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 96px 24px 80px;
}


/* Steps bar — sits outside .checkout-page, full-width white strip */


.checkout-steps {
  background: #fff;
  border-bottom: 1px solid #e4e8f0;
  padding: 0 24px;
}


.checkout-steps-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 20px 0;
}


.checkout-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}


.checkout-step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 2px;
  background: #e4e8f0;
  margin: 0 16px;
}


.checkout-step.active:not(:last-child)::after,.checkout-step.done:not(:last-child)::after {
  background: var(--gold);
}


.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #d0d7e4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: #9aacbe;
  background: #fff;
  flex-shrink: 0;
  transition: all 0.3s;
}


.checkout-step.active .step-num {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a1628;
}


.checkout-step.done .step-num {
  background: #1a7a4a;
  border-color: #1a7a4a;
  color: #fff;
}


.step-label {
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  color: #9aacbe;
  white-space: nowrap;
}


.checkout-step.active .step-label {
  color: var(--navy);
}


.checkout-step.done .step-label {
  color: #1a7a4a;
}


/* Breadcrumb — inside .checkout-page, no individual max-width needed */


.checkout-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #7a8ba0;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 28px;
}


.checkout-breadcrumb a {
  color: #7a8ba0;
  text-decoration: none;
  transition: color 0.2s;
}


.checkout-breadcrumb a:hover {
  color: var(--gold);
}


.checkout-breadcrumb span {
  color: #b0bdd0;
}


.checkout-breadcrumb .current {
  color: var(--navy);
  font-weight: 600;
}


/* Layout grid — inside .checkout-page, no individual max-width or padding needed */


.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}


.checkout-form-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8edf5;
  box-shadow: 0 2px 12px rgba(10,22,40,0.05);
  overflow: hidden;
}


.checkout-form-header {
  padding: 28px 32px 24px;
  border-bottom: 1px solid #f0f3f8;
}


.checkout-form-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 4px;
}


.checkout-form-header p {
  font-size: 14px;
  color: #6a7a90;
  font-family: 'DM Sans', sans-serif;
  margin: 0;
}


.checkout-form-body {
  padding: 28px 32px 32px;
}


.form-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f3f8;
}


.form-section-title:not(:first-child) {
  margin-top: 36px;
}


.form-row.full {
  grid-template-columns: 1fr;
}


.form-group label .req {
  color: var(--gold);
  margin-left: 2px;
}


.form-group input,.form-group select,.form-group textarea {
  border: 1.5px solid #dde3ef;
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  color: var(--navy);
  background: #f9fbfd;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}


.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}


.form-hint {
  font-size: 12px;
  color: #9aacbe;
  font-family: 'DM Sans', sans-serif;
  margin-top: 2px;
}


.checkout-submit-btn {
  width: 100%;
  padding: 16px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  margin-top: 28px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}


.checkout-submit-btn:hover {
  background: #0f2040;
  box-shadow: 0 6px 24px rgba(10,22,40,0.18);
  transform: translateY(-1px);
}


.checkout-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #7a8ba0;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  margin-top: 16px;
  transition: color 0.2s;
}


.checkout-back:hover {
  color: var(--navy);
}


.checkout-sidebar {
  position: sticky;
  top: 100px;
}


.checkout-summary-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8edf5;
  box-shadow: 0 2px 12px rgba(10,22,40,0.05);
  overflow: hidden;
}


.checkout-summary-header {
  padding: 22px 24px 18px;
  border-bottom: 1px solid #f0f3f8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.checkout-summary-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--navy);
  margin: 0;
}


.checkout-summary-header .item-count {
  font-size: 12px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: #fff;
  background: var(--gold);
  border-radius: 20px;
  padding: 3px 10px;
}


.checkout-summary-items {
  padding: 16px 24px;
  max-height: 280px;
  overflow-y: auto;
}


.checkout-summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f4f6fa;
}


.checkout-summary-item:last-child {
  border-bottom: none;
}


.csi-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}


.csi-info {
  flex: 1;
  min-width: 0;
}


.csi-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.csi-qty {
  font-size: 12px;
  color: #7a8ba0;
  font-family: 'DM Sans', sans-serif;
  margin-top: 2px;
}


.csi-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}


.checkout-summary-totals {
  padding: 16px 24px 20px;
  border-top: 1px solid #f0f3f8;
}


.summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  color: #7a8ba0;
  margin-bottom: 10px;
}


.summary-total-row.main {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e8edf5;
  margin-bottom: 0;
}


.summary-total-row.main .val {
  color: var(--gold);
}


.checkout-trust {
  margin-top: 16px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8edf5;
  padding: 16px 20px;
}


.checkout-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
}


.checkout-trust-item:not(:last-child) {
  border-bottom: 1px solid #f4f6fa;
}


.checkout-trust-item span:first-child {
  font-size: 18px;
}


.checkout-success {
  display: none;
  max-width: 600px;
  margin: 60px auto;
  padding: 0 24px;
  text-align: center;
}


.checkout-success.visible {
  display: block;
}


.success-icon-wrap {
  width: 88px;
  height: 88px;
  background: linear-gradient(135deg, #e8f5ee, #c8ecd7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 28px;
  box-shadow: 0 8px 32px rgba(26,122,74,0.15);
}


.success-steps {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e8edf5;
  padding: 24px 28px;
  text-align: left;
  margin-bottom: 28px;
}


.success-steps h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


.success-step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f4f6fa;
}


.success-step-item:last-child {
  border-bottom: none;
}


.ssi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 5px;
  flex-shrink: 0;
}


.ssi-text {
  font-size: 14px;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.5;
}


/* ═══════════════════════════════════════════
   THANK YOU — thank-you.html (ty-*)
═══════════════════════════════════════════ */


@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(60px) rotate(360deg); opacity: 0; }
}


@keyframes popIn {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}


.ty-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 24px 50px;
}


.ty-confetti {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
  overflow: hidden;
  height: 50px;
}


.ty-confetti span {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: block;
  animation: confettiFall 1.4s ease-out both;
}


.ty-confetti span:nth-child(1) {
  background: #c9a84c;
  animation-delay: 0.00s;
}


.ty-confetti span:nth-child(2) {
  background: #e8c97a;
  animation-delay: 0.08s;
  border-radius: 50%;
}


.ty-confetti span:nth-child(3) {
  background: #0a1628;
  animation-delay: 0.16s;
}


.ty-confetti span:nth-child(4) {
  background: #c9a84c;
  animation-delay: 0.24s;
  border-radius: 50%;
}


.ty-confetti span:nth-child(5) {
  background: #e8c97a;
  animation-delay: 0.32s;
}


.ty-confetti span:nth-child(6) {
  background: #1a3460;
  animation-delay: 0.10s;
  border-radius: 50%;
}


.ty-confetti span:nth-child(7) {
  background: #c9a84c;
  animation-delay: 0.20s;
}


.ty-confetti span:nth-child(8) {
  background: #e8c97a;
  animation-delay: 0.36s;
  border-radius: 50%;
}


.ty-confetti span:nth-child(9) {
  background: #0a1628;
  animation-delay: 0.04s;
}


.ty-confetti span:nth-child(10) {
  background: #c9a84c;
  animation-delay: 0.28s;
  border-radius: 50%;
}


.ty-card {
  background: #fff;
  border-radius: 24px;
  border: 1px solid #e4eaf3;
  box-shadow: 0 8px 48px rgba(10,22,40,0.09);
  padding: 56px 60px;
  max-width: 640px;
  width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
}


.ty-card::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(201,168,76,0.10) 0%, transparent 70%);
  pointer-events: none;
}


.ty-check {
  width: 88px;
  height: 88px;
  background: linear-gradient(135deg, #e4f5ec, #c2ebd4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  box-shadow: 0 8px 32px rgba(34,197,94,0.18);
  animation: popIn 0.55s cubic-bezier(.34,1.56,.64,1) 0.2s both;
  font-size: 38px;
  position: relative;
  z-index: 1;
}


.ty-ref {
  display: inline-block;
  background: #f4f6fa;
  border: 1px solid #e4eaf3;
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: var(--navy);
  letter-spacing: 0.07em;
  margin: 20px 0 32px;
  position: relative;
  z-index: 1;
}


.ty-ref em {
  color: var(--gold);
  font-style: normal;
}


.ty-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}


.ty-title em {
  color: var(--gold);
  font-style: normal;
}


.ty-body {
  font-size: 15px;
  color: #4a5a72;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.8;
  margin: 0 auto 32px;
  max-width: 480px;
  position: relative;
  z-index: 1;
}


.ty-steps {
  background: #f8fafc;
  border: 1px solid #e4eaf3;
  border-radius: 14px;
  padding: 24px 28px;
  text-align: left;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}


.ty-steps-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 18px;
}


.ty-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #e4eaf3;
}


.ty-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}


.ty-step-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}


.ty-step-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 3px;
}


.ty-step-desc {
  font-size: 13px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.55;
}


.ty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}


.ty-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3460 100%);
  color: #fff;
  border: 2px solid transparent;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}


.ty-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(10,22,40,0.22);
}


.ty-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: #fff;
  color: var(--navy);
  border: 2px solid #e4eaf3;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}


.ty-btn-outline:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.10);
  transform: translateY(-2px);
}


.ty-share {
  margin-top: 48px;
  text-align: center;
}


.ty-share-label {
  font-size: 12px;
  color: #9fb0c2;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
}


.ty-share-links {
  display: flex;
  justify-content: center;
  gap: 10px;
}


.ty-share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e4eaf3;
  font-size: 18px;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}


.ty-share-link:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.10);
  transform: translateY(-2px);
}


/* ═══════════════════════════════════════════
   RESPONSIVE — SHOP PAGES
═══════════════════════════════════════════ */


@media (max-width: 1024px) {


  .plp-grid,.sap-grid {
    grid-template-columns: repeat(3, 1fr);
  }


  .plp-header-count,.sap-hero-num {
    display: none;
  }


  .sac-hero-stat {
    display: none;
  }


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


}


@media (max-width: 960px) {


  .pdp-main {
    grid-template-columns: 1fr; gap: 36px;
  }


  .cart-layout {
    grid-template-columns: 1fr;
  }


  .checkout-layout {
    grid-template-columns: 1fr;
  }


  .checkout-sidebar {
    position: static; order: -1;
  }


}


@media (max-width: 768px) {


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


  .plp-header-inner,.sap-hero,.sac-hero {
    padding: 36px 28px;
  }


  .plp-cat-rule,.sap-group-rule,.sap-group-count {
    display: none;
  }


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


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


  .pdp-desc-section {
    padding: 32px 28px;
  }


  .pdp-features {
    grid-template-columns: 1fr;
  }


  .pdp-trust {
    grid-template-columns: 1fr;
  }


  .checkout-form-header,.checkout-form-body {
    padding: 20px 20px;
  }


  .form-row {
    grid-template-columns: 1fr;
  }


  .checkout-steps-inner .step-label {
    display: none;
  }


}


@media (max-width: 600px) {


    .cart-item {
        grid-template-columns: 80px 1fr; /* image | text, remove auto column */
        grid-template-rows: auto auto;
        gap: 12px;
        padding: 16px;
        align-items: start;
    }

    .cart-item-img {
        width: 80px;
        height: 80px;
        grid-row: 1;
        grid-column: 1;
    }

    /* text block sits beside image */
    .cart-item > div:nth-child(2) {
        grid-row: 1;
        grid-column: 2;
    }

    /* price/action block drops to full width below */
    .cart-item > div:nth-child(3) {
        grid-row: 2;
        grid-column: 1 / -1; /* span full width */
    }

  .cart-item-right {
    
  }


  .cf-row {
    grid-template-columns: 1fr;
  }


  .cart-items-header,.cart-item {
    padding-left: 18px; padding-right: 18px;
  }


}


@media (max-width: 560px) {


  .plp-page,.sap-page,.sac-page,.pdp-page,.cart-page,.checkout-page,.checkout-wrap {
    padding: 88px 16px 60px;
  }


  .plp-grid,.sap-grid {
    grid-template-columns: 1fr 1fr; gap: 13px;
  }


  .sac-grid {
    grid-template-columns: 1fr; gap: 16px;
  }


  .sac-stats {
    grid-template-columns: 1fr 1fr;
  }


  .sac-actions,.plp-actions,.sap-actions {
    flex-direction: column;
  }


  .sac-btn-primary,.sac-btn-outline,.plp-btn-primary,.plp-btn-outline,.sap-btn-primary,.sap-btn-outline {
    width: 100%; justify-content: center; padding: 14px 22px;
  }


  .ty-card {
    padding: 36px 24px;
  }


  .ty-actions {
    flex-direction: column;
  }


  .ty-btn-primary,.ty-btn-outline {
    justify-content: center;
  }


}


/* ════════════════════════════════════════
   SUBCATEGORY PILLS (Home Goods + others)
════════════════════════════════════════ */


.plp-sub-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 12px;
}


.plp-sub-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: #fff;
  border: 1.5px solid var(--border, #e4eaf3);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy, #0a1628);
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}


.plp-sub-pill:hover {
  border-color: var(--gold, #c9a84c);
  background: rgba(201,168,76,0.09);
  color: var(--navy, #0a1628);
}


/* Desktop nav indented subcategory links */


.nav-sub-link {
  padding-left: 32px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.52) !important;
  opacity: 0.85;
}


.nav-sub-link .sub-dot {
  width: 4px;
  height: 4px;
  background: var(--gold, #c9a84c);
  border-radius: 50%;
  opacity: 0.5;
}


.nav-sub-link:hover {
  color: var(--gold, #c9a84c) !important;
}


/* Mobile subcategory links */


.mob-sub-link {
  padding-left: 36px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.52) !important;
}


.mob-sub-link .sub-dot {
  width: 4px;
  height: 4px;
  background: var(--gold, #c9a84c);
  border-radius: 50%;
  opacity: 0.5;
}


.mob-sub-link:hover {
  color: var(--gold, #c9a84c) !important;
}


/* ── Home Goods desktop toggle ── */


.nav-home-goods-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  transition: color 0.18s, background 0.18s;
  user-select: none;
}


.nav-home-goods-toggle:hover {
  color: var(--gold, #c9a84c);
  background: rgba(201,168,76,0.07);
}


.hg-caret {
  margin-left: auto;
  font-size: 14px;
  color: rgba(255,255,255,0.35);
  transition: transform 0.22s;
  line-height: 1;
  opacity: 0.6;
}


.nav-home-goods-sub {
  display: none;
}


.nav-home-goods-sub.open {
  display: block;
}


/* ── Home Goods mobile toggle ── */


.mob-home-goods-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.18s, background 0.18s;
}


.mob-home-goods-toggle:hover {
  color: var(--gold, #c9a84c);
  background: rgba(201,168,76,0.07);
}


.mob-hg-arr {
  margin-left: auto;
  transition: transform 0.22s;
  font-size: 14px;
  color: rgba(255,255,255,0.35);
}


.mob-home-goods-sub a {
  padding-left: 36px !important;
}


/* ════════════════════════════════════════
   HOME GOODS NAV TOGGLE (click open/close)
════════════════════════════════════════ */


.nav-hg-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  transition: color 0.18s, background 0.18s;
  white-space: nowrap;
}


.nav-hg-toggle:hover {
  color: var(--gold, #c9a84c);
  background: rgba(201,168,76,0.07);
}


.nav-hg-toggle.open {
  color: var(--gold, #c9a84c);
}


.nav-hg-toggle.open .hg-caret {
  transform: rotate(90deg);
  opacity: 1;
}


.nav-hg-sub {
  display: none;
}


.nav-hg-sub.open {
  display: block;
}


/* ════════════════════════════════════════════════════════════════
   USER / AUTH STYLES  (formerly user.css)
   Covers: register, login, portal, my-orders, change-password,
           forgot-password, email-reset-password, logout, refund pages
════════════════════════════════════════════════════════════════ */


/* ── Nav Dropdown (shared across all pages) ─────── */


/* ── Desktop dropdown (not in shop.css) ── */


.nav-dropdown-toggle:hover,
.nav-links li.open .nav-dropdown-toggle {
  color: var(--gold);
}


.cat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
  flex-shrink: 0;
  transition: opacity 0.18s;
}


/* ══════════════════════════════════
   REGISTER — page-specific styles
══════════════════════════════════ */


/* ════════════════════════════════════════
   SIGNUP — inside cart-page container
════════════════════════════════════════ */


.signup-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(10,22,40,0.10);
  border: 1px solid var(--border);
}


/* ── LEFT — Brand Panel ── */


.signup-left {
  background: linear-gradient(160deg, var(--navy) 0%, #112240 45%, #1a3460 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 52px 48px;
  overflow: hidden;
}


.signup-left::before {
  content: \'\';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,168,76,0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}


.signup-left::after {
  content: \'\';
  position: absolute;
  top: -80px;
  left: -60px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(201,168,76,0.10) 0%, transparent 65%);
  pointer-events: none;
}


@keyframes fadeSlideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }


@keyframes fadeIn      { from { opacity:0; } to { opacity:1; } }


.signup-brand {
  position: relative;
  z-index: 1;
  animation: fadeSlideUp 0.6s ease 0.1s both;
}


.signup-brand-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: \'DM Sans\', sans-serif;
  margin-bottom: 18px;
}


.signup-brand h2 {
  font-family: \'Playfair Display\', serif;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 14px;
}


.signup-brand h2 em {
  color: var(--gold);
  font-style: normal;
  display: block;
}


.signup-brand p {
  font-size: 14px;
  color: rgba(255,255,255,0.52);
  line-height: 1.75;
}


.signup-perks {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 28px;
  animation: fadeSlideUp 0.6s ease 0.2s both;
}


.signup-perk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}


.signup-perk:last-child {
  border-bottom: none;
}


.signup-perk-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(201,168,76,0.14);
  border: 1px solid rgba(201,168,76,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}


.signup-perk-text {}


.signup-perk-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  margin-bottom: 2px;
}


.signup-perk-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}


.signup-stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  animation: fadeIn 0.6s ease 0.32s both;
}


.signup-stat-num {
  font-family: \'Playfair Display\', serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 3px;
}


.signup-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.32);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}


/* ── RIGHT — Form Panel ── */


.signup-right {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 48px;
  position: relative;
  overflow: hidden;
}


.signup-right::before {
  content: \'\';
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
  pointer-events: none;
}


.signup-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mute);
  text-decoration: none;
  margin-bottom: 28px;
  width: fit-content;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
  animation: fadeIn 0.5s ease 0.08s both;
}


.signup-back:hover {
  color: var(--navy);
}


.signup-back svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.signup-form-head {
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
  animation: fadeSlideUp 0.55s ease 0.14s both;
}


.signup-form-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-family: \'DM Sans\', sans-serif;
  margin-bottom: 7px;
}


.signup-form-head h3 {
  font-family: \'Playfair Display\', serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 5px;
}


.signup-form-head p {
  font-size: 13px;
  color: var(--mute);
  line-height: 1.6;
}


.signup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
  animation: fadeSlideUp 0.55s ease 0.2s both;
}


/* Two-col row for first/last name */


.sf-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}


.sf-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}


.sf-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}


.sf-label .req {
  color: var(--gold);
  margin-left: 2px;
}


.sf-input {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: \'DM Sans\', sans-serif;
  color: var(--navy);
  background: #f9fbfd;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}


.sf-input:focus {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.11);
}


.sf-input::placeholder {
  color: var(--mute);
}


.sf-select {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: \'DM Sans\', sans-serif;
  color: var(--navy);
  background: #f9fbfd url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'8\' viewBox=\'0 0 12 8\'%3E%3Cpath d=\'M1 1l5 5 5-5\' stroke=\'%239fb0c2\' stroke-width=\'1.5\' fill=\'none\' stroke-linecap=\'round\'/%3E%3C/svg%3E") no-repeat right 13px center;
  outline: none;
  width: 100%;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}


.sf-select:focus {
  border-color: var(--gold);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.11);
}


/* Password wrapper */


.sf-pw-wrap {
  position: relative;
}


.sf-pw-wrap .sf-input {
  padding-right: 44px;
}


.sf-pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  color: var(--mute);
  transition: color 0.2s;
  display: flex;
  align-items: center;
}


.sf-pw-toggle:hover {
  color: var(--navy);
}


.sf-pw-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Password strength bar */


.sf-strength {
  margin-top: 6px;
}


.sf-strength-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 4px;
}


.sf-strength-fill {
  height: 100%;
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s, background 0.3s;
}


.sf-strength-fill.weak {
  width: 33%;
  background: #ef4444;
}


.sf-strength-fill.medium {
  width: 66%;
  background: #f59e0b;
}


.sf-strength-fill.strong {
  width: 100%;
  background: #22c55e;
}


.sf-strength-text {
  font-size: 11px;
  color: var(--mute);
  font-family: \'DM Sans\', sans-serif;
}


/* Terms checkbox */


.sf-terms-wrap {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}


.sf-check-box {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: #f9fbfd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.18s;
}


.sf-check-native {
  display: none;
}


.sf-check-native:checked ~ .sf-check-box {
  background: var(--navy);
  border-color: var(--navy);
}


.sf-check-native:checked ~ .sf-check-box::after {
  content: \'\';
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
  display: block;
}


.sf-terms-label {
  font-size: 12px;
  color: var(--soft);
  line-height: 1.55;
  cursor: pointer;
}


.sf-terms-label a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}


.sf-terms-label a:hover {
  text-decoration: underline;
}


/* Error */


.sf-error {
  display: none;
  background: #fff3f3;
  border: 1px solid #ffbebe;
  color: #c0392b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}


/* Submit */


.sf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--gold) 0%, #e8c97a 100%);
  color: var(--navy);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  font-family: \'DM Sans\', sans-serif;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 4px;
}


.sf-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(201,168,76,0.35);
}


.sf-submit:active {
  transform: translateY(0);
}


.sf-arrow {
  transition: transform 0.2s;
}


.sf-submit:hover .sf-arrow {
  transform: translateX(4px);
}


/* Divider */


.sf-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--mute);
  font-weight: 600;
  margin-top: 16px;
}


.sf-divider::before, .sf-divider::after {
  content: \'\';
  flex: 1;
  height: 1px;
  background: var(--border);
}


/* Social */


.sf-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}


.sf-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}


.sf-social-btn:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.07);
  transform: translateY(-1px);
}


/* Login link */


.sf-login {
  text-align: center;
  font-size: 12px;
  color: var(--mute);
  margin-top: 16px;
  position: relative;
  z-index: 1;
  animation: fadeIn 0.55s ease 0.34s both;
}


.sf-login a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}


.sf-login a:hover {
  text-decoration: underline;
}


/* Responsive */


@media (max-width: 768px) {


  .signup-card {
    grid-template-columns: 1fr;
  }


  .signup-left {
    display: none;
  }


  .signup-right {
    padding: 40px 24px;
  }


  .sf-two {
    grid-template-columns: 1fr; gap: 14px;
  }


}


@media (max-width: 480px) {


  .signup-right {
    padding: 32px 18px;
  }


  .sf-social {
    grid-template-columns: 1fr;
  }


}


/* ══════════════════════════════════
   LOGIN — page-specific styles
══════════════════════════════════ */


/* ════════════════════════════════════════
   LOGIN — inside cart-page container
════════════════════════════════════════ */


/* Two-column card inside the 1160px container */


.login-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(10,22,40,0.10);
  border: 1px solid var(--border);
  /*min-height: 580px;*/
}


/* ── LEFT — Brand Panel ── */


.login-left {
  background: linear-gradient(160deg, var(--navy) 0%, #112240 45%, #1a3460 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 52px 48px;
  overflow: hidden;
}


.login-left::before {
  content: \'\';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,168,76,0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}


.login-left::after {
  content: \'\';
  position: absolute;
  bottom: -80px;
  right: -60px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(201,168,76,0.13) 0%, transparent 65%);
  pointer-events: none;
}


@keyframes fadeSlideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }


@keyframes fadeIn      { from { opacity:0; } to { opacity:1; } }


.login-brand {
  position: relative;
  z-index: 1;
  animation: fadeSlideUp 0.6s ease 0.1s both;
}


.login-brand-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: \'DM Sans\', sans-serif;
  margin-bottom: 18px;
}


.login-brand h2 {
  font-family: \'Playfair Display\', serif;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 14px;
}


.login-brand h2 em {
  color: var(--gold);
  font-style: normal;
  display: block;
}


.login-brand p {
  font-size: 14px;
  color: rgba(255,255,255,0.52);
  line-height: 1.75;
}


.login-features {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  animation: fadeSlideUp 0.6s ease 0.2s both;
}


.login-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.68);
}


.login-feature-dot {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(201,168,76,0.14);
  border: 1px solid rgba(201,168,76,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}


.login-stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  animation: fadeIn 0.6s ease 0.3s both;
}


.login-stat-num {
  font-family: \'Playfair Display\', serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 3px;
}


.login-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.32);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}


/* ── RIGHT — Form Panel ── */


.login-right {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 48px;
  position: relative;
  overflow: hidden;
}


.login-right::before {
  content: \'\';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(201,168,76,0.07) 0%, transparent 70%);
  pointer-events: none;
}


.login-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mute);
  text-decoration: none;
  margin-bottom: 36px;
  width: fit-content;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
  animation: fadeIn 0.5s ease 0.08s both;
}


.login-back:hover {
  color: var(--navy);
}


.login-back svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.login-form-head {
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
  animation: fadeSlideUp 0.55s ease 0.14s both;
}


.login-form-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-family: \'DM Sans\', sans-serif;
  margin-bottom: 8px;
}


.login-form-head h3 {
  font-family: \'Playfair Display\', serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 6px;
}


.login-form-head p {
  font-size: 13px;
  color: var(--mute);
  line-height: 1.6;
}


.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
  animation: fadeSlideUp 0.55s ease 0.22s both;
}


.lf-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}


.lf-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}


.lf-label .req {
  color: var(--gold);
  margin-left: 2px;
}


.lf-input {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: \'DM Sans\', sans-serif;
  color: var(--navy);
  background: #f9fbfd;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}


.lf-input:focus {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.11);
}


.lf-input::placeholder {
  color: var(--mute);
}


.lf-pw-wrap {
  position: relative;
}


.lf-pw-wrap .lf-input {
  padding-right: 44px;
}


.lf-pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  color: var(--mute);
  transition: color 0.2s;
  display: flex;
  align-items: center;
}


.lf-pw-toggle:hover {
  color: var(--navy);
}


.lf-pw-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.lf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}


.lf-forgot {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.2s;
}


.lf-forgot:hover {
  opacity: 0.72;
}


.lf-check-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}


.lf-check-box {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: #f9fbfd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s;
}


.lf-check-native {
  display: none;
}


.lf-check-native:checked ~ .lf-check-box {
  background: var(--navy);
  border-color: var(--navy);
}


.lf-check-native:checked ~ .lf-check-box::after {
  content: \'\';
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
  display: block;
}


.lf-check-label {
  font-size: 12px;
  color: var(--soft);
  cursor: pointer;
}


.lf-error {
  display: none;
  background: #fff3f3;
  border: 1px solid #ffbebe;
  color: #c0392b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}


.lf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3460 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: \'DM Sans\', sans-serif;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 4px;
}


.lf-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(10,22,40,0.2);
}


.lf-submit:active {
  transform: translateY(0);
}


.lf-arrow {
  transition: transform 0.2s;
}


.lf-submit:hover .lf-arrow {
  transform: translateX(4px);
}


.lf-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--mute);
  font-weight: 600;
  margin-top: 18px;
}


.lf-divider::before, .lf-divider::after {
  content: \'\';
  flex: 1;
  height: 1px;
  background: var(--border);
}


.lf-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}


.lf-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}


.lf-social-btn:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.07);
  transform: translateY(-1px);
}


.lf-register {
  text-align: center;
  font-size: 12px;
  color: var(--mute);
  margin-top: 18px;
  position: relative;
  z-index: 1;
  animation: fadeIn 0.55s ease 0.34s both;
}


.lf-register a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}


.lf-register a:hover {
  text-decoration: underline;
}


/* Responsive */


@media (max-width: 768px) {


  .login-card {
    grid-template-columns: 1fr;
  }


  .login-left {
    display: none;
  }


  .login-right {
    padding: 40px 28px;
  }


}


@media (max-width: 480px) {


  .login-right {
    padding: 32px 18px;
  }


  .lf-social {
    grid-template-columns: 1fr;
  }


}


/* ══════════════════════════════════
   FORGOT-PASSWORD — page-specific styles
══════════════════════════════════ */


/* ════════════════════════════════════════
   FORGOT PASSWORD — inside cart-page
════════════════════════════════════════ */


@keyframes fadeSlideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }


@keyframes fadeIn      { from { opacity:0; } to { opacity:1; } }


/* Two-col card — narrower on forgot password */


.fp-wrap {
  display: grid;
  grid-template-columns: 420px 1fr;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(10,22,40,0.10);
  border: 1px solid var(--border);
  min-height: 520px;
}


/* ── LEFT — Visual panel ── */


.fp-left {
  background: linear-gradient(160deg, var(--navy) 0%, #112240 50%, #1a3460 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 52px 48px;
  overflow: hidden;
}


.fp-left::before {
  content: \'\';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,168,76,0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}


.fp-left::after {
  content: \'\';
  position: absolute;
  bottom: -80px;
  right: -60px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 65%);
  pointer-events: none;
}


.fp-left-content {
  position: relative;
  z-index: 1;
  animation: fadeSlideUp 0.6s ease 0.1s both;
}


/* Big lock icon */


.fp-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(201,168,76,0.14);
  border: 1px solid rgba(201,168,76,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 28px;
}


.fp-left-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: \'DM Sans\', sans-serif;
  margin-bottom: 18px;
}


.fp-left h2 {
  font-family: \'Playfair Display\', serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900;
  color: #fff;
  line-height: 1.22;
  margin-bottom: 14px;
}


.fp-left h2 em {
  color: var(--gold);
  font-style: normal;
}


.fp-left p {
  font-size: 14px;
  color: rgba(255,255,255,0.52);
  line-height: 1.75;
  max-width: 300px;
}


/* Steps list */


.fp-steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 32px;
  animation: fadeSlideUp 0.6s ease 0.2s both;
}


.fp-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}


.fp-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}


.fp-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(201,168,76,0.16);
  border: 1px solid rgba(201,168,76,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  font-family: \'DM Sans\', sans-serif;
  margin-top: 1px;
}


.fp-step-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2px;
}


.fp-step-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.42);
  line-height: 1.5;
}


/* Bottom note */


.fp-left-note {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: rgba(255,255,255,0.28);
  font-family: \'DM Sans\', sans-serif;
  line-height: 1.6;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
  animation: fadeIn 0.6s ease 0.3s both;
}


/* ── RIGHT — Form panel ── */


.fp-right {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 52px;
  position: relative;
  overflow: hidden;
}


.fp-right::before {
  content: \'\';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(201,168,76,0.07) 0%, transparent 70%);
  pointer-events: none;
}


.fp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mute);
  text-decoration: none;
  margin-bottom: 36px;
  width: fit-content;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
  animation: fadeIn 0.5s ease 0.08s both;
}


.fp-back:hover {
  color: var(--navy);
}


.fp-back svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ── STEP 1: Enter email ── */


.fp-step1 {
  animation: fadeSlideUp 0.55s ease 0.12s both;
}


.fp-form-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-family: \'DM Sans\', sans-serif;
  margin-bottom: 8px;
}


.fp-form-head h3 {
  font-family: \'Playfair Display\', serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 6px;
}


.fp-form-head p {
  font-size: 13px;
  color: var(--mute);
  line-height: 1.65;
  margin-bottom: 28px;
}


.fp-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}


.fp-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}


.fp-label .req {
  color: var(--gold);
  margin-left: 2px;
}


.fp-input {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 13px 14px;
  font-size: 14px;
  font-family: \'DM Sans\', sans-serif;
  color: var(--navy);
  background: #f9fbfd;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}


.fp-input:focus {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.11);
}


.fp-input::placeholder {
  color: var(--mute);
}


.fp-error {
  display: none;
  background: #fff3f3;
  border: 1px solid #ffbebe;
  color: #c0392b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}


.fp-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3460 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: \'DM Sans\', sans-serif;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s;
}


.fp-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(10,22,40,0.2);
}


.fp-submit:active {
  transform: translateY(0);
}


.fp-arrow {
  transition: transform 0.2s;
}


.fp-submit:hover .fp-arrow {
  transform: translateX(4px);
}


.fp-login-link {
  text-align: center;
  font-size: 12px;
  color: var(--mute);
  margin-top: 20px;
}


.fp-login-link a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}


.fp-login-link a:hover {
  text-decoration: underline;
}


/* ── STEP 2: Success state ── */


.fp-step2 {
  display: none;
  text-align: center;
  animation: fadeSlideUp 0.55s ease both;
  position: relative;
  z-index: 1;
}


.fp-step2.visible {
  display: block;
}


@keyframes popIn {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}


.fp-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e4f5ec, #c2ebd4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 24px;
  box-shadow: 0 8px 28px rgba(34,197,94,0.16);
  animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) 0.1s both;
}


.fp-success-title {
  font-family: \'Playfair Display\', serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 12px;
}


.fp-success-body {
  font-size: 14px;
  color: var(--soft);
  font-family: \'DM Sans\', sans-serif;
  line-height: 1.75;
  max-width: 340px;
  margin: 0 auto 24px;
}


.fp-success-email {
  display: inline-block;
  background: #f4f6fa;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  font-family: \'DM Sans\', sans-serif;
  margin-bottom: 28px;
}


.fp-success-email em {
  color: var(--gold);
  font-style: normal;
}


.fp-resend {
  font-size: 12px;
  color: var(--mute);
  font-family: \'DM Sans\', sans-serif;
  margin-bottom: 24px;
}


.fp-resend button {
  background: none;
  border: none;
  color: var(--gold);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  font-family: \'DM Sans\', sans-serif;
  padding: 0;
  transition: opacity 0.2s;
}


.fp-resend button:hover {
  opacity: 0.72;
}


.fp-back-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3460 100%);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  font-family: \'DM Sans\', sans-serif;
  transition: transform 0.2s, box-shadow 0.2s;
}


.fp-back-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(10,22,40,0.2);
}


/* Responsive */


@media (max-width: 800px) {


  .fp-wrap {
    grid-template-columns: 1fr;
  }


  .fp-left {
    display: none;
  }


  .fp-right {
    padding: 40px 24px;
  }


}


@media (max-width: 480px) {


  .fp-right {
    padding: 32px 18px;
  }


}


/* ══════════════════════════════════
   PORTAL — page-specific styles
══════════════════════════════════ */


/* ════════════════════════════════════════
   PORTAL LAYOUT
════════════════════════════════════════ */


@keyframes fadeSlideUp { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)} }


@keyframes fadeIn      { from{opacity:0}to{opacity:1} }


.portal-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}


/* ════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════ */


.portal-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 92px;
  animation: fadeSlideUp 0.55s ease 0.05s both;
}


/* User card at top of sidebar */


.sidebar-user-card {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3460 100%);
  border-radius: 16px;
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
}


.sidebar-user-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,168,76,0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}


.sidebar-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #e8c97a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}


.sidebar-user-name {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 3px;
  position: relative;
  z-index: 1;
}


.sidebar-user-email {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  font-family: 'DM Sans', sans-serif;
  position: relative;
  z-index: 1;
  word-break: break-all;
}


.sidebar-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(201,168,76,0.18);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}


/* Nav menu */


.sidebar-nav {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(10,22,40,0.05);
}


.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--soft);
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid #f4f6fa;
  transition: background 0.18s, color 0.18s;
  user-select: none;
}


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


.sidebar-nav-item:hover {
  background: #f8fafc;
  color: var(--navy);
}


.sidebar-nav-item.active {
  background: var(--gold-pale);
  color: var(--navy);
  border-left: 3px solid var(--gold);
  padding-left: 15px;
}


.sidebar-nav-item.logout {
  color: #c0392b;
}


.sidebar-nav-item.logout:hover {
  background: #fff5f5;
  color: #c0392b;
}


.nav-item-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}


.nav-item-label {
  flex: 1;
}


.nav-item-arrow {
  font-size: 12px;
  color: var(--mute);
  transition: transform 0.2s;
}


.sidebar-nav-item:hover .nav-item-arrow,
.sidebar-nav-item.active .nav-item-arrow {
  transform: translateX(3px);
  color: var(--gold);
}


/* ════════════════════════════════════════
   MAIN CONTENT AREA
════════════════════════════════════════ */


.portal-main {
  min-width: 0;
}


/* Each panel — shown/hidden by JS */


.portal-panel {
  display: none;
  animation: fadeSlideUp 0.4s ease both;
}


.portal-panel.active {
  display: block;
}


/* Panel header */


.panel-header {
  margin-bottom: 28px;
}


.panel-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 6px;
}


.panel-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 6px;
}


.panel-subtitle {
  font-size: 14px;
  color: var(--mute);
  font-family: 'DM Sans', sans-serif;
}


/* White content card */


.panel-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(10,22,40,0.05);
  overflow: hidden;
  margin-bottom: 20px;
}


.panel-card-header {
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}


.panel-card-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--navy);
  margin: 0;
}


.panel-card-body {
  padding: 24px;
}


/* ════════════════════════════════════════
   PANEL 1 — PROFILE
════════════════════════════════════════ */


/* Profile avatar large */


.profile-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}


.profile-avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #e8c97a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  flex-shrink: 0;
}


.profile-avatar-info {}


.profile-avatar-name {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 3px;
}


.profile-avatar-since {
  font-size: 12px;
  color: var(--mute);
  font-family: 'DM Sans', sans-serif;
}


.profile-avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: opacity 0.2s;
}


.profile-avatar-btn:hover {
  opacity: 0.72;
}


/* Form fields */


.profile-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.pf-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}


.pf-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.pf-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.pf-input, .pf-select {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  color: var(--navy);
  background: #f9fbfd;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}


.pf-input:focus, .pf-select:focus {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.11);
}


.pf-input::placeholder {
  color: var(--mute);
}


.pf-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239fb0c2' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
  cursor: pointer;
}


.pf-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


.pf-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3460 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}


.pf-save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10,22,40,0.2);
}


.pf-save-btn:active {
  transform: translateY(0);
}


.pf-success {
  display: none;
  background: #f0faf4;
  border: 1px solid #bbf0d0;
  color: #1a7a4a;
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  margin-top: 4px;
}


.pf-success.show {
  display: block;
}


/* ════════════════════════════════════════
   PANEL 2 — ORDERS
════════════════════════════════════════ */


.orders-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}


.order-stat-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(10,22,40,0.04);
}


.order-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}


.order-stat-num em {
  color: var(--gold);
  font-style: normal;
}


.order-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}


/* Order rows */


.order-row {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #f4f6fa;
  transition: background 0.15s;
}


.order-row:last-child {
  border-bottom: none;
}


.order-row:hover {
  background: #fafbfc;
}


.order-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #f4f6fa;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--mute);
  font-family: 'DM Sans', sans-serif;
  text-align: center;
  flex-shrink: 0;
}


/* Replace with <img> when you have real product images */


.order-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}


.order-info {}


.order-ref {
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 3px;
}


.order-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 3px;
}


.order-date {
  font-size: 12px;
  color: var(--mute);
  font-family: 'DM Sans', sans-serif;
}


.order-qty {
  font-size: 13px;
  font-weight: 600;
  color: var(--soft);
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}


.order-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}


.status-pending {
  background: #fef9ec;
  color: #b45309;
  border: 1px solid #fde68a;
}


.status-progress {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}


.status-shipped {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}


.status-complete {
  background: #f4f6fa;
  color: var(--soft);
  border: 1px solid var(--border);
}


/* Empty state */


.orders-empty {
  text-align: center;
  padding: 56px 24px;
}


.orders-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}


.orders-empty h4 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 8px;
}


.orders-empty p {
  font-size: 14px;
  color: var(--mute);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 20px;
}


.orders-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  transition: transform 0.2s, box-shadow 0.2s;
}


.orders-empty-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10,22,40,0.2);
}


/* ════════════════════════════════════════
   PANEL 3 — CHANGE PASSWORD
════════════════════════════════════════ */


.cp-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 480px;
}


.cp-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.cp-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.cp-label .req {
  color: var(--gold);
  margin-left: 2px;
}


.cp-pw-wrap {
  position: relative;
}


.cp-input {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 12px 44px 12px 14px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  color: var(--navy);
  background: #f9fbfd;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}


.cp-input:focus {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.11);
}


.cp-input::placeholder {
  color: var(--mute);
}


.cp-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  color: var(--mute);
  transition: color 0.2s;
  display: flex;
  align-items: center;
}


.cp-eye:hover {
  color: var(--navy);
}


.cp-eye svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}



/* ── Unified password eye button (.pw-eye) ───────────────────
   Used by register, change-password, email-reset-password.
   login.html keeps its own .lf-pw-toggle for backward compat.
   ─────────────────────────────────────────────────────────── */
.pw-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  color: var(--mute);
  transition: color 0.2s;
  display: flex;
  align-items: center;
  line-height: 1;
}

.pw-eye:hover { color: var(--navy); }

.pw-eye svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* eye-closed hidden by default; shown when button has .is-visible */
.pw-eye .eye-closed            { display: none; }
.pw-eye.is-visible .eye-open   { display: none; }
.pw-eye.is-visible .eye-closed { display: block; }

/* Strength bar */


.cp-strength {
  margin-top: 5px;
}


.cp-strength-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 3px;
}


.cp-strength-fill {
  height: 100%;
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s, background 0.3s;
}


.cp-strength-fill.weak {
  width: 33%;
  background: #ef4444;
}


.cp-strength-fill.medium {
  width: 66%;
  background: #f59e0b;
}


.cp-strength-fill.strong {
  width: 100%;
  background: #22c55e;
}


.cp-strength-text {
  font-size: 11px;
  color: var(--mute);
}


.cp-rules {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}


.cp-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mute);
  font-family: 'DM Sans', sans-serif;
  transition: color 0.2s;
}


.cp-rule.met {
  color: #15803d;
}


.cp-rule-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.2s;
}


.cp-rule.met .cp-rule-dot {
  background: #22c55e;
}


.cp-error {
  display: none;
  background: #fff3f3;
  border: 1px solid #ffbebe;
  color: #c0392b;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}


.cp-success {
  display: none;
  background: #f0faf4;
  border: 1px solid #bbf0d0;
  color: #1a7a4a;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
}


.cp-success.show, .cp-error.show {
  display: block;
}


.cp-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3460 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  align-self: flex-start;
}


.cp-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10,22,40,0.2);
}


.cp-submit:active {
  transform: translateY(0);
}


/* ════════════════════════════════════════
   LOGOUT CONFIRMATION
════════════════════════════════════════ */


.logout-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(10,22,40,0.05);
  padding: 48px 36px;
  text-align: center;
  max-width: 480px;
}


.logout-icon {
  font-size: 48px;
  margin-bottom: 20px;
}


.logout-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 10px;
}


.logout-body {
  font-size: 14px;
  color: var(--mute);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.7;
  margin-bottom: 28px;
}


.logout-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}


.logout-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}


.logout-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(192,57,43,0.3);
}


.logout-cancel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: #fff;
  color: var(--navy);
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}


.logout-cancel:hover {
  border-color: var(--gold);
  background: var(--gold-pale);
}


/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */


@media (max-width: 900px) {


  .portal-layout {
    grid-template-columns: 1fr;
  }


  .portal-sidebar {
    position: static;
  }


  .sidebar-user-card {
    display: flex; align-items: center; gap: 16px;
  }


  .sidebar-avatar {
    margin-bottom: 0;
  }


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


  .order-row {
    grid-template-columns: 52px 1fr;
  }


  .order-qty, .order-status {
    display: none;
  }


  .pf-two {
    grid-template-columns: 1fr;
  }


}


@media (max-width: 600px) {


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


  .logout-card {
    padding: 32px 20px;
  }


  .logout-actions {
    flex-direction: column;
  }


  .logout-confirm, .logout-cancel {
    justify-content: center;
  }


}


/* ════════════════════════════════════════
   MY ORDERS — table, pagination, filters
   (my-orders.html)
════════════════════════════════════════ */


.orders-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


table.orders-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;

}


.orders-table thead tr {
  background: #f8fafc;
  border-bottom: 2px solid var(--border);
}


.orders-table thead th {
  padding: 13px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
  white-space: nowrap;
}


.orders-table thead th:first-child {
  padding-left: 24px;
}


.orders-table thead th:last-child {
  padding-right: 24px;
}


.orders-table tbody tr {
  border-bottom: 1px solid #f0f3f8;
  transition: background 0.15s;
}


.orders-table tbody tr:last-child {
  border-bottom: none;
}


.orders-table tbody tr:hover {
  background: #fafbfc;
}


.orders-table tbody td {
  padding: 16px;
  vertical-align: middle;
  color: var(--soft);
}
.innerorders-table tbody td {
    padding: 5px;
    vertical-align: middle;
    color: var(--soft);
}


.orders-table tbody td:first-child {
    padding-left: 24px;
}


.orders-table tbody td:last-child {
  padding-right: 24px;
}


.td-order-id {
  font-weight: 700;
  color: var(--navy);
  font-size: 13px;
  white-space: nowrap;
}


.td-date {
  white-space: nowrap;
}


.td-shipping {
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}


.td-tracking {
  font-size: 12px;
  font-weight: 600;
  color: var(--soft);
  white-space: nowrap;
}


.tracking-na {
  color: var(--mute);
  font-style: italic;
  font-weight: 400;
}


.refund-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #c0392b;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  padding: 5px 12px;
  border: 1.5px solid rgba(192,57,43,0.25);
  border-radius: 7px;
  background: rgba(192,57,43,0.04);
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
  white-space: nowrap;
}


.refund-link:hover {
  background: rgba(192,57,43,0.09);
  border-color: rgba(192,57,43,0.5);
  transform: translateY(-1px);
}


.refund-na {
  font-size: 12px;
  color: var(--mute);
  font-family: 'DM Sans', sans-serif;
}


/* ── Pagination ── */


.orders-pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-top: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}


.orders-pg-info {
  font-size: 13px;
  color: var(--mute);
  font-family: 'DM Sans', sans-serif;
}


.orders-pg-info strong {
  color: var(--navy);
}


.orders-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
}


.pg:hover:not(.pg-active):not(.pg-off) {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201,168,76,0.06);
}


.pg.pg-off {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}


/* ── Filter pills ── */


.orders-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}


.orders-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}


.filter-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--soft);
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
  white-space: nowrap;
}


.filter-pill:hover {
  border-color: var(--gold);
  color: var(--navy);
  background: rgba(201,168,76,0.06);
}


.filter-pill.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}


/* ── Responsive additions ── */


@media (max-width: 900px) {


  .orders-pagination-wrap {
    flex-direction: column; gap: 10px;
    padding:18px 0;
  }


  .orders-table thead th:nth-child(5),
  .orders-table tbody td:nth-child(5) {
    
  }


}


@media (max-width: 640px) {


  .orders-table thead th:nth-child(4),
  .orders-table tbody td:nth-child(4) {
    
  }


  .orders-filter-bar {
    flex-direction: column; align-items: flex-start;
  }


}


/* ════════════════════════════════════════
   CSS-ONLY PAGINATION  (:target + :has())
   Requires panel-card as shared ancestor
════════════════════════════════════════ */


/* ── Page visibility ── */


.order-page {
  display: none;
}


/* all hidden */


#page-1 {
  display: table-row-group;
}


/* page 1 default */


.order-page:target {
  display: table-row-group;
}


/* targeted page shown */


/* When pages 2–5 targeted → hide page 1 */


.panel-card:has(#page-2:target) #page-1,
.panel-card:has(#page-3:target) #page-1,
.panel-card:has(#page-4:target) #page-1,
.panel-card:has(#page-5:target) #page-1 {
  display: none;
}


/* ── Active page-number button ── */


/* Default: page 1 active */


.pg-num[href="#page-1"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  cursor: default;
  box-shadow: 0 3px 12px rgba(10,22,40,0.16);
}


/* Pages 2–5: deactivate 1, activate current */


.panel-card:has(#page-2:target) .pg-num[href="#page-1"],
.panel-card:has(#page-3:target) .pg-num[href="#page-1"],
.panel-card:has(#page-4:target) .pg-num[href="#page-1"],
.panel-card:has(#page-5:target) .pg-num[href="#page-1"] {
  background: #fff;
  border-color: var(--border);
  color: var(--navy);
  cursor: pointer;
  box-shadow: none;
}


.panel-card:has(#page-2:target) .pg-num[href="#page-2"],
.panel-card:has(#page-3:target) .pg-num[href="#page-3"],
.panel-card:has(#page-4:target) .pg-num[href="#page-4"],
.panel-card:has(#page-5:target) .pg-num[href="#page-5"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  cursor: default;
  box-shadow: 0 3px 12px rgba(10,22,40,0.16);
}


/* ── Previous button — one per page ── */


.pg-prev-default {
  display: inline-flex;
}


/* on pg1 → disabled */


.pg-prev-2,.pg-prev-3,.pg-prev-4,.pg-prev-5 {
  display: none;
}


.panel-card:has(#page-2:target) .pg-prev-default {
  display: none;
}


.panel-card:has(#page-2:target) .pg-prev-2 {
  display: inline-flex;
}


.panel-card:has(#page-3:target) .pg-prev-default {
  display: none;
}


.panel-card:has(#page-3:target) .pg-prev-3 {
  display: inline-flex;
}


.panel-card:has(#page-4:target) .pg-prev-default {
  display: none;
}


.panel-card:has(#page-4:target) .pg-prev-4 {
  display: inline-flex;
}


.panel-card:has(#page-5:target) .pg-prev-default {
  display: none;
}


.panel-card:has(#page-5:target) .pg-prev-5 {
  display: inline-flex;
}


/* ── Next button — one per page ── */


.pg-next-1 {
  display: inline-flex;
}


/* on pg1 → goes to pg2 */


.pg-next-2,.pg-next-3,.pg-next-4,.pg-next-off {
  display: none;
}


.panel-card:has(#page-2:target) .pg-next-1 {
  display: none;
}


.panel-card:has(#page-2:target) .pg-next-2 {
  display: inline-flex;
}


.panel-card:has(#page-3:target) .pg-next-1 {
  display: none;
}


.panel-card:has(#page-3:target) .pg-next-3 {
  display: inline-flex;
}


.panel-card:has(#page-4:target) .pg-next-1 {
  display: none;
}


.panel-card:has(#page-4:target) .pg-next-4 {
  display: inline-flex;
}


.panel-card:has(#page-5:target) .pg-next-1 {
  display: none;
}


.panel-card:has(#page-5:target) .pg-next-off {
  display: inline-flex;
}


/* disabled */


/* ════════════════════════════════════════
   REFUND REQUEST PAGE
════════════════════════════════════════ */


/* ── Order select table (same style as orders table) ── */


.rf-order-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


table.rf-order-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
}


.rf-order-table thead tr {
  background: #f8fafc;
  border-bottom: 2px solid var(--border);
}


.rf-order-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
  white-space: nowrap;
}


.rf-order-table thead th:first-child {
  padding-left: 20px;
  width: 44px;
}


.rf-order-table thead th:last-child {
  padding-right: 20px;
}


.rf-order-table tbody tr {
  border-bottom: 1px solid #f0f3f8;
  transition: background 0.15s;
  cursor: pointer;
}


.rf-order-table tbody tr:last-child {
  border-bottom: none;
}


.rf-order-table tbody tr:hover {
  background: #fafbfc;
}


.rf-order-table tbody td {
  padding: 15px 16px;
  vertical-align: middle;
  color: var(--soft);
}


.rf-order-table tbody td:first-child {
  padding-left: 20px;
}


.rf-order-table tbody td:last-child {
  padding-right: 20px;
}


/* ── Custom checkbox ── */


.rf-checkbox-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}


.rf-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
}


/* CSS-only checked row highlight via :has() */


.rf-order-table tbody tr:has(.rf-checkbox:checked) {
  background: rgba(201,168,76,0.07);
}


.rf-order-table tbody tr:has(.rf-checkbox:checked) td {
  color: var(--navy);
}


/* ── Form fields ── */


.rf-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.rf-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}


.rf-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.rf-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.rf-label .req {
  color: var(--gold);
  margin-left: 2px;
}


.rf-select, .rf-textarea {
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  color: var(--navy);
  background: #f9fbfd;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}


.rf-select:focus, .rf-textarea:focus {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.11);
}


.rf-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239fb0c2' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}


.rf-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}


/* ── File upload ── */


.rf-upload-wrap {
  border: 2px dashed var(--border);
  border-radius: 11px;
  padding: 22px;
  text-align: center;
  background: #f9fbfd;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}


.rf-upload-wrap:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.04);
}


.rf-upload-wrap input[type="file"] {
  display: none;
}


.rf-upload-icon {
  font-size: 26px;
  margin-bottom: 7px;
}


.rf-upload-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 3px;
}


.rf-upload-sub {
  font-size: 11px;
  color: var(--mute);
  font-family: 'DM Sans', sans-serif;
}


.rf-upload-btn {
  display: inline-block;
  margin-top: 9px;
  padding: 7px 18px;
  border: 1.5px solid var(--gold);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  background: none;
  cursor: pointer;
  transition: background 0.18s;
}


.rf-upload-btn:hover {
  background: rgba(201,168,76,0.1);
}


/* ── Error + submit ── */


.rf-error {
  display: none;
  background: #fff3f3;
  border: 1px solid #ffbebe;
  color: #c0392b;
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 13px;
}


.rf-submit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}


.rf-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3460 100%);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}


.rf-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(10,22,40,0.2);
}


.rf-submit:active {
  transform: translateY(0);
}


.rf-cancel {
  font-size: 13px;
  font-weight: 600;
  color: var(--mute);
  text-decoration: none;
  transition: color 0.2s;
}


.rf-cancel:hover {
  color: var(--navy);
}


/* ── Success state ── */


.rf-success {
  display: none;
  text-align: center;
  padding: 48px 24px;
}


.rf-success-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e4f5ec, #c2ebd4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin: 0 auto 20px;
  box-shadow: 0 8px 28px rgba(34,197,94,0.15);
}


.rf-success-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 10px;
}


.rf-success-body {
  font-size: 14px;
  color: var(--soft);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.75;
  max-width: 400px;
  margin: 0 auto 24px;
}


.rf-success-ref {
  display: inline-block;
  background: #f4f6fa;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: var(--navy);
  margin-bottom: 24px;
}


.rf-success-ref em {
  color: var(--gold);
  font-style: normal;
}


.rf-success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}


.rf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 24px;
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  transition: transform 0.2s, box-shadow 0.2s;
}


.rf-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10,22,40,0.2);
}


.rf-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 24px;
  background: #fff;
  color: var(--navy);
  border: 2px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  transition: border-color 0.2s, background 0.2s;
}


.rf-btn-outline:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.07);
}


/* ── Responsive ── */


@media (max-width: 640px) {


  .rf-two {
    grid-template-columns: 1fr;
  }


  .rf-submit-row {
    flex-direction: column; align-items: flex-start;
  }


  .rf-order-table thead th:nth-child(5),
  .rf-order-table tbody td:nth-child(5) {
    
  }


}


/* ── Forgot password — success body spacing variant ── */


.fp-success-body--sm {
  margin-bottom: 16px;
}


/* ════════════════════════════════════════
   CHANGE PASSWORD — success card
════════════════════════════════════════ */


.cp-changed-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(10,22,40,0.05);
  padding: 56px 36px;
  text-align: center;
  max-width: 520px;
}


.cp-changed-icon {
  font-size: 52px;
  margin-bottom: 20px;
  display: block;
  animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1) both;
}


.cp-changed-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 12px;
}


.cp-changed-body {
  font-size: 14px;
  color: var(--soft);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.78;
  max-width: 400px;
  margin: 0 auto 32px;
}


.cp-changed-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}


.cp-changed-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 28px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3460 100%);
  color: #fff;
  border-radius: 11px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  transition: transform 0.2s, box-shadow 0.2s;
}


.cp-changed-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(10,22,40,0.2);
}


.cp-changed-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 28px;
  background: #fff;
  color: var(--navy);
  border: 2px solid var(--border);
  border-radius: 11px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  transition: border-color 0.2s, background 0.2s;
}


.cp-changed-btn-outline:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.07);
}


@media (max-width: 480px) {


  .cp-changed-card {
    padding: 36px 20px;
  }


  .cp-changed-actions {
    flex-direction: column;
  }


  .cp-changed-btn-primary, .cp-changed-btn-outline {
    justify-content: center;
  }
	
	


}

/* ── Hide nav on scroll down ── */
nav.nav--hidden {
  transform: translateY(-100%);
  box-shadow: none;
}