:root {
  --text: #373737;
  --muted: #777;
  --line: #e4e4e4;
  --paper: #fff;
  --soft: #f6f6f6;
  --blue: #252a81;
  --blue-light: #373c96;
  --orange: #f05a28;
  --font: "Ubuntu-Light", Arial, sans-serif;
}

@font-face {
  font-family: "Ubuntu-Light";
  src: url("../fonts/Ubuntu-Light.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "Ubuntu-Bold";
  src: url("../fonts/Ubuntu-Bold.ttf") format("truetype");
  font-weight: 700;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0;
  color: var(--text);
  background: #fff;
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.6;
}

div, ul, li, p, h1, h2, h3, h4, h5, h6, img, input { margin: 0; padding: 0; font-weight: normal; }
ul, li { list-style: none; }
a { color: #000; text-decoration: none; }
img { border: 0; }
button, input { font-family: var(--font); }

.wrap { width: 100%; margin: 0 auto; }
.header, main, .footer { width: 980px; margin: 0 auto; }
.header { clear: both; overflow: hidden; }

.head_top {
  display: block;
  min-height: 55px;
  overflow: hidden;
  margin-bottom: 14px;
  padding-bottom: 16px;
  border-bottom: 2px solid #a4a4a4;
}

.contact-page .head_top {
  margin-bottom: 0;
  border-bottom: 0;
}

/* The Product and Contact page selectors are shown only on phones. The
   desktop pages retain their existing document tabs. */
.page-mobile-nav { display: none; }


/* Desktop always shows the original corporate header (logo + search/lang/
   sign-in, all floated, plus the full nav menu below). The simplified
   Home / Products / Contact Us bar only appears on phone — see the
   max-width: 720px rules further down. */
.app-home-bar { display: none; }

/* Phone-only duplicate of the search bar, rendered below the header's
   divider line instead of squeezed into the header row. */
.mobile-searchbox { display: none; }

.logo { float: left; margin: 18px 0 0; }
.logo img { display: block; width: auto; height: 48px; }

.lang {
  float: right;
  height: 35px;
  margin: 10px 20px 0 0;
  color: #333;
  font-size: 14px;
  line-height: 35px;
}

.lang a:hover { color: #031489; }

.top_login {
  float: right;
  height: 30px;
  margin: 12px 10px 0 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 30px;
}

.top_login a:hover { text-decoration: underline; }

.searchbox {
  float: right;
  height: 45px;
  margin: 10px 0 0;
}

.search {
  height: 30px;
  padding: 2px 0;
  text-indent: 30px;
  border-radius: 4px;
  background: url("../images/site/search.png") 5% 50% no-repeat #e7e7e7;
}

.search_button {
  width: 80px;
  height: 30px;
  margin: 0 0 0 10px;
  border-radius: 4px;
  box-shadow: 0 0 3px #ccc;
  cursor: pointer;
}

.padding { padding: 0 16px; }
.round { border-radius: 6px 0 0 0; }

/* Compact return-home pill used in the Products and Contact Us header. */
.app-home-bar {
  margin: 0;
}

.app-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.app-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.app-nav-item svg { width: 19px; height: 19px; flex: none; }

.app-nav-item:hover,
.app-nav-item:focus-visible {
  background: rgba(0, 85, 150, .08);
  color: var(--blue-light);
}

.app-nav-item.is-active {
  background: var(--blue-light);
  color: #fff;
}

.navHome {
  width: 980px;
  height: 40px;
  margin: 10px auto;
  overflow: visible;
  border-radius: 6px;
  background: #fefefe;
  background: linear-gradient(to top, #dfdfdf, #fefefe);
  box-shadow: 0 0 10px #999;
  font-family: "Ubuntu-Bold", Arial, Helvetica, sans-serif;
}

.navHome ul li {
  position: relative;
  float: left;
  height: 40px;
  margin: 0;
  padding: 0;
  line-height: 40px;
  border-right: 1px solid #dcddde;
}

.navHome a.nav { color: #000; }

.navHome a.navOn,
.navHome a.nav:hover {
  display: block;
  height: 40px;
  padding: 0 10px;
  color: #fff;
  background: var(--blue);
  text-align: center;
  vertical-align: middle;
}

.navHome a.navOn,
.navHome a.nav,
.navHome a.nav:hover { font-size: 15px; }

.navHome ul li .subnav { display: none; }
.subnav-toggle { display: none; }
.mobile-nav-toggle { display: none; }

.navHome ul li:hover .subnav {
  position: absolute;
  z-index: 100;
  top: 40px;
  left: 0;
  display: block;
  width: 176px;
  border-radius: 0 0 8px 8px;
  background: #f3f3f3;
}

.navHome ul li:hover .subnav li {
  width: 100%;
  height: 32px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

a.sub {
  display: block;
  padding: 9px 0;
  color: #000;
  font-size: 11px;
  line-height: 14px;
}

a.sub:hover {
  background: #ededed;
  box-shadow: 1px 1px 2px #ccc;
}

.catalogue-section,
.catalogue-listing,
.flyer-detail,
.download-section,
.related-section {
  width: 980px;
  margin: 0 auto;
  padding: 24px 0 36px;
  overflow: hidden;
}

.catalogue-placeholder {
  min-height: 420px;
}

.page-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0 16px;
  border-bottom: 1px solid #a4a4a4;
}

.page-title-admin-login {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid #c8c8c8;
  border-radius: 5px;
  color: #555;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
}

.page-title-admin-login:hover,
.page-title-admin-login:focus-visible {
  border-color: var(--blue);
  color: var(--blue);
}

.page-title p,
.category-label {
  margin: 0 0 4px;
  color: #777;
  font-size: 12px;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
}

.page-title h1,
.flyer-copy h1 {
  margin: 0;
  color: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1.25;
}

.content-tabs {
  display: flex;
  margin: 18px 0 6px;
  border-bottom: 1px solid #a4a4a4;
}

.content-tabs a {
  min-width: 105px;
  padding: 9px 14px;
  border: 1px solid #d3d3d3;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(to top, #dfdfdf, #fefefe);
  color: #373737;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
}

.content-tabs a + a { margin-left: 5px; }

.content-tabs a:hover,
.content-tabs a.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.section-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0 8px;
}

.section-intro p {
  max-width: 690px;
  color: #5e5b5b;
  font-size: 13px;
  font-weight: bold;
}

.download-all,
.download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  color: #fff;
  border: 1px solid var(--blue-light);
  border-radius: 4px;
  background: var(--blue-light);
  cursor: pointer;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
}

.download-all:hover,
.download-button:hover { background: var(--blue); }

.filters-wrap {
  margin: 18px 0 24px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.filter-button {
  padding: 7px 10px;
  color: var(--blue-light);
  border: 1px solid #d3d3d3;
  border-radius: 4px;
  background: #f7f7f7;
  cursor: pointer;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 12px;
}

.filter-button:hover,
.filter-button.active {
  color: #fff;
  border-color: var(--blue-light);
  background: var(--blue-light);
}

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

/* A grouped catalogue is one grid slot. Only its inner strip scrolls, which
   keeps the paging controls anchored while the cards move underneath. */
.product-group-slot {
  position: relative;
  min-width: 0;
}

.product-group-strip {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  margin: 0;
  padding: 0;
}
.product-group-strip::-webkit-scrollbar { display: none; }
.product-group-strip { scrollbar-width: none; }

.product-group-strip .product-card {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.product-group-strip .product-card > a {
  position: relative;
  display: block;
}

.product-group-strip .product-card > a::before,
.product-group-strip .product-card > a::after {
  content: "";
  position: absolute;
  aspect-ratio: 4 / 3;
  border: 2px solid #c9c9c9;
  border-radius: 2px;
  background: #ececec;
  pointer-events: none;
}

.product-group-strip .product-card > a::before {
  top: 14px;
  left: 14px;
  right: 6px;
  z-index: 1;
}

.product-group-strip .product-card > a::after {
  top: 18px;
  left: 18px;
  right: 2px;
  border-color: #d6d6d6;
  background: #f3f3f3;
  z-index: 0;
}

.product-group-strip .product-card img,
.product-group-strip .product-card .thumbnail-placeholder {
  position: relative;
  z-index: 2;
}

.product-deck-count {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.86);
  color: #fff;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.3px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
  pointer-events: none;
}

.product-deck-count svg { flex: none; }

.product-card-copy .product-deck-dots,
.product-deck-dots {
  display: flex !important;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}

.product-deck-dot {
  display: block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cfd4dc;
  transition: background .15s, width .15s;
}

.product-deck-dot.is-active {
  width: 16px;
  border-radius: 3px;
  background: var(--blue-light);
}

.product-deck-dots-label { display: none; }

.product-group-strip-nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 4;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(17, 24, 39, 0.78);
  color: #fff;
  font-size: 19px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.92;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
  transition: opacity .15s, background .15s, transform .15s;
}
.product-group-slot:hover .product-group-strip-nav,
.product-group-slot:focus-within .product-group-strip-nav {
  opacity: 1;
}
.product-group-strip-nav:hover:not(:disabled) {
  background: rgba(17, 24, 39, 0.95);
  transform: translateY(-50%) scale(1.09);
}
.product-group-strip-nav:disabled {
  background: rgba(17, 24, 39, 0.28);
  border-color: rgba(255, 255, 255, 0.55);
  color: #f1f5f9;
  cursor: default;
  box-shadow: none;
  opacity: 0.4;
}
.product-group-strip-prev { left: 8px; }
.product-group-strip-next { right: 8px; }

/* Keep an empty-state message on its own row. The admin Add catalogue card
   then starts from the left edge on the following row. */
.product-grid > .catalogue-empty {
  grid-column: 1 / -1;
  margin: 0;
}

.product-card {
  position: relative;
  min-width: 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #f3f3f3;
  transition: box-shadow .2s, transform .2s;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.product-card[hidden] { display: none; }

.product-card img {
  display: block;
  width: calc(100% - 20px);
  margin: 10px 10px 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  border: 2px solid #ccc;
  background: #ddd;
}

.catalogue-grid .product-card img {
  object-fit: contain;
  background: #fff;
}

.namecard-listing-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 20px 0;
}

.namecard-listing-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 18px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f3f3f3;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}

/* Without this, the card's own "display: flex" above beats the browser's
   default [hidden] { display: none }, so setting card.hidden = true in
   catalogue.js's namecard filter (Simon / Bo Xin / All) has no visible
   effect -- same fix already applied to .product-card[hidden] above. */
.namecard-listing-card[hidden] { display: none; }

.namecard-listing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.namecard-listing-card img {
  display: block;
  width: min(100%, 380px);
  flex: 1 1 320px;
  height: auto;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 4px;
}

.namecard-listing-card-copy {
  flex: 1 1 200px;
  min-width: 0;
}

.namecard-listing-card-copy span {
  color: var(--muted);
  font-size: 12px;
}

.namecard-listing-card-copy h2 {
  margin: 6px 0 4px;
  color: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 19px;
  line-height: 1.3;
}

.namecard-listing-card-copy p {
  margin: 0 0 8px;
  color: #5e5b5b;
  font-size: 13px;
  font-weight: bold;
}

.namecard-listing-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.namecard-listing-actions form { margin: 0; }

.namecard-listing-action {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--blue-light);
  border-radius: 5px;
  color: var(--blue-light);
  background: #fff;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 12px;
  cursor: pointer;
}

.namecard-listing-save {
  color: #fff;
  background: var(--blue-light);
}

.namecard-listing-action:hover,
.namecard-listing-action:focus-visible { filter: brightness(.94); }

.namecard-listing-cta {
  min-height: 34px;
  padding: 0 14px;
  margin-top: 6px;
  font-size: 12px;
}

@media (max-width: 640px) {
  .namecard-listing-card {
    /* On phones, keep the name card large and easy to read, followed by the
       contact information.  The preview retains its wide name-card ratio. */
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 11px;
    text-align: center;
  }

  .namecard-listing-card img {
    width: 100%;
    flex: 0 0 auto;
  }

  .namecard-listing-card-copy {
    /* Override the desktop flex-basis: it was reserving empty space below
       the View digital name card button after the phone layout stacks. */
    flex: 0 0 auto;
  }

  .namecard-listing-card-copy h2 {
    margin: 3px 0 2px;
    font-size: 17px;
  }

  .namecard-listing-card-copy p {
    margin-bottom: 4px;
  }

  .namecard-listing-cta {
    min-height: 30px;
    margin-top: 3px;
    padding: 0 10px;
    font-size: 11px;
  }

  .namecard-listing-actions {
    gap: 8px;
    margin-top: 9px;
  }

  .namecard-listing-action {
    min-height: 36px;
    font-size: 11px;
  }
}

.product-card-copy {
  min-height: 150px;
  padding: 12px 14px 14px;
}

.product-card-copy span,
.related-card span,
.breadcrumb {
  color: var(--muted);
  font-size: 12px;
}

.product-card-copy h2 {
  margin: 7px 0 5px;
  color: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.3;
}

.product-card-copy p {
  margin: 0 0 12px;
  color: #5e5b5b;
  font-size: 12px;
  font-weight: bold;
}

.product-card-copy b {
  color: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 12px;
}

.no-results {
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}

.breadcrumb a { color: var(--blue-light); font-weight: bold; }
.breadcrumb strong { color: var(--blue); }

.flyer-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.namecard-layout {
  grid-template-columns: 480px minmax(0, 1fr);
}

.namecard-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.catalogue-detail-layout {
  grid-template-columns: 470px minmax(0, 1fr);
}

.flyer-preview {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #f3f3f3;
}

.flyer-preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid #ccc;
}

