/* =========================================================
   How to Apply Wall Stickers page-specific CSS
   Global reset, fonts, headings, buttons, container,
   header, nav, footer, and basket styles come from:
   - core.css
   - basket-new.css

   Load order:
   1. core.css
   2. how-to-apply-wall-stickers.css
   3. basket-new.css
========================================================= */

.how-to-apply-wall-stickers-page {
  overflow-x: hidden;
}

/* ================= HEADER ================= */

.main-nav .nav-wrapper {
  border-bottom: 1px solid var(--border-color);
}

/* ================= PAGE AREA ================= */

.wall-stickers-guide-area {
  padding: clamp(30px, 5vw, 60px) 0 clamp(70px, 8vw, 120px);
  background-color: var(--color-white);
}

.wall-stickers-guide-content {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.wall-stickers-guide-header {
  max-width: 900px;
  margin: 0 auto clamp(32px, 5vw, 64px);
  text-align: center;
}

.wall-stickers-guide-header .heading-2 {
  text-transform: uppercase;
}

/* ================= ARTICLE CONTENT ================= */

.wall-stickers-guide-article {
  text-align: left;
}

.wall-stickers-guide-article p {
  margin: 0;
  text-align: left;
}

.wall-stickers-guide-article p + p {
  margin-top: 18px;
}

.wall-stickers-guide-article a {
  color: var(--button-color);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wall-stickers-guide-article strong,
.wall-stickers-guide-article b {
  font-weight: 800;
}

.wall-stickers-guide-section {
  padding-top: clamp(36px, 5vw, 72px);
}

.wall-stickers-guide-section:first-child {
  padding-top: 0;
}

.wall-stickers-guide-section h2 {
  margin-bottom: clamp(22px, 3vw, 36px);
  text-align: center;
  text-transform: none;
  color: #ff7416;
}

.wall-stickers-guide-section h3,
.wall-stickers-guide-section h4 {
  margin-top: clamp(26px, 4vw, 44px);
  margin-bottom: 16px;
  text-align: left;
  color: var(--text-color);
}

.wall-stickers-guide-section h3 {
  font-size: clamp(1.25rem, 1.0417rem + 0.9259vw, 1.875rem);
}

.wall-stickers-guide-section h4 {
  font-size: clamp(1.0625rem, 0.9375rem + 0.5556vw, 1.4375rem);
}

.wall-stickers-guide-anchor {
  display: block;
  position: relative;
  top: -110px;
  visibility: hidden;
}

.wall-stickers-guide-link-list {
  margin-top: clamp(20px, 3vw, 32px);
}

.wall-stickers-guide-link-list a {
  display: inline-block;
  margin-bottom: 14px;
}

/* ================= IMAGES ================= */

.wall-stickers-guide-image {
  display: flex;
  justify-content: center;
  margin: clamp(22px, 4vw, 42px) auto;
  text-align: center;
}

.wall-stickers-guide-image picture {
  display: block;
  width: 100%;
}

.wall-stickers-guide-image img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.wall-stickers-guide-image--hero img {
  max-width: 710px;
}

.wall-stickers-guide-image--wide img {
  max-width: 730px;
}

.wall-stickers-guide-image--large img {
  max-width: 700px;
}

.wall-stickers-guide-image--medium img {
  max-width: 600px;
}

.wall-stickers-guide-image--small img {
  max-width: 500px;
}

.wall-stickers-guide-image--xsmall img {
  max-width: 400px;
}

/* ================= RESPONSIVE ================= */

@media screen and (max-width: 767px) {
  .wall-stickers-guide-area {
    padding: 40px 0 50px;
  }

  .wall-stickers-guide-header {
    margin-bottom: 32px;
  }

  .wall-stickers-guide-section {
    padding-top: 44px;
  }

  .wall-stickers-guide-section h3,
  .wall-stickers-guide-section h4 {
    margin-top: 28px;
  }
}

@media screen and (max-width: 969px) {
  .header-bottom-sm {
    border-bottom: 1px solid var(--border-color);
  }
}