:root{
  --green-deep:#122A22;
  --green-mid:#1E4638;
  --green-fair:#3E7A5B;
  --cream:#F5F0E3;
  --ivory:#FBF8F1;
  --brass:#C6A15B;
  --brass-light:#E7D0A0;
  --brass-dark:#9C7C3D;
  --ink:#152018;
  --ink-soft:#3C4A41;
  --line:rgba(198,161,91,0.35);
  --max-w:1180px;
  --serif:'Fraunces', 'Iowan Old Style', serif;
  --sans:'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;color:var(--ink);}
p{margin:0;}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 40px;}
@media (max-width:720px){ .wrap{padding:0 22px;} }

button, .btn{
  font-family:var(--sans);
  cursor:pointer;
  border:none;
  font-size:15px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  font-weight:600;
  letter-spacing:0.01em;
  border-radius:2px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease, border-color .3s ease;
  text-decoration:none;
}
.btn-primary{ background:var(--brass); color:var(--green-deep); }
.btn-primary:hover{ background:var(--brass-light); transform:translateY(-2px); }
.btn-primary:disabled{ opacity:0.55; cursor:not-allowed; transform:none; }
.btn-outline{ background:transparent; color:var(--cream); border:1px solid rgba(245,240,227,0.4); }
.btn-outline:hover{ border-color:var(--cream); transform:translateY(-2px); }
.btn-outline.dark{ color:var(--ink); border-color:rgba(21,32,24,0.3); }
.btn-outline.dark:hover{ border-color:var(--ink); }
.btn-danger{ background:#8B3A3A; color:var(--ivory); }
.btn-danger:hover{ background:#A34747; transform:translateY(-2px); }
.btn-sm{ padding:9px 16px; font-size:13px; }
.btn-block{ width:100%; justify-content:center; }

/* ---------- Nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(18,42,34,0.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(198,161,91,0.25);
}
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:84px; flex-wrap:nowrap; }
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
.logo-mark{ width:40px; height:40px; flex:none; }
.logo-text{ display:flex; flex-direction:column; line-height:1; }
.logo-text .name{ font-family:var(--serif); font-size:21px; color:var(--ivory); letter-spacing:0.01em; white-space:nowrap; }
.logo-text .sub{ font-family:var(--sans); font-size:10px; letter-spacing:0.22em; color:var(--brass-light); margin-top:5px; white-space:nowrap; }

.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{ color:rgba(245,240,227,0.82); text-decoration:none; font-size:14.5px; font-weight:500; position:relative; padding-bottom:4px; }
.nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:16px; flex:none; }
.nav-cart{ position:relative; display:flex; align-items:center; color:var(--cream); text-decoration:none; flex:none; }
.nav-cart svg{ width:22px; height:22px; }
.nav-cart .count{
  position:absolute; top:-8px; right:-10px;
  background:var(--brass); color:var(--green-deep);
  font-size:10.5px; font-weight:700; border-radius:50%;
  width:18px; height:18px; display:flex; align-items:center; justify-content:center;
}
.nav-toggle{ display:none; }

/* Tablet: hide the center nav links and the outline "Sign in" / "My account"
   button; cart icon + primary "Shop now" stay visible and right-aligned. */
@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-cta .btn-outline{ display:none; }
  .nav-cta{ gap:12px; }
}

/* Phone: shrink the logo, nav height, cart icon and button so the two ends
   of the nav (logo vs. cart+button) never crowd or wrap on narrow screens. */
@media (max-width:640px){
  nav.wrap{ height:68px; }
  .logo-mark{ width:34px; height:34px; }
  .logo-text .name{ font-size:18px; }
  .logo-text .sub{ font-size:9px; margin-top:3px; }
  .nav-cta{ gap:10px; }
  .nav-cta .btn-primary{ padding:10px 18px; font-size:13.5px; gap:6px; white-space:nowrap; }
  .nav-cart svg{ width:20px; height:20px; }
  .nav-cart .count{ width:16px; height:16px; font-size:10px; top:-6px; right:-8px; }
}

@media (max-width:480px){
  .wrap{ padding:0 16px; }
  .logo-text .sub{ display:none; }
  .nav-cta{ gap:8px; }
  .nav-cta .btn-primary{ padding:9px 14px; font-size:13px; }
}

@media (max-width:360px){
  .logo-text .name{ font-size:16px; }
  .logo-mark{ width:28px; height:28px; }
}

/* ---------- Section heads ---------- */
.section{ padding:96px 0; }
.section.tight{ padding:64px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(28px, 3.4vw, 40px); max-width:16ch; line-height:1.08; }
.section-head p{ max-width:34ch; color:var(--ink-soft); font-size:15.5px; padding-bottom:4px; }
@media (max-width:720px){ .section{ padding:64px 0; } .section-head{ flex-direction:column; align-items:flex-start; gap:14px; } }

/* ---------- Product grid (shop) ---------- */
.products{ background:var(--ivory); }
.product-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:900px){ .product-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .product-grid{ grid-template-columns:1fr;} }

