/* Stampler: layout override. Load AFTER client/css/style.css. */
/* Active only on pages with the st-layout-wide class on <html>. */

html.st-layout-wide {
  --st-page-width: 1200px;
  --st-page-bg: #ececec;
  background: var(--st-page-bg);
}

html.st-layout-wide body,
html.st-layout-wide .bkon,
html.st-layout-wide .section-body {
  background: var(--st-page-bg);
}

html.st-layout-wide .kontener {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: var(--st-page-width);
  margin: 0 auto;
}

html.st-layout-wide .top,
html.st-layout-wide .srodek {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background: transparent;
}

html.st-layout-wide .srodek {
  display: flow-root;
  padding: 0 24px;
}

html.st-layout-wide .srodek .cien,
html.st-layout-wide .szareTlo {
  background: transparent;
}

html.st-layout-wide .radiusTop,
html.st-layout-wide .stopka .tlo_bottom {
  display: none;
}

/* Shared header: fills the selected container, without fixed-width cells. */
html.st-layout-wide .add_menu_top {
  float: none;
  box-sizing: border-box;
  width: 100%;
  margin-left: 0;
}

html.st-layout-wide .add_menu_top ul.add_menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 5px;
  width: 100%;
}

html.st-layout-wide .add_menu_top ul.add_menu > li {
  float: none !important;
  width: auto;
  height: auto;
  max-width: 100%;
}

html.st-layout-wide .add_menu_top .pzr {
  margin-left: auto;
}

html.st-layout-wide form#findme {
  display: flex;
  max-width: 100%;
}

html.st-layout-wide form#findme #szukaj {
  box-sizing: border-box;
  min-width: 0;
  width: 230px;
  max-width: calc(100% - 60px);
}

html.st-layout-wide form#findme #wyslij {
  box-sizing: border-box;
  flex: 0 0 60px;
}

html.st-layout-wide .top nav {
  width: 100%;
  max-width: 100%;
}

html.st-layout-wide .top ul.menu {
  box-sizing: border-box;
  display: flex;
  float: none;
  width: 100%;
  margin: 10px 0 0;
  padding: 0;
  background: transparent;
}

html.st-layout-wide .top ul.menu > li {
  position: relative;
  float: none;
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
  height: 73px;
}

html.st-layout-wide .top ul.menu > li.linear {
  display: none;
}

html.st-layout-wide .top ul.menu > li.home {
  flex: 0 0 230px;
  width: 230px !important;
}

html.st-layout-wide .top ul.menu > li.home > a {
  display: block;
  width: 230px;
}

html.st-layout-wide .top ul.menu > li.el > a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 73px;
  padding: 0 10px;
  background: transparent;
  border-radius: 0;
  text-align: center;
}

html.st-layout-wide .top ul.menu > li.el > a:hover {
  background: #d00000;
  color: #fff;
}

html.st-layout-wide .top ul.menu > li.paczkomat > a {
  display: block;
  padding-top: 16px;
  line-height: 20px;
}

html.st-layout-wide .top ul.menu > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 180px;
  margin: 0;
  padding: 0;
  z-index: 1000;
}

html.st-layout-wide .top ul.menu > li > ul > li {
  float: none;
  box-sizing: border-box;
  width: 100%;
  height: auto;
}

html.st-layout-wide .top ul.menu > li > ul > li > a {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 44px;
  height: auto;
  padding: 12px;
}

html.st-layout-wide .top ul.menu > li:focus-within > ul {
  display: block;
}

html.st-layout-wide a:focus-visible {
  outline: 2px solid #9a0000;
  outline-offset: 3px;
}

/* The footer keeps its existing colours; its content follows the page width. */
html.st-layout-wide .stopka {
  display: flow-root;
  height: auto;
  min-height: 120px;
}

html.st-layout-wide .stopka .bottom {
  display: flow-root;
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: var(--st-page-width);
  margin: 0 auto;
  padding-bottom: 18px;
}

html.st-layout-wide .bottom_lewa,
html.st-layout-wide .bottom_prawa {
  box-sizing: border-box;
  width: auto !important;
  max-width: 100%;
}

html.st-layout-wide .bottom_prawa img {
  display: block;
  max-width: 100%;
  height: auto !important;
  max-height: 24px;
}

/* Home page: remove the old 940/916/903px limits inside the wide shell. */
html.st-home.st-layout-wide div.onas {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding-left: 0;
}

html.st-home.st-layout-wide div.onas > .left,
html.st-home.st-layout-wide div.onas > .right {
  display: none;
}

html.st-home.st-layout-wide div.onas > .center {
  box-sizing: border-box;
  float: none;
  width: 100%;
  background: none;
}

html.st-home.st-layout-wide div.onas .title,
html.st-home.st-layout-wide div.onas .desc {
  box-sizing: border-box;
  float: none;
  width: 100%;
  padding-left: 0;
}

html.st-home.st-layout-wide .st-home-text {
  box-sizing: border-box;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  text-align: left;
}

html.st-home.st-layout-wide .st-home-categories {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  float: none;
  width: 100%;
  padding: 0;
}

html.st-home.st-layout-wide .st-home-categories > p {
  grid-column: 1 / -1;
}

html.st-home.st-layout-wide .st-home-categories > div {
  float: none !important;
  min-width: 0;
  margin: 0 !important;
}

html.st-home.st-layout-wide .st-home-categories > .clear {
  display: none;
}

html.st-home.st-layout-wide .st-home-categories img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Native navigation needs an explicit auto width: legacy CSS sets nav to 997px. */
#stampler-wybor-oferty {
  box-sizing: border-box;
  display: block;
  clear: both;
  width: auto;
  max-width: 100%;
  margin: 24px 0 28px;
  color: #323232;
  font: 15px/1.5 Arial, sans-serif;
}

#stampler-wybor-oferty * { box-sizing: border-box; }
#stampler-wybor-oferty .sw-label { margin: 0 0 12px; font-size: 14px; }
#stampler-wybor-oferty .sw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
#stampler-wybor-oferty .sw-link { display: flex; flex-direction: column; min-width: 0; padding: 18px; border: 1px solid #c6cdd5; border-top: 3px solid #d00000; background: #fff; color: #323232; text-decoration: none; }
#stampler-wybor-oferty .sw-link:hover { border-color: #d00000; }
#stampler-wybor-oferty .sw-images { display: flex; align-items: center; justify-content: center; gap: 3px; height: 164px; margin-bottom: 16px; overflow: hidden; }
#stampler-wybor-oferty .sw-images img { display: block; min-width: 0; flex: 1 1 0; width: 0; height: 152px; object-fit: contain; }
#stampler-wybor-oferty .sw-title { display: block; margin-bottom: 8px; font-size: 24px; font-weight: bold; line-height: 1.2; }
#stampler-wybor-oferty .sw-description { display: block; margin-bottom: 17px; font-size: 14px; }
#stampler-wybor-oferty .sw-action { display: block; margin-top: auto; padding: 10px 12px; background: #d00000; color: #fff; font-size: 14px; font-weight: bold; text-align: center; }
#pieczatki-online { scroll-margin-top: 20px; }

/* Optional wider price-list shell. Product columns retain their current sizes. */
html.st-cennik.st-layout-wide .cennik_menu,
html.st-cennik.st-layout-wide .cennik_menu2 {
  box-sizing: border-box;
  width: 100% !important;
}

html.st-layout-wide:not(.st-home) .srodek {
  overflow-x: auto;
}

@media (max-width: 900px) {
  html.st-layout-wide .top ul.menu { flex-wrap: wrap; }
  html.st-layout-wide .top ul.menu > li.home { flex: 0 0 100%; width: 100% !important; }
  html.st-layout-wide .top ul.menu > li.home > a { margin: 0 auto; }
  html.st-layout-wide .top ul.menu > li.el { flex: 1 1 20%; }
  html.st-layout-wide .top ul.menu > li.el > a { font-size: 17px; }
  html.st-home.st-layout-wide .st-home-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  html.st-layout-wide .kontener,
  html.st-layout-wide .stopka .bottom { width: calc(100% - 24px); }
  html.st-layout-wide .srodek { padding: 0; }
  html.st-layout-wide .add_menu_top .pzr { width: 100%; margin-left: 0; }
  html.st-layout-wide .top ul.menu > li.el { flex: 1 1 33.333%; height: 52px; }
  html.st-layout-wide .top ul.menu > li.el > a { height: 52px; padding: 0 5px; font-size: 16px; }
  html.st-layout-wide .top ul.menu > li.paczkomat > a { padding-top: 6px; }
  html.st-layout-wide .top ul.menu > li > ul { min-width: 160px; }
  html.st-layout-wide .top ul.menu > li:nth-last-child(-n+3) > ul { left: auto; right: 0; }
  html.st-layout-wide .bottom_lewa { margin-left: 0; }
  html.st-layout-wide .bottom_prawa { clear: both; margin-top: 12px !important; }
  #stampler-wybor-oferty { margin: 18px 0 22px; }
  #stampler-wybor-oferty .sw-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #stampler-wybor-oferty .sw-link { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 12px; }
  #stampler-wybor-oferty .sw-images { grid-column: 1; grid-row: 1 / 4; position: relative; height: 125px; margin: 0; }
  #stampler-wybor-oferty .sw-images img { position: absolute; left: 0; top: 0; width: 74px; height: 96px; }
  #stampler-wybor-oferty .sw-images img:nth-child(2) { left: 25px; top: 35px; width: 74px; height: 88px; }
  #stampler-wybor-oferty .sw-images img:nth-child(3) { display: none; }
  #stampler-wybor-oferty .sw-title { grid-column: 2; margin-bottom: 6px; font-size: 20px; }
  #stampler-wybor-oferty .sw-description { grid-column: 2; margin-bottom: 10px; font-size: 13px; }
  #stampler-wybor-oferty .sw-action { grid-column: 2; padding: 9px 8px; font-size: 13px; line-height: 1.35; }
}


/* Full-width menu band for the home page and the engraving catalogue. */
html.st-layout-wide:is(.st-home, .st-grawer-katalog) .top ul.menu {
  --st-menu-band: repeating-linear-gradient(
    to bottom,
    #ededed 0,
    #cccccc 36.5px,
    #b1b1b1 73px
  );
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-radius: 0;
  background: var(--st-menu-band);
}

/* Border-image outsets paint outside the menu without creating scroll width.
   An absolute decoration keeps the existing menu dimensions unchanged. */
html.st-layout-wide:is(.st-home, .st-grawer-katalog) .top ul.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-image-source: var(--st-menu-band);
  border-image-slice: 0 fill;
  border-image-width: 0;
  border-image-outset: 0 100vw;
  border-image-repeat: stretch;
  pointer-events: none;
}

html.st-layout-wide:is(.st-home, .st-grawer-katalog) .top ul.menu > li.el > a {
  background: linear-gradient(to bottom, #ededed, #cccccc, #b1b1b1);
  border-radius: 5px;
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.18);
}

html.st-layout-wide:is(.st-home, .st-grawer-katalog) .top ul.menu > li.el > a:hover,
html.st-layout-wide:is(.st-home, .st-grawer-katalog) .top ul.menu > li.el:focus-within > a {
  background: linear-gradient(to bottom, #ef0000, #cc0000, #aa0000);
  color: #fff;
}

/* Existing phone layout: logo row 73px, followed by two 52px button rows.
   Keep the side bands aligned with those rows instead of stretching one fade. */
@media (max-width: 650px) {
  html.st-layout-wide:is(.st-home, .st-grawer-katalog) .top ul.menu {
    --st-menu-band: linear-gradient(
      to bottom,
      #ededed 0,
      #cccccc 36.5px,
      #b1b1b1 73px,
      #ededed 73px,
      #cccccc 99px,
      #b1b1b1 125px,
      #ededed 125px,
      #cccccc 151px,
      #b1b1b1 177px
    );
  }
}


/* Home update: tighter intro spacing and eight white category cards. */
#stampler-wybor-oferty {
  margin-bottom: 18px;
}

html.st-home.st-layout-wide .st-home-intro {
  display: flow-root;
}

html.st-home.st-layout-wide .st-home-intro > .center > .title {
  padding: 0 0 4px;
}

html.st-home.st-layout-wide .st-home-intro > .center h1 {
  margin: 0 0 12px;
  line-height: 1.25;
}

html.st-home.st-layout-wide .st-home-intro > .center h2 {
  margin: 0 0 12px;
}

html.st-home.st-layout-wide .st-home-types {
  clear: both;
  margin: 24px 0 20px;
  color: #323232;
  font: 15px/1.6 Arial, sans-serif;
}

html.st-home.st-layout-wide .st-home-types > h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.35;
  text-align: left;
}

html.st-home.st-layout-wide .st-home-category {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid #c6cdd5;
  background: #fff;
  color: #323232;
  text-decoration: none;
  text-align: center;
}

html.st-home.st-layout-wide .st-home-category:hover {
  border-color: #9ca8b5;
}

html.st-home.st-layout-wide .st-home-category img {
  display: block;
  width: 100%;
  max-width: 210px;
  height: auto;
  margin: 0 auto;
}

html.st-home.st-layout-wide .st-home-category-name {
  display: block;
  margin: 10px 0 6px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.35;
}

html.st-home.st-layout-wide .st-home-category-description {
  display: block;
  font-size: 13px;
  line-height: 1.45;
}

html.st-home.st-layout-wide .st-home-catalog-action {
  margin: 14px 0 0;
}

html.st-home.st-layout-wide .st-home-catalog-button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  padding: 12px 18px;
  background: #d00000;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
}

html.st-home.st-layout-wide .st-home-catalog-button:hover {
  background: #b30000;
  color: #fff;
}


/* Back-to-top alignment for price lists and the engraving catalogue.
   Match .kontener (max 1200px; 16px gutters, or 12px up to 650px).
   Percentages follow the fixed containing block, including scrollbar space.
   Keep the existing scroll visibility and vertical positioning. */
html.st-layout-wide:is(.st-cennik, .st-grawer-katalog) #do_gory {
  left: auto;
  right: max(16px, calc((100% - var(--st-page-width, 1200px)) / 2));
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 650px) {
  html.st-layout-wide:is(.st-cennik, .st-grawer-katalog) #do_gory {
    right: max(12px, calc((100% - var(--st-page-width, 1200px)) / 2));
  }
}