/* ── Trinity Treasures — Public Stylesheet ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&family=DM+Mono:wght@400&display=swap');

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  --cream:      #FDFAF5;
  --cream-dk:   #F2EBE0;
  --cream-dkr:  #E8DDD0;
  --rose:       #C0788F;
  --rose-dk:    #9D5F74;
  --rose-lt:    #EDD8E1;
  --gold:       #B8903A;
  --gold-lt:    #D4AF6A;
  --gold-strip: #E8C97A;
  --text:       #2C1A0E;
  --text-muted: #8A6A58;
  --border:     #DFD0BE;
  --white:      #FFFFFF;
  --shadow:     rgba(44,26,14,.10);
  --radius:     10px;
  --radius-lg:  16px;
  --gap:        2rem;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  background: var(--cream);
  color: var(--text);
}
img { display:block; max-width:100%; height:auto }
a { color: var(--rose-dk); text-decoration:none }
a:hover { color: var(--rose) }

/* ── Typography ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:'Playfair Display', serif; line-height:1.25; }
h1 { font-size: clamp(2rem,5vw,3.2rem); font-weight:700 }
h2 { font-size: clamp(1.5rem,3vw,2.2rem); font-weight:600 }
h3 { font-size: 1.25rem; font-weight:600 }
p  { margin-bottom: .9rem }
p:last-child { margin-bottom:0 }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container { max-width:1160px; margin:0 auto; padding:0 1.25rem }
.section    { padding: 4rem 0 }
.section-sm { padding: 2rem 0 }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index:100;
  box-shadow: 0 2px 12px var(--shadow);
}
.header-inner {
  display: flex; align-items:center; justify-content:space-between;
  padding: .9rem 1.25rem; max-width:1160px; margin:0 auto;
}
.brand {
  display:flex; align-items:center; gap:.75rem;
  font-family:'Playfair Display',serif;
}
.brand-name {
  font-size:1.45rem; font-weight:700; color:var(--text);
  line-height:1.1;
}
.brand-tag {
  font-family:'Lato',sans-serif; font-size:.72rem; font-weight:300;
  letter-spacing:.08em; color:var(--text-muted); display:block;
  text-transform:uppercase;
}
.brand-flourish {
  width:44px; height:44px; flex-shrink:0;
}
.site-nav {
  display:flex; align-items:center; gap:1.5rem;
}
.site-nav a {
  font-size:.88rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-muted);
  transition: color .2s;
}
.site-nav a:hover, .site-nav a.active { color:var(--rose-dk) }
.cart-link {
  display:flex; align-items:center; gap:.4rem;
  background:var(--rose); color:var(--white) !important;
  padding:.45rem .9rem; border-radius:50px; font-size:.82rem !important;
  transition: background .2s !important;
}
.cart-link:hover { background:var(--rose-dk) !important }
.cart-count {
  background:var(--gold); color:var(--white);
  width:18px; height:18px; border-radius:50%;
  font-size:.72rem; display:flex; align-items:center; justify-content:center;
  font-weight:700;
}

/* ── Gold divider ────────────────────────────────────────────────────────── */
.gold-bar { height:3px; background:linear-gradient(90deg,var(--gold-lt),var(--gold),var(--gold-lt)) }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #F7EFE5 0%, #EFE1D0 50%, #F5E8D8 100%);
  padding: 5rem 1.25rem 4rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23B8903A' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-content { position:relative; max-width:680px; margin:0 auto }