.product-card{ background:var(--ivory); display:flex; flex-direction:column; transition:background .35s ease; }
.product-card:hover{ background:var(--cream); }
.product-photo{ width:100%; aspect-ratio:1/1; overflow:hidden; background:var(--green-deep); }
.product-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.product-card:hover .product-photo img{ transform:scale(1.04); }
.product-body{ padding:24px 26px 26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.product-card .cat{ font-size:12px; letter-spacing:0.14em; color:var(--brass-dark); font-weight:600; text-transform:uppercase; }
.product-card h3{ font-size:22px; font-weight:500; }
.product-card .desc{ color:var(--ink-soft); font-size:14.5px; flex:1; }
.product-card .meta{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); }
.product-card .price{ font-family:var(--serif); font-size:18px; color:var(--ink); }
.product-card .add{ background:none; border:none; font-size:13px; font-weight:600; color:var(--green-mid); display:flex; align-items:center; gap:6px; padding:0; transition:color .25s ease, gap .25s ease; }
.product-card .add:hover{ color:var(--brass-dark); gap:10px; }
.product-card .add svg{ width:14px; height:14px; }
.stock-note{ font-size:12px; color:var(--brass-dark); }
.stock-note.out{ color:#8B3A3A; }

/* ---------- Footer ---------- */
footer{ background:var(--green-deep); color:rgba(245,240,227,0.7); }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding:64px 0 40px; border-bottom:1px solid rgba(198,161,91,0.2); }
@media (max-width:800px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .footer-top{ grid-template-columns:1fr; gap:32px; padding:48px 0 32px; }
  .footer-brand{ grid-column:auto; }
}
.footer-brand .logo-text .name{ color:var(--ivory); }
.footer-brand p{ margin-top:18px; font-size:14px; max-width:30ch; color:rgba(245,240,227,0.6); }
.footer-col h4{ font-family:var(--sans); font-size:12px; letter-spacing:0.1em; color:var(--brass-light); font-weight:600; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ text-decoration:none; font-size:14.5px; color:rgba(245,240,227,0.72); transition:color .25s ease; }
.footer-col a:hover{ color:var(--brass-light); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:13px; color:rgba(245,240,227,0.45); flex-wrap:wrap; gap:14px; }
@media (max-width:560px){
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:12px; padding:20px 0; text-align:left; }
}
.footer-social{ display:flex; align-items:center; gap:14px; }
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; color:rgba(245,240,227,0.6); transition:color .25s ease; }
.footer-social a:hover{ color:var(--brass-light); }

/* ============================================================
   App pages: auth, shop extras, dashboard, admin
   ============================================================ */

.page-header{ background:var(--green-deep); padding:56px 0 40px; color:var(--ivory); }
.page-header h1{ color:var(--ivory); font-size:clamp(28px,3.6vw,40px); }
.page-header p{ margin-top:10px; color:rgba(245,240,227,0.72); max-width:52ch; }
.crumb{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--brass-light); margin-bottom:14px; display:block; }

.app-main{ min-height:60vh; padding:64px 0; }
.app-main.tight{ padding:48px 0; }

/* Flash / alerts */
.alert{ padding:14px 18px; border-radius:2px; font-size:14px; margin-bottom:24px; border:1px solid transparent; }
.alert-success{ background:#E9F1EA; color:#1E4638; border-color:#B9D3BE; }
.alert-error{ background:#F7E9E5; color:#7A3324; border-color:#E4BBAB; }
.alert-info{ background:var(--cream); color:var(--ink-soft); border-color:var(--line); }

/* Auth cards */
.auth-wrap{ max-width:440px; margin:0 auto; }
.auth-card{ background:var(--ivory); border:1px solid var(--line); padding:44px 40px; }
.auth-card h1{ font-size:28px; margin-bottom:8px; }
.auth-card .sub{ color:var(--ink-soft); font-size:14.5px; margin-bottom:32px; display:block; }
.auth-foot{ margin-top:24px; text-align:center; font-size:14px; color:var(--ink-soft); }
.auth-foot a{ color:var(--brass-dark); font-weight:600; text-decoration:none; }
.auth-foot a:hover{ text-decoration:underline; }

/* Forms */
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:8px; text-transform:uppercase; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); background:var(--ivory);
  font-family:var(--sans); font-size:15px; color:var(--ink); border-radius:2px;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brass); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }
.field-hint{ font-size:12px; color:var(--ink-soft); margin-top:6px; }

/* Payment methods (checkout) */
.payment-methods-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px;
}
.payment-method-card{
  position:relative; display:block; border:1px solid var(--line); border-radius:3px;
  padding:14px 16px 14px 40px; cursor:pointer; background:var(--ivory);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.payment-method-card:hover{ border-color:var(--brass-light); }
.payment-method-card:has(input:checked){
  border-color:var(--brass); background:var(--cream);
  box-shadow:0 0 0 1px var(--brass);
}
.payment-method-card input[type="radio"]{
  position:absolute; top:16px; left:14px; width:16px; height:16px; margin:0; accent-color:var(--brass);
}
.payment-method-card .pm-card-body{ display:flex; flex-direction:column; gap:4px; }
.payment-method-card .pm-label{ font-weight:600; color:var(--ink); font-size:14.5px; }
.payment-method-card .pm-handle{ font-size:12.5px; color:var(--brass-dark); font-family:var(--sans); word-break:break-word; }
.payment-method-card .pm-handle-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.payment-method-card .pm-instructions{ font-size:12px; color:var(--ink-soft); line-height:1.5; }
.pm-copy{
  display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); background:var(--ivory);
  border-radius:2px; padding:2px 7px; font-size:11px; line-height:1.6; color:var(--ink-soft); cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.pm-copy:hover{ border-color:var(--brass); color:var(--brass-dark); }
.pm-copy.copied{ border-color:var(--brass); color:var(--brass-dark); }
.pm-copy svg{ display:block; flex-shrink:0; }
@media (max-width:520px){
  .payment-methods-grid{ grid-template-columns:1fr; }
}

/* Cards / panels */
.panel{ background:var(--ivory); border:1px solid var(--line); padding:32px; }
.panel + .panel{ margin-top:24px; }
.panel h2{ font-size:20px; margin-bottom:20px; }

/* Badges */
.badge{ display:inline-flex; align-items:center; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; }
.badge-pending{ background:#F0E6C8; color:#7A5B1E; }
.badge-processing{ background:#DCE8EA; color:#2A5C63; }
.badge-shipped{ background:#DCE4F5; color:#2E4A8B; }
.badge-completed{ background:#DCEEE0; color:#1E4638; }
.badge-cancelled{ background:#F2DBD6; color:#7A3324; }

/* Tables */
.table-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:14.5px; }
table.data th{ text-align:left; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--brass-dark); padding:12px 14px; border-bottom:2px solid var(--line); white-space:nowrap; }
table.data td{ padding:14px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.data tr:last-child td{ border-bottom:none; }
table.data img.thumb{ width:48px; height:48px; object-fit:cover; border-radius:2px; }
.row-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.row-actions a, .row-actions button{ font-size:13px; font-weight:600; text-decoration:none; color:var(--green-mid); background:none; border:none; padding:0; cursor:pointer; }
.row-actions a:hover, .row-actions button:hover{ color:var(--brass-dark); }
.row-actions .danger{ color:#8B3A3A; }
.row-actions .danger:hover{ color:#A34747; }
.empty-note{ padding:40px; text-align:center; color:var(--ink-soft); }

/* Dashboard / admin shell */
.shell{ display:grid; grid-template-columns:230px 1fr; gap:0; min-height:70vh; }
@media (max-width:820px){ .shell{ grid-template-columns:1fr; } }
.side-nav{ background:var(--green-deep); padding:36px 22px; }
.side-nav .brand{ color:var(--ivory); font-family:var(--serif); font-size:19px; margin-bottom:6px; display:block; }
.side-nav .brand-sub{ color:var(--brass-light); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; display:block; margin-bottom:32px; }
.side-nav a{ display:block; padding:11px 14px; margin-bottom:4px; color:rgba(245,240,227,0.78); text-decoration:none; font-size:14.5px; font-weight:500; border-radius:2px; transition:background .2s ease, color .2s ease; }
.side-nav a:hover{ background:rgba(198,161,91,0.14); color:var(--ivory); }
.side-nav a.active{ background:var(--brass); color:var(--green-deep); font-weight:700; }
.side-nav .divider{ border-top:1px solid rgba(198,161,91,0.22); margin:18px 0; }
.content-area{ padding:44px 44px 60px; }
@media (max-width:600px){ .content-area{ padding:28px 20px 44px; } }
.content-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:32px; flex-wrap:wrap; }
.content-head h1{ font-size:26px; }

/* Stat cards */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:36px; }
@media (max-width:900px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .stat-grid{ grid-template-columns:1fr; } }
.stat-card{ background:var(--ivory); border:1px solid var(--line); padding:24px; }
.stat-card .num{ font-family:var(--serif); font-size:30px; color:var(--green-deep); }
.stat-card .label{ font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; margin-top:6px; }

/* Cart page */
.cart-item{ display:grid; grid-template-columns:80px 1fr auto auto auto; align-items:center; gap:18px; padding:18px 0; border-bottom:1px solid var(--line); }
@media (max-width:640px){ .cart-item{ grid-template-columns:60px 1fr; grid-template-areas:"img name" "img qty" "img price"; row-gap:8px; } }
.cart-item img{ width:80px; height:80px; object-fit:cover; }
.cart-item .qty-input{ width:64px; padding:8px; border:1px solid var(--line); text-align:center; }
.cart-summary{ margin-top:24px; padding-top:24px; border-top:2px solid var(--line); display:flex; justify-content:flex-end; }
.cart-summary .total-box{ text-align:right; }
.cart-summary .total-amount{ font-family:var(--serif); font-size:28px; color:var(--ink); margin:6px 0 18px; }

/* Product photo upload preview in admin form */
.image-preview{ width:160px; height:160px; object-fit:cover; border:1px solid var(--line); margin-bottom:12px; }

/* order detail */
.order-items-list{ display:flex; flex-direction:column; gap:14px; }
.order-line{ display:flex; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); font-size:14.5px; }
.order-line:last-child{ border-bottom:none; }
.summary-row{ display:flex; justify-content:space-between; font-size:14.5px; padding:6px 0; }
.summary-row.total{ font-family:var(--serif); font-size:19px; padding-top:14px; border-top:1px solid var(--line); margin-top:8px; }

/* Two-column layout used by checkout, order detail, admin order view —
   stacks to one column on tablet/mobile instead of squeezing side by side. */
.split-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:flex-start; }
@media (max-width:800px){ .split-layout{ grid-template-columns:1fr; gap:24px; } }

/* ---------- Product detail page ---------- */
.product-detail{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:flex-start; }
@media (max-width:800px){ .product-detail{ grid-template-columns:1fr; gap:32px; } }

.gallery-main{ aspect-ratio:1/1; overflow:hidden; background:var(--green-deep); border:1px solid var(--line); }
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.gallery-thumb{ width:72px; height:72px; overflow:hidden; border:2px solid transparent; cursor:pointer; padding:0; background:var(--green-deep); border-radius:2px; flex:none; }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumb.active{ border-color:var(--brass); }
.gallery-thumb:hover{ border-color:var(--brass-light); }

.detail-info .cat{ font-size:12px; letter-spacing:0.14em; color:var(--brass-dark); font-weight:600; text-transform:uppercase; }
.detail-info h1{ font-size:clamp(28px,3.2vw,38px); margin-top:10px; line-height:1.1; }
.detail-info .price{ font-family:var(--serif); font-size:26px; margin-top:16px; display:block; }
.detail-info .desc{ margin-top:20px; color:var(--ink-soft); font-size:15.5px; line-height:1.75; }
.detail-info .stock-note{ display:block; margin-top:18px; }
.detail-actions{ margin-top:28px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.qty-select{ width:70px; padding:12px; border:1px solid var(--line); background:var(--ivory); text-align:center; font-family:var(--sans); font-size:15px; }

/* ---------- Admin: multi-photo gallery manager ---------- */
.admin-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:12px; margin-top:16px; }
.admin-gallery-item{ position:relative; border:1px solid var(--line); overflow:hidden; border-radius:2px; }
.admin-gallery-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.admin-gallery-item .img-actions{ position:absolute; inset:0; background:rgba(18,42,34,0.72); opacity:0; transition:opacity .2s ease; display:flex; align-items:center; justify-content:center; gap:6px; }
.admin-gallery-item:hover .img-actions, .admin-gallery-item:focus-within .img-actions{ opacity:1; }
.admin-gallery-item .img-actions form{ margin:0; }
.admin-gallery-item .img-actions button{ font-size:10.5px; font-weight:600; padding:5px 8px; background:var(--ivory); color:var(--ink); border:none; cursor:pointer; border-radius:2px; }
.admin-gallery-item .img-actions button.danger{ background:#8B3A3A; color:var(--ivory); }
.admin-gallery-item.is-cover{ border-color:var(--brass); }
.admin-gallery-item .cover-tag{ position:absolute; bottom:6px; left:6px; background:var(--brass); color:var(--green-deep); font-size:10px; font-weight:700; padding:2px 7px; border-radius:2px; letter-spacing:0.03em; text-transform:uppercase; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }