/* Responsive layout corrections for the public Stitch storefront. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 767px) {
  header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  header > div {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto;
  }

  header [data-header-announcement] {
    min-width: 0;
    padding: 5px 12px !important;
    gap: 8px;
    font-size: 10px;
    line-height: 1.25;
  }

  header [data-header-announcement] > :first-child {
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
  }

  header [data-header-announcement] > :last-child {
    gap: 8px !important;
    flex: 0 0 auto;
  }

  header [data-header-announcement] > :last-child > :first-child {
    display: none !important;
  }

  header [data-header-main-row] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-rows: auto auto;
    grid-template-areas: none !important;
    gap: 10px 8px !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 12px !important;
    margin: 0;
  }

  header [data-header-brand-group] {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    gap: 8px !important;
  }

  header [data-header-brand-group] > a,
  header [data-header-brand-group] img {
    width: min(120px, 35vw) !important;
    max-width: 100%;
    height: 40px !important;
  }

  header [data-header-mobile-trigger] {
    display: inline-flex !important;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 90px;
    padding: 7px 8px !important;
    gap: 4px !important;
    font-size: 12px;
  }

  header [data-header-mobile-trigger] [data-header-mobile-value] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  header [data-header-search] {
    grid-column: 1 / -1;
    grid-row: 2;
    flex: none !important;
    width: 100% !important;
    min-width: 0;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  header [data-header-search] > div,
  header [data-header-search] input {
    min-width: 0;
  }

  header [data-header-search] > div {
    display: flex !important;
    flex-flow: row nowrap;
    align-items: center;
    column-gap: 6px;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  header [data-header-search] > div > div {
    display: none !important;
  }

  header [data-header-search] input {
    flex: 1 1 0px !important;
    width: 1% !important;
    min-width: 0 !important;
    max-width: 100%;
    font-size: 14px !important;
    box-sizing: border-box;
  }

  header [data-header-search] input::placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  header [data-header-search] button {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto;
    min-width: max-content;
    max-width: 100%;
    padding-inline: 10px !important;
    white-space: nowrap;
    box-sizing: border-box;
  }

  header [data-header-actions] {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    gap: 12px !important;
  }

  header [data-header-actions] > :last-child {
    display: none !important;
  }

  header [data-header-actions] [data-path="shopping-cart"] {
    padding: 6px !important;
  }

  header [data-category-scroll] {
    min-width: 0;
    padding-inline: 8px !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #aab8d6 transparent;
  }

  header [data-category-scroll] nav {
    width: max-content;
    min-width: 100%;
    gap: 2px !important;
  }

  header [data-category-scroll] nav a {
    flex: 0 0 auto;
    padding-inline: 10px !important;
  }

  main {
    width: 100%;
    max-width: 100%;
    padding: 172px 12px 20px !important;
    min-height: 100vh !important;
  }

  main > div {
    min-width: 0;
    gap: 20px !important;
  }

  main > div > section:first-child:has([data-banner-host]) {
    width: calc(100% + 24px);
    max-width: 100vw;
    margin-top: 0 !important;
    margin-inline: -12px !important;
    margin-bottom: -8px !important;
    box-sizing: border-box;
  }

  main [data-banner-host] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    max-height: none;
    background-color: #f2f6ff;
  }

  main [data-banner-host] > div:first-child,
  main [data-banner-host] article,
  main [data-banner-host] article > img {
    min-height: 0 !important;
  }

  main [data-banner-host] article > img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center;
    background: #f2f6ff;
  }

  main [data-banner-host] article > div {
    width: 100% !important;
    min-height: 100% !important;
    padding: 10px !important;
    pointer-events: none;
  }

  main [data-banner-host] article > div > div {
    display: none !important;
  }

  main [data-brand-section] > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    align-items: start !important;
    gap: 8px !important;
  }

  main [data-brand-section] > div:first-child h2 {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(20px, 5.5vw, 23px) !important;
    line-height: 1.2 !important;
  }

  main [data-brand-section] > div:first-child > span {
    margin-left: 0;
    font-size: 12px;
    line-height: 1.3;
  }

  main [data-brand-grid] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  main [data-brand-grid] > a {
    min-width: 0;
    padding: 12px 8px !important;
  }

  main img,
  main video,
  main iframe {
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  header [data-header-main-row] {
    gap: 12px !important;
    padding-inline: 20px !important;
  }

  header [data-header-brand-group] {
    gap: 10px !important;
  }

  header [data-header-brand-group] img {
    width: 138px !important;
  }

  header [data-header-search] {
    min-width: 180px;
    margin-inline: 0 !important;
  }

  header [data-header-actions] {
    gap: 12px !important;
  }

  main {
    padding-inline: 20px !important;
  }
}

/* Shared product-card text and price layout. */
.seema-product-specifications {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Compact, data driven homepage catalogue cards. */
main [data-product-card-grid] > .seema-product-card {
  gap: 0.5rem;
  padding: 1rem;
  justify-content: flex-start;
}

main [data-product-card-grid] > .seema-product-card > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.45rem;
}