.hero h1 { color:var(--text); margin-bottom:.75rem }
.hero h1 em { color:var(--rose-dk); font-style:italic }
.hero-sub {
  font-size:1.1rem; color:var(--text-muted); margin-bottom:2rem; font-weight:300;
}
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display:inline-block; padding:.75rem 2rem;
  border-radius:50px; font-weight:700; font-size:.95rem;
  cursor:pointer; transition: all .2s; border:2px solid transparent;
  letter-spacing:.03em; font-family:'Lato',sans-serif;
}
.btn-primary {
  background:var(--rose); color:var(--white); border-color:var(--rose);
}
.btn-primary:hover {
  background:var(--rose-dk); border-color:var(--rose-dk); color:var(--white);
}
.btn-outline {
  background:transparent; color:var(--rose-dk); border-color:var(--rose-dk);
}
.btn-outline:hover {
  background:var(--rose-dk); color:var(--white);
}
.btn-gold {
  background:var(--gold); color:var(--white); border-color:var(--gold);
}
.btn-gold:hover {
  background:#9A7A2E; border-color:#9A7A2E; color:var(--white);
}
.btn-sm { padding:.5rem 1.25rem; font-size:.85rem }
.btn-block { display:block; width:100%; text-align:center }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.filter-bar {
  background:var(--white); border-bottom:1px solid var(--border);
  padding:.75rem 1.25rem;
}
.filter-inner {
  max-width:1160px; margin:0 auto;
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.filter-label { font-size:.82rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em }
.filter-btn {
  padding:.38rem .9rem; border-radius:50px; font-size:.83rem; font-weight:700;
  border:1.5px solid var(--border); background:transparent; color:var(--text-muted);
  cursor:pointer; transition:all .15s; font-family:'Lato',sans-serif;
}
.filter-btn:hover, .filter-btn.active {
  border-color:var(--rose); color:var(--rose-dk); background:var(--rose-lt);
}

/* ── Listing grid ───────────────────────────────────────────────────────── */
.listing-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap:1.75rem;
  padding: 2.5rem 0;
}
.listing-card {
  background:var(--white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow);
  transition: transform .2s, box-shadow .2s;
  display:flex; flex-direction:column;
}
.listing-card:hover {
  transform:translateY(-4px);
  box-shadow: 0 8px 24px rgba(44,26,14,.14);
}
.listing-card a { color:inherit; display:flex; flex-direction:column; height:100% }
.card-img-wrap {
  aspect-ratio:4/3; overflow:hidden; background:var(--cream-dk); position:relative;
}
.card-img-wrap img {
  width:100%; height:100%; object-fit:cover; transition:transform .35s;
}
.listing-card:hover .card-img-wrap img { transform:scale(1.04) }
.card-status {
  position:absolute; top:.6rem; left:.6rem;
  padding:.2rem .65rem; border-radius:50px; font-size:.72rem; font-weight:700;
  font-family:'DM Mono',monospace; letter-spacing:.04em; text-transform:uppercase;
}
.status-available { background:rgba(255,255,255,.92); color:#2A7A4A }
.status-reserved  { background:rgba(255,255,255,.92); color:var(--gold) }
.status-sold      { background:rgba(255,255,255,.92); color:var(--text-muted) }
.card-body {
  padding:1.1rem 1.2rem 1.3rem; flex:1; display:flex; flex-direction:column;
}
.card-category {
  font-size:.72rem; font-family:'DM Mono',monospace; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.35rem;
}
.card-title { font-size:1.05rem; font-weight:600; color:var(--text); margin-bottom:.3rem; line-height:1.3 }
.card-maker { font-size:.83rem; color:var(--text-muted); font-style:italic; margin-bottom:.5rem }
.card-price {
  margin-top:auto; padding-top:.6rem;
  font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:700; color:var(--rose-dk);
}
.card-price .sold-label { font-family:'Lato',sans-serif; font-size:.8rem; color:var(--text-muted); font-weight:400 }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state {
  text-align:center; padding:5rem 1rem; color:var(--text-muted);
}
.empty-state svg { opacity:.3; margin:0 auto 1rem }
.empty-state h3 { font-size:1.4rem; margin-bottom:.5rem; color:var(--text-muted) }

/* ── Item detail ────────────────────────────────────────────────────────── */
.item-layout {
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;
  padding:3rem 0;
}
.gallery-main {
  aspect-ratio:4/3; background:var(--cream-dk); border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--border);
}
.gallery-main img {
  width:100%; height:100%; object-fit:cover; cursor:zoom-in; transition:opacity .2s;
}
.gallery-thumbs {
  display:flex; gap:.6rem; margin-top:.75rem; flex-wrap:wrap;
}
.gallery-thumbs .thumb {
  width:70px; height:70px; border-radius:6px; overflow:hidden;
  border:2px solid var(--border); cursor:pointer; transition:border-color .15s; flex-shrink:0;
}
.gallery-thumbs .thumb:hover, .gallery-thumbs .thumb.active {
  border-color:var(--rose);
}
.gallery-thumbs .thumb img { width:100%; height:100%; object-fit:cover }

