:root {
  --ink: #1f261d;
  --muted: #66705e;
  --line: #d5d8c9;
  --paper: #f3f0e6;
  --white: #ffffff;
  --navy: #2f4327;
  --navy-dark: #172114;
  --teal: #4f6f38;
  --gold: #c28f44;
  --soft: #e8eadb;
  --danger: #b33131;
  --shadow: 0 18px 45px rgba(31, 38, 29, 0.15);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(23, 33, 20, 0.96);
  color: var(--white);
  backdrop-filter: blur(14px);
}

.nav-shell {
  width: min(1180px, calc(100% - 32px));
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.1);
  color: #e3b75c;
  font-weight: 700;
}

.brand-title {
  display: grid;
  line-height: 1.15;
}

.brand-title strong {
  font-size: 16px;
}

.brand-title span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.76);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.language-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.language-btn {
  min-width: 40px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 700;
}

.language-btn:hover,
.language-btn.active {
  background: var(--white);
  color: var(--navy);
}

.nav-link {
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.86);
  padding: 9px 13px;
  border-radius: 6px;
}

.nav-link:hover,
.nav-link.active {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
}

.admin-link {
  border-color: rgba(227, 183, 92, 0.42);
  color: #e3b75c;
}

.hero {
  min-height: calc(100vh - 72px);
  display: grid;
  align-items: end;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(23, 33, 20, 0.92), rgba(23, 33, 20, 0.68), rgba(23, 33, 20, 0.22)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Crect width='1600' height='900' fill='%23273322'/%3E%3Cg opacity='.9'%3E%3Cpath d='M0 110 C160 40 255 132 370 82 C535 10 625 150 790 92 C960 32 1075 118 1210 65 C1375 0 1500 86 1600 32 L1600 300 C1470 365 1320 255 1180 326 C1015 410 920 275 765 352 C600 435 470 300 315 378 C170 450 95 360 0 410 Z' fill='%23435731'/%3E%3Cpath d='M0 360 C130 280 255 405 405 330 C575 245 650 425 825 335 C985 252 1090 410 1265 325 C1410 255 1510 350 1600 292 L1600 615 C1460 700 1320 570 1160 652 C995 735 875 590 725 675 C560 770 430 635 270 720 C135 790 65 705 0 752 Z' fill='%237b6e45'/%3E%3Cpath d='M-40 610 C130 520 260 668 430 575 C585 490 710 625 850 548 C1010 460 1145 610 1290 525 C1430 442 1540 530 1640 470 L1640 940 L-40 940 Z' fill='%239a8a5b'/%3E%3Cpath d='M120 95 L190 58 L265 92 L225 160 L145 172 Z M1040 120 L1130 86 L1215 145 L1170 225 L1065 215 Z M510 455 L600 405 L690 470 L625 545 L525 530 Z M1240 690 L1350 645 L1450 725 L1375 815 L1265 792 Z' fill='%23171f14' opacity='.72'/%3E%3Cpath d='M315 180 L380 138 L470 190 L430 265 L335 255 Z M840 235 L915 205 L990 260 L965 345 L865 325 Z M180 560 L270 520 L360 590 L315 680 L205 660 Z M1020 705 L1115 675 L1210 740 L1165 825 L1050 805 Z' fill='%23536a3b' opacity='.78'/%3E%3C/g%3E%3Cg opacity='.23' stroke='%23d8c28a' stroke-width='3'%3E%3Cpath d='M0 145 H1600 M0 320 H1600 M0 500 H1600 M0 675 H1600'/%3E%3Cpath d='M210 0 V900 M430 0 V900 M650 0 V900 M870 0 V900 M1090 0 V900 M1310 0 V900 M1530 0 V900'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

.hero-inner,
.section,
.footer-inner {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.hero-inner {
  padding: 82px 0 54px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
}

h1,
h2,
h3 {
  line-height: 1.12;
  margin: 0;
}

h1 {
  max-width: 780px;
  font-size: clamp(40px, 7vw, 82px);
}

h2 {
  font-size: clamp(30px, 4vw, 48px);
}

h3 {
  font-size: 20px;
}

.hero-copy {
  max-width: 680px;
  margin: 22px 0 28px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(16px, 2vw, 20px);
}

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

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 10px 16px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
}

.btn:hover {
  background: var(--navy-dark);
}

.btn.secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.42);
}

.btn.light,
.btn.ghost {
  background: var(--white);
  color: var(--navy);
  border-color: var(--line);
}

.btn.danger {
  background: var(--danger);
}

.section {
  padding: 64px 0;
}

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

.section-head p,
.muted {
  color: var(--muted);
}

.section-head p {
  max-width: 620px;
  margin: 10px 0 0;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.outdoor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -8px 0 26px;
}

.outdoor-tags button {
  border: 1px solid #c7b77c;
  border-radius: 6px;
  background: #fffaf0;
  color: #2f4327;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
}

.outdoor-tags button:hover,
.outdoor-tags button.active {
  border-color: #4f6f38;
  background: #2f4327;
  color: #ffffff;
}

.product-card,
.contact-box,
.form-panel,
.admin-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 12px 28px rgba(24, 36, 52, 0.07);
}

.product-card {
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff, #fbfaf3);
}

.product-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--soft);
  cursor: zoom-in;
}

.product-body {
  padding: 18px;
}

.product-body h3 {
  margin-bottom: 12px;
}