main [data-product-card-grid] > .seema-product-card .seema-product-image {
  margin-block: 0.25rem;
}

main [data-product-card-grid] > .seema-product-card > div:first-child > .mt-space-md {
  margin-top: 0.25rem;
}

main [data-product-card-grid] > .seema-product-card > div:last-child {
  margin-top: auto;
  padding-top: 0.25rem;
}

main [data-product-card-grid] > .seema-product-card [data-product-price] {
  line-height: 1.2;
}

@media (min-width: 480px) and (max-width: 767px) {
  main [data-product-card-grid] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Listing cards only; product detail and related-product layouts stay separate. */
:is(main [data-product-card-grid] > *, main #product-grid > *) {
  display: flex;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  flex-direction: column;
}

:is(main [data-product-card-grid] > *, main #product-grid > *) .seema-product-image {
  box-sizing: border-box;
  width: 100%;
  height: 12rem;
  flex: 0 0 12rem;
  border-radius: 0.75rem;
  background: #f2f3ff;
}

:is(main [data-product-card-grid] > *, main #product-grid > *) .seema-product-title {
  display: -webkit-box;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2;
}

@media (min-width: 768px) {
  main #product-grid > .md\:flex-row .seema-product-image {
    width: 14rem;
    height: auto;
    flex: 0 0 14rem;
  }
}

:is(main [data-product-card-grid] > *, main #product-grid > *, main #related-grid > *) {
  min-width: 0;
  max-width: 100%;
}

:is(main [data-product-card-grid] > *, main #product-grid > *, main #related-grid > *) :is(h3, h4) {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-line-clamp: unset !important;
  line-clamp: unset;
}

/* Listing titles grow only when they wrap; keep the shared two-line limit. */
:is(main [data-product-card-grid] > *, main #product-grid > *) :is(h3.seema-product-title, h4.seema-product-title) {
  display: -webkit-box;
  min-height: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2;
}

:is(main [data-product-card-grid] > *, main #product-grid > *, main #related-grid > *) :is(p, span) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

:is(main [data-product-card-grid] > *, main #product-grid > *, main #related-grid > *) .flex.flex-wrap > span {
  flex: 0 1 auto;
}

:is(main [data-product-card-grid] > *, main #product-grid > *, main #related-grid > *) .flex.items-baseline:has(> .font-price-md, > .font-price-lg, > .text-price-md, > .text-price-lg),
:is(main [data-product-card-grid] > *, main #product-grid > *, main #related-grid > *) .seema-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  min-width: 0;
  column-gap: 8px;
  row-gap: 2px;
}

:is(main [data-product-card-grid] > *, main #product-grid > *, main #related-grid > *) :is(.font-price-md, .font-price-lg, .text-price-md, .text-price-lg, .line-through) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

main #related-grid > * > div:last-child {
  flex-wrap: wrap;
  align-items: flex-start;
  min-width: 0;
  gap: 10px;
}

#related-grid {
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
}

#related-grid::-webkit-scrollbar {
  display: none;
}

#related-grid > article {
  box-sizing: border-box;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  #related-grid > article {
    flex-basis: calc(50% - 0.75rem);
  }
}

@media (min-width: 1024px) {
  #related-grid > article {
    flex-basis: calc(33.333333% - 1rem);
  }
}

main #related-grid > * > div:last-child > a {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

main #related-grid .flex.items-center.gap-space-xs.text-body-sm {
  flex-wrap: wrap;
  min-width: 0;
}

