/*
Theme Name: Simple Gifts
Theme URI: https://simplegifts.ca
Description: Child theme of GeneratePress for simplegifts.ca. Custom colors, typography, header/footer, and homepage layout.
Author: Simple Gifts
Template: generatepress
Version: 2.5.0
Text Domain: simplegifts
*/

:root {
  --sg-bg: #f5f3ef;
  --sg-bg-alt: #f0e4d3;
  --sg-surface: #ffffff;
  --sg-navy: #1a2e5c;
  --sg-text: var(--sg-navy);
  --sg-text-muted: #5c6b82;
  --sg-primary: #1b7a7a;
  --sg-primary-dark: #145f5f;
  --sg-primary-light: #dceeee;
  --sg-accent: #e85ba0;
  --sg-accent-light: #f193c5;
  --sg-brown: #6b4a32;
  --sg-leaf: #5a8c4a;
  --sg-border: #e3d6c4;
  --sg-radius: 10px;
  --sg-radius-lg: 16px;
  --sg-shadow: 0 2px 14px rgba(26, 46, 92, 0.08);
  --sg-shadow-lg: 0 12px 40px rgba(26, 46, 92, 0.14);
  --sg-font-heading: "Playfair Display", Georgia, serif;
  --sg-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- announcement bar ---------- */

.sg-announcement-bar {
  background: var(--sg-navy);
  text-align: center;
  padding: 8px 16px;
}

.sg-announcement-bar p {
  margin: 0;
  color: #fff;
  font-family: var(--sg-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- base ---------- */

body {
  background: var(--sg-bg);
  color: var(--sg-text);
  font-family: var(--sg-font-body);
}

h1,
h2,
h3,
h4,
.site-title,
.sg-hero-title,
.sg-section-title {
  font-family: var(--sg-font-heading);
  color: var(--sg-text);
  font-weight: 700;
}

a {
  color: var(--sg-primary);
}

a:hover {
  color: var(--sg-primary-dark);
}

/* ---------- logo / wordmark ---------- */

.sg-logo {
  font-family: var(--sg-font-heading);
  font-weight: 700;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.sg-logo-simple {
  color: var(--sg-accent);
}

.sg-logo-gifts {
  color: var(--sg-primary);
}

.sg-logo-dot {
  color: var(--sg-navy);
  font-weight: 900;
  font-size: 1.35em;
  line-height: 1;
  margin-left: 1px;
}

.sg-footer-brand .sg-logo {
  font-size: inherit;
}

.site-content,
#content {
  background: var(--sg-bg);
}

/* ---------- buttons (site-wide, incl. WooCommerce) ---------- */

/* The plugin's own utility buttons (design cards, category chips,
   modal close/toggle, etc.) are plain <button> elements too, but
   were never meant to look like a call-to-action - excluded here so
   this global CTA styling doesn't force a green fill/border onto
   them. Each already has its own complete styling in the plugin's
   personalizer.css. */
.button,
button:not(.sgp-not-cta),
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
  font-family: var(--sg-font-body);
  font-weight: 600;
  border-radius: var(--sg-radius) !important;
  background: var(--sg-primary) !important;
  border-color: var(--sg-primary) !important;
  color: #fff !important;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}

.button:hover,
button:not(.sgp-not-cta):hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover {
  background: var(--sg-primary-dark) !important;
  border-color: var(--sg-primary-dark) !important;
}

/* The Cart and Checkout BLOCKS style every one of their own buttons
   in detail already - quantity steppers, remove-item icons, the
   order-summary toggle, coupon apply, and more. The global CTA rule
   above was forcing all of those into an oversized colored pill too,
   breaking the whole page's layout. Handing control back to
   WooCommerce Blocks' own CSS inside these two containers, then
   branding just the two real calls to action by their real names. */
.wp-block-woocommerce-cart button:not(.sgp-not-cta),
.wp-block-woocommerce-checkout button:not(.sgp-not-cta) {
  all: revert !important;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--sg-primary) !important;
  border-color: var(--sg-primary) !important;
  color: #fff !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--sg-primary-dark) !important;
  border-color: var(--sg-primary-dark) !important;
}

/* WooCommerce ships the Cart and Checkout blocks with an .alignwide
   class. Its negative, viewport-relative margins are meant to break
   the block out of the normal content column on themes built for
   Full Site Editing, which define a matching wide-size value. This
   is a classic GeneratePress theme with no such value, so the
   breakout has nothing to measure against and just shoves the whole
   block against the actual browser edge instead of widening
   symmetrically - cancelling it lets Cart/Checkout sit in the same
   padded column as every other page. */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Google's address-suggestion dropdown (.pac-container) is appended
   straight to <body>, so it should naturally sit above everything -
   but the checkout block's order-summary sidebar establishes its own
   stacking context (sticky positioning) that can still end up on top
   of it, making suggestions look clickable but actually swallow the
   click. Forcing it above everything else on the page. */
.pac-container {
  z-index: 99999 !important;
}

.sg-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--sg-radius);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}

