/*
 * Hand-authored, SCOPED subset of Bootstrap 5.3 component CSS.
 *
 * Why this exists instead of loading bootstrap.min.css directly: on pages that
 * still run the legacy Gumby framework (innerlayout.ctp and friends), Bootstrap's
 * own global reset (`* { box-sizing: border-box }`, body font rules, `.container`/
 * `.row` grid classes) would collide with Gumby's equally-global, unscoped resets.
 * Loading both frameworks unscoped on one page is not safe (see innerlayout.ctp
 * audit). Every rule below is scoped under `.bs5-scope` so it can never affect
 * anything outside our new header/footer/offcanvas markup, regardless of what
 * else is loaded on the page.
 *
 * Covers only the actual Bootstrap classes used by header_v2/footer_v2/top_menu_v2
 * (checked via grep against those three files): container, row, col-6, col-lg-3,
 * g-4, d-none/d-lg-flex/d-lg-block/d-lg-none, navbar/navbar-toggler, dropdown*,
 * offcanvas*, collapse. Dropdown positioning itself is already driven by our own
 * JS/CSS in newhome_header.css, so only a minimal safety-net base is included here.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

.bs5-scope,
.bs5-scope *,
.bs5-scope *::before,
.bs5-scope *::after {
  box-sizing: border-box;
}
.header-main-center{width: 67.8% !important;}

.footer-bottom .container{padding-left: 22px !important;
  padding-right: 22px !important;}
.site-footer h6 {padding-bottom: 0px;}
/* ===== Typography reset =====
   .bs5-scope never declared its own font-family/color/letter-spacing, so it was
   silently INHERITING gumby.css's `body{font-family:"Open Sans"}` and
   style_v3.60.css's `body{letter-spacing:-.8px;font-size:16px;color:#666}` -
   not a specificity fight, just a missing declaration on our side. Inheritance
   loses to ANY explicit rule on a closer ancestor regardless of specificity, so
   this alone fixes it; matches the values newhome_style.css uses on /home-preview. */
.bs5-scope {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  letter-spacing: normal;
  color: #111;
  line-height: normal;
}

/* gumby.css has an unscoped `form{margin:0 0 18px}`. Neutralize it for any form
   inside our new header/footer/nav so future additions don't hit the same bug
   the .search-box form did (18px inflated its box, throwing off centered content). */
.bs5-scope form {
  margin: 0;
}

/* ===== Grid =====
   !important throughout this section: Gumby's `.container,.row{margin-left:0;
   margin-right:0;min-width:0}` (unscoped) targets these same class names directly.
   Specificity math says our 2-class .bs5-scope selector should already win, but
   given the width/font issues actually observed on /inner-preview, don't leave
   it to a tie-break we can't fully verify - force it explicitly instead. */
.bs5-scope .container,
.bs5-scope .container-fluid {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-inline: 12px;
}
@media (min-width: 576px)  { .bs5-scope .container { max-width: 540px !important; } }
@media (min-width: 768px)  { .bs5-scope .container { max-width: 720px !important; } }
@media (min-width: 992px)  { .bs5-scope .container { max-width: 960px !important; } }
@media (min-width: 1200px) { .bs5-scope .container { max-width: 1140px !important; } }
@media (min-width: 1400px) { .bs5-scope .container { max-width: 1320px !important; } }

.bs5-scope .row {
  display: flex !important;
  flex-wrap: wrap;
 /* margin-left: -12px !important;
  margin-right: -12px !important;*/
  min-width: 0;
}
.bs5-scope .row > * {
  padding-left: 12px !important;
  padding-right: 12px !important;
  max-width: 100%;
  /*margin-top: 20px !important;*/
}
.bs5-scope .row.g-4 {
  --bs-gutter-x: 24px;
  /*margin-left: calc(-1 * var(--bs-gutter-x) / 2) !important;
  margin-right: calc(-1 * var(--bs-gutter-x) / 2) !important;*/
  row-gap: var(--bs-gutter-x);
}
.bs5-scope .row.g-4 > * {
  padding-left: calc(var(--bs-gutter-x) / 2) !important;
  padding-right: calc(var(--bs-gutter-x) / 2) !important;
}
.bs5-scope .col-6 {
  flex: 0 0 auto !important;
  width: 50% !important;
}

}
@media (min-width: 992px) {
  .bs5-scope .col-lg-3 {
    flex: 0 0 auto !important;
    width: 25% !important;
  }
}

