/* =====================================================================
   Life Imaging - "Warm and friendly" look (Option B), added 2026-10
   Parent-facing pages only (not loaded on /admin pages).
   To switch the new look off: delete the modern.css line in
   app/themes/Default/HEADER.php (or rename this file).
   ===================================================================== */

:root {
  --li-green: #045C36;
  --li-green-dark: #023D24;
  --li-leaf: #E2EED8;
  --li-leaf-2: #DCEBD2;
  --li-line: #DCE6D3;
  --li-bg: #F2F5EC;
  --li-text: #22301F;
  --li-muted: #55634F;
  --li-nav: #3C4A38;
  --li-note-bg: #FFE9A8;
  --li-note-text: #4D3600;
  --li-head: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --li-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ---------- Base ---------- */
html, html body {
  background: var(--li-bg) !important;
  background-image: none !important;
  color: var(--li-text);
  font-family: var(--li-body) !important;
  -webkit-text-size-adjust: 100%;
}
html body * { box-sizing: border-box; }
html body a, html body a:visited { color: var(--li-green); }
html body a:hover { color: var(--li-green-dark); }
html body img { max-width: 100%; height: auto; }

html body #page {
  width: auto;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 32px 8px;
}

/* ---------- Header card (logo + log out + menu) ---------- */
html body #header {
  width: auto;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 18px 28px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: visible;
}
html body #logo-image-container { float: none; margin: 0; min-height: 0; }
html body #logo-image { display: block; height: 64px; width: auto; max-width: 100%; }
html body #header h1 { float: none; width: auto; padding: 0; font-family: var(--li-head); }
html body #header h1 a { color: var(--li-green) !important; }

html body #header #logout {
  float: none; width: auto; padding: 0;
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; white-space: nowrap;
}
html body #header #logout a,
html body #header #logout a:visited {
  background: none; text-indent: 0;
  font-weight: 700; color: var(--li-green);
  padding: 11px 14px; border-radius: 999px;
  text-decoration: none;
}
html body #header #logout a.li-cart,
html body #header #logout a.li-cart:visited {
  background: var(--li-green); color: #fff; font-weight: 800;
  padding: 11px 20px;
  display: inline-flex; align-items: center; gap: 8px;
}
html body #header #logout a.li-cart:hover { background: var(--li-green-dark); }
html body #header #logout a.li-cart svg { width: 18px; height: 18px; flex-shrink: 0; }

html body #menu {
  width: auto; height: auto;
  background: #fff !important;
  border-radius: 0 0 24px 24px;
  padding: 8px 22px 18px;
  box-shadow: none;
}
html body #nav { display: flex; flex-wrap: wrap; gap: 6px; }
html body #nav li { float: none; position: relative; }
html body #nav a,
html body #menu a,
html body #menu a:visited {
  float: none;
  display: block;
  height: auto; line-height: 1.2;
  padding: 10px 16px;
  border-radius: 999px;
  background: none !important;
  font-family: var(--li-body) !important;
  font-size: 14px !important;
  font-weight: 700;
  color: var(--li-nav) !important;
  text-shadow: none;
}
html body #menu a:hover { background: var(--li-bg) !important; color: var(--li-green) !important; }
html body #menu a.menu-selected,
html body #menu a.selected,
html body #menu a.active {
  background: var(--li-leaf) !important;
  color: var(--li-green) !important;
  font-weight: 800;
}
/* little drop-down under "Shop" */
html body #nav .drop {
  top: 100%; left: 0; width: 200px; padding-top: 6px;
}
html body #nav .drop ul {
  background: #fff !important;
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(34, 48, 31, 0.14);
}
html body #nav li:hover .drop ul li a { color: var(--li-nav) !important; }
html body #nav li li a { width: auto; padding: 10px 14px; }
html body #nav li:hover .drop ul li a:hover { background: var(--li-leaf) !important; color: var(--li-green) !important; }