.flyer-copy .model {
  margin: 6px 0 10px;
  color: #5e5b5b;
  font-weight: bold;
}

.flyer-copy > p:not(.category-label):not(.model) {
  margin: 0 0 12px;
  color: #5e5b5b;
  font-size: 13px;
  font-weight: bold;
}

.overview-box {
  padding: 18px;
  border-top: 1px solid #a4a4a4;
  border-bottom: 1px solid #a4a4a4;
  background: #fff;
}

.overview-box h2,
.download-copy h2,
.related-title h2 {
  margin: 0 0 10px;
  color: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.3;
}

.overview-box p {
  margin: 0 0 12px;
  color: #5e5b5b;
  font-weight: bold;
}

.overview-box ul {
  margin: 0;
  padding-left: 17px;
}

.overview-box li {
  margin-top: 6px;
  color: #5e5b5b;
  font-weight: bold;
  list-style: disc;
}

.download-section {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 30px;
  border-top: 1px solid #a4a4a4;
}

.download-copy p {
  color: #5e5b5b;
  font-weight: bold;
}

.download-form {
  padding: 20px;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  background: #f7f7f7;
}

.download-form label:not(.consent) {
  display: block;
  margin-bottom: 14px;
  color: #444;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
}

.download-form label > span { color: #b80000; }
.download-form label small { float: right; color: #888; font-family: var(--font); }

.download-form input:not([type="checkbox"]) {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 5px;
  padding: 0 8px;
  border: 1px solid #c0c2c4;
  color: #562a00;
  background: #fff;
}

.download-form input:not([type="checkbox"]):focus {
  outline: 0;
  background: #fff6f6;
  box-shadow: inset 0 0 10px #fcdada, 0 0 10px #fcdada;
}

.saved-download h2 {
  margin-bottom: 6px;
  color: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 16px;
}

.saved-download p {
  margin-bottom: 16px;
  color: #5e5b5b;
}

.saved-download form { display: inline-block; }

.change-details {
  margin-left: 10px;
  padding: 7px 2px;
  color: var(--blue-light);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 12px;
}

.change-details:hover { text-decoration: underline; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.consent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 16px;
  color: #666;
}

.consent input { accent-color: var(--blue-light); }
.form-error {
  margin-bottom: 14px;
  padding: 10px 12px;
  color: #8b1d12;
  border: 1px solid #ffd1c4;
  background: #fff0ec;
}

.form-notice {
  margin-bottom: 14px;
  padding: 10px 12px;
  color: #153b22;
  border: 1px solid #b9dfc5;
  background: #effaf2;
}

.otp-download h2 {
  margin-bottom: 6px;
  color: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 16px;
}

.otp-download > p { margin-bottom: 14px; }
.otp-download .otp-input {
  max-width: 220px;
  font-size: 20px;
  letter-spacing: .28em;
  text-align: center;
}

/* Streamlined flyer/catalogue download flow. Name-card downloads use their
   own classes below and are intentionally unaffected. */
.product-download-jump {
  display: inline-flex;
  min-height: 40px;
  margin: 0 0 18px;
  padding: 0 18px;
  align-items: center;
  border: 1px solid var(--blue-light);
  border-radius: 5px;
  color: #fff;
  background: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 13px;
}

.product-download-jump:hover,
.product-download-jump:focus-visible { background: var(--blue); }

.product-download-section {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 34px;
  scroll-margin-top: 18px;
}

.product-download-section .download-copy { padding-top: 8px; }
.product-download-section .download-copy .category-label { margin-bottom: 7px; }
.product-download-section .download-copy p { line-height: 1.55; }

.download-trust-note {
  padding-top: 11px;
  border-top: 1px solid #dedee5;
  color: #777a85 !important;
  font-size: 11px;
}

.product-download-card {
  max-width: 680px;
  padding: 26px 28px;
  border-color: #d8d9e2;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(31, 35, 70, 0.08);
}

.download-steps {
  display: grid;
  margin: 0 0 27px;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}

.download-steps li {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #90929a;
  font-size: 11px;
}

.download-steps li > strong {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 0 4px;
}

.download-steps li:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 14px;
  right: calc(-50% + 16px);
  left: calc(50% + 16px);
  height: 2px;
  background: #dedfe5;
  content: "";
}

.download-steps li > span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 2px solid #d5d6dc;
  border-radius: 50%;
  background: #fff;
  color: #8b8d96;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
}

