/*
 * Knightfall storefront system
 *
 * This is the final public-site layer shared by the homepage and every PHP
 * storefront route. Admin pages intentionally do not load this file.
 */

:root {
  --store-frame: 1344px;
  --store-gutter: clamp(24px, 3.35vw, 48px);
  --store-ink: #101317;
  --store-muted: #6d706e;
  --store-line: #e2e4e7;
  --store-paper: #f4f4f5;
  --store-surface: #fff;
}

html:not([data-admin="true"]) body,
html:not([data-admin="true"]) button,
html:not([data-admin="true"]) input,
html:not([data-admin="true"]) select,
html:not([data-admin="true"]) textarea {
  font-family: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html:not([data-admin="true"]) .shell {
  width: min(var(--store-frame), calc(100% - (var(--store-gutter) * 2)));
}

html:not([data-admin="true"]) .page h1,
html:not([data-admin="true"]) .page h2,
html:not([data-admin="true"]) .page h3,
html:not([data-admin="true"]) .shop-hero h1,
html:not([data-admin="true"]) .category-page-title,
html:not([data-admin="true"]) .product-copy-panel h1,
html:not([data-admin="true"]) .tracking-page-heading h1,
html:not([data-admin="true"]) .auth-intro h1,
html:not([data-admin="true"]) .auth-card h2 {
  font-family: "Syne", "Manrope", sans-serif;
}

html:not([data-admin="true"]) .site-header {
  background: rgba(255, 255, 255, .94);
}

html:not([data-admin="true"]) .page {
  padding-top: clamp(44px, 5vw, 72px);
}

html:not([data-admin="true"]) .shop-hero h1 {
  font-weight: 650;
  letter-spacing: -.055em;
}

html:not([data-admin="true"]) .product-copy-panel h1 {
  font-weight: 650;
  letter-spacing: -.05em;
}

/* Product-card prices must remain immediately scannable beside long titles. */
html:not([data-admin="true"]) .product-card .product-price,
body[data-home-page="true"] .catalog-product-row .product-price,
body[data-home-page="true"] #featured-product-grid .product-price {
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

html:not([data-admin="true"]) .product-card .product-price s,
body[data-home-page="true"] .catalog-product-row .product-price s,
body[data-home-page="true"] #featured-product-grid .product-price s {
  font-size: .72rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* Shared editorial/support pages. */
.content-page {
  width: min(1040px, 100%);
  margin: 0 auto;
}

.content-page-hero {
  display: grid;
  gap: 18px;
  max-width: 800px;
  margin-bottom: clamp(38px, 6vw, 72px);
}

.content-page-hero .content-page-label {
  margin: 0;
  color: var(--store-muted);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.content-page-hero h1 {
  margin: 0;
  font-size: clamp(2.8rem, 6vw, 5.8rem);
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: .92;
  text-transform: uppercase;
}

.content-page-hero > p:last-child {
  max-width: 670px;
  margin: 0;
  color: var(--store-muted);
  font-size: clamp(.96rem, 1.4vw, 1.08rem);
  line-height: 1.7;
}

.content-page-list {
  display: grid;
  border-top: 1px solid var(--store-line);
}

.content-page-item {
  display: grid;
  grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 6vw, 86px);
  padding: clamp(28px, 4vw, 46px) 0;
  border-bottom: 1px solid var(--store-line);
}

.content-page-item h2 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.content-page-item p {
  margin: 0;
  color: #50545a;
  font-size: .94rem;
  line-height: 1.78;
}

.content-page-item a {
  color: var(--store-ink);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.content-page-updated {
  margin: 28px 0 0;
  color: var(--store-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* FAQ is interactive without requiring JavaScript. */
.content-faq {
  border-top: 1px solid var(--store-line);
}

.content-faq details {
  border-bottom: 1px solid var(--store-line);
}

.content-faq summary {
  display: grid;
  min-height: 86px;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  font-family: "Syne", "Manrope", sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 620;
  list-style: none;
}

.content-faq summary::-webkit-details-marker { display: none; }
.content-faq summary::after {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--store-line);
  border-radius: 50%;
  content: "+";
  font-family: "Manrope", sans-serif;
  font-size: 1.1rem;
}
.content-faq details[open] summary::after { content: "−"; }
.content-faq p {
  max-width: 760px;
  margin: -5px 54px 30px 0;
  color: #50545a;
  line-height: 1.75;
}

/* Contact page: a composed workspace instead of an unframed form. */
.contact-page-layout {
  display: grid;
  grid-template-columns: minmax(230px, .65fr) minmax(0, 1.35fr);
  align-items: start;
  gap: clamp(34px, 7vw, 96px);
}

.contact-page-aside {
  display: grid;
  gap: 28px;
  padding-top: 8px;
}

.contact-page-aside article {
  padding-top: 18px;
  border-top: 1px solid var(--store-line);
}

.contact-page-aside h2,
.contact-page-aside p { margin: 0; }
.contact-page-aside h2 {
  margin-bottom: 8px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.contact-page-aside p,
.contact-page-aside a {
  color: var(--store-muted);
  font-size: .86rem;
  line-height: 1.65;
}

.contact-page-form {
  max-width: none;
  padding: clamp(24px, 4.5vw, 48px);
  border: 1px solid var(--store-line);
  border-radius: 14px;
  background: var(--store-surface);
}

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

.contact-page-form input,
.contact-page-form textarea {
  border-radius: 6px;
}

.contact-page-form > button {
  min-height: 50px;
  border-radius: 7px;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.contact-page-consent {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: start;
  gap: 10px !important;
  color: var(--store-muted) !important;
  font-size: .74rem !important;
  font-weight: 550 !important;
  line-height: 1.55;
}
.contact-page-consent input {
  width: 18px;
  min-height: 18px;
  margin-top: 1px;
}

/* Shared PHP footer aligns with the same 1344px frame as the homepage. */
html:not([data-admin="true"]) .site-footer {
  padding: clamp(58px, 7vw, 88px) 0 28px;
}

html:not([data-admin="true"]) .site-footer-main {
  grid-template-columns: minmax(300px, 1.65fr) repeat(2, minmax(150px, .65fr));
  gap: clamp(38px, 7vw, 104px);
}

html:not([data-admin="true"]) .site-footer-brand {
  gap: 16px;
}

html:not([data-admin="true"]) .site-footer-brand .site-footer-instagram {
  justify-self: start;
}

html:not([data-admin="true"]) .site-footer-main > nav:last-child {
  width: max-content;
  justify-self: end;
}

html:not([data-admin="true"]) .site-footer-legal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  margin-top: 46px;
}

html:not([data-admin="true"]) .site-footer-legal > :last-child {
  justify-self: end;
  text-align: right;
}

/* Homepage newsletter + footer: one frame and one column rhythm. */
body[data-home-page="true"] .site-footer-section {
  padding: 46px var(--store-gutter) 24px !important;
}

body[data-home-page="true"] .site-footer-section > div {
  width: min(var(--store-frame), 100%);
  max-width: var(--store-frame) !important;
}

body[data-home-page="true"] #newsletter {
  display: grid !important;
  grid-template-columns: minmax(280px, .8fr) minmax(440px, 1.2fr);
  align-items: center !important;
  gap: clamp(34px, 5vw, 64px) !important;
  margin-bottom: 42px !important;
  padding: 28px 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f3f4f5 !important;
  box-shadow: none !important;
  text-align: left;
}

body[data-home-page="true"] #newsletter > div {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
}

body[data-home-page="true"] #newsletter form {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) 136px;
  gap: 10px !important;
}

body[data-home-page="true"] #newsletter form input {
  width: 100% !important;
}

