/* Step 3: local CSS that shows what the original shows after its scripts run. No redesign. */

/* The blog stylesheet clears the body background and relies on the browser's default white.
   Not every browser view defaults to white, so this makes it explicit. */
html { background: #fff; }

/* Desktop menu: the original's script added .active on hover. */
.pagebuilder-megamenu-item:hover .children,
.pagebuilder-megamenu-item:focus-within .children { display: block; opacity: 1; }

/* The site leaves 60 px under the phone header for its search bar. The search bar is gone, so no gap stays. */
@media (max-width: 1023px) {
  .page-header .header.content { padding-bottom: 10px; }
}

/* With the shipping offer gone, the top bar has nothing to show below this width, where its links are hidden. */
@media (max-width: 1023px) {
  .page-header .panel.wrapper { display: none; }
}

/* The homepage's brand logos, sized to fit the module's boxes without cropping. */
.snb-home-brand { display: block; width: 100%; height: 100%; max-height: 110px; padding: 14%; object-fit: contain; box-sizing: border-box; }
.snb-home-brand[alt="Dickies"] { height: auto; aspect-ratio: 207 / 80; padding: 4% 14%; }
.snb-home-brand-text { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 60px; color: #333; font-size: 2.2rem; font-weight: 500; text-align: center; }

/* The order lookup page's message, in place of the form. */
.snb-order-help { max-width: 640px; margin: 24px auto; padding: 0 15px; font-size: 1.6rem; line-height: 1.45; text-align: center; }
.snb-order-help a { color: #0072ef; text-decoration: underline; }

/* With the email sign-up gone, the footer's link columns share its full width, so no gap is left on the right. */
@media (min-width: 768px) {
  footer .footer-links-row .pagebuilder-column-line > .pagebuilder-column { flex: 1 1 0; width: auto !important; max-width: none; }
}

/* A heading added to a page whose source has none, centered like the page's own section headings. */
.snb-decided-title { padding: 0 15px; text-align: center; }
.snb-decided-title .page-title { display: block; margin: 24px 0 8px; font-size: 3.2rem; font-weight: 500; line-height: 1.2; }

/* Category H1 on phones, sized and spaced like the site's other page titles. The phone stylesheet
   has no rule for it here, because the original's script drew it. */
@media (max-width: 767px) {
  .snb-derived-title { padding: 0 15px; }
  .snb-derived-title .page-title { display: block; font-size: 2.6rem; font-weight: 400; line-height: 1.2; margin: 0 0 20px; }
}

/* Collection level: no blank space where the product grid was. */
.snb-collection-level .column.main,
.snb-collection-level #search_browse { min-height: 0 !important; }
/* The site stretches the main area to fill a tall screen, which would open a gap under the H1.
   Any spare height now goes below the link-out block instead. */
.snb-collection-level.catalog-category-view .page-main { flex: 0 0 auto; }
.snb-collection-level.catalog-category-view .page-bottom { flex: 1 0 auto; }
.snb-collection-level.catalog-category-view .column.main { padding-bottom: 16px; }

/* the category page design. Breadcrumb and H1 use the site's own styles. Tiles are new. */
.snb-design-page #search_browse { margin-inline: 0; }
.snb-design-page #search_browse .breadcrumbs-wrap { order: 0; padding: 12px 0 0; }
.snb-category-design { order: 1; width: 100%; }
.snb-design-page .search-description { margin: 16px 0 20px; font-size: 3rem; line-height: 1.2; }
.snb-tile-grid { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.snb-tile { margin: 0; }
.snb-tile a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.snb-tile-media { display: block; aspect-ratio: 4 / 5; background: #f3f3f3; overflow: hidden; }
.snb-tile-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.snb-tile-brand { margin-top: 12px; font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; color: #666; }
.snb-tile-name { margin: 4px 0 12px; font-size: 1.6rem; font-weight: 500; line-height: 1.3; }
.snb-tile-button { margin-top: auto; display: block; padding: 11px 14px; border-radius: 999px; background: #0072ef; color: #fff; font-size: 1.4rem; font-weight: 500; line-height: 1.25; text-align: center; }
.snb-tile a:hover .snb-tile-button, .snb-tile a:focus .snb-tile-button { background: #005bbf; }
.snb-fpo { display: flex; align-items: center; justify-content: center; height: 100%; padding: 16px; background: #fff3b0; color: #333; font-size: 1.4rem; text-align: center; }
.snb-fpo-wide { height: 220px; margin: 12px 0 32px; }
@media (max-width: 1023px) { .snb-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  /* Its parent already has the 15 px gutter that the description below it lines up with. */
  .snb-design-page #search_browse { padding: 0; }
  .snb-design-page #search_browse .breadcrumbs-wrap { padding: 8px 0 0; }
  .snb-design-page .search-description { font-size: 2.6rem; }
  .snb-tile-grid { gap: 14px; }
  .snb-tile-button { padding: 10px; font-size: 1.3rem; }
}

/* the family message and brand grid, also used by the sale section. New, in the site's own type. */
.snb-family { margin-bottom: 24px; }
.snb-family-message { max-width: 860px; margin: 8px 0 28px; font-size: 1.8rem; line-height: 1.45; }
.snb-family-message a { color: #0072ef; text-decoration: underline; }
.snb-brand-section { padding: 24px 0 28px; border-top: 1px solid #e3e3e3; }
.snb-brand-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: 20px; margin-bottom: 20px; }
.snb-brand-head-text { grid-template-columns: minmax(0, 1fr); }
.snb-brand-logo { display: block; overflow: hidden; border-radius: 4px; aspect-ratio: 1280 / 880; background: #f3f3f3; }
.snb-brand-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.snb-brand-name { margin: 0; font-size: 2.4rem; font-weight: 500; line-height: 1.2; }
.snb-brand-desc { max-width: 760px; margin: 6px 0 8px; font-size: 1.5rem; line-height: 1.45; }
.snb-brand-link { display: inline-block; margin-top: 2px; color: #0072ef; font-size: 1.4rem; font-weight: 500; text-decoration: underline; }
.snb-offer-list { display: flex; flex-wrap: wrap; gap: 6px 8px; width: 100%; margin: 12px 0 0; padding: 0; list-style: none; }
.snb-offer { margin: 0; padding: 4px 12px; border-radius: 14px; background: #e8f2ff; color: #00479d; font-size: 1.3rem; font-weight: 500; line-height: 1.35; }
.snb-dept-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.snb-dept-name { margin: 0 0 12px; color: #666; font-size: 1.3rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.snb-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; margin: 0; padding: 0; list-style: none; }
.snb-cat { margin: 0; }
.snb-cat a { display: block; color: inherit; text-decoration: none; }
.snb-cat-media { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: #f3f3f3; }
.snb-cat-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.snb-cat a:hover .snb-cat-media img, .snb-cat a:focus .snb-cat-media img { transform: scale(1.03); }
.snb-cat-label { display: block; margin-top: 8px; color: #0072ef; font-size: 1.4rem; font-weight: 500; line-height: 1.25; }
.snb-cat a:hover .snb-cat-label, .snb-cat a:focus .snb-cat-label { text-decoration: underline; }
/* A brand with one department, or a page for one department, uses the full width. */
.snb-dept-row-one { grid-template-columns: minmax(0, 1fr); }
.snb-dept-row-one .snb-cat-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1023px) {
  .snb-dept-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .snb-dept-row-one .snb-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .snb-family-message { font-size: 1.6rem; }
  .snb-brand-head { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  .snb-brand-head-text { grid-template-columns: minmax(0, 1fr); }
  .snb-brand-desc { font-size: 1.4rem; }
  .snb-brand-name { font-size: 2.2rem; }
  .snb-cat-label { font-size: 1.3rem; }
}

/* The help page. New, not from the source. */
.snb-help-page { max-width: 800px; margin: 24px auto 48px; padding: 0 15px; }
.snb-help-page h1 { font-size: 3.2rem; font-weight: 500; line-height: 1.2; margin: 8px 0 24px; }
.snb-help-page h2 { font-size: 2.2rem; font-weight: 500; margin: 28px 0 8px; }

/* The link-out block. New, not from the source, in the site's own font and blue. */
.snb-linkout { margin: 32px 0 40px; }
.snb-linkout h2 { font-size: 2.2rem; font-weight: 500; margin: 12px 0 8px; }
.snb-linkout-intro { margin: 0 0 16px; }
.snb-linkout-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.snb-linkout-list li { margin: 0; }
.snb-linkout-list a { display: block; padding: 14px 16px; border: 1px solid #0072ef; border-radius: 6px; color: #0072ef; font-weight: 500; text-decoration: none; }
.snb-linkout-list a:hover, .snb-linkout-list a:focus { background: #0072ef; color: #fff; }
@media (max-width: 767px) {
  .catalog-category-view .snb-linkout { padding: 0 15px; }
}

/* the homepage concept. Words are real page text over each brand's photo, sized to the block by container units,
   so they hold at every width. The phone layout switches where the block swaps to its phone image. */
.snb-hc-figure { position: relative; width: 100%; margin: 0; container-type: inline-size; overflow: hidden; }
.snb-hc-text { position: absolute; display: flex; flex-direction: column; box-sizing: border-box; color: #fff; font-family: "Circular Std", "Helvetica Neue", Arial, sans-serif; }
.snb-hc-text h2 { margin: 0; padding: 0; color: inherit; font-family: inherit; font-weight: 800; letter-spacing: -0.01em; line-height: 1; text-transform: uppercase; }
.snb-hc-text p { margin: 0; padding: 0; color: inherit; line-height: 1.3; }
.snb-hc-text .snb-hc-logo { display: block; height: auto; }
.snb-hc-btn { display: inline-block; align-self: flex-start; border-radius: 999px; background: #fff; color: #111; font-weight: 500; line-height: 1; white-space: nowrap; }

/* Cherokee: the words on black, left of the nurses. */
.snb-hc-hero { top: 0; bottom: 0; left: 5%; width: 36%; justify-content: center; }
.snb-hc-hero .snb-hc-logo { width: 14cqw; margin-bottom: 2.4cqw; }
.snb-hc-hero .snb-hc-big { display: block; width: min-content; font-size: 7.4cqw; line-height: .96; }
.snb-hc-hero .snb-hc-sub { display: block; margin-top: 1.1cqw; font-size: 2.9cqw; font-weight: 500; letter-spacing: .01em; }
.snb-hc-hero p { margin-top: 1cqw; font-size: 1.75cqw; }
.snb-hc-hero .snb-hc-btn { margin-top: 2.2cqw; padding: 1.15cqw 2.1cqw; font-size: 1.45cqw; }

/* AllHeart as the hero, on its own dark ground, left of the scrubs. */
.snb-hc-ah .snb-hc-logo { width: 17cqw; margin-bottom: 2.6cqw; }
.snb-hc-ah .snb-hc-big { width: auto; font-size: 5.2cqw; line-height: 1; }
.snb-hc-ah .snb-hc-sub { margin-top: 1.2cqw; }

/* Cherokee Originals Ultra, the words on Cherokee navy, left of the photo. */
.snb-hc-ultra { top: 0; bottom: 0; left: 3.5%; width: 17%; justify-content: center; }
.snb-hc-ultra .snb-hc-logo { width: 12cqw; margin-bottom: 2.2cqw; }
.snb-hc-ultra h2 { font-size: 3.1cqw; line-height: 1.02; }
.snb-hc-ultra p { margin-top: 1.2cqw; font-size: 2cqw; }
.snb-hc-ultra .snb-hc-btn { margin-top: 2.2cqw; padding: 1.15cqw 1.9cqw; font-size: 1.35cqw; }

/* Healing Hands: the words on the color panel, right of the photo. */
.snb-hc-evry { top: 0; right: 0; bottom: 0; width: 50%; padding: 0 6cqw; align-items: center; justify-content: center; text-align: center; }
.snb-hc-evry .snb-hc-logo { width: 19cqw; margin-bottom: 2.6cqw; }
.snb-hc-evry h2 { font-size: 7.4cqw; }
.snb-hc-evry h2 em { color: #f6c9bf; font-style: normal; }
.snb-hc-evry p { margin-top: 1.5cqw; font-size: 2.1cqw; }
.snb-hc-evry .snb-hc-btn { align-self: center; margin-top: 2.6cqw; padding: 1.15cqw 2.2cqw; font-size: 1.45cqw; }

/* MedCouture: the campaign's artwork on its plum, beside the square photo. */
.feature-text-container.snb-hc-mc { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: stretch !important; padding: 6%; background: #3a1230; color: #fff; text-align: center; }
.snb-hc-mc .snb-hc-logo { display: block; width: 34%; height: auto; margin-bottom: 7%; }
.snb-hc-mc .snb-hc-art { display: block; width: 92%; height: auto; }
.snb-hc-mc h2 { margin: 6% 0 0; padding: 0; color: #fff; font-family: inherit; font-size: 26px; font-weight: 800; line-height: 1.15; text-transform: uppercase; text-wrap: balance; }
.snb-hc-mc .secondary-text { color: #fff; }
.snb-hc-mc .secondary-text p { margin: 10px 0 0; }
.snb-hc-mc .pagebuilder-button-primary, .snb-hc-mc div.pagebuilder-button-primary:hover { background: #f5c518 !important; border-color: #f5c518 !important; color: #111 !important; }

@media only screen and (max-width: 767px) {
  .snb-hc-hero { top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: 44%; padding: 6cqw 7cqw 0; align-items: center; justify-content: flex-start; text-align: center; }
  .snb-hc-hero .snb-hc-logo { width: 30cqw; margin-bottom: 4cqw; }
  .snb-hc-hero .snb-hc-big { width: auto; font-size: 11.6cqw; line-height: 1; }
  .snb-hc-hero .snb-hc-sub { margin-top: 2cqw; font-size: 6.4cqw; }
  .snb-hc-hero p { margin-top: 2cqw; font-size: 4.5cqw; }
  .snb-hc-hero .snb-hc-btn { align-self: center; margin-top: 4cqw; padding: 3cqw 6cqw; font-size: 4.2cqw; }
  .snb-hc-ah .snb-hc-logo { width: 36cqw; margin-bottom: 4cqw; }
  .snb-hc-ah .snb-hc-big { font-size: 9.6cqw; }
  .snb-hc-ultra { top: 54.3%; right: 0; bottom: 0; left: 0; width: 100%; padding: 0 8cqw; align-items: center; justify-content: center; text-align: center; }
  .snb-hc-ultra .snb-hc-logo { width: 34cqw; margin-bottom: 4cqw; }
  .snb-hc-ultra h2 { font-size: 11.5cqw; }
  .snb-hc-ultra p { margin-top: 2.5cqw; font-size: 5cqw; }
  .snb-hc-ultra .snb-hc-btn { align-self: center; margin-top: 4.5cqw; padding: 3cqw 6cqw; font-size: 4.2cqw; }
  .snb-hc-evry { top: 54.3%; right: 0; bottom: 0; left: 0; width: 100%; padding: 0 8cqw; }
  .snb-hc-evry .snb-hc-logo { width: 40cqw; margin-bottom: 4cqw; }
  .snb-hc-evry h2 { font-size: 13cqw; }
  .snb-hc-evry p { margin-top: 2.5cqw; font-size: 4.5cqw; }
  .snb-hc-evry .snb-hc-btn { margin-top: 4.5cqw; padding: 3cqw 6cqw; font-size: 4.2cqw; }
  .feature-text-container.snb-hc-mc { padding: 10px 6%; }
  .snb-hc-mc .snb-hc-logo { width: 30%; margin-bottom: 6px; }
  .snb-hc-mc .snb-hc-art { width: 90%; }
  .snb-hc-mc h2 { margin-top: 6px; font-size: 16px; }
  .snb-hc-mc .secondary-text p { margin-top: 4px; font-size: 16px; line-height: 1.3; }
  .snb-hc-mc .pagebuilder-button-primary { margin: 6px 0 0 !important; padding: 8px 20px !important; min-height: 0 !important; }
}

/* Student Essentials and Featured Collections: their labels name dunbar-tall, which isn't loaded, so browsers showed a serif.
   They use the section headings' font instead, keeping their own bold and upper case. */
.category-feature-heading { font-family: "Circular Std", "Helvetica Neue", Arial, sans-serif !important; }

/* the discovery module. AllHeart first and largest, then HeartSoul and Infinity, in the footprint of the block it replaces. */
.snb-hc-discovery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; box-sizing: border-box; aspect-ratio: 1225 / 594; margin: 20px; font-family: "Circular Std", "Helvetica Neue", Arial, sans-serif; }
.snb-hc-discovery a { position: relative; display: block; min-height: 0; overflow: hidden; color: #fff; text-decoration: none; }
.snb-hc-discovery a:hover, .snb-hc-discovery a:focus { color: #fff; text-decoration: none; }
.snb-hc-lead { grid-row: 1 / span 2; container-type: inline-size; }
.snb-hc-more { container-type: inline-size; }
.snb-hc-discovery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.snb-hc-over { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); }
.snb-hc-lead .snb-hc-over { padding: 12cqw 6cqw 5cqw; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); }
.snb-hc-more .snb-hc-over { padding: 5cqw 4cqw 3cqw; }
.snb-hc-discovery h2, .snb-hc-discovery h3 { margin: 0; padding: 0; color: #fff; font-family: inherit; font-weight: 800; line-height: 1.08; text-transform: uppercase; }
.snb-hc-discovery h2 { max-width: 100%; font-size: 5cqw; text-wrap: balance; }
.snb-hc-discovery h3 { font-size: 4cqw; }
.snb-hc-discovery p { margin: 0; padding: 0; color: #fff; line-height: 1.3; }
.snb-hc-lead p { margin-top: 1.4cqw; font-size: 3.2cqw; }
.snb-hc-more p { font-size: 2.9cqw; }
.snb-hc-lead .snb-hc-btn { margin-top: 3cqw; padding: 2.4cqw 4.4cqw; font-size: 2.8cqw; }
/* the large panel can carry its brand's logo above the heading. */
.snb-hc-discovery .snb-hc-over .snb-hc-logo { width: 24cqw; height: auto; margin-bottom: 2.4cqw; object-fit: contain; }


@media only screen and (max-width: 767px) {
  .snb-hc-discovery { grid-template-columns: 1fr; grid-template-rows: 356fr 140fr 140fr; aspect-ratio: 375 / 672; margin: 0; gap: 6px; }
  .snb-hc-lead { grid-row: auto; }
  .snb-hc-lead .snb-hc-over { padding: 10cqw 6cqw 4cqw; }
  .snb-hc-discovery h2 { max-width: 100%; font-size: 5.6cqw; }
  .snb-hc-lead p { font-size: 4.4cqw; }
  .snb-hc-lead .snb-hc-btn { padding: 2.6cqw 5cqw; font-size: 4cqw; }
  .snb-hc-more .snb-hc-over { padding: 7cqw 4cqw 2.5cqw; }
  .snb-hc-discovery h3 { font-size: 4.6cqw; }
  .snb-hc-more p { font-size: 3.9cqw; }
}

/* ScrubStar: its hero across the full block, with the words in its own blank space, and its black and white. */
.snb-hc-star-column { width: 100% !important; padding: 0 !important; }
.snb-hc-scrubstar { top: 0; bottom: 11.5%; left: 2.5%; width: 21%; justify-content: center; color: #111; }
.snb-hc-scrubstar h2 { color: #111; font-size: 3.1cqw; }
.snb-hc-scrubstar p { margin-top: .8cqw; font-size: 1.75cqw; }
.snb-hc-scrubstar .snb-hc-btn { margin-top: 1.7cqw; padding: 1.1cqw 1.9cqw; background: #111; color: #fff; font-size: 1.4cqw; }
.snb-hc-where { position: absolute; bottom: -9.5%; left: 0; color: #fff; font-size: 1.5cqw; font-weight: 500; letter-spacing: .01em; white-space: nowrap; }

/* The line under Featured Collections. */
.snb-hc-looking { margin: 18px 0 0; padding: 0 16px; color: #333; font-size: 16px; line-height: 1.4; text-align: center; }
.snb-hc-looking a { color: #111; font-weight: 500; text-decoration: underline; }

@media only screen and (max-width: 767px) {
  .snb-hc-scrubstar { top: 0; right: 0; bottom: 0; left: 0; width: 100%; padding-top: 8cqw; align-items: center; justify-content: flex-start; color: #111; text-align: center; }
  .snb-hc-scrubstar h2 { color: #111; font-size: 10cqw; }
  .snb-hc-scrubstar p { margin-top: 1.5cqw; font-size: 5cqw; }
  .snb-hc-where { position: absolute; right: 0; bottom: 25cqw; left: 0; font-size: 4.5cqw; font-weight: 400; text-align: center; }
  .snb-hc-scrubstar .snb-hc-btn { position: absolute; bottom: 8cqw; left: 50%; align-self: auto; margin: 0; padding: 3.4cqw 7cqw; background: #fff; color: #111; font-size: 4.4cqw; transform: translateX(-50%); }
  .snb-hc-looking { font-size: 15px; }
}
/* the brand names after the lead, as one tidy line that wraps on phones. */
.snb-hc-looking-lead { margin-right: 4px; font-weight: 500; }
.snb-hc-looking .snb-hc-dot { color: #999; }
.snb-hc-looking a { white-space: nowrap; }


/* the Contact page, on Cherokee's pattern: an intro, then Email Us, Call Us and More Help side by side. */
.snb-contact { max-width: 960px; margin: 24px auto 40px; padding: 0 15px; font-size: 1.6rem; line-height: 1.5; text-align: center; }
.snb-contact .snb-contact a { color: #0072ef; text-decoration: underline; }
.snb-contact-intro { max-width: 640px; margin: 0 auto 28px; }
.snb-contact-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.snb-contact-way { padding: 24px 16px; border: 1px solid #e3e3e3; border-radius: 8px; }
.snb-contact-way h2 { margin: 0 0 8px; font-size: 2rem; font-weight: 700; text-transform: none; }
.snb-contact-way p { margin: 0; }
@media only screen and (max-width: 767px) { .snb-contact-ways { grid-template-columns: 1fr; } }

/* the accessibility statement's list of covered sites, and a decided link above a category page's words. */
.snb-a11y { overflow: hidden; }
.snb-a11y-sites { margin: 0 0 16px 20px; }
.snb-decided-link { margin: 8px 0 4px; }
.snb-decided-link .snb-brand-link { font-size: 1.6rem; font-weight: 700; }