.sg-btn-primary {
  background: var(--sg-primary);
  color: #fff;
}

.sg-btn-primary:hover {
  background: var(--sg-primary-dark);
  color: #fff;
  transform: translateY(-1px);
}

.sg-btn-light {
  background: #fff;
  color: var(--sg-primary-dark);
}

.sg-btn-light:hover {
  background: var(--sg-bg-alt);
  color: var(--sg-primary-dark);
  transform: translateY(-1px);
}

/* ---------- header ---------- */

.site-header,
.main-navigation,
.main-navigation .inside-navigation {
  background: var(--sg-surface);
}

.main-navigation {
  border-bottom: 1px solid var(--sg-border);
}

.site-title,
.site-title a {
  font-family: var(--sg-font-heading);
  font-weight: 700;
  font-size: 26px;
  color: var(--sg-text) !important;
  letter-spacing: 0.01em;
}

.site-description {
  font-family: var(--sg-font-body);
  color: var(--sg-text-muted);
}

.main-navigation .main-nav ul li > a {
  font-family: var(--sg-font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sg-text);
}

.main-navigation .main-nav ul li > a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--sg-primary);
}

/* ---------- footer ---------- */

.sg-footer-band {
  background: var(--sg-navy);
  color: #f0e4d3;
  padding: 48px 0;
}

.sg-footer-band-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
}

.sg-footer-brand-name {
  font-family: var(--sg-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.sg-footer-tagline {
  margin: 6px 0 0 0;
  color: #d9c9b0;
  font-size: 14px;
}

.sg-footer-links-title {
  display: block;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d9c9b0;
  margin-bottom: 10px;
}

.sg-footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-footer-links li {
  margin-bottom: 6px;
}

.sg-footer-links a {
  color: #f0e4d3;
  font-size: 14px;
  text-decoration: none;
}

.sg-footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

#footer-widgets,
.site-info {
  background: var(--sg-navy) !important;
  color: #d9c9b0 !important;
  border: none !important;
}

.site-info a {
  color: #f0e4d3 !important;
}

/* ---------- homepage: hero ---------- */

.sg-home {
  max-width: none !important;
  padding: 0 !important;
}

.sg-hero {
  position: relative;
  overflow: hidden;
  padding: 110px 24px;
  text-align: center;
  background: var(--sg-bg);
}

/* The hero's background and the "How it Works" section right after
   it are two flat, different colors sitting directly against each
   other - a hard edge that reads as a visible line no matter how
   soft the content above it is. Fading the last bit of the hero into
   the next section's own color removes that seam instead of just
   hiding it. */
.sg-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--sg-surface));
  pointer-events: none;
  z-index: 0;
}

