/* =========================================================
   PAGHEERA – CLEAN STYLES (consolidated)
   ========================================================= */

/* ===== Brand Palette (light, surfy, earthy) ===== */
:root {
  --pag-bg: #ffffff;
  --pag-bg-soft: #f9f6ef;
  --pag-surface: #ffffff;

  --pag-border-soft: #e2ddcf;
  --pag-border-strong: #c6bca3;

  --pag-text-main: #212121;
  --pag-text-muted: #7a7a72;
  --pag-text-soft: #a39b8c;

  --pag-accent: #6b705c;       /* olive */
  --pag-accent-soft: #96a186;
  --pag-accent-warm: #c26a4a;

  --pag-chip-bg: #efe6d4;
  --pag-chip-text: #5c5749;

  /* optional wordmark vars (if you use them in templates) */
  --pag-logo-color: #1f1f1f;
  --pag-logo-color-dark: #f5f5f2;
}

/* ===== Base ===== */
html, body { height: 100%; }

body.pag-body {
  background-color: var(--pag-bg);
  color: var(--pag-text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ===== Wordmark (Header Typo) ===== */
.pag-brand {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;            /* Regular/Medium */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pag-logo-color);
  text-decoration: none;
  white-space: nowrap;
}
.pag-brand:hover { color: var(--pag-logo-color); }

@media (prefers-color-scheme: dark) {
  .pag-brand { color: var(--pag-logo-color-dark); }
}

/* ===== Layout ===== */
.pag-main { min-height: calc(100vh - 72px - 64px); }

/* ===== Navbar ===== */
.pag-navbar {
  background: var(--pag-surface);
  border-bottom: 1px solid var(--pag-border-soft);
}

.pag-navbar .nav-link {
  color: var(--pag-text-muted);
  font-size: 0.9rem;
}
.pag-navbar .nav-link:hover,
.pag-navbar .nav-link:focus,
.pag-navbar .nav-link.active {
  color: var(--pag-text-main);
}

/* (Optional small emblem if you use it in footer) */
.pag-logo-circle {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #f4e4c0, #c7a574);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* ===== Buttons & Links ===== */
.pag-btn-primary {
  background: var(--pag-accent);
  color: #fdfaf5;
  border: none;
  border-radius: 999px;
  padding: 0.65rem 1.5rem;
  font-size: 0.92rem;
}
.pag-btn-primary:hover {
  background: var(--pag-accent-soft);
  color: #fdfaf5;
}

.pag-btn-ghost {
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--pag-border-soft);
  background: transparent;
  color: var(--pag-text-main);
  font-size: 0.9rem;
}
.pag-btn-ghost:hover {
  border-color: var(--pag-accent);
  background: #f7f2e9;
  color: var(--pag-text-main);
}

.pag-link-soft {
  font-size: 0.9rem;
  color: var(--pag-text-muted);
  text-decoration: none;
}
.pag-link-soft:hover { color: var(--pag-accent-warm); }

.pag-btn-on-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pag-btn-on-hero.primary {
  background: rgba(150, 161, 134, 0.95); /* dein grünliches accent-soft */
  color: #1b1b1b;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.pag-btn-on-hero.primary:hover {
  background: rgba(150, 161, 134, 1);
  color: #1b1b1b;
}

.pag-btn-on-hero.secondary {
  background: rgba(255, 255, 255, 0.10);
  color: #f5f5f2;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
}
.pag-btn-on-hero.secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.pag-tabs {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pag-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid var(--pag-border-soft);
  color: var(--pag-text-main);
  background: transparent;
}

.pag-tab:hover {
  border-color: var(--pag-border-strong);
  background: #f7f2e9;
}

.pag-tab.active {
  background: var(--pag-accent);
  color: #fdfaf5;
  border-color: transparent;
}

.pag-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ===== Chips ===== */
.pag-chip {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: var(--pag-chip-bg);
  color: var(--pag-chip-text);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

/* ===== Sections ===== */
.pag-section { padding: 2.75rem 0; }

.pag-section-title {
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pag-section-sub {
  font-size: 0.95rem;
  color: var(--pag-text-muted);
  max-width: 34rem;
}

/* =========================================================
   SHOP LIST – Product Cards
   ========================================================= */
.pag-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.pag-card-link:hover { color: inherit; }

.pag-product-card {
  background: var(--pag-surface);
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--pag-border-soft);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.03);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}
.pag-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
  border-color: var(--pag-border-strong);
}

