/* IMPORTANT (servietringe/index.html):
   This tool must keep website shell navigation visible and match shop styling.
   Keep links to index/shop/cart in header when editing this file. */

body.site-page {
  min-height: 100vh;
  perspective: none;
}

body.site-page::before,
body.site-page::after {
  content: none;
  display: none;
}

.sr-shell {
  max-width: 1460px;
  margin: 0 auto;
  padding: 18px 14px 42px;
}

.page.sr-app {
  width: min(1440px, 97vw);
  margin: 0 auto;
  gap: 14px;
}

.page.sr-app .hero,
.page.sr-app .panel {
  border: 1px solid rgba(255, 235, 167, 0.16);
  background: rgba(2, 6, 23, 0.35);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 235, 167, 0.05);
}

.page.sr-app .hero::before,
.page.sr-app .panel::before {
  background: radial-gradient(circle at center, rgba(255, 235, 167, 0.14), transparent 64%);
  opacity: 0.65;
}

.page.sr-app .hero h1 {
  color: #ffeba7;
}

.page.sr-app .hero p {
  color: rgba(223, 233, 255, 0.88);
}

.page.sr-app .hero-note {
  border-color: rgba(255, 235, 167, 0.4);
  background: rgba(255, 235, 167, 0.12);
  color: #fff2c7;
}

.page.sr-app .label-text {
  color: rgba(223, 233, 255, 0.82);
}

.page.sr-app .controls input[type="text"],
.page.sr-app .controls input[type="number"],
.page.sr-app .controls select,
.page.sr-app .sticky-controls select,
.page.sr-app .name-cell input,
.page.sr-app .offset-grid input,
.page.sr-app .offset-grid select {
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(2, 6, 23, 0.7);
  color: rgba(241, 245, 255, 0.96);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.page.sr-app .controls input::placeholder,
.page.sr-app .name-cell input::placeholder {
  color: rgba(196, 203, 218, 0.74);
}

.page.sr-app .controls select,
.page.sr-app .sticky-controls select {
  background-image: linear-gradient(165deg, rgba(2, 6, 23, 0.72), rgba(15, 23, 42, 0.8));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}

.page.sr-app .controls input[type="text"]:focus,
.page.sr-app .controls input[type="number"]:focus,
.page.sr-app .controls select:focus,
.page.sr-app .sticky-controls select:focus,
.page.sr-app .controls input[type="range"]:focus,
.page.sr-app .name-cell input:focus,
.page.sr-app .offset-grid input:focus,
.page.sr-app .offset-grid select:focus {
  border-color: rgba(255, 235, 167, 0.65);
  box-shadow:
    0 0 0 2px rgba(255, 235, 167, 0.15),
    0 0 0 1px rgba(255, 235, 167, 0.35) inset;
}

.page.sr-app .secondary-btn,
.page.sr-app .actions button,
.page.sr-app .align-btn,
.page.sr-app .size-modal-close {
  border: 1px solid rgba(255, 235, 167, 0.35);
  background: linear-gradient(150deg, rgba(36, 54, 95, 0.6), rgba(12, 20, 40, 0.92));
  color: rgba(246, 249, 255, 0.96);
}

.page.sr-app #btnAddToCart {
  border-color: rgba(125, 251, 193, 0.58);
  background: linear-gradient(150deg, rgba(18, 116, 92, 0.72), rgba(8, 49, 39, 0.92));
  color: #ecfff6;
}

.page.sr-app #btnAddToCart:hover {
  border-color: rgba(125, 251, 193, 0.85);
  box-shadow: 0 10px 24px rgba(125, 251, 193, 0.2);
}

.page.sr-app .secondary-btn:hover,
.page.sr-app .actions button:hover,
.page.sr-app .align-btn:hover,
.page.sr-app .size-modal-close:hover {
  border-color: rgba(255, 235, 167, 0.62);
  box-shadow: 0 10px 24px rgba(255, 235, 167, 0.16);
}

.page.sr-app .align-btn[aria-pressed="true"] {
  border-color: rgba(255, 235, 167, 0.78);
  box-shadow:
    0 0 0 1px rgba(255, 235, 167, 0.34) inset,
    0 6px 16px rgba(255, 235, 167, 0.15);
}

.page.sr-app .price-panel strong,
.page.sr-app .price-total strong {
  color: #ffeba7;
}

.page.sr-app .preview {
  border-color: rgba(148, 163, 184, 0.42);
  background:
    radial-gradient(circle at 18% 0%, rgba(148, 163, 184, 0.16), transparent 56%),
    rgba(2, 6, 23, 0.76);
}

.page.sr-app .size-modal-dialog {
  border-color: rgba(255, 235, 167, 0.26);
  background: rgba(8, 15, 34, 0.96);
}

.page.sr-app #cartStatus {
  margin-top: 2px;
  min-height: 1.2em;
}

@media (max-width: 960px) {
  .sr-shell {
    padding: 14px 10px 36px;
  }

  .page.sr-app {
    width: min(98vw, 1440px);
    gap: 12px;
  }
}