body[data-home-page="true"] #newsletter form input,
body[data-home-page="true"] #newsletter form .site-button {
  min-height: 50px;
}

body[data-home-page="true"] #newsletter form .site-button {
  width: 136px;
  min-width: 136px;
}

body[data-home-page="true"] #newsletter form + p {
  margin-top: 10px !important;
  line-height: 1.55 !important;
}

body[data-home-page="true"] .home-footer {
  display: grid !important;
  grid-template-columns: minmax(360px, 1.2fr) repeat(2, minmax(150px, .45fr)) !important;
  gap: clamp(34px, 5vw, 64px) !important;
  margin-bottom: 28px !important;
}

body[data-home-page="true"] .home-footer > div {
  grid-column: auto !important;
  grid-column-start: auto !important;
}

body[data-home-page="true"] .home-footer > div:last-child {
  width: max-content;
  justify-self: end;
}

body[data-home-page="true"] .home-footer .footer-instagram-icon {
  align-self: flex-start;
}

body[data-home-page="true"] .home-footer ul > * + * {
  margin-top: 10px !important;
}

body[data-home-page="true"] .home-footer > div:first-child {
  justify-content: flex-start;
  gap: 20px;
}

body[data-home-page="true"] .home-footer > div:first-child p {
  margin-bottom: 0 !important;
}