/* ---------- Two-column layout ---------- */
html body #section {
  width: auto;
  margin-top: 24px !important;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  overflow: visible;
}
html body #section-form {
  float: none;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  background: #fff !important;
  border-radius: 24px;
  padding: 28px 30px;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 1.55;
  color: var(--li-text);
}
html body #section-sidebar {
  float: none;
  flex: 0 0 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* pages without a sidebar use the full width */
html body #section > #section-form:only-child { width: 100%; }

/* ---------- Headings & text ---------- */
html body #section-form h2,
html body #section-form h1 {
  font-family: var(--li-head) !important;
  font-weight: 600 !important;
  font-size: 34px !important;
  line-height: 1.15;
  color: var(--li-green) !important;
  padding-bottom: 10px;
  margin: 0;
}
html body #section-form h2 a, html body #section-form h2 a:visited { color: var(--li-green); text-decoration: none; }
html body #section-form h2.title:empty { display: none; }
html body #section-form h2.title + h2 { margin-top: 0; }
html body #section-form h3 {
  font-family: var(--li-head);
  font-weight: 600;
  font-size: 22px;
  color: var(--li-text);
  padding: 8px 0 8px;
}
html body #section P { line-height: 1.6; }
html body #section-form p { margin: 0 0 10px; }
html body p.hint, html body small { font-style: normal; color: var(--li-muted); font-size: 14px; }
html body #section-form ul, html body #section-form ol { padding-left: 22px; margin: 0 0 12px; }
html body #section-form ul li { list-style: disc; margin-bottom: 4px; }
html body #section-form ol li { list-style: decimal; margin-bottom: 4px; }
html body #section-form table { max-width: 100%; }
html body #section-form iframe { max-width: 100%; }

/* yellow "please note" style boxes */
html body .errorbox, html body .successbox, html body .li-note {
  border-radius: 18px;
  padding: 14px 18px;
  font-weight: 700;
}
html body .li-note { background: var(--li-note-bg); color: var(--li-note-text); margin: 0 0 16px; }

/* ---------- School / gallery tiles ---------- */
html body #private,
html body #galleries,
html body #categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  width: auto !important;
  padding-top: 0 !important;
}
html body #private > :not(.gallery) { grid-column: 1 / -1; margin: 0; }
html body #categories:empty { display: none; }
html body #gallery-page > p { margin: 0 0 10px; }

html body .gallery,
html body .category {
  float: none;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px;
  background: var(--li-bg) !important;
  border: 0 !important;
  border-radius: 22px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
html body .gallery:hover,
html body .category:hover {
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(34, 48, 31, 0.14);
  transform: translateY(-2px);
}
html body .gallery table, html body .gallery tbody, html body .gallery tr, html body .gallery td,
html body .category table, html body .category tbody, html body .category tr, html body .category td {
  display: block; width: auto !important; height: auto !important; padding: 0;
}
html body .gallery .gallery-icon,
html body .category .category-icon {
  width: auto;
  height: 230px !important;
  padding: 8px !important;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
html body .gallery .gallery-icon img,
html body .category img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
html body .gallery .gallery-title,
html body .category .category-title {
  padding: 12px 6px 4px !important;
  font-family: var(--li-head);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  color: var(--li-text);
  text-decoration: none;
}

/* ---------- Photo grid inside a gallery ---------- */
html body #photos {
  width: auto !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  padding-top: 10px;
}
html body #photos .photo {
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px;
  background: var(--li-bg);
  border: 0;
  border-radius: 18px;
  text-align: left;
  transition: box-shadow .15s ease, background .15s ease;
}
html body #photos .photo:hover { background: #fff; box-shadow: 0 8px 22px rgba(34, 48, 31, 0.14); }
html body #photos .photo-container {
  display: flex;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  background: var(--li-leaf-2);
  border-radius: 12px;
  overflow: hidden;
}
html body #photos .photo-container a { display: block; }
html body #photos .photo-container img { max-width: 100%; max-height: 100%; display: block; }
html body #photos .photo-bottom { width: auto; padding-top: 8px; }
html body #photos .photo-label { width: auto; float: none; font-family: var(--li-body); font-size: 14px; font-weight: 700; }
html body #photos .photo-label a { color: var(--li-text); }

/* page numbers */
html body .pager { padding: 12px 0 0; }
html body .pager a, html body .pager input, html body .pager .pager-selected {
  border-radius: 999px !important;
}

/* ---------- Single photo page ---------- */
html body #photo-pager {
  width: auto !important;
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px;
}
html body #photo-pager span {
  flex: 1 1 auto; order: 1;
  padding: 0 !important;
  font-family: var(--li-head); font-weight: 600; font-size: 22px !important;
  text-align: center;
}
html body #photo-pager #prev-link { order: 0; }
html body #photo-pager #next-link { order: 2; }
html body #photo-pager a, html body #photo-pager a:visited {
  width: auto !important;
  background: var(--li-leaf) !important;
  color: var(--li-green) !important;
  font-family: var(--li-body) !important;
  padding: 9px 18px !important; border-radius: 999px;
  text-decoration: none; font-weight: 800; white-space: nowrap;
}
html body #photo-pager a:hover { background: var(--li-leaf-2) !important; }
html body #photo-pager #prev-link:before { content: "\2039\00a0"; }
html body #photo-pager #next-link:after { content: "\00a0\203A"; }
html body #photo { width: auto !important; text-align: center; }
html body #photo div {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--li-leaf-2) !important;
  border-radius: 18px;
  overflow: hidden;
}
html body #photo img { width: auto !important; max-width: 100%; max-height: 70vh; height: auto; display: block; margin: 0 auto; }
html body #photos ~ br, html body #photo-page ~ br { display: none; }

/* ---------- Price / product tables ---------- */
html body .simple-scaff {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 2px solid var(--li-leaf) !important;
  border-radius: 16px;
  overflow: hidden;
  font-size: 15px;
}
html body .simple-scaff thead, html body .simple-scaff thead td, html body .simple-scaff thead th,
html body .simple-scaff th {
  background: var(--li-leaf) !important;
  background-image: none !important;
  color: var(--li-green) !important;
  font-weight: 800;
  padding: 10px 12px !important;
  border: 0 !important;
  text-shadow: none !important;
}
html body .simple-scaff tbody tr td,
html body .simple-scaff tfoot tr td {
  background: #fff !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-top: 1px solid var(--li-leaf) !important;
  vertical-align: middle;
  font-size: 15px !important;
}
html body .simple-scaff tbody tr td:last-child { white-space: nowrap; }
html body .simple-scaff col { width: auto !important; }
html body .simple-scaff tbody tr.even td { background: #FAFCF7 !important; }
html body .simple-scaff tbody td a.addtocart,
html body .simple-scaff tbody td a.addtocart:visited {
  display: inline-block;
  background: var(--li-green);
  color: #fff !important;
  font-weight: 800;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
html body .simple-scaff tbody td a.addtocart:hover { background: var(--li-green-dark); }
html body .simple-scaff input.textbox { width: 52px; text-align: center; margin-right: 6px; padding: 7px 6px !important; }


/* ---------- Cart page ---------- */
html body #section-form #cart { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin: 14px 0 0; }
html body #section-form #cart .item { padding: 10px; font-size: 13px; }
html body #section-form #cart .item-name { font-size: 13px; margin-bottom: 4px; }
html body #section-form #cart ~ br, html body #order-section ~ br { display: none; }
html body #order-section {
  width: auto !important;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  background: var(--li-bg);
  border-radius: 20px;
  padding: 18px 22px;
  margin-top: 20px;
}
html body #totals2 { float: none; width: 240px !important; font-size: 15px !important; color: var(--li-muted); }
html body #totals2 td { padding: 3px 0 !important; text-align: right; }
html body #totals2 td:first-child { text-align: left; }
html body #totals2 span { font-style: normal; color: var(--li-muted); }
html body #totals2 tr:last-child td { border-top: 2px dashed var(--li-leaf-2); padding-top: 8px !important; font-size: 18px; font-weight: 800; color: var(--li-text); }
html body #order-button-area { float: none; width: auto !important; padding: 0 !important; }
html body #order-button-area .button { padding: 15px 34px !important; font-size: 16px !important; }

/* ---------- Forms ---------- */
html body .textbox,
html body input[type=text],
html body input[type=password],
html body input[type=email],
html body select,
html body textarea {
  font-family: var(--li-body) !important;
  font-size: 15px !important;
  color: var(--li-text);
  background: #fff;
  border: 2px solid var(--li-line) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  max-width: 100%;
  outline: none;
}
html body .textbox:focus, html body input:focus, html body select:focus, html body textarea:focus {
  border-color: var(--li-green) !important;
  box-shadow: 0 0 0 3px rgba(4, 92, 54, 0.12) !important;
}
html body fieldset {
  border: 0 !important;
  background: var(--li-bg);
  border-radius: 20px;
  padding: 18px 22px !important;
  margin-bottom: 16px;
}
html body legend {
  font-family: var(--li-head) !important;
  font-size: 20px !important;
  font-weight: 600;
  text-transform: none !important;
  color: var(--li-text) !important;
  padding: 0 !important;
  float: left; width: 100%; margin-bottom: 8px;
}
html body legend + * { clear: both; }
html body label.block { margin: 10px 0 4px; font-weight: 700; }
html body input.textbox.block { text-align: left; width: 100%; }
html body label.radio, html body label.checkbox { border-radius: 10px; }

/* Buttons (the old grey "pill with icon" buttons) */
html body .button,
html body .button:visited,
html body input.button {
  height: auto !important;
  background: var(--li-green) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: var(--li-body) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 12px 22px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
  cursor: pointer;
}
html body .button:hover, html body input.button:hover { background: var(--li-green-dark) !important; }
html body .button span,
html body .button.with-image span {
  background: none !important;
  text-indent: 0 !important;
  margin: 0 !important;
  color: #fff !important;
}

/* Log in box (shown when nobody is logged in) */
html body #login-form fieldset div { padding-left: 0 !important; padding-bottom: 12px; }
html body #login-form fieldset div#inset { padding: 6px 0 0 !important; max-width: 380px; }
html body #login-form label { display: block; width: auto; text-align: left; font-weight: 700; margin-bottom: 6px; }
html body #login-form #fldUser, html body #login-form #fldPass { width: 100% !important; }
html body #login-form #remember-me { padding-left: 0 !important; }
html body #login-form label#fldRememberLabel { font-size: 14px; }
html body #login-form .hint { text-align: left !important; }
html body .submit-button { padding-left: 0 !important; }
html body #login-button { display: block !important; text-align: center; width: 100%; }

/* ---------- Sidebar ---------- */
html body #section-selections { order: 1; }
html body #section-menu { order: 2; }
html body #search-box { order: 3; }

html body #section-selections,
html body #search-box {
  background: #fff;
  border-radius: 22px;
  padding: 22px !important;
  font-size: 15px;
}
html body #section-selections:empty { display: none; }
html body #section-selections h3,
html body #search-box h3,
html body .side-box h3 {
  font-family: var(--li-head);
  font-weight: 600;
  font-size: 22px;
  color: var(--li-text);
  padding: 0 0 10px !important;
  margin: 0;
}
html body #totals { width: 100%; margin-bottom: 0; color: var(--li-muted); }
html body #totals td { padding: 4px 0 !important; text-align: right; }
html body #totals td:first-child { text-align: left; }
html body #totals span { font-style: normal; color: var(--li-muted); }
html body #totals tr:last-child td {
  border-top: 2px dashed var(--li-leaf);
  padding-top: 10px !important;
  font-size: 18px; font-weight: 800; color: var(--li-text);
}
html body #totals tr:last-child td span { color: var(--li-text); }

/* items in the sidebar cart */
html body #cart { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 14px; }
html body #cart:empty { display: none; }
html body #cart .item {
  float: none; width: auto; height: auto; margin: 0;
  background: var(--li-bg); border: 0; border-radius: 14px; padding: 6px;
  color: var(--li-muted);
}
html body #cart .item-name { width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
html body #cart .item-thumb { height: auto; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; }
html body #cart .item-thumb { background: #fff; }
html body #cart .item-thumb img { width: 100%; height: 100%; object-fit: contain; }
html body #cart .item-quantity a:hover { background: var(--li-leaf); border-radius: 6px; }
html body #cart .item-total { font-weight: 800; color: var(--li-text); font-size: 14px; }

/* View cart / Checkout */
html body #section-menu { display: flex; flex-direction: column; gap: 8px; }
html body #section-menu a,
html body #section-menu a:visited {
  margin: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  padding: 15px !important;
  text-align: center;
  border-radius: 999px;
  font-family: var(--li-body) !important;
  font-size: 16px !important;
  font-weight: 800;
  text-shadow: none !important;
  background: #fff !important;
  color: var(--li-green) !important;
  border: 2px solid var(--li-green);
}
html body #section-menu a[href*="checkout"] {
  background: var(--li-green) !important;
  color: #fff !important;
  order: -1;
}
html body #section-menu a:hover { background: var(--li-leaf) !important; }
html body #section-menu a[href*="checkout"]:hover { background: var(--li-green-dark) !important; }

/* Search box */
html body #form-search { margin: 0; padding: 0; }
html body #form-search table, html body #form-search tbody, html body #form-search tr {
  display: block; width: 100%; height: auto !important; padding: 0 !important; margin: 0;
}
html body #form-search td { display: block; width: 100%; padding: 0; text-align: left !important; }
html body #form-search input[type=text],
html body #fldSearchKey {
  display: block;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 10px !important;
  border-radius: 999px !important;
}
html body #form-search input[type=submit],
html body #form-search .button { display: block; width: 100% !important; height: auto !important; }

/* ---------- Footer ---------- */
html body #footer {
  width: auto;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 32px 28px;
  text-align: center;
  font-size: 13px;
  color: #6E7A68;
}
html body #footer a, html body #footer a:visited { color: #6E7A68; }

/* =====================================================================
   Tablets and phones
   ===================================================================== */
@media (max-width: 900px) {
  html body #section { flex-direction: column; align-items: stretch; }
  html body #section-sidebar { flex: none; width: auto; }
  html body #section-form { width: auto; }
}

@media (max-width: 640px) {
  html body #page { padding: 12px 12px 4px; }
  html body #header { padding: 14px 14px 4px; border-radius: 20px 20px 0 0; gap: 8px; }
  html body #logo-image { height: 40px; }
  html body #header #logout { font-size: 14px; gap: 2px; }
  html body #header #logout a, html body #header #logout a:visited { padding: 9px 10px; }
  html body #header #logout a.li-cart { padding: 9px 14px; }
  html body #header #logout a.li-cart .li-cart-text { display: none; }
  html body #menu { padding: 6px 8px 12px; border-radius: 0 0 20px 20px; }
  /* menu scrolls sideways instead of stacking */
  html body #nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  html body #nav::-webkit-scrollbar { display: none; }
  html body #nav li { flex: 0 0 auto; }
  html body #nav a, html body #menu a { white-space: nowrap; padding: 9px 13px; }
  html body #nav .drop, html body #nav li:hover .drop { display: none !important; }
  html body #section { margin-top: 12px !important; gap: 12px; }
  html body #section-form { padding: 20px 16px; border-radius: 20px; }
  html body #section-form h2, html body #section-form h1 { font-size: 26px !important; }
  html body #private, html body #galleries, html body #categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html body .gallery, html body .category { padding: 8px; border-radius: 18px; }
  html body .gallery .gallery-title, html body .category .category-title { font-size: 15px; }
  html body .gallery .gallery-icon, html body .category .category-icon { height: 170px !important; }
  html body #photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html body .simple-scaff { font-size: 14px; }
  html body .simple-scaff tbody tr td, html body .simple-scaff th { padding: 8px !important; }
  html body .simple-scaff col { width: auto !important; }
  html body #section-form textarea { width: 100% !important; }
  html body #footer { padding: 14px 16px 22px; }
}