.product-description {
  min-height: 84px;
  max-height: 96px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid #edf0f3;
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: #f7f4e7;
  color: var(--muted);
  font-size: 15px;
}

.spec-list {
  display: grid;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.spec-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #eef1f4;
  padding-bottom: 7px;
}

.spec-line b {
  color: var(--ink);
}

.inquiry-link {
  width: 100%;
  margin-top: 4px;
  background: #4f6f38;
}

.inquiry-link:hover {
  background: #2f4327;
}

.detail-btn {
  width: 100%;
  margin-top: 10px;
}

.about-band {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.about-layout {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 42px;
  align-items: center;
}

.about-copy p {
  color: var(--muted);
  margin: 16px 0 0;
}

.metrics,
.capability-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.metric {
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 8px;
}

.metric strong {
  display: block;
  color: var(--navy);
  font-size: 28px;
}

.textile-panel {
  min-height: 430px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 18%, rgba(23, 33, 20, 0.92) 0 8%, transparent 9%),
    radial-gradient(circle at 72% 24%, rgba(79, 111, 56, 0.92) 0 12%, transparent 13%),
    radial-gradient(circle at 40% 62%, rgba(154, 138, 91, 0.86) 0 15%, transparent 16%),
    radial-gradient(circle at 84% 76%, rgba(65, 83, 49, 0.88) 0 13%, transparent 14%),
    repeating-linear-gradient(45deg, rgba(216, 194, 138, 0.18) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, #26331f, #536a3b 48%, #9a8a5b);
  box-shadow: var(--shadow);
}

.capability-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}

.capability {
  border-left: 4px solid var(--gold);
  background: var(--white);
  padding: 18px;
}

.capability p {
  color: var(--muted);
  margin: 8px 0 0;
}

.contact-layout {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 28px;
  align-items: start;
}

.contact-box,
.form-panel,
.admin-panel {
  padding: 24px;
}

.contact-row {
  padding: 15px 0;
  border-bottom: 1px solid #edf0f3;
}

.contact-row:last-child {
  border-bottom: 0;
}

.contact-row b {
  display: block;
  margin-bottom: 4px;
  color: var(--navy);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: grid;
  gap: 7px;
}

.field.full {
  grid-column: 1 / -1;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfaf3;
  padding: 9px 10px;
  font-weight: 700;
}

.checkbox-grid input {
  width: auto;
}

label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 12px;
  background: var(--white);
  color: var(--ink);
  outline: none;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input:focus,
textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(32, 116, 123, 0.12);
}

.notice {
  min-height: 22px;
  margin: 12px 0 0;
  color: var(--teal);
  font-weight: 700;
}

.admin-page {
  min-height: calc(100vh - 72px);
  background: #eef2f4;
}

.login-box {
  max-width: 440px;
  margin: 0 auto;
  padding-top: 72px;
}

.admin-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 38px 0 70px;
  display: none;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}

.admin-shell.active {
  display: grid;
}

.admin-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 43, 69, 0.58);
}

.modal-overlay.hidden {
  display: none;
}

.modal-card {
  width: min(720px, 100%);
  max-height: min(860px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
  padding: 24px;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.storefront-detail-card {
  width: min(980px, 100%);
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  gap: 22px;
  align-items: start;
}

.detail-image {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #151d13;
}

.detail-gallery {
  display: grid;
  gap: 10px;
}

.detail-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.detail-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 2px solid transparent;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
}

.detail-thumb.active {
  border-color: var(--gold);
}

.detail-info {
  display: grid;
  gap: 14px;
}

.detail-description {
  margin: 0;
  padding: 16px;
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: #f7f4e7;
  color: var(--muted);
}

.preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed #aeb9c4;
  border-radius: 8px;
  object-fit: cover;
  background: var(--soft);
}

.preview-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.preview-list img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed #aeb9c4;
  border-radius: 8px;
  object-fit: cover;
  background: var(--soft);
}

.preview-item {
  display: grid;
  gap: 6px;
}

.preview-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.preview-actions button {
  flex: 1;
  min-width: 56px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffaf0;
  color: var(--navy);
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
}

.preview-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.admin-table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid #edf0f3;
  vertical-align: middle;
  font-size: 14px;
}

th {
  color: var(--navy);
  background: #f4f7f8;
}

.thumb {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.small-btn {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--navy);
  padding: 7px 10px;
  font-weight: 700;
  white-space: nowrap;
}

.small-btn.delete {
  color: var(--danger);
}

.description-cell {
  min-width: 260px;
  max-width: 360px;
  color: var(--muted);
  line-height: 1.45;
}

.description-cell b {
  color: var(--navy);
}

.description-summary {
  display: -webkit-box;
  max-height: 78px;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.empty-state {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.footer {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.78);
  padding: 28px 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.hidden {
  display: none !important;
}

@media (max-width: 920px) {
  .nav-shell {
    min-height: auto;
    padding: 14px 0;
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-links {
    width: 100%;
    justify-content: flex-start;
  }

  .language-switcher {
    align-self: flex-start;
  }

  .product-grid,
  .capability-list,
  .admin-shell.active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-shell.active {
    grid-template-columns: 1fr;
  }

  .about-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: auto;
  }

  .hero-inner,
  .section {
    padding: 42px 0;
  }

  .section-head,
  .admin-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-grid,
  .capability-list,
  .metrics,
  .form-grid,
  .admin-shell.active {
    grid-template-columns: 1fr;
  }

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

  .textile-panel {
    min-height: 260px;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }
}