body[data-home-page="true"] .footer__column--info {
  padding: 14px 0 16px;
  border-top: 1px solid var(--store-line);
}

body[data-home-page="true"] .footer-legal {
  padding-top: 18px;
}

body[data-home-page="true"] .footer-legal > :first-child {
  justify-self: start;
}

body[data-home-page="true"] .footer-legal > :last-child {
  justify-self: end;
}

@media (max-width: 900px) {
  html:not([data-admin="true"]) .site-footer-main {
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(120px, .65fr));
    gap: 34px;
  }

  body[data-home-page="true"] #newsletter {
    grid-template-columns: 1fr;
    gap: 24px !important;
  }

  body[data-home-page="true"] .home-footer {
    grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(120px, .55fr)) !important;
    gap: 28px !important;
  }
}

@media (max-width: 680px) {
  :root { --store-gutter: 16px; }

  html:not([data-admin="true"]) .shell {
    width: calc(100% - (var(--store-gutter) * 2));
  }

  html:not([data-admin="true"]) .page {
    padding-top: 36px;
  }

  html:not([data-admin="true"]) .product-card .product-price,
  html:not([data-admin="true"]) .product-title-row .product-price,
  body[data-home-page="true"] .catalog-product-row .product-price,
  body[data-home-page="true"] #featured-product-grid .product-price {
    font-size: .9rem !important;
  }

  html:not([data-admin="true"]) .product-card .product-price s,
  body[data-home-page="true"] .catalog-product-row .product-price s,
  body[data-home-page="true"] #featured-product-grid .product-price s {
    font-size: .66rem !important;
  }

  .content-page-hero {
    gap: 14px;
    margin-bottom: 36px;
  }

  .content-page-hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.5rem);
  }

  .content-page-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 25px 0;
  }

  .content-faq summary {
    min-height: 78px;
    font-size: 1rem;
  }

  .content-faq p {
    margin-right: 0;
  }

  .contact-page-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .contact-page-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .contact-page-form {
    padding: 22px 18px;
  }

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

  html:not([data-admin="true"]) .site-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 14px;
    text-align: center;
  }

  html:not([data-admin="true"]) .site-footer-brand {
    grid-column: 1 / -1;
    justify-items: center;
  }

  html:not([data-admin="true"]) .site-footer-brand .site-footer-instagram {
    justify-self: center;
  }

  html:not([data-admin="true"]) .site-footer-main > nav:last-child {
    width: auto;
    justify-self: stretch;
  }

  html:not([data-admin="true"]) .site-footer-legal {
    grid-template-columns: 1fr;
  }

  html:not([data-admin="true"]) .site-footer-legal > :last-child {
    justify-self: center;
    text-align: center;
  }

  body[data-home-page="true"] .site-footer-section {
    padding: 38px var(--store-gutter) 20px !important;
  }

  body[data-home-page="true"] #newsletter {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 22px !important;
    margin-bottom: 34px !important;
    padding: 24px 18px !important;
    text-align: center;
  }

  body[data-home-page="true"] #newsletter > div {
    text-align: center !important;
  }

  body[data-home-page="true"] #newsletter form {
    grid-template-columns: 1fr;
    gap: 10px !important;
  }

  body[data-home-page="true"] #newsletter form .site-button {
    width: 100%;
    min-width: 0;
  }

  body[data-home-page="true"] #newsletter form + p {
    margin-top: 11px !important;
    font-size: .72rem !important;
    text-align: left;
  }

  body[data-home-page="true"] .home-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px 14px !important;
    margin-bottom: 24px !important;
    text-align: center;
  }

  body[data-home-page="true"] .home-footer > div:first-child {
    grid-column: 1 / -1 !important;
    align-items: center;
  }

  body[data-home-page="true"] .home-footer > div:last-child {
    width: auto;
    justify-self: stretch;
  }

  body[data-home-page="true"] .home-footer .footer-instagram-icon {
    align-self: center;
  }

  body[data-home-page="true"] .footer-legal {
    gap: 10px;
  }

  body[data-home-page="true"] .footer-legal > :first-child,
  body[data-home-page="true"] .footer-legal > :last-child {
    justify-self: center;
  }
}

@media (max-width: 420px) {
  .contact-page-aside { grid-template-columns: 1fr; }
}

@media(max-width:700px){
 html:not([data-admin="true"]) .site-header .shell,
 body[data-home-page="true"] #header-pill{padding-right:var(--store-gutter)!important;padding-left:var(--store-gutter)!important}
}