main h1 {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

main [aria-label="Product price"] > div {
  min-width: 0;
}

main #display-savings {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 479px) {
  :is(main [data-product-card-grid] > *, main #product-grid > *, main #related-grid > *) :is(.font-price-md, .font-price-lg, .text-price-md, .text-price-lg) {
    font-size: clamp(16px, 4.8vw, 20px) !important;
    line-height: 1.2 !important;
  }
}
/* Keep the selected storefront navigation item and view changes calm and clear. */
[data-category-scroll] nav > a {
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
#product-grid {
  transition: gap 180ms ease;
}
#product-grid > .seema-product-card {
  transition: opacity 160ms ease, transform 180ms ease, box-shadow 180ms ease;
}
#product-grid[data-view="list"] {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch;
  gap: 0.75rem;
}
#product-grid[data-view="list"] > .seema-product-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0.75rem;
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.07);
}
#product-grid[data-view="list"] > .seema-product-card > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}
#product-grid[data-view="list"] > .seema-product-card > div:first-child > div:first-child {
  grid-column: 1 / -1;
}
#product-grid[data-view="list"] > .seema-product-card .seema-product-image {
  cursor: pointer;
}
#product-grid[data-view="list"] > .seema-product-card > .seema-product-image:focus-visible,
#product-grid[data-view="list"] > .seema-product-card .seema-product-title:focus-visible {
  outline: 2px solid #0266ff;
  outline-offset: 2px;
}
#product-grid[data-view="list"] > .seema-product-card > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0;
}
#product-grid[data-view="list"] > .seema-product-card > div:last-child > div:last-child {
  width: 100%;
}
.homepage-banner-indicators {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(10px, 1.5vw, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  transform: translateX(-50%);
}
.homepage-banner-indicator {
  display: block;
  width: 7px;
  min-width: 7px;
  height: 7px;
  min-height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 58%);
  cursor: pointer;
  transition: width 180ms ease, min-width 180ms ease, opacity 180ms ease;
}
.homepage-banner-indicator[aria-current="true"] {
  width: 24px;
  min-width: 24px;
  opacity: 1;
  background: #fff;
}
.homepage-banner-indicator:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (min-width: 640px) {
  #product-grid[data-view="list"] > .seema-product-card {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 30%);
    align-items: center;
    gap: 1.25rem;
    min-height: 152px;
    padding: 0.75rem 1rem;
  }
  #product-grid[data-view="list"] > .seema-product-card > div:first-child {
    grid-template-columns: 144px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.375rem;
  }
  #product-grid[data-view="list"] > .seema-product-card > div:first-child > div:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  #product-grid[data-view="list"] > .seema-product-card .seema-product-image {
    grid-column: 1;
    grid-row: 2 / 4;
    width: 144px;
    height: 104px;
    min-height: 104px;
    margin: 0;
  }
  #product-grid[data-view="list"] > .seema-product-card .seema-product-title {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
  }
  #product-grid[data-view="list"] > .seema-product-card [data-product-pickup-status] {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    margin: 0;
  }
  #product-grid[data-view="list"] > .seema-product-card > div:last-child {
    gap: 0.5rem;
    border-left: 1px solid rgb(197 198 205 / 55%);
    padding-left: 1.25rem;
  }
  #product-grid[data-view="list"] > .seema-product-card > div:last-child > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
  }
  #product-grid[data-view="list"] > .seema-product-card > div:last-child > div:last-child {
    margin-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-category-scroll] nav > a, #product-grid, #product-grid > .seema-product-card, .homepage-banner-indicator { transition: none; }
}


/* Shared header sizing and narrow layouts, including cart/checkout. */
html { scroll-padding-top: calc(var(--seema-header-height, 176px) + 12px); }
main { padding-top: calc(var(--seema-header-height, 176px) + 12px) !important; }
main :is(.grid, .flex) > *, footer :is(.grid, .flex) > * { min-width: 0; }
main :is(input, select, textarea), [role="dialog"] :is(input, select, textarea) { min-width: 0; max-width: 100%; }
[role="dialog"] { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 767px) {
  footer > div { padding-inline: 12px !important; }
  main :is(input, select, textarea), [role="dialog"] :is(input, select, textarea) { font-size: 16px !important; }
  main .sticky { position: static; }
  main :is(button, a[role="button"]) { overflow-wrap: anywhere; }
  main table { width: 100%; table-layout: fixed; }
  main :is(td, th) { overflow-wrap: anywhere; }
  main #cart-items > div { flex-wrap: wrap; }
  main #cart-items :is(input, button) { min-height: 44px; }
}