/* consistent mockup framing */
.pag-product-thumb {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f2ece1;
}
.pag-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pag-product-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--pag-text-soft);
  background: linear-gradient(135deg, #f3ede3, #f9f5ee);
  border-radius: 0.8rem;
  border: 1px dashed var(--pag-border-soft);
}

.pag-product-title {
  font-size: 1rem;
  font-weight: 560;
}
.pag-product-meta {
  font-size: 0.78rem;
  color: var(--pag-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.pag-product-price {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pag-text-main);
  white-space: nowrap;
}

/* Bootstrap ratio helper (used on cards sometimes) */
.ratio { border-radius: 1rem; overflow: hidden; }

/* =========================================================
   PRODUCT DETAIL – Two images + sticky box + sizes + accordion
   ========================================================= */
.pag-detail-media {
  background: var(--pag-surface);
  border: 1px solid var(--pag-border-soft);
  border-radius: 1rem;
  overflow: hidden;
}

.pag-detail-media-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pag-text-soft);
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--pag-border-soft);
  background: #fff;
}

/* key: one single definition */
.pag-detail-img {
  width: 100%;
  height: 520px;         /* bounded height */
  object-fit: contain;   /* don’t crop */
  display: block;
  background: #fff;
}

.pag-detail-box {
  position: sticky;
  top: 1.25rem;
  background: var(--pag-surface);
  border: 1px solid var(--pag-border-soft);
  border-radius: 1rem;
  padding: 1.25rem;
}

.pag-detail-title {
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.pag-detail-price {
  font-size: 1.1rem;
  font-weight: 650;
}
.pag-detail-lead {
  font-size: 0.95rem;
  color: var(--pag-text-muted);
  line-height: 1.55;
}
.pag-detail-note {
  font-size: 0.86rem;
  color: var(--pag-text-soft);
}
.pag-detail-desc {
  font-size: 0.92rem;
  color: var(--pag-text-muted);
  border-left: 2px solid var(--pag-border-soft);
  padding-left: 0.85rem;
}

.pag-detail-meta-label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pag-text-soft);
}
.pag-detail-meta-value {
  font-size: 0.95rem;
  color: var(--pag-text-main);
}

/* size pills */
.pag-size-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}
@media (max-width: 575.98px) {
  .pag-size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pag-size-pill {
  display: block;
  cursor: pointer;
  user-select: none;
}
.pag-size-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pag-size-pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.58rem 0.2rem;
  border-radius: 999px;
  border: 1px solid var(--pag-border-soft);
  background: #fff;
  font-size: 0.9rem;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.pag-size-pill:hover span {
  border-color: var(--pag-border-strong);
  transform: translateY(-1px);
}
.pag-size-pill input:checked + span {
  border-color: var(--pag-accent);
  background: rgba(107, 112, 92, 0.10);
  box-shadow: 0 0 0 2px rgba(107, 112, 92, 0.10) inset;
}

/* accordion */
.pag-acc .accordion-item {
  border: 1px solid var(--pag-border-soft);
  border-radius: 0.85rem;
  overflow: hidden;
  background: #fff;
}
.pag-acc .accordion-item + .accordion-item { margin-top: 0.75rem; }

.pag-acc .accordion-button {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pag-text-main);
  background: #fff;
  box-shadow: none;
  padding: 0.95rem 1rem;
}
.pag-acc .accordion-button:not(.collapsed) {
  color: var(--pag-text-main);
  background: #fff;
}
.pag-acc .accordion-button:focus { box-shadow: none; }

.pag-acc .accordion-body {
  font-size: 0.92rem;
  color: var(--pag-text-muted);
  padding: 0.85rem 1rem 1rem;
}

/* =========================================================
   HOME – Landing Hero (full width image + overlay)
   ========================================================= */
