/* PackSmart block styles. Replaces the <style> blocks k-ecommerce pasted into page bodies.
   Source of truth for the legacy rules: docs/reference/pages-pasted-css/ in the meta repo.
   Owned by the theme; editors cannot change this. */

/* ===== layout: pages with bands are full-bleed like the pasted CSS made them; prose-only block pages keep the theme's centred container ===== */
body.ps-blocks:has(.ps-band) #main-section, body.ps-blocks:has(.ps-band) #main-section .container { width: 100%; }
body.ps-blocks:has(.ps-band) .section-container-main-navigation { margin-bottom: 0; padding: 0; }
@media screen and (max-width: 979px) { body.ps-blocks:has(.ps-band) section.main-section { padding: 0; } }

/* ===== bands (about-us values; operational-improvements and our-proven-process differed, see catalogue A.1.a) ===== */
.ps-band { padding-top: 2em; padding-bottom: 1.5em; } /* taller than the pasted 1.43em/1px: matches the live about-us band height */
.ps-band-white { background: #fff; color: #000; }
.ps-band-blue  { background: rgb(21,73,155); color: #fff; }
.ps-band-green { background: rgb(139,198,62); color: #fff; }
.ps-band-navy  { background: rgb(14,21,62); color: #fff; }
.ps-band-heading { font-size: 20px; margin: 0 0 10px; }
.ps-band-heading strong { font-weight: bold; }
/* headingStyle 'title': the page's h1, rendered like the live first band (~26px bold uppercase) */
h1.ps-band-heading { font-size: 26px; font-weight: bold; text-transform: uppercase; line-height: 1.2; }
.ps-band-white .ps-band-heading { color: #000; }
.ps-band-blue .ps-band-heading, .ps-band-green .ps-band-heading, .ps-band-navy .ps-band-heading { color: #fff; }
.ps-band-text { margin: 0 0 1.8em; }
.ps-band img.icon { display: block; margin: 0 auto 10px; }
/* operational-improvements icons (source: .icon{max-width:10%;margin-bottom:5px}; 30% under 980). Only icons that sit above a band heading: the proven-process step images have none and stay large. */
.ps-band img.icon:has(+ .ps-band-heading) { max-width: 64px; margin-bottom: 5px; }
@media screen and (max-width: 979px) { .ps-band img.icon:has(+ .ps-band-heading) { max-width: 100px; } }
/* Icon bands (operational-improvements) = image + heading + an expandable details; the shape is the condition, so a photo banner (image + heading, no details) is not caught.
   Two per row on desktop (live: span6 columns); 49.5% not 50% so the inter-element whitespace does not wrap the second; an odd count would leave a half-width last band (CSS cannot count a run of siblings; the page has six).
   padding: the injected constrain-content-bands rule insets every band by (100% - 760px)/2, i.e. 260px a side on a 634px half band, which squeezed the content into ~110px (one-word buttons, mid-word breaks). Half bands use a plain 20px inset. */
@media screen and (min-width: 980px) {
  .ps-band:has(> img.icon + .ps-band-heading):has(> details) { display: inline-block; width: 49.5%; vertical-align: top; box-sizing: border-box; padding-left: 20px; padding-right: 20px; }
  .ps-band:has(> img.icon + .ps-band-heading):has(> details) details[open] ul { width: 80%; max-width: 387px; }
}
.ps-band-button { font-weight: bold; padding: 8px 60px; margin: 0 20px 20px; text-decoration: none !important; display: inline-block; cursor: pointer; }
.ps-band-white .ps-band-button { background: rgb(21,73,155); color: #fff; }
.ps-band-white .ps-band-button:hover { background: rgb(14,21,62); color: #fff; }
.ps-band-blue .ps-band-button, .ps-band-navy .ps-band-button { background: #fff; color: #000; }
.ps-band-blue .ps-band-button:hover { background: rgb(14,21,62); color: #fff; }
.ps-band-green .ps-band-button { background: #fff; color: #000; }
.ps-band-green .ps-band-button:hover { background: rgb(21,73,155); color: #fff; }
/* collapsible variant (operational-improvements, our-proven-process) */
.ps-band details summary { list-style: none; outline: 0; position: relative; }
.ps-band details summary::-webkit-details-marker { display: none; }
.ps-band details p { font-size: .95rem; margin: 0 0 1rem; padding-top: 1rem; }
.ps-band details ul { text-align: left; }
.ps-band details[open] ul { margin: 0 auto 20px; width: 35%; max-width: 387px; }
.ps-band details[open] ul ul { width: 80%; margin: 5px auto; }
.ps-band-content { padding: 0 20px 20px; }
@media screen and (max-width: 979px) {
  .ps-band-button { display: block; float: none; width: 40%; margin: 0 auto 20px; }
  .ps-band details[open] ul { margin: 10px auto 20px; max-width: 250px; }
}

/* ===== perspectives ===== */
.ps-perspective { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; justify-content: center; align-content: center; max-width: 1200px; margin: 0 auto 20px; }
.ps-perspective .psPerspectiveItems { flex: 1 1 auto; display: inline-block; text-align: center; font-size: 18px; }
.ps-perspective .psPerspectiveItems h2 { font-size: 26px; }
.ps-perspective img.perspectivesImage { border-radius: 50%; max-width: 350px; height: auto; flex: 0 0 auto; }
@media screen and (max-width: 979px) { .ps-perspective { flex-wrap: wrap; } .ps-perspective img.perspectivesImage { max-width: 70%; } }
.ps-perspective .ps-attribution { color: #6b6b6b; }

/* ===== embeds, cards, two-column, prose ===== */
.ps-embed { text-align: center; margin: 20px 0; }
.ps-embed-form iframe { max-width: 100%; }
.ps-embed-video iframe { aspect-ratio: 16/9; height: auto; max-width: 100%; }
.ps-embed-document iframe { max-width: 100%; }
/* cards: resources page rules (240x360 tile, shadow, centred title), prefixed */
.ps-cards .card-container { text-align: center; max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
.ps-cards .card-container a { display: block; text-decoration: none; margin: 2.5%; width: 240px; } /* source: .card-container a{margin:2.5%;width:240px} - the margin belongs on the link (flex item), 4 per row in 1200px */
.ps-cards a, .ps-cards a * { text-decoration: none !important; } /* the theme underlines the title via a descendant rule */
.ps-cards .card { box-sizing: border-box; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; width: 100%; color: black; overflow: hidden; } /* height fits content (supplies tiles are not 360px boxes) */
.ps-cards .card:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); }
.ps-cards .card img { max-width: 100%; height: auto; }
/* normal flow, centred in the 120px strip: title alone sits mid-strip, title + text stack without overlapping */
.ps-cards .title-container { padding: 2px 6px; min-height: 64px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.ps-cards .title-container h4 { margin: 0; }
.ps-cards .title-container p { margin: 4px 0 0; font-size: 13px; line-height: 1.3; }
@media screen and (max-width: 979px) { .ps-cards .card-container a { margin: 2%; width: 44%; } }
.ps-image-text { margin: 0 0 24px; }
.ps-image-text .span6 { box-sizing: border-box; }
@media screen and (max-width: 979px) { .ps-image-text .span6 { float: none; width: 100%; display: block; margin-left: 0; } }
/* Ruling: the live two-column pages authored 300-500px images and the block has no width field,
   so a cap keeps them pixel-similar. */
.ps-image-text img { max-width: min(100%, 420px); height: auto; }
/* prose: live sits in the theme .widget, ~55px inset at 1280, with airy heading/hr rhythm */
.ps-text { padding: 0 55px; }
.ps-text:last-child { margin-bottom: 60px; }
.ps-text h2 { margin: 1.2em 0 .6em; }
.ps-text h5 { margin: 1em 0 1.2em; }
.ps-text hr { margin: 2em 0; }
.ps-text p { margin: 0 0 1.2em; }
body.ps-blocks .ps-heading-fallback { padding: 0 55px; text-align: center; }
/* band pages: the legacy render (live-like) puts prose 40px from the edge, not 55px */
body.ps-blocks:has(.ps-band) .ps-text, body.ps-blocks:has(.ps-band) .ps-heading-fallback { padding-left: 40px; padding-right: 40px; }
@media screen and (max-width: 979px) { .ps-text, body.ps-blocks .ps-heading-fallback, body.ps-blocks:has(.ps-band) .ps-text, body.ps-blocks:has(.ps-band) .ps-heading-fallback { padding-left: 20px; padding-right: 20px; } }
/* careers core-values table (source: careers-at-packsmart.css) */
.ps-page-careers-at-packsmart .ps-text table { margin: 0 auto; }
.ps-page-careers-at-packsmart .ps-text table img { width: 100px; height: 100px; }
.ps-page-careers-at-packsmart .ps-text td { padding-left: 15px; padding-right: 15px; }
/* the rich editor's grid (two-column prose). !important + text-align: the theme's product-grid rules share the class (grid-layout{text-align:center}, flex from equal-height-product-cards) */
.ps-text .grid-layout, .ps-band-content .grid-layout { display: grid !important; grid-template-columns: 1fr; gap: 0 2.5%; text-align: left; }
@media screen and (min-width: 980px) { .ps-text .grid-layout, .ps-band-content .grid-layout { grid-template-columns: var(--cols, 1fr); } }
.ps-text .grid-layout-col, .ps-band-content .grid-layout-col { grid-column: var(--col-span, auto); min-width: 0; }
@media screen and (max-width: 979px) { .ps-text .grid-layout-col, .ps-band-content .grid-layout-col { grid-column: auto; } }
/* supplies tiles: k-ecommerce box-photo look (no shadow, caption bold sentence case), not the resources cards */
.ps-page-supplies .ps-cards .card, .ps-page-supplies .ps-cards .card:hover { box-shadow: none; }
.ps-page-supplies .ps-cards .title-container { min-height: 0; padding-top: 6px; }
.ps-page-supplies .ps-cards .title-container h4 { text-transform: none; font-size: 15px; }
.ps-text .grid-layout-col img, .ps-band-content .grid-layout-col img { max-width: 100%; height: auto; }
@media screen and (max-width: 979px) { .ps-page-supplies .ps-cards .card-container a { width: 80%; margin: 2% auto; } }

/* sitemap: generated list, two columns on desktop, one on a phone */
.ps-sitemap { padding: 0; }
.ps-sitemap ul { margin: 0 0 12px 20px; }
.ps-sitemap > ul { column-count: 2; column-gap: 40px; margin-left: 20px; }
.ps-sitemap > ul > li { break-inside: avoid-column; margin-bottom: 8px; }
.ps-sitemap ul ul { margin-bottom: 0; }
@media screen and (max-width: 979px) { .ps-sitemap > ul { column-count: 1; } }