/* ===== Flex / spacing / display utilities =====
   (Missed on the first pass - only grepped for grid/offcanvas/collapse/dropdown
   class names, not Bootstrap's flex/spacing utility classes. That gap is what
   caused the alignment breakage on /inner-preview: elements using d-flex/
   justify-content-gap-2/etc had zero matching CSS rule, so they silently fell
   back to normal block stacking instead of the intended flex layout.) */
 .bs5-scope .two.columns.social_top {
    margin-top: 0px;
    margin-left: 0;
    padding-left: 0px;
  }
.bs5-scope .d-flex { display: flex !important; }
.bs5-scope .flex-wrap { flex-wrap: wrap !important; }
.bs5-scope .align-items-center { align-items: center !important; }
.bs5-scope .align-items-start { align-items: flex-start !important; }
.bs5-scope .justify-content-center { justify-content: center !important; }
.bs5-scope .justify-content-between { justify-content: space-between !important; }
.bs5-scope .gap-2 { gap: 8px !important; }
.bs5-scope .w-100 { width: 100% !important; }
.bs5-scope .mb-3 { margin-bottom: 16px !important; }
.bs5-scope .px-2 { padding-left: 22px !important; padding-right: 22px !important; }
.bs5-scope .py-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
.bs5-scope .container-fluid {
  padding-left: 22px !important;
  padding-right: 22px !important;
}
@media (max-width: 768px)  { 
  .bs5-scope .container-fluid {
    padding-left: 24px !important;
    padding-right: 24px !important;
}
.main-working {
    background-color: transparent !important;
    border-radius: none !important; 
    box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0.1) !important; 

}
.bs5-scope .site-footer .row {
  margin-left: 0px;
}
.bs5-scope .row {
  --bs-gutter-y: 24px;
  margin-top: 0px;
}
.bs5-scope .border-top { border-top: 1px solid #dee2e6 !important; }
.bs5-scope .border-bottom { border-bottom: 1px solid #dee2e6 !important; }

/* ===== Display utilities ===== */
.bs5-scope .d-none { display: none !important; }
@media (min-width: 992px) {
  .bs5-scope .d-lg-flex  { display: flex !important; }
  .bs5-scope .d-lg-block { display: block !important; }
  .bs5-scope .d-lg-none  { display: none !important; }
}

/* ===== Navbar (minimal - most visual styling comes from newhome_header.css) ===== */
.bs5-scope .navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.bs5-scope .navbar-nav {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 992px) {
  .bs5-scope .navbar-expand-lg .navbar-nav { flex-direction: row; }
}

.bs5-scope .navbar-toggler {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}

/* ===== Dropdown (safety-net base; newhome_header.css owns the real positioning) =====
   .dropdown-toggle::after is the missing piece: top_menu_v2.ctp's desktop dropdown
   links (Collections, Colors, Size, etc.) rely entirely on this Bootstrap-generated
   CSS caret - no explicit <i> icon in the markup - and it was never defined here. */
.bs5-scope .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.bs5-scope .dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1000;
  margin: 0;
  padding: 8px 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
}
.bs5-scope .dropdown-menu.show { display: block; }
.bs5-scope .dropdown-item {
  display: block;
  width: 100%;
  padding: 6px 16px;
  clear: both;
  text-align: inherit;
  white-space: nowrap;
  background: transparent;
  border: 0;
}

/* ===== Offcanvas ===== */
.bs5-scope .offcanvas,
.bs5-scope .offcanvas-start {
  position: fixed;
  bottom: 0;
  top: 0;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  visibility: hidden;
  background-color: #fff;
  background-clip: padding-box;
  outline: 0;
  transition: transform .3s ease-in-out;
}
.bs5-scope .offcanvas-start {
  left: 0;
  width: 400px;
  border-right: 1px solid rgba(0, 0, 0, .15);
  transform: translateX(-100%);
}
.bs5-scope .offcanvas.show { transform: none; visibility: visible; }
.bs5-scope .offcanvas.showing,
.bs5-scope .offcanvas.hiding { visibility: visible; }
.bs5-scope .offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
.bs5-scope .offcanvas-backdrop.show { opacity: .5; }
.bs5-scope .offcanvas-backdrop.fade { opacity: 0; transition: opacity .15s linear; }
.bs5-scope .offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}
.bs5-scope .offcanvas-body {
  flex-grow: 1;
  padding: 16px;
  overflow-y: auto;
}
.bs5-scope .btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: .25rem;
  opacity: .5;
  cursor: pointer;
}
.bs5-scope .btn-close:hover { opacity: .75; }

/* ===== Collapse ===== */
.bs5-scope .collapse:not(.show) { display: none; }
.bs5-scope .collapsing {
  height: 0;
  overflow: hidden;
  transition: height .35s ease;
}