.pag-hero-visual {
  position: relative;
  width: 100%;
  height: 32vh;
  min-height: 260px;
  max-height: 380px;
  overflow: hidden;
}
.pag-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%; /* X% Y%  -> Y kleiner = mehr "oben" zeigen */
  display: block;
}
.pag-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.40)
  );
  display: flex;
  align-items: center;
}
.pag-hero-content {
  max-width: 560px;
  color: #f5f5f2;
}
.pag-hero-title {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.pag-hero-title span {
  font-weight: 400;
  opacity: 0.9;
}
.pag-hero-sub {
  margin-top: 1rem;
  font-size: 1rem;
  color: rgba(245, 245, 242, 0.85);
}
.pag-hero-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

/* newsletter block */
.pag-newsletter {
  border: 1px solid var(--pag-border-soft);
  border-radius: 1.25rem;
  padding: 1.6rem 1.7rem;
  background: var(--pag-surface);
}
.pag-newsletter-title {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.pag-newsletter-sub {
  color: var(--pag-text-muted);
  font-size: 0.95rem;
  max-width: 34rem;
}
.pag-newsletter-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
}
.pag-input {
  border-radius: 999px;
  border: 1px solid var(--pag-border-soft);
  padding: 0.7rem 1rem;
}
.pag-newsletter-fineprint {
  font-size: 0.82rem;
  color: var(--pag-text-soft);
}
@media (max-width: 991.98px) {
  .pag-newsletter-form {
    grid-template-columns: 1fr;
  }
  .pag-newsletter-form .btn { width: 100%; }
}

/* =========================================================
   TOPBAR (optional)
   ========================================================= */
.pag-topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--pag-border-soft);
}
.pag-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
}
.pag-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 240px;
}
.pag-topbar-badge {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--pag-border-soft);
  background: var(--pag-bg-soft);
  color: var(--pag-text-muted);
}
.pag-topbar-text {
  font-size: 0.9rem;
  color: var(--pag-text-muted);
}
.pag-topbar-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pag-topbar-input {
  min-width: 220px;
  border-radius: 999px;
  border: 1px solid var(--pag-border-soft);
  background: #fff;
  font-size: 0.9rem;
}
.pag-topbar-btn {
  white-space: nowrap;
  padding: 0.55rem 1.1rem;
}
@media (max-width: 767.98px) {
  .pag-topbar-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .pag-topbar-form { width: 100%; }
  .pag-topbar-input {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   FOOTER (single source of truth)
   ========================================================= */
.pag-footer {
  border-top: 1px solid var(--pag-border-soft);
  padding: 3rem 0 1.5rem;
  background: #fafafa;
}

.pag-footer-brand {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
}

.pag-footer-note {
  margin-top: 0.35rem;
  color: var(--pag-text-soft);
  font-size: 0.9rem;
  max-width: 22rem;
}

.pag-footer-links {
  display: flex;
  gap: 1.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.pag-footer-link {
  font-size: 0.9rem;
  color: var(--pag-text-muted);
  text-decoration: none;
}
.pag-footer-link:hover { color: var(--pag-accent); }

.pag-footer-bottom {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pag-border-soft);
  font-size: 0.8rem;
  color: var(--pag-text-soft);
}

@media (max-width: 767px) {
  .pag-footer-links { justify-content: flex-start; }
}

/* ===== Responsive tweaks (general) ===== */
@media (max-width: 767.98px) {
  .pag-section { padding: 2.2rem 0; }
}

/* ===== About layout ===== */
.pag-about-container {
  max-width: 980px;
}

.pag-about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

.pag-about-media {
  position: relative;
  margin: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--pag-border-soft);
  background: #f2ece1;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

.pag-about-img {
  width: 100%;
  height: clamp(320px, 46vh, 520px);
  object-fit: cover;
  display: block;
}

.pag-about-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  color: #f5f5f2;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0)
  );
}

.pag-about-intro {
  max-width: 24rem;
}

.pag-about-footnote {
  font-size: 0.9rem;
  color: var(--pag-text-soft);
  border-left: 2px solid var(--pag-border-soft);
  padding-left: 0.85rem;
}

@media (max-width: 991.98px) {
  .pag-about-hero {
    grid-template-columns: 1fr;
  }
  .pag-about-intro {
    max-width: none;
  }
}

/* About: big inline portrait */
.pag-about-inline-portrait{
  text-align:center;
}

.pag-about-inline-img{
  width: min(320px, 70vw);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid var(--pag-border-soft);
  box-shadow: 0 14px 40px rgba(0,0,0,0.06);
}

.pag-about-inline-caption{
  margin-top: .75rem;
  font-size: .9rem;
  color: var(--pag-text-soft);
}