.download-steps li.is-active,
.download-steps li.is-complete { color: var(--blue-light); }
.download-steps li.is-active > span {
  border-color: var(--blue-light);
  color: #fff;
  background: var(--blue-light);
}
.download-steps li.is-complete:not(.is-active) > span {
  border-color: #8aa79a;
  color: #315c49;
  background: #edf7f1;
}
.download-steps li.is-complete:not(:last-child)::after { background: #a8c7b8; }

.download-state-heading {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.download-state-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--blue-light);
  font-size: 16px;
}

.download-state-heading h3 {
  margin: 0 0 4px;
  color: #2f3240;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 18px;
}

.download-state-heading p {
  margin: 0;
  color: #686b75;
  font-size: 13px;
  line-height: 1.45;
}

.product-download-card .primary-email-label,
.product-download-card .otp-label {
  margin: 0 0 6px !important;
  font-size: 13px;
}

.product-download-card > input:not([type="checkbox"]),
.product-download-card .otp-download input:not([type="checkbox"]),
.otp-download .otp-input {
  height: 46px;
  margin: 0 0 16px;
  border-radius: 5px;
  font-size: 16px;
}

.product-download-card .otp-input {
  width: min(100%, 260px);
  max-width: none;
  margin-bottom: 6px;
  font-size: 24px;
  letter-spacing: .3em;
}

.field-help {
  display: block;
  margin-bottom: 18px;
  color: #777a83;
}

.optional-download-details {
  margin: 2px 0 20px;
  border-top: 1px solid #e2e2e7;
  border-bottom: 1px solid #e2e2e7;
}

.optional-download-details summary {
  padding: 13px 2px;
  color: var(--blue-light);
  cursor: pointer;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 12px;
}

.optional-download-details summary span {
  margin-left: 5px;
  color: #8b8d95;
  font-family: var(--font);
}

.optional-download-fields { padding: 3px 2px 16px; }

.download-button--large {
  width: 100%;
  min-height: 46px;
  border-radius: 5px;
  font-size: 14px;
}

.download-privacy-note {
  margin: 10px 0 0;
  color: #7a7c84;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.download-secondary-actions {
  display: flex;
  margin-top: 10px;
  align-items: center;
  gap: 16px;
}

.download-secondary-actions .change-details,
.product-download-card > form .change-details { margin-left: 0; }

.download-result {
  min-height: 17px;
  margin: 10px 0 0;
  color: #315c49;
  font-weight: bold;
  text-align: center;
}