/* Scoped to the same centered column as .sg-hero-inner (not the
   full-width hero section) - percentage positions on the bubbles
   below are relative to THIS box, so they always land under the
   text itself instead of out in the wide side margins on a normal
   desktop-width screen, which is where they were effectively
   invisible before. */
.sg-hero-glow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(700px, 100%);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* Two soft, blurred bubbles (plus a smaller third) drifting slowly
   past each other right behind the headline - visible enough to
   notice moving, but low-opacity and out of focus so the text on
   top always stays the thing you actually read. */
.sg-bubble {
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  opacity: 0.7;
}

.sg-bubble-1 {
  width: 300px;
  height: 300px;
  left: 6%;
  top: 10%;
  background: radial-gradient(circle, rgba(27, 122, 122, 0.6), transparent 70%);
  animation: sg-float-a 32s ease-in-out infinite;
}

.sg-bubble-2 {
  width: 260px;
  height: 260px;
  right: 8%;
  top: 34%;
  background: radial-gradient(circle, rgba(232, 91, 160, 0.55), transparent 70%);
  animation: sg-float-b 40s ease-in-out infinite;
}

.sg-bubble-3 {
  width: 210px;
  height: 210px;
  left: 34%;
  bottom: 4%;
  background: radial-gradient(circle, rgba(27, 122, 122, 0.4), transparent 70%);
  animation: sg-float-c 27s ease-in-out infinite;
}

/* Irregular, uneven keyframe spacing (not a clean back-and-forth
   bounce) so each bubble reads as drifting on its own rather than
   swinging like a pendulum - closer to atoms nudging toward
   stability than anything mechanical. Each bubble uses different
   offsets and a different duration so they never fall into sync. */
@keyframes sg-float-a {
  0% {
    transform: translate(0, 0) scale(1);
  }
  22% {
    transform: translate(120px, -50px) scale(1.15);
  }
  41% {
    transform: translate(-90px, 70px) scale(0.85);
  }
  63% {
    transform: translate(140px, 30px) scale(1.1);
  }
  81% {
    transform: translate(-70px, -80px) scale(0.9);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes sg-float-b {
  0% {
    transform: translate(0, 0) scale(1);
  }
  18% {
    transform: translate(-130px, 50px) scale(0.88);
  }
  37% {
    transform: translate(80px, -70px) scale(1.18);
  }
  58% {
    transform: translate(-50px, 80px) scale(0.92);
  }
  79% {
    transform: translate(120px, -30px) scale(1.12);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes sg-float-c {
  0% {
    transform: translate(0, 0) scale(1);
  }
  27% {
    transform: translate(80px, 50px) scale(1.2);
  }
  49% {
    transform: translate(-120px, -30px) scale(0.82);
  }
  68% {
    transform: translate(70px, -70px) scale(1.1);
  }
  88% {
    transform: translate(-60px, 40px) scale(0.9);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-bubble {
    animation: none;
  }
}

.sg-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.sg-hero-title {
  font-size: 46px;
  line-height: 1.15;
  margin: 0 0 16px 0;
  background: linear-gradient(100deg, var(--sg-primary-dark) 0%, var(--sg-accent) 50%, var(--sg-primary-dark) 100%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: var(--sg-text);
  -webkit-text-fill-color: transparent;
  animation: sg-shine 10s ease-in-out infinite alternate;
}

@keyframes sg-shine {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 100% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-hero-title {
    animation: none;
  }
}

.sg-hero-subtitle {
  font-size: 18px;
  color: var(--sg-text-muted);
  margin: 0 0 28px 0;
  line-height: 1.5;
}

/* ---------- homepage: how it works (1-2-3) ---------- */

.sg-steps {
  background: var(--sg-surface);
  padding: 84px 24px;
  border-bottom: 1px solid var(--sg-border);
}

.sg-steps-inner {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

/* A soft line threading through the three step icons, like beads on
   a string - reads as one short journey instead of three unrelated
   facts. Positioned to cross exactly through the icon circles'
   center, and only between them (not under the numbers or text). */
.sg-steps-inner::before {
  content: "";
  position: absolute;
  top: 100px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: linear-gradient(90deg, var(--sg-accent), var(--sg-primary));
  opacity: 0.3;
  z-index: 0;
}

.sg-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sg-step-number {
  font-family: var(--sg-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--sg-accent);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 3px 10px rgba(232, 91, 160, 0.35);
}

.sg-step-icon-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--sg-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 6px 18px rgba(27, 122, 122, 0.14);
}

.sg-step-icon {
  width: 48px;
  height: 48px;
  color: var(--sg-primary);
}

.sg-step h3 {
  font-size: 19px;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ---------- homepage: sections shared ---------- */

.sg-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
}

.sg-section-title {
  font-size: 30px;
  text-align: center;
  margin: 0 0 36px 0;
}

/* ---------- homepage: categories ---------- */

.sg-categories {
  background: var(--sg-bg-alt);
}

.sg-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.sg-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: var(--sg-surface);
  border-radius: var(--sg-radius-lg);
  overflow: hidden;
  box-shadow: var(--sg-shadow);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.sg-category-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sg-shadow-lg);
}

.sg-category-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--sg-primary-light);
  background-size: cover;
  background-position: center;
}

.sg-category-name {
  padding: 14px 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--sg-text);
  text-align: center;
}

/* ---------- homepage: featured products ---------- */

.sg-featured {
  background: var(--sg-surface);
}

/* ---------- shop with confidence (trust) page ---------- */

.sg-trust-stats {
  display: flex;
  gap: 40px;
  margin: 24px 0;
  flex-wrap: wrap;
}

.sg-trust-stat {
  display: flex;
  flex-direction: column;
}

.sg-trust-stat-number {
  font-size: 36px;
  font-weight: 700;
  color: var(--sg-primary, #1b7a7a);
  line-height: 1.1;
}

.sg-trust-stat-label {
  font-size: 14px;
  color: var(--sg-text, #333);
  opacity: 0.75;
}

.sg-trust-note {
  font-size: 14px;
  opacity: 0.75;
}

.sg-trust-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.sg-trust-review {
  background: var(--sg-surface, #f5f3ef);
  border-radius: 10px;
  padding: 20px;
}

.sg-trust-stars {
  color: #e6a817;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.sg-trust-quote {
  font-size: 14px;
  line-height: 1.5;
  color: var(--sg-text, #333);
  margin: 0 0 10px 0;
}

.sg-trust-author {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.7;
  margin: 0;
}

.sg-featured ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* WooCommerce's own CSS gives ul.products a ::before/::after
   clearfix (content:" "; display:table) for its old float-based
   grid. Once this container becomes a CSS Grid, those two
   pseudo-elements stop being harmless and start counting as real
   grid items - an empty one landing in slot 1 (pushing the first
   real product to slot 2, reading as a "hole") and another trailing
   after the last product onto its own row. Turning them off is what
   actually fixes that, not any change to the products themselves. */
.sg-featured ul.products::before,
.sg-featured ul.products::after {
  display: none !important;
}

.sg-featured ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

/* ---------- homepage: shop with confidence (short) ---------- */

.sg-trust-home {
  background: var(--sg-bg-alt);
}

.sg-trust-stats-center {
  justify-content: center;
  text-align: center;
}

.sg-trust-reviews-short {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.sg-trust-home-link {
  text-align: center;
  margin: 8px 0 0 0;
}

/* ---------- homepage: contact ---------- */

.sg-contact {
  background: var(--sg-surface);
}

.sg-section-inner-narrow {
  max-width: 560px;
}

.sg-contact-intro {
  text-align: center;
  color: var(--sg-text-muted);
  margin: -16px 0 28px 0;
}

.sg-contact-form-wrap {
  max-width: 480px;
  margin: 0 auto;
}

.sg-contact-form .sg-form-field {
  margin: 0 0 16px 0;
}

.sg-contact-form label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 6px 0;
  color: var(--sg-text);
}

.sg-contact-form input[type="text"],
.sg-contact-form input[type="email"],
.sg-contact-form textarea {
  width: 100%;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  padding: 10px 12px;
  font-family: var(--sg-font-body);
  font-size: 15px;
  background: var(--sg-bg);
  color: var(--sg-text);
  box-sizing: border-box;
}

.sg-contact-form textarea {
  resize: vertical;
}

.sg-contact-form .sg-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sg-contact-form button[type="submit"] {
  width: 100%;
}

.sg-form-message {
  border-radius: var(--sg-radius);
  padding: 12px 16px;
  margin: 0 0 20px 0;
  font-size: 14px;
  text-align: center;
}

.sg-form-success {
  background: var(--sg-primary-light);
  color: var(--sg-primary-dark);
}

.sg-form-error {
  background: #fbe1e1;
  color: #a12525;
}

/* ---------- homepage: personalize CTA ---------- */

.sg-cta {
  background: var(--sg-primary);
  color: #fff;
  text-align: center;
  padding: 72px 24px;
}

.sg-cta-inner {
  max-width: 560px;
  margin: 0 auto;
}

.sg-cta h2 {
  color: #fff;
  font-size: 32px;
  margin: 0 0 14px 0;
}

.sg-cta p {
  color: #cdeaea;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 28px 0;
}

/* ---------- shop / category archive ---------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--sg-font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--sg-text);
}

/* WooCommerce core ships its own greens for price (#958e09) and the
   "added to cart" notice (#8fae1b) that our grid-only rule below
   never reached (single product page, cart, checkout, mini-cart).
   Both replaced with the same teal used everywhere else in the
   palette (the 800+ / 4,000+ numbers on Shop With Confidence). */
.woocommerce .price,
.woocommerce-page .price {
  color: var(--sg-primary-dark) !important;
}

.woocommerce ul.products li.product .price {
  font-weight: 600;
}

.woocommerce-message {
  border-top-color: var(--sg-primary) !important;
}

.woocommerce-message::before {
  color: var(--sg-primary) !important;
}

.woocommerce ul.products li.product {
  background: var(--sg-surface);
  border-radius: var(--sg-radius-lg);
  padding: 14px;
  box-shadow: var(--sg-shadow);
  transition: box-shadow 0.15s ease;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--sg-shadow-lg);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: block;
  overflow: hidden;
  border-radius: var(--sg-radius);
}

.woocommerce ul.products li.product img {
  border-radius: var(--sg-radius);
  transition: transform 0.3s ease;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link:hover img {
  transform: scale(1.08);
}

/* ---------- single product: additional information tab ---------- */

/* WooCommerce's own table markup carries no left padding on its
   cells, so attribute values (e.g. every color option, comma-
   separated) rendered flush against the table's left edge instead
   of sitting with any breathing room. */
.woocommerce-Tabs-panel--description {
  font-size: 17px;
  line-height: 1.7;
}

.woocommerce-Tabs-panel--description h2 {
  font-size: 22px;
  margin: 24px 0 12px;
}

.woocommerce-product-attributes.shop_attributes th,
.woocommerce-product-attributes.shop_attributes td {
  padding: 10px 16px;
}

.woocommerce-product-attributes.shop_attributes th {
  font-weight: 600;
  color: var(--sg-text);
  background: var(--sg-surface);
}

/* ---------- responsive ---------- */

@media (max-width: 768px) {
  .sg-hero {
    padding: 72px 20px;
  }

  .sg-hero-title {
    font-size: 32px;
  }

  .sg-steps-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sg-steps-inner::before {
    display: none;
  }

  .sg-featured ul.products {
    grid-template-columns: repeat(2, 1fr);
  }

  .sg-footer-band-inner {
    flex-direction: column;
  }
}