.item-info { position:sticky; top:90px }
.item-category {
  font-size:.78rem; font-family:'DM Mono',monospace; letter-spacing:.07em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.5rem;
}
.item-title { margin-bottom:.4rem }
.item-maker { color:var(--text-muted); font-style:italic; margin-bottom:1.2rem }
.item-price {
  font-family:'Playfair Display',serif; font-size:2rem; font-weight:700;
  color:var(--rose-dk); margin-bottom:1.5rem;
}
.item-description { color:var(--text); margin-bottom:1.75rem; line-height:1.8 }
.item-status-badge {
  display:inline-block; padding:.35rem .9rem; border-radius:50px;
  font-size:.8rem; font-weight:700; font-family:'DM Mono',monospace;
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:1.25rem;
}
.badge-available { background:#E8F5EE; color:#2A7A4A }
.badge-reserved  { background:#FEF3E2; color:#B8603A }
.badge-sold      { background:#F0EDEA; color:var(--text-muted) }

/* ── Cart ───────────────────────────────────────────────────────────────── */
.cart-table { width:100%; border-collapse:collapse; margin-bottom:1.5rem }
.cart-table th {
  text-align:left; padding:.6rem .75rem;
  border-bottom:2px solid var(--border); font-size:.8rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); font-family:'DM Mono',monospace;
}
.cart-table td {
  padding:.9rem .75rem; border-bottom:1px solid var(--border); vertical-align:middle;
}
.cart-thumb { width:64px; height:64px; border-radius:6px; object-fit:cover }
.cart-total-row td { font-weight:700; font-size:1.1rem; padding-top:1.2rem }
.cart-summary {
  background:var(--cream-dk); border-radius:var(--radius); padding:1.5rem;
  border:1px solid var(--border);
}

/* ── Checkout / forms ───────────────────────────────────────────────────── */
.page-header {
  background:linear-gradient(135deg,#F2EAE0,#EDE0D0);
  padding:3rem 1.25rem 2.5rem; text-align:center; border-bottom:1px solid var(--border);
}
.page-header h1 { margin-bottom:.4rem }
.page-header p { color:var(--text-muted) }

.form-card {
  background:var(--white); border-radius:var(--radius-lg);
  border:1px solid var(--border); padding:2rem; box-shadow:0 2px 12px var(--shadow);
}
.form-group { margin-bottom:1.25rem }
.form-group label {
  display:block; font-weight:700; font-size:.88rem; margin-bottom:.35rem;
  color:var(--text);
}
.form-group label .req { color:var(--rose) }
.form-control {
  width:100%; padding:.65rem .9rem; border:1.5px solid var(--border);
  border-radius:var(--radius); font-size:1rem; font-family:'Lato',sans-serif;
  background:var(--cream); color:var(--text); transition:border-color .15s;
}
.form-control:focus { outline:none; border-color:var(--rose); background:var(--white) }
textarea.form-control { resize:vertical; min-height:90px }
.form-hint { font-size:.8rem; color:var(--text-muted); margin-top:.3rem }

/* ── Order confirmation / bank details ──────────────────────────────────── */
.bank-box {
  background:linear-gradient(135deg,#FEF9F0,#FAF1E0);
  border:2px solid var(--gold-lt); border-radius:var(--radius-lg);
  padding:2rem; margin:1.75rem 0;
}
.bank-box h3 { color:var(--gold); margin-bottom:1rem; display:flex; align-items:center; gap:.5rem }
.bank-detail { display:flex; justify-content:space-between; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--cream-dkr) }
.bank-detail:last-child { border-bottom:none }
.bank-detail .label { font-size:.82rem; color:var(--text-muted); font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:.04em }
.bank-detail .value { font-size:1.05rem; font-weight:700; color:var(--text); font-family:'Playfair Display',serif }
.ref-highlight { color:var(--rose-dk); font-size:1.3rem !important }

/* ── About strip ────────────────────────────────────────────────────────── */
.about-strip {
  background: var(--cream-dk);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.about-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;
  max-width:1160px; margin:0 auto; padding:4rem 1.25rem;
}
.about-text h2 { margin-bottom:.75rem }
.about-text p { color:var(--text-muted) }
.about-img { border-radius:var(--radius-lg); overflow:hidden; border:3px solid var(--gold-lt) }
.about-img img { width:100%; height:280px; object-fit:cover }

/* ── Trust pillars ──────────────────────────────────────────────────────── */
.pillars {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
  padding:3rem 0;
}
.pillar { text-align:center; padding:1.5rem }
.pillar-icon {
  width:56px; height:56px; background:var(--rose-lt);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem; color:var(--rose-dk);
}
.pillar h3 { font-size:1rem; margin-bottom:.4rem }
.pillar p  { font-size:.88rem; color:var(--text-muted) }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  background:var(--text); color:#C8B8A8;
  padding:3rem 1.25rem 2rem;
}
.footer-inner {
  max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem;
}
.footer-brand-name {
  font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--white); margin-bottom:.4rem;
}
.footer-tagline { font-size:.85rem; color:#9A8A7A }
.footer-nav h4 { color:var(--white); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.75rem; font-family:'Lato',sans-serif }
.footer-nav a  { display:block; color:#9A8A7A; font-size:.88rem; margin-bottom:.35rem }
.footer-nav a:hover { color:var(--gold-lt) }
.footer-bottom {
  max-width:1160px; margin:2rem auto 0;
  border-top:1px solid #3C2C1C; padding-top:1.25rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}
.footer-bottom p { font-size:.8rem; color:#6A5A4A }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb { padding:.75rem 0; font-size:.83rem; color:var(--text-muted) }
.breadcrumb a { color:var(--text-muted) }
.breadcrumb a:hover { color:var(--rose-dk) }
.breadcrumb span { margin:0 .4rem }

/* ── Flash messages ─────────────────────────────────────────────────────── */
.flash { padding:.85rem 1.1rem; border-radius:var(--radius); margin-bottom:1.25rem; font-weight:700 }
.flash-success { background:#E8F5EE; color:#2A7A4A; border:1px solid #B8E0C8 }
.flash-error   { background:#FEE9E9; color:#C0392B; border:1px solid #F0C0C0 }
.flash-info    { background:#EEF3FE; color:#2A5AAA; border:1px solid #B8CCF0 }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.text-center { text-align:center }
.text-muted  { color:var(--text-muted) }
.mt-1 { margin-top:.5rem } .mt-2 { margin-top:1rem } .mt-3 { margin-top:1.5rem } .mt-4 { margin-top:2rem }
.mb-1 { margin-bottom:.5rem } .mb-2 { margin-bottom:1rem } .mb-3 { margin-bottom:1.5rem }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:2rem }
.three-col { display:grid; grid-template-columns:2fr 1fr; gap:2rem }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .item-layout { grid-template-columns:1fr }
  .item-info   { position:static }
  .about-inner { grid-template-columns:1fr }
  .footer-inner { grid-template-columns:1fr }
  .pillars     { grid-template-columns:1fr }
  .three-col   { grid-template-columns:1fr }
}
@media (max-width:600px) {
  .site-nav { gap:.75rem }
  .two-col  { grid-template-columns:1fr }
  .listing-grid { grid-template-columns:1fr 1fr }
  .hero     { padding:3rem 1rem 2.5rem }
}
@media (max-width:420px) {
  .listing-grid { grid-template-columns:1fr }
}