.download-result:empty { min-height: 0; margin: 0; }
.download-result.is-success { padding: 9px; background: #edf7f1; }
.download-result.is-error {
  padding: 9px;
  color: #8b1d12;
  border: 1px solid #ffd1c4;
  border-radius: 5px;
  background: #fff0ec;
}

.download-state-icon--success { background: #26734d; }

.download-ready-help {
  margin: -2px 0 18px !important;
  color: #5f6370 !important;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.download-ready-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 10px;
}

.saved-download .download-ready-actions form {
  display: block;
  width: 100%;
}

.download-ready-actions--save-only {
  grid-template-columns: minmax(0, 258px);
  justify-content: center;
}

.view-pdf-button {
  display: inline-flex;
  min-height: 46px;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--blue-light);
  border-radius: 5px;
  color: var(--blue-light);
  background: #fff;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 14px;
  text-align: center;
}

.view-pdf-button:hover,
.view-pdf-button:focus-visible {
  color: #fff;
  background: var(--blue-light);
}

.download-view-note {
  margin: 9px 0 0 !important;
  color: #7a7c84 !important;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.saved-download .download-change-email {
  display: block;
  margin-top: 8px;
  text-align: center;
}

[data-download-ready]:focus { outline: 0; }

.change-details:disabled {
  color: #8b8d95;
  cursor: wait;
  text-decoration: none;
}

.product-download-card button:disabled {
  opacity: .72;
  cursor: wait;
}

.namecard-layout { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
.namecard-preview img { border: 0; }

.namecard-actions-panel {
  display: flex;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
}

.namecard-actions-panel .namecard-save-contact-button {
  margin-top: 0;
}

.namecard-actions-panel .namecard-download-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.namecard-profile-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 98px;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.namecard-profile-details .category-label { margin-bottom: 4px; }
.namecard-profile-details .model { margin: 8px 0 14px; }
.namecard-profile-details .namecard-company {
  margin: 0;
  color: #5e5b5b;
  font-size: 13px;
  font-weight: bold;
}

.namecard-profile-qr {
  display: block;
  width: 98px;
  height: 98px;
  max-width: 100%;
  object-fit: contain;
  border: 1px solid #e0e0e4;
  border-radius: 5px;
  background: #fff;
}
.contact-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
}

.namecard-download-panel {
  padding: 22px;
  border: 1px solid #d7d9df;
  border-radius: 8px;
  background: linear-gradient(145deg, #fbfbfd 0%, #f3f4f9 100%);
}

.namecard-download-heading { margin-bottom: 18px; }

.namecard-download-heading h3 {
  margin: 0 0 5px;
  color: #292d3a;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 18px;
}

.namecard-download-heading p {
  margin: 0;
  color: #666a75;
  font-size: 13px;
}

.namecard-format-grid {
  display: grid;
  margin: 0;
  padding: 0;
  border: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.namecard-format-grid legend {
  width: 100%;
  margin-bottom: 10px;
  color: #565a66;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 12px;
}

.namecard-format-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 210px;
  padding: 17px;
  border: 1px solid #d3d5dc;
  border-radius: 7px;
  background: #fff;
  flex-direction: column;
  box-shadow: 0 2px 7px rgba(26, 30, 48, 0.06);
  cursor: pointer;
}

.namecard-format-card.is-selected {
  border-color: var(--blue-light);
  box-shadow: 0 3px 12px rgba(43, 49, 151, 0.14);
}

.namecard-format-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.namecard-format-card:focus-within {
  outline: 3px solid rgba(43, 49, 151, 0.25);
  outline-offset: 2px;
}

.namecard-format-badge {
  display: inline-flex;
  width: 48px;
  height: 30px;
  margin-bottom: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #fff;
  background: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .04em;
}

.namecard-format-recommendation {
  position: absolute;
  top: 18px;
  right: 14px;
  color: var(--blue-light);
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.namecard-format-card h4 {
  margin: 0 0 7px;
  color: #30333d;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 14px;
}

.namecard-format-card p {
  margin: 0 0 17px;
  color: #6b6e78;
  font-size: 12px;
  line-height: 1.45;
}

.namecard-format-button {
  width: 100%;
  margin-top: auto;
  padding: 9px 10px;
  border: 1px solid var(--blue-light);
  border-radius: 4px;
  color: #fff;
  background: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 12px;
  cursor: pointer;
}

.namecard-download-button {
  margin-top: 16px;
}

.namecard-download-actions {
  display: grid;
  margin-top: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* "Save Contacts" -- instant vCard download, sits above the Save/Send JPG
   row on both the individual name card page and the name card listing. */
.namecard-save-contact-button {
  display: flex;
  width: 100%;
  min-height: 42px;
  margin-top: 20px;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--blue-light);
  border-radius: 5px;
  color: #fff;
  background: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.namecard-save-contact-button:hover,
.namecard-save-contact-button:focus-visible {
  background: var(--blue);
  border-color: var(--blue);
}

.namecard-download-actions {
  margin-top: 12px;
}

.namecard-listing-card-copy .namecard-save-contact-button {
  min-height: 38px;
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 12px;
}

.namecard-download-actions form,
.namecard-download-actions .namecard-format-button,
.namecard-download-actions .view-pdf-button {
  margin: 0;
}

.namecard-download-actions .view-pdf-button {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Match the Save JPG/PNG button to the Send JPG button beside it: same
   height, padding and font size, so the pair reads as one consistent row
   instead of the Save button looking smaller. */
.namecard-download-actions .namecard-format-button {
  display: flex;
  min-height: 42px;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-align: center;
}

.namecard-download-frame,
.pdf-download-frame {
  display: none;
}

.namecard-after-download {
  display: flex;
  margin-top: 14px;
  padding: 13px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #cfe0d6;
  border-radius: 6px;
  background: #f3faf5;
}

.namecard-after-download p {
  margin: 0;
  color: #315c49;
  font-size: 12px;
}

.namecard-format-button:hover,
.namecard-format-button:focus-visible {
  background: var(--blue);
  border-color: var(--blue);
}

.related-section {
  border-top: 1px solid #a4a4a4;
}

.related-title {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 16px;
}

.related-title a { color: var(--blue-light); font-weight: bold; }

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.related-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f3f3;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}

.related-card:hover,
.related-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.related-card-copy {
  display: block;
  padding: 10px 12px 12px;
}

.related-card-copy span {
  display: block;
}

.related-card strong {
  display: block;
  margin-top: 4px;
  color: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  line-height: 1.3;
}

.footer {
  padding: 10px 0;
  border-top: 2px solid #a4a4a4;
  border-bottom: 5px solid #232780;
  line-height: normal;
}

.contact-page .footer {
  border-top: 0;
}

/* Footer navigation replaces the old bare divider above the footer on the
   document and contact listing pages. It intentionally reuses the same tab
   treatment as the Home-page document selector. */
.footer-content-tabs {
  width: 980px;
  margin: 26px auto 0;
}

.footer-content-tabs a { text-decoration: none; }

.contact-header-tabs {
  width: 100%;
  margin: 0;
}

.copyright { margin: 10px 0; }
.copyright h3 {
  color: #232780;
  font-family: var(--font);
  font-weight: bold;
  text-align: center;
}
.copyright p { text-align: center; }
.copyright a { color: #000; }

.not-found {
  width: 980px;
  margin: 0 auto;
  padding: 70px 0;
  text-align: center;
}

.not-found h1 {
  color: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
}

.not-found .primary-button {
  display: inline-flex;
  margin-top: 18px;
  padding: 8px 14px;
  color: #fff;
  border-radius: 4px;
  background: var(--blue-light);
}

@media (max-width: 1020px) {
  .header, main, .footer,
  .footer-content-tabs,
  .navHome,
  .catalogue-section,
  .flyer-detail,
  .download-section,
  .related-section,
  .not-found,
  .admin-session-bar {
    width: calc(100% - 28px);
  }

  .navHome {
    height: auto;
    min-height: 40px;
  }

  .navHome ul li { float: none; display: inline-block; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flyer-layout,
  .download-section { grid-template-columns: 1fr; }
  .flyer-preview { max-width: 430px; }
  .product-download-card { max-width: none; }
}

@media (max-width: 720px), (max-height: 520px) and (orientation: landscape) {
  .namecard-format-grid { grid-template-columns: 1fr; }
  .namecard-format-card { min-height: 0; }
  .namecard-download-actions { grid-template-columns: 1fr; }

  /* On phone, every page swaps the original corporate header/nav for the
     simplified Home / Products / Contact Us bar. Desktop keeps the
     original corporate header + full menu (see the base rules above). */
  .head_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    height: auto;
    overflow: hidden;
  }

  .searchbox,
  .lang,
  .top_login,
  .navHome {
    display: none;
  }

  .app-home-bar {
    display: block;
    flex: 0 0 auto;
    margin-left: 8px;
  }

  /* Same color/shadow language as .page-mobile-nav below, just sized as a
     compact pill for the header corner instead of a full-width bar. */
  .app-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid #e2e8f3;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(19, 26, 42, .05);
  }

  .app-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 999px;
    background: transparent;
    color: #6a778c;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  .app-nav-item svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
  }

  .app-nav-item.is-active {
    background: #e9f0ff;
    color: #1f4fd8;
  }

  /* The phone/PWA header needs one clear route back to the workspace.
     Product and Contact are available from Home, so do not repeat them in
     every page header. */
  .app-nav-item:not(:first-child) { display: none; }

  .product-page .head_top,
  .contact-page .head_top {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .product-page .logo,
  .contact-page .logo {
    margin-top: 10px;
  }

  .page-mobile-nav {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 12px 0 16px;
    gap: 4px;
    padding: 5px;
    border: 1px solid #e2e8f3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(19, 26, 42, .05);
    box-sizing: border-box;
  }

  .page-mobile-nav a {
    display: flex;
    flex: 1 1 0;
    min-height: 48px;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 4px;
    border-radius: 12px;
    background: transparent;
    color: #6a778c;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .page-mobile-nav a svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
  }

  .page-mobile-nav a.active {
    background: #e9f0ff;
    color: #1f4fd8;
  }

  /* The page selector above replaces the duplicate document tabs on the
     Product listing pages. */
  .product-page .tabs-and-search-bar .content-tabs {
    display: none;
  }

  .mobile-searchbox {
    display: block;
    margin: 14px 0 0;
  }

  .mobile-searchbox .search {
    width: calc(100% - 96px);
  }

  .mobile-nav-toggle {
    display: flex;
    width: 100%;
    min-height: 46px;
    padding: 0 15px;
    align-items: center;
    justify-content: space-between;
    border: 0;
    color: #fff;
    background: var(--blue-light);
    font-family: "Ubuntu-Bold", Arial, sans-serif;
    font-size: 14px;
    cursor: pointer;
  }

  .mobile-nav-icon,
  .mobile-nav-icon::before,
  .mobile-nav-icon::after {
    display: block;
    width: 21px;
    height: 2px;
    background: #fff;
    content: "";
  }

  .mobile-nav-icon { position: relative; }
  .mobile-nav-icon::before { position: absolute; top: -6px; }
  .mobile-nav-icon::after { position: absolute; top: 6px; }

  .navHome > ul { display: none; }
  .navHome.is-open > ul { display: block; }

  .navHome > ul > li {
    display: block;
    height: auto;
    min-height: 40px;
    border-right: 0;
    border-bottom: 1px solid #dcddde;
  }

  .navHome > ul > li > a.nav,
  .navHome > ul > li > a.navOn {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 48px 0 14px;
    line-height: 40px;
  }

  .navHome .has-subnav {
    position: relative;
  }

  .subnav-toggle {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    display: block;
    width: 48px;
    height: 40px;
    padding: 0;
    border: 0;
    border-left: 1px solid #dcddde;
    color: #252a81;
    background: transparent;
    font-family: "Ubuntu-Bold", Arial, Helvetica, sans-serif;
    font-size: 22px;
    line-height: 40px;
    cursor: pointer;
  }

  .subnav-toggle::after {
    content: "+";
  }

  .has-subnav.is-open > .subnav-toggle::after {
    content: "\2212";
  }

  .navHome ul li:hover .subnav {
    display: none;
  }

  .navHome .has-subnav.is-open > .subnav {
    position: static;
    display: block;
    width: 100%;
    clear: both;
    border-radius: 0;
    box-shadow: none;
  }

  .navHome .has-subnav.is-open > .subnav li {
    display: block;
    width: 100%;
    height: auto;
    min-height: 36px;
    border-right: 0;
    line-height: normal;
  }

  .navHome .has-subnav.is-open > .subnav a.sub {
    min-height: 36px;
    padding: 10px 24px;
    text-align: left;
  }

  /* Compact mobile navigation: two links per row, followed by the
     full-width Products & Services row shown in the supplied design. */
  .navHome { overflow: visible; }
  .mobile-nav-toggle { display: none; }
  .navHome > ul,
  .navHome.is-open > ul {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
  }
  .navHome > ul > li {
    display: block;
    min-height: 49px;
    border-right: 0;
    border-bottom: 1px solid #dcddde;
  }
  .navHome > ul > li.has-subnav {
    order: 1;
    grid-column: 1 / -1;
  }
  .navHome > ul > li > a.nav,
  .navHome > ul > li > a.navOn {
    display: flex;
    width: 100%;
    min-height: 49px;
    height: auto;
    padding: 0 14px;
    align-items: center;
    color: #171717;
    background: transparent;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.2;
  }
  .subnav-toggle {
    height: 49px;
    border-left: 0;
    color: #8b8b8b;
    font-size: 25px;
    line-height: 49px;
  }
  .subnav-toggle::after { content: "\203a"; }
  .has-subnav.is-open > .subnav-toggle::after { content: "\2303"; }

  .page-title {
    margin-top: 4px;
    margin-bottom: 8px;
  }

  .page-title h1 {
    font-size: 26px;
    margin: 0;
    line-height: 1.2;
  }

  .page-title p {
    margin: 0 0 2px;
    font-size: 14px;
    color: #64748b;
  }

  .section-intro p {
    margin: 8px 0 10px;
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
  }

  .tabs-and-search-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-bottom: none;
    margin: 8px 0 8px;
  }

  .tabs-and-search-bar .content-tabs,
  .content-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    border-bottom: 1px solid #a4a4a4;
    margin: 6px 0 0;
  }

  .content-tabs a {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
  }

  .tab-search-wrap {
    width: 100%;
    margin: 0;
    max-width: 100%;
  }

  .tab-search-wrap input {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
  }

  .filters-wrap {
    margin: 10px 0 14px;
    width: 100%;
    overflow: hidden;
  }

  .filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
  }

  .filters::-webkit-scrollbar {
    height: 5px;
  }

  .filters::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 4px;
  }

  .filters::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
  }

  .filter-button {
    flex: 0 0 auto;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 13px;
    white-space: nowrap;
    border: 1px solid #d3d3d3;
    background: #fff;
    color: #475569;
  }

  .filter-button:hover,
  .filter-button.active {
    background: var(--blue-light);
    border-color: var(--blue-light);
    color: #fff;
  }

  .product-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-top: 1px solid #e2e8f0;
  }

  .product-card {
    display: block;
    background: #fff;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    padding: 12px 2px !important;
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  .product-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background: #f8fafc;
  }

  .product-card > a,
  .product-card-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    text-decoration: none;
    color: inherit;
  }

  .product-card img,
  .product-card .thumbnail-placeholder {
    width: 95px !important;
    height: 134px !important;
    min-width: 95px !important;
    max-width: 95px !important;
    aspect-ratio: 1 / 1.414 !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 6px !important;
    border: 1px solid #dcdfe5 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }

  .catalogue-grid .product-card img {
    object-fit: contain !important;
  }

  .product-card-copy {
    padding: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0 !important;
    text-align: left;
  }

  .product-card-copy span,
  .product-card-copy .product-meta {
    display: block;
    font-size: 13px !important;
    color: #64748b;
    margin-bottom: 5px;
    font-weight: 600;
    line-height: 1.25;
  }

  .product-card-copy h2 {
    margin: 0 0 4px;
    font-size: 18px !important;
    font-family: "Ubuntu-Bold", Arial, sans-serif;
    color: var(--blue-light);
    text-decoration: underline;
    line-height: 1.35;
    word-break: break-word;
  }

  .product-card-copy p,
  .product-card-copy p.product-name {
    margin: 3px 0 0 !important;
    font-size: 13px !important;
    color: #475569 !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    display: block !important;
  }

  .product-card-copy b {
    display: none !important;
  }

  /* Shared strip mechanics (flex + scroll-snap) now live in the base
     .product-group-strip rule above -- phone only adds the row divider,
     since a grouped item still needs to look like one row in the vertical
     list, and hides the hover-revealed desktop arrow buttons in favour of
     the native touch swipe that's already the primary phone gesture. */
  .product-group-slot {
    border-bottom: 1px solid #e2e8f0;
  }

  .product-group-strip .product-card {
    border-bottom: none !important;
  }

  .product-group-strip-nav {
    display: none !important;
  }

  .product-group-strip .product-card > a::before {
    top: 4px !important;
    left: auto !important;
    right: auto !important;
    width: 95px;
    height: 134px;
    aspect-ratio: auto !important;
    margin-left: 5px;
    border: 1px solid #dcdfe5 !important;
    border-radius: 6px !important;
    background: #eef1f5 !important;
  }

  .product-group-strip .product-card > a::after,
  .product-deck-count {
    display: none;
  }

  .product-card-copy .product-deck-dots,
  .product-deck-dots {
    margin-top: 8px;
    gap: 4px;
  }

  .product-deck-dots-label {
    display: inline;
    margin-left: 5px;
    color: #64748b;
    font-family: "Ubuntu-Bold", Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0.2px;
  }

  .section-intro,
  .related-title { display: block; }
  .download-all { margin-top: 14px; }
  .related-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
  .form-row { grid-template-columns: 1fr; }

  .product-download-section { gap: 13px; }
  .product-download-section .download-copy { padding-top: 0; }
  .product-download-card { padding: 20px 16px; }
  .download-steps { margin-bottom: 23px; }
  .download-steps li { display: block; text-align: center; }
  .download-steps li > span { margin: 0 auto 5px; }
  .download-steps li:not(:last-child)::after {
    top: 13px;
    right: -32px;
    left: calc(50% + 20px);
  }
  .download-steps li strong { display: block; font-size: 10px; }
  .download-state-heading h3 { font-size: 17px; }
  .download-secondary-actions { align-items: flex-start; flex-direction: column; gap: 4px; }
  .download-ready-actions { grid-template-columns: 1fr; }
  .download-ready-help { margin-bottom: 15px !important; }
  .poster-inline-download-gate .download-form input:not([type="checkbox"]) {
    min-height: 46px;
    font-size: 16px;
  }
  .product-download-jump { width: 100%; justify-content: center; }

  .namecard-detail { padding-top: 20px; }
  .namecard-detail .breadcrumb { margin-bottom: 14px; font-size: 11px; }
  .namecard-detail .flyer-layout { gap: 20px; }
  .namecard-detail .flyer-preview { width: 100%; padding: 7px; }
  .namecard-detail .flyer-copy h1 { font-size: 23px; }
  .namecard-profile-heading {
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 14px;
    margin-bottom: 16px;
  }
  .namecard-profile-qr { width: 82px; height: 82px; }
  .namecard-detail .overview-box { padding: 16px; }
  .namecard-detail .contact-link {
    display: flex;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #fff;
    background: var(--blue-light);
  }
  .namecard-detail .contact-link:hover,
  .namecard-detail .contact-link:focus-visible { background: var(--blue); }

  .namecard-download-section { gap: 12px; }
  .namecard-download-section .download-copy { padding-top: 0; }
  .namecard-download-panel { padding: 15px; }
  .namecard-download-heading { margin-bottom: 15px; }
  .namecard-download-heading h3 { font-size: 17px; }
  .namecard-format-card { padding: 16px; }
  .namecard-format-button { min-height: 44px; }
}

/* ---------- Admin sign-in and admin home ---------- */

.admin-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0 60px;
}

.admin-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: min(100%, 420px);
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.admin-back-link:hover,
.admin-back-link:focus-visible {
  color: var(--blue);
  text-decoration: underline;
}

.namecard-back-link--mobile { display: none; }

@media (max-width: 720px), (max-height: 520px) and (orientation: landscape) {
  .namecard-back-link--desktop { display: none; }
  .namecard-back-link--mobile { display: inline-flex; }
}

.admin-login-card {
  width: min(100%, 420px);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.admin-login-card h1 {
  margin: 0;
  color: var(--blue-light);
  font-size: 22px;
}

.admin-login-intro {
  margin: 6px 0 20px;
  color: var(--muted);
  font-size: 14px;
}

.admin-login-error {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid #f0c2b4;
  border-radius: 6px;
  background: #fdf0ec;
  color: #a03214;
  font-size: 14px;
}

.admin-login-card label {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 13px;
}

.admin-login-card input[type="text"],
.admin-login-card input[type="password"] {
  width: 100%;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--text);
  font-size: 15px;
  box-sizing: border-box;
}

.admin-login-card input:focus {
  outline: none;
  border-color: var(--blue);
}

.admin-login-button,
.admin-signout {
  padding: 11px 18px;
  border: 1px solid var(--blue);
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.admin-login-button { width: 100%; }

.admin-login-button:hover,
.admin-signout:hover { background: var(--blue-light); }

.admin-signout {
  padding: 8px 14px;
  font-size: 14px;
}

.admin-home { padding: 30px 0 60px; }

.content-tab-hidden-note {
  display: block;
  margin-top: 2px;
  color: inherit;
  opacity: .65;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.admin-section-toggles {
  margin: 22px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.admin-section-toggles h2 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--text);
}

.admin-section-toggles p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.admin-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.admin-toggle-row:first-of-type { border-top: 0; }

.admin-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-toggle-label strong { font-size: 14px; }
.admin-toggle-label span {
  color: var(--muted);
  font-size: 12px;
}

.admin-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex: none;
}

.admin-toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.admin-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.15s ease;
}

.admin-toggle-track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}

.admin-toggle-switch input:checked + .admin-toggle-track {
  background: var(--blue);
}

.admin-toggle-switch input:checked + .admin-toggle-track::before {
  transform: translateX(20px);
}

.admin-toggle-switch input:disabled + .admin-toggle-track {
  opacity: 0.6;
  cursor: default;
}

.admin-toggle-status {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  min-height: 16px;
}
.admin-toggle-status.is-error { color: #a03214; }

.admin-session-bar {
  width: 980px;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px auto 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  font-size: 13px;
}

.admin-session-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-session-actions form { margin: 0; }

.admin-dashboard-button,
.admin-action-button {
  border: 1px solid var(--blue);
  border-radius: 7px;
  background: var(--paper);
  color: var(--blue);
  text-decoration: none;
}

.admin-dashboard-button {
  display: inline-block;
  padding: 8px 14px;
  font-size: 14px;
}

.admin-dashboard-button:hover,
.admin-action-button:hover {
  background: #f4f6ff;
  color: var(--blue-light);
}

.admin-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.admin-bar h1 {
  margin: 0;
  color: var(--blue-light);
  font-size: 22px;
}

.admin-bar p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.admin-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.admin-count {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.admin-count span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.admin-count strong {
  display: block;
  margin-top: 4px;
  color: var(--blue-light);
  font-size: 24px;
}

.admin-warning {
  padding: 12px 14px;
  border: 1px solid #f2d9a8;
  border-radius: 8px;
  background: #fdf6e7;
  color: #7a5a12;
  font-size: 14px;
  line-height: 1.5;
}

.admin-next {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.admin-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.admin-action-button {
  display: block;
  padding: 16px 18px;
}

.admin-action-button strong,
.admin-action-button span { display: block; }

.admin-action-button strong {
  margin-bottom: 4px;
  font-size: 16px;
}

.admin-action-button span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .admin-bar { flex-direction: column; }

  .admin-session-bar {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .admin-session-bar > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-session-actions {
    flex: none;
    gap: 6px;
  }

  .admin-dashboard-button,
  .admin-signout {
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .admin-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .admin-action-button {
    padding: 12px 10px;
  }

  .admin-action-button strong {
    font-size: 14px;
  }

  .admin-action-button span {
    font-size: 12px;
  }
}

/* ---------- Inline admin editing ---------- */
/* Only rendered for signed-in admins. Editable fields keep their normal
   typography; only a subtle tint marks them, so what an admin sees while
   editing matches what a visitor sees. */

.admin-edit-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.admin-edit-hint {
  flex: 1;
  color: var(--muted);
  font-size: 13px;
}

.listing-edit-bar { margin: 14px 0 0; }

.listing-select-bar {
  margin: 14px 0 0;
  background: #eef2ff;
  border-color: #c7d2fe;
}

.listing-select-count {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.poster-btn-save:disabled,
.poster-btn-cancel:disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.admin-save-state { color: var(--muted); font-size: 13px; }
.admin-save-state.is-error { color: #a03214; }

/* The select-to-group checkmark. Always in the DOM for an edit-mode card
   so JS only ever has to flip classes, never rebuild markup; invisible
   until the listing is actually in select mode. */
.listing-select-check {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(15, 23, 42, 0.35);
  color: transparent;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

body.is-select-mode .listing-select-check { display: flex; }

body.is-select-mode .product-card.is-editable { cursor: pointer; }

.product-card.is-selected {
  outline: 3px solid var(--blue-light, #7c86e0);
  outline-offset: -3px;
}

.product-card.is-selected .listing-select-check {
  background: var(--blue-light, #7c86e0);
  border-color: var(--blue-light, #7c86e0);
  color: #fff;
}

/* Shown on a grouped card while editing (grouping itself is never shown as
   a strip in edit mode -- see the listing route -- so this is the only
   sign an admin has that a card is already on someone else's line). Cards
   can belong to several different lines/groups at once, so each one gets
   a stable "Line N" number and a colour from a small rotating palette
   (data-group-color, computed server-side in _annotate_group_lines) --
   same colour on the badge and as a left-edge accent on the card itself,
   so separate groups stay visually distinct at a glance while editing. */
.product-card-group-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: #ede9fe;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
  pointer-events: none;
  z-index: 2;
}

/* The coloured left edge is an editing cue: it pairs with the "Line N" badge
   so an admin can see at a glance which cards share a row. Visitors have no
   use for it and it reads as a random accent next to the uncoloured cards, so
   it is scoped to edit mode -- .is-editable is only set when is_edit_mode. */
article.product-card.is-editable[data-group-color] {
  border-left-width: 4px;
  border-left-style: solid;
}

.product-card-group-badge[data-group-color="0"] { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
article.product-card.is-editable[data-group-color="0"] { border-left-color: #8b5cf6; }

.product-card-group-badge[data-group-color="1"] { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
article.product-card.is-editable[data-group-color="1"] { border-left-color: #3b82f6; }

.product-card-group-badge[data-group-color="2"] { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; }
article.product-card.is-editable[data-group-color="2"] { border-left-color: #14b8a6; }

.product-card-group-badge[data-group-color="3"] { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
article.product-card.is-editable[data-group-color="3"] { border-left-color: #f97316; }

.product-card-group-badge[data-group-color="4"] { background: #fce7f3; color: #be185d; border-color: #fbcfe8; }
article.product-card.is-editable[data-group-color="4"] { border-left-color: #ec4899; }

.product-card-group-badge[data-group-color="5"] { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
article.product-card.is-editable[data-group-color="5"] { border-left-color: #22c55e; }

.product-card-group-badge[data-group-color="6"] { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
article.product-card.is-editable[data-group-color="6"] { border-left-color: #ef4444; }

.product-card-group-badge[data-group-color="7"] { background: #cffafe; color: #0e7490; border-color: #a5f3fc; }
article.product-card.is-editable[data-group-color="7"] { border-left-color: #06b6d4; }

.admin-save {
  padding: 9px 18px;
  border: 1px solid var(--blue);
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.admin-save:hover { background: var(--blue-light); }
.admin-save:disabled { opacity: 0.6; cursor: default; }

.is-editable-field {
  border-radius: 4px;
  outline: 1px dashed #94a3b8;
  outline-offset: 2px;
  cursor: text;
  transition: background 0.12s ease, outline-color 0.12s ease;
}
.is-editable-field:hover,
.is-editable-field:focus {
  outline-color: var(--blue);
  background: #f4f6ff;
}

.is-editable-field.is-empty::before {
  content: attr(data-empty-text);
  color: #a9a9a9;
  font-style: italic;
}

/* The input inherits the element's own typography, so editing cannot change
   the size, weight or family of anything. */
.inline-input {
  width: 100%;
  margin: 0;
  padding: 2px 4px;
  border: 1px solid var(--blue);
  border-radius: 4px;
  background: #fff;
  color: inherit;
  font: inherit;
  line-height: inherit;
  box-sizing: border-box;
}
textarea.inline-input { resize: vertical; }

.admin-field-note {
  margin: 10px 0 2px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.feature-remove,
.related-remove {
  margin-left: 8px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid #f0c2b4;
  border-radius: 50%;
  background: #fdf0ec;
  color: #a03214;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.feature-remove:hover,
.related-remove:hover { background: #f9dcd4; }

.related-card .related-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  margin-left: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.feature-add {
  margin-top: 10px;
  padding: 7px 14px;
  border: 1px dashed var(--blue);
  border-radius: 6px;
  background: transparent;
  color: var(--blue);
  font-size: 13px;
  cursor: pointer;
}
.feature-add:hover { background: #f4f6ff; }

.admin-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-upload span {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.admin-upload span:hover { border-color: var(--blue); color: var(--blue); }

.admin-upload-state {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.admin-upload-state.is-error { color: #a03214; }

.related-picker { margin-top: 14px; }
.related-picker label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 13px;
}
.related-picker select {
  width: min(100%, 420px);
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--text);
  font-size: 14px;
}

.related-card { position: relative; }

/* The delete badge on each listing card. */
.product-card.is-editable { position: relative; }

/* Listing edit mode: cards can be picked up and dragged to reorder them.
   Long-pressing a link/image on touch would otherwise show the browser's
   own text-selection handles or "open/copy" callout before our drag even
   starts, so selection and the callout are switched off for the whole card
   the moment edit mode is on, not just while a drag is active.
   touch-action is "none" (not "pan-y") because a browser that's allowed to
   pan vertically takes over the very first touchmove on the card as a page
   scroll -- once it does, our own JS calling preventDefault() on later
   pointermove events can no longer take the gesture back, so holding and
   dragging a card would just scroll the page out from under it. With
   panning off entirely, every touch on a card is ours to interpret (hold
   to pick up, or a quick tap/swipe falls through to a normal tap); paging
   through the list by touch still works everywhere between/around cards,
   and while an item is actually being dragged our own near-edge
   auto-scroll takes over scrolling. */
.product-card.is-editable {
  cursor: grab;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.product-card.is-editable:active { cursor: grabbing; }

/* The card being dragged: lifted out of the grid (position: fixed is set
   inline by JS) and follows the pointer exactly, with no transition on its
   own position so it never lags behind the finger. */
.product-card.is-dragging {
  opacity: 0.98;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32);
  transform: scale(1.04) !important;
  z-index: 2000;
  cursor: grabbing;
}

/* Marks the spot the dragged card will land in. */
.product-card-placeholder {
  border: 2px dashed var(--blue-light, #7c86e0);
  border-radius: 8px;
  background: rgba(55, 60, 150, 0.06);
  box-sizing: border-box;
}

/* While a drag is in progress, nothing on the page should be selectable --
   otherwise a fast finger movement can select surrounding text instead of
   just moving the card. */
body.is-reordering,
body.is-reordering * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.card-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 3;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #d8412a;
  border-radius: 50%;
  background: #e04b32;
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.card-delete:hover { background: #c73c25; }
.card-delete:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: 2px;
}
.card-delete:disabled { opacity: 0.6; cursor: default; }

/* Matches the size of a normal product card so the grid stays even. */
.product-card-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  border: 2px dashed var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  text-decoration: none;
}
.product-card-add:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: #f4f6ff;
}
.add-plus { font-size: 34px; line-height: 1; }
.add-label { font-size: 14px; }


/* ==========================================================================
   Product Posters: Listing & Detail Styles
   ========================================================================== */

/* Tabs and Search Bar */
.tabs-and-search-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 18px 0 6px;
  border-bottom: 1px solid #a4a4a4;
  gap: 16px;
}

.tabs-and-search-bar .content-tabs {
  margin: 0;
  border-bottom: 0;
}

.tab-search-wrap {
  margin: 0 6px 6px 0;
  width: 260px;
  max-width: calc(100% - 12px);
}

@media (min-width: 721px) and (min-height: 521px), (min-width: 721px) and (orientation: portrait) {
  .tabs-and-search-bar .content-tabs {
    order: 0;
  }

  .tabs-and-search-bar .tab-search-wrap {
    order: 1;
    margin-right: 0;
    margin-left: auto;
  }
}

.tab-search-wrap input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: var(--text);
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tab-search-wrap input:focus {
  outline: none;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 2px rgba(55, 60, 150, 0.25);
}

/* Poster Cards in Listing Grid */
.product-card.poster-card-item {
  position: relative;
  display: flex;
  flex-direction: column;
}

.poster-card-status-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 2;
}

.poster-card-status-badge.badge-draft {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.poster-card-status-badge.badge-live {
  background: #d1fae5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.poster-card-status-badge.is-inline {
  position: static;
  margin-left: 8px;
  vertical-align: middle;
}

/* The clickable variant used in listing edit mode: same look as the plain
   span badge, just interactive. */
button.poster-card-status-badge {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
  pointer-events: auto;
}
button.poster-card-status-badge:hover { filter: brightness(0.95); }
button.poster-card-status-badge:disabled { opacity: 0.6; cursor: default; }

.product-card.is-draft {
  border-color: #fde68a;
  background: #fffdf5;
}

/* Poster Detail Page Wrapper */
.poster-page-wrap {
  width: 980px;
  margin: 0 auto;
  padding: 20px 0 40px;
}

/* Top Admin Bars */
.poster-admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  margin-bottom: 24px;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: #0369a1;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(3, 105, 161, 0.08);
}

.poster-admin-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  color: #075985;
}

.poster-admin-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.poster-status-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  color: #0c4a6e;
  cursor: pointer;
}

.poster-status-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #0284c7;
  cursor: pointer;
}

.poster-btn-delete {
  padding: 7px 14px;
  background: #ef4444;
  color: #fff;
  border: 1px solid #dc2626;
  border-radius: 5px;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.poster-btn-delete:hover {
  background: #dc2626;
}

.poster-btn-cancel {
  padding: 7px 14px;
  background: #fff;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  text-decoration: none;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 13px;
  transition: background 0.15s;
}

.poster-btn-cancel:hover {
  background: #f1f5f9;
}

.poster-btn-save {
  padding: 7px 18px;
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--blue);
  border-radius: 5px;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(37, 42, 129, 0.2);
  transition: background 0.15s;
}

.poster-btn-save:hover {
  background: var(--blue-light);
}

.poster-admin-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  margin-bottom: 24px;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 13px;
  color: #0369a1;
}

.poster-btn-toggle-edit {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  background: var(--blue);
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 13px;
  transition: background 0.15s;
}

.poster-btn-toggle-edit:hover {
  background: var(--blue-light);
}

/* Main Two-Column Grid */
.poster-main-grid {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 24px;
}

.poster-mobile-header {
  display: none;
  margin-bottom: 16px;
}

.document-mobile-header { display: none; }

.poster-desktop-header .poster-product-number,
.poster-mobile-header .poster-product-number {
  margin: 0 0 4px;
  color: #777;
  font-size: 12px;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  letter-spacing: 0.02em;
}

.poster-desktop-header .poster-title,
.poster-mobile-header .poster-title {
  margin: 0 0 10px;
  color: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 26px;
  line-height: 1.25;
}

.poster-desktop-header .poster-description,
.poster-mobile-header .poster-description {
  margin: 0 0 20px;
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
}

/* Left Column: Clean Preview Card in Edit Mode (Matches Flyers) */
.poster-edit-card {
  position: relative;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.poster-edit-card .admin-upload-row {
  margin-top: 14px;
}

/* Right Column: Edit Inputs */
.form-group-slug {
  margin-bottom: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.slug-label {
  display: block;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 12px;
  color: #475569;
  margin-bottom: 4px;
}

.admin-input-slug {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px dashed #94a3b8;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.slug-help {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
}

.admin-input-title {
  width: 100%;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 22px;
  color: var(--blue-light);
  padding: 8px 12px;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  box-sizing: border-box;
  margin-bottom: 10px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.admin-input-title:hover,
.admin-input-desc:hover,
.admin-input-slug:hover {
  border-color: var(--blue);
  background: #f4f6ff;
}

.admin-input-title:focus,
.admin-input-desc:focus,
.admin-input-slug:focus,
.admin-select-related:focus {
  outline: none;
  border-color: var(--blue);
  background: #f4f6ff;
  box-shadow: 0 0 0 2px rgba(37, 42, 129, 0.15);
}

.admin-input-desc {
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
  padding: 10px 12px;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  box-sizing: border-box;
  resize: vertical;
  min-height: 90px;
  margin-bottom: 10px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.admin-preview-locked {
  pointer-events: none;
}

.admin-muted-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 12px;
}

/* Related Items Section */
.related-posters-admin-section {
  margin-top: 14px;
}

.related-posters-admin-section .related-label {
  display: block;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #475569;
  margin-bottom: 10px;
}

.related-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  min-height: 32px;
}

.related-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  font-size: 12px;
  color: #1e293b;
}

.chip-type-tag {
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.chip-type-poster { background: #fef3c7; color: #92400e; }
.chip-type-flyer { background: #dbeafe; color: #1e40af; }
.chip-type-catalogue { background: #d1fae5; color: #065f46; }

.chip-title-text {
  font-weight: 500;
}

.chip-remove-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}

.chip-remove-btn:hover {
  color: #ef4444;
}

.related-dropdown-wrap select.admin-select-related {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  color: #334155;
  cursor: pointer;
}

/* Poster Preview Card */
.poster-card-wrap,
.poster-preview-card {
  position: relative;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  cursor: pointer;
}

.poster-img-wrap {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.poster-preview-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  transition: transform 0.2s;
}

.poster-card-wrap:hover .poster-preview-img,
.poster-preview-card:hover .poster-preview-img {
  transform: scale(1.01);
}

.poster-zoom-pill,
.btn-zoom-overlay {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 13px;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  pointer-events: none;
  transition: background 0.2s, transform 0.2s;
}

.poster-card-wrap:hover .poster-zoom-pill,
.poster-preview-card:hover .btn-zoom-overlay {
  background: rgba(15, 23, 42, 0.95);
  transform: translateY(-2px);
}

/* Action Buttons */
.document-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 18px;
  width: 100%;
}

.document-action-buttons form {
  width: 100%;
  margin: 0;
}

.btn-download-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 6px;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.15s, transform 0.15s;
}

button.btn-download-primary {
  appearance: none;
}

.btn-download-primary:hover {
  background: #222;
  border-color: #222;
  transform: translateY(-1px);
}

.btn-share-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 14px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s, border-color 0.15s;
}

.btn-share-secondary:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.poster-divider {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 18px 0 14px;
}

/* Inline Compact OTP Download Gate inside right column */
.poster-inline-download-gate {
  margin: 12px 0 14px;
  width: 100%;
}

.poster-inline-download-gate .product-download-card {
  max-width: 100%;
  width: 100%;
  padding: 18px 18px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

.poster-inline-download-gate .download-steps {
  display: flex;
  justify-content: space-between;
  margin: 0 4px 18px;
  padding: 0;
  list-style: none;
}

.poster-inline-download-gate .download-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  flex: 1;
}

.poster-inline-download-gate .download-steps li:last-child {
  flex: 0 0 auto;
}

.poster-inline-download-gate .download-steps li > span {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  font-size: 10px;
  border-width: 1.5px;
  flex-shrink: 0;
}

.poster-inline-download-gate .download-steps li > strong {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 0 4px;
  white-space: nowrap;
  font-size: 11px;
}

.poster-inline-download-gate .download-steps li:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 11px;
  left: 28px;
  right: 10px;
  height: 2px;
  background: #dedfe5;
  content: "";
}

.poster-inline-download-gate .form-row {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.poster-inline-download-gate .download-form input:not([type="checkbox"]) {
  height: 34px;
  padding: 0 8px;
  font-size: 13px;
  border-radius: 4px;
}

.poster-inline-download-gate .download-button--large {
  min-height: 38px;
  font-size: 13px;
  width: 100%;
  margin-top: 4px;
}

.poster-inline-download-gate .consent {
  font-size: 11px;
  margin: 6px 0 10px;
  line-height: 1.35;
}

.poster-inline-download-gate .download-state-heading {
  margin-bottom: 12px;
}

.poster-inline-download-gate .download-state-heading h3 {
  font-size: 15px;
}

.poster-inline-download-gate .download-state-heading p {
  font-size: 12px;
}

/* Related Items */
/* Two copies of the related-items block exist: one under the poster preview
   (desktop, two-column layout) and one at the very end of the page (phones,
   where the layout stacks into one column). Only one is shown at a time. */
.poster-related-mobile {
  display: none;
}

.related-posters-public-section .related-label {
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #64748b;
  margin: 0 0 12px;
}

.related-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

.related-item-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f3f3;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}

.related-item-card:hover,
.related-item-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.related-item-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #e2e2e2;
  overflow: hidden;
}

.related-item-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-item-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 28px;
}

.related-item-copy {
  padding: 8px 10px 10px;
}

.related-item-type {
  display: block;
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.related-item-title {
  display: block;
  color: var(--blue-light);
  font-family: "Ubuntu-Bold", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
}

@media (max-width: 480px) {
  .related-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px;
  }

  .related-item-copy {
    padding: 7px 8px 9px;
  }

  .related-item-title {
    font-size: 12.5px;
  }
}

/* Lightbox Modal */
.poster-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.poster-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

.lightbox-close-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 10001;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  line-height: 1;
}

.lightbox-content {
  position: relative;
  z-index: 10000;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* Responsive Breakpoints */
@media (max-width: 1020px) {
  .poster-page-wrap {
    width: 100%;
    padding: 16px;
  }
  .poster-main-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .poster-mobile-header {
    display: block;
  }
  .poster-desktop-header {
    display: none;
  }
  .poster-related-desktop {
    display: none;
  }
  .poster-related-mobile {
    display: block;
  }
}

@media (max-width: 720px), (max-height: 520px) and (orientation: landscape) {
  /* Keep a consistent two-line breathing space below the document selector. */
  .flyer-detail > .content-tabs,
  .poster-page-wrap > .content-tabs {
    margin-bottom: 28px;
  }

  /* .flyer-detail clips overflow (for its float/grid children) and has no
     horizontal padding, so the dashed .is-editable-field outline (1px +
     2px offset) was getting its left/right sides cut off at the edges. */
  .flyer-detail {
    padding: 24px 4px 36px;
  }

  /* On phones, flyers and catalogues follow the poster sequence: title,
     description, preview, actions, then the overview. */
  .flyer-layout:not(.is-editing) {
    gap: 16px;
  }

  .flyer-layout:not(.is-editing) > .document-mobile-header {
    display: block;
    margin-bottom: 0;
  }

  .document-mobile-category {
    margin: 0 0 5px !important;
    color: #777;
    font-family: "Ubuntu-Bold", Arial, sans-serif;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .document-mobile-header h1 {
    margin: 0 0 7px;
    color: var(--blue-light);
    font-family: "Ubuntu-Bold", Arial, sans-serif;
    font-size: 24px;
    line-height: 1.25;
  }

  .document-mobile-header .document-mobile-model {
    margin: 0 0 8px;
    color: #5e5b5b;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.45;
  }

  .document-mobile-header .document-mobile-description {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
  }

  .flyer-layout:not(.is-editing) .flyer-copy > .document-desktop-summary {
    display: none;
  }

  /* Edit mode has no separate mobile-header duplicate -- the editable
     fields ARE the header -- so promote .flyer-copy's children into
     .flyer-layout's own item order and slot the pdf preview between the
     header fields and everything else, matching the public sequence. */
  .flyer-layout.is-editing .flyer-copy {
    display: contents;
  }
  .flyer-layout.is-editing .flyer-copy > .document-desktop-summary {
    order: 1;
  }
  .flyer-layout.is-editing .flyer-preview {
    order: 2;
  }
  .flyer-layout.is-editing .flyer-copy > *:not(.document-desktop-summary) {
    order: 3;
  }

  .poster-main-grid {
    gap: 16px;
    margin-top: 0;
  }

  .poster-mobile-header { margin-bottom: 0; }
  .poster-mobile-header .poster-description { margin-bottom: 0; }

  /* Same fix as flyers: the product code/title/description fields ARE the
     header in edit mode, so keep them before the pdf/image column, and
     everything else in the right column after it. */
  .poster-main-grid.is-editing .poster-col-right {
    display: contents;
  }
  .poster-main-grid.is-editing .poster-col-right > .form-group {
    order: 1;
  }
  .poster-main-grid.is-editing .poster-col-left {
    order: 2;
  }
  .poster-main-grid.is-editing .poster-col-right > *:not(.form-group) {
    order: 3;
  }

  .poster-admin-preview-bar,
  .admin-edit-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-edit-bar {
    position: sticky;
    z-index: 20;
    bottom: 8px;
    box-shadow: 0 8px 24px rgba(31, 35, 70, 0.18);
  }

  .poster-admin-preview-bar .poster-btn-toggle-edit,
  .admin-edit-bar .poster-btn-cancel,
  .admin-edit-bar .poster-btn-delete,
  .admin-edit-bar .admin-save {
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  .admin-edit-bar .poster-status-label {
    min-height: 36px;
  }
}

/* Download progress uses actual flex connectors instead of absolutely
   positioned lines. This keeps the three steps as one centered group and
   prevents a connector from ever painting across a label. */
.product-download-card .download-steps {
  display: flex;
  width: 100%;
  margin: 0 0 27px;
  padding: 0;
  align-items: center;
  justify-content: center;
  list-style: none;
}

.product-download-card .download-steps li {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  color: #90929a;
  font-size: 11px;
  text-align: left;
}

.product-download-card .download-steps li > strong {
  position: static;
  z-index: auto;
  padding: 0;
  background: transparent;
  white-space: nowrap;
}

.product-download-card .download-steps li:not(:last-child)::after {
  position: static;
  display: block;
  width: clamp(18px, 5vw, 42px);
  height: 2px;
  margin: 0 12px;
  flex: 0 0 clamp(18px, 5vw, 42px);
  background: #dedfe5;
  content: "";
}

.product-download-card .download-steps li > span {
  margin: 0;
}

@media (max-width: 720px), (max-height: 520px) and (orientation: landscape) {
  /* iOS zooms focused form controls whose text is under 16px. */
  .product-download-card input[type="email"],
  .product-download-card .otp-input {
    font-size: 16px;
  }

  .product-download-card .otp-input {
    font-size: 24px;
  }

  .product-download-card .download-steps {
    margin-bottom: 23px;
  }

  .product-download-card .download-steps li {
    gap: 5px;
    font-size: 10px;
  }

  .product-download-card .download-steps li > strong {
    display: inline;
    font-size: 10px;
  }

  .product-download-card .download-steps li:not(:last-child)::after {
    width: clamp(10px, 3vw, 24px);
    margin: 0 7px;
    flex-basis: clamp(10px, 3vw, 24px);
  }
}

/* Safari iOS auto-zooms any focused input rendered below 16px. Keep every
   email/OTP field in the download flow at or above that threshold. */
@media (max-width: 1020px) {
  .download-form input[type="email"],
  .download-form .otp-input {
    font-size: 16px !important;
  }

  .download-form .otp-input {
    font-size: 24px !important;
  }
}

/* An earlier, higher-specificity base rule (further up this file) was
   putting the divider line at the very bottom of .tabs-and-search-bar --
   i.e. below the search box -- instead of right after the tab row like the
   phone layout intends. Win the cascade explicitly here so the line sits
   between the tabs and the search box, with the search box below it. */
@media (max-width: 720px), (max-height: 520px) and (orientation: landscape) {
  .tabs-and-search-bar {
    border-bottom: none;
  }

  .tabs-and-search-bar .content-tabs {
    border-bottom: 1px solid #a4a4a4;
    margin: 0 0 8px;
  }
}

/* Poster page toast notifications (share success/failure, link-copied
   confirmation). Fixed at the bottom of the screen so it's visible without
   scrolling; the JS toggles the .show class to fade it in and out. */
.poster-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 4000;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 8px;
  background: #1e293b;
  color: #fff;
  font-family: "Ubuntu-Light", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.poster-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}