@pradip1995/segment-powerhouse-shop 0.1.1 → 0.1.3

package/src/shop.css

@@ -1,3 +1,20 @@
+html.powerhouse-filters-open,
+html.powerhouse-filters-open body {
+  overflow: hidden;
+}
+
+.powerhouse-shop .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .powerhouse-shop {
   --layout-container-max-width: 1400px;
   max-width: var(--layout-container-max-width);
@@ -94,29 +111,52 @@
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  margin-bottom: 1rem;
+  margin: 0;
+  padding: 1.1rem 1.15rem;
+  border-bottom: 1px solid #e8e8e8;
+  background: #fff;
 }
 
 .powerhouse-shop__sidebar h2,
-.powerhouse-shop__filter h3 {
+.powerhouse-shop__filter-toggle {
   margin: 0;
   font-family: var(--font-sans, inherit);
   font-weight: 700;
+  color: #1d1d1d;
 }
 
 .powerhouse-shop__sidebar h2 {
   font-size: 1.25rem;
+  line-height: 1.2;
 }
 
 .powerhouse-shop__filter {
-  margin: 0 0 1.5rem;
-  padding-bottom: 1.25rem;
-  border-bottom: 1px solid #dddddd;
+  margin: 0;
+  padding: 0;
+  border-bottom: 1px solid #e8e8e8;
 }
 
-.powerhouse-shop__filter h3 {
-  margin-bottom: 0.75rem;
+.powerhouse-shop__filter-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1.05rem 0 0.85rem;
+  border: 0;
+  background: transparent;
   font-size: 0.9375rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.powerhouse-shop__filter-icon {
+  font-size: 1.25rem;
+  line-height: 1;
+  font-weight: 400;
+}
+
+.powerhouse-shop__filter-body {
+  padding: 0 0 1.15rem;
 }
 
 .powerhouse-shop__filter ul {
@@ -126,21 +166,21 @@
 }
 
 .powerhouse-shop__filter li + li {
-  margin-top: 0.45rem;
+  margin-top: 0.7rem;
 }
 
 .powerhouse-shop__filter a {
   display: flex;
   align-items: center;
-  gap: 0.55rem;
+  gap: 0.7rem;
   color: #1d1d1d;
   font-size: 0.9375rem;
   text-decoration: none;
 }
 
 .powerhouse-shop__check {
-  width: 1rem;
-  height: 1rem;
+  width: 1.05rem;
+  height: 1.05rem;
   flex-shrink: 0;
   border: 1px solid #1d1d1d;
   background: #fff;
@@ -151,38 +191,64 @@
   box-shadow: inset 0 0 0 2px #fff;
 }
 
+.powerhouse-shop__swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+}
+
+.powerhouse-shop__swatches li + li {
+  margin-top: 0;
+}
+
+.powerhouse-shop__swatch {
+  display: block;
+  width: 1.35rem;
+  height: 1.35rem;
+  border: 1px solid #cfcfcf;
+}
+
+.powerhouse-shop__swatches a.is-active .powerhouse-shop__swatch {
+  outline: 1px solid #1d1d1d;
+  outline-offset: 2px;
+}
+
 .powerhouse-shop__price-form {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 0.5rem;
+  gap: 0.65rem;
 }
 
-.powerhouse-shop__price-form label {
+.powerhouse-shop__price-field {
   display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-  font-size: 0.8125rem;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+  padding: 0 0.65rem;
+  border: 1px solid #dddddd;
+  background: #fff;
+  font-size: 0.9375rem;
+  color: #6e6e6e;
 }
 
-.powerhouse-shop__price-form input,
-.powerhouse-shop__sort select {
+.powerhouse-shop__price-field input {
   width: 100%;
-  padding: 0.6rem 0.7rem;
-  border: 1px solid #dddddd;
-  background: #fff;
+  min-width: 0;
+  padding: 0.7rem 0;
+  border: 0;
+  background: transparent;
   color: #1d1d1d;
   font-family: var(--font-sans, inherit);
   font-size: 0.9375rem;
 }
 
-.powerhouse-shop__sort select {
-  width: auto;
-  min-width: 12rem;
+.powerhouse-shop__price-field input:focus {
+  outline: none;
 }
 
 .powerhouse-shop__price-form button {
   grid-column: 1 / -1;
-  padding: 0.65rem 0.9rem;
+  padding: 0.7rem 0.9rem;
   border: 1px solid #1d1d1d;
   background: #1d1d1d;
   color: #fff;
@@ -212,37 +278,97 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
-  margin: 1rem 0 1.25rem;
+  gap: 0.5rem;
+  margin: 0.35rem 0 1rem;
+  flex-wrap: nowrap;
+}
+
+.powerhouse-shop__utils-left {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 0.15rem 1.15rem;
 }
 
 .powerhouse-shop__filters-btn,
 .powerhouse-shop__sort {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.45rem;
   font-family: var(--font-sans, inherit);
+  font-size: 0.9375rem;
+  color: #1d1d1d;
 }
 
 .powerhouse-shop__filters-btn {
-  padding: 0.65rem 0.9rem;
-  border: 1px solid #dddddd;
+  padding: 0.45rem 0.15rem;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.powerhouse-shop__sort {
+  position: relative;
+  min-width: 0;
+}
+
+.powerhouse-shop__sort-control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 10.75rem;
+  max-width: 100%;
+  min-height: 2.5rem;
+  padding: 0 2.15rem 0 0.9rem;
+  border: 1px solid #d4d4d4;
+  border-radius: 2px;
   background: #fff;
+  box-shadow: 0 1px 0 rgba(29, 29, 29, 0.04);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.powerhouse-shop__sort-value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.9375rem;
+  line-height: 1.2;
+}
+
+.powerhouse-shop__sort-caret {
+  position: absolute;
+  right: 0.8rem;
+  top: 50%;
   color: #1d1d1d;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.powerhouse-shop__sort select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
   cursor: pointer;
+  font-size: 1rem;
 }
 
-.powerhouse-shop__utils-right {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  gap: 0.85rem 1.25rem;
-  margin-left: auto;
+.powerhouse-shop__sort:hover .powerhouse-shop__sort-control,
+.powerhouse-shop__sort:focus-within .powerhouse-shop__sort-control {
+  border-color: #1d1d1d;
+  box-shadow: 0 0 0 1px #1d1d1d;
 }
 
 .powerhouse-shop__utils-label {
   font-size: 0.9375rem;
+  white-space: nowrap;
+}
+
+.powerhouse-shop__view-label {
+  display: none;
 }
 
 .powerhouse-shop__view {
@@ -318,58 +444,129 @@
 
 .powerhouse-shop__grid.is-list {
   grid-template-columns: 1fr;
-  gap: 0;
+  gap: 1rem;
 }
 
-.powerhouse-shop__grid.is-list .powerhouse-shop__card {
+.powerhouse-shop__grid.is-list .powerhouse-shop__card,
+.powerhouse-shop__card.is-list-card {
   display: grid;
-  grid-template-columns: 7.5rem minmax(0, 1fr);
+  grid-template-columns: 7.25rem minmax(0, 1fr);
   align-items: start;
-  gap: 1rem;
-  padding: 1.25rem 0;
-  border-bottom: 1px solid #dddddd;
+  height: auto;
+  gap: 0.9rem 1rem;
+  padding: 1rem;
+  border: 1px solid #dddddd;
 }
 
-.powerhouse-shop__grid.is-list .powerhouse-shop__info {
-  padding-top: 0;
+.powerhouse-shop__grid.is-list .powerhouse-shop__media {
+  grid-row: 1 / 3;
 }
 
-.powerhouse-shop__grid.is-list .powerhouse-shop__excerpt,
-.powerhouse-shop__grid.is-list .powerhouse-shop__actions {
-  display: flex;
+.powerhouse-shop__copy {
+  min-width: 0;
+}
+
+.powerhouse-shop__grid.is-list .powerhouse-shop__name {
+  display: block;
+  -webkit-line-clamp: unset;
+  overflow: visible;
+  min-height: 0;
+  font-weight: 700;
+  font-size: 1.0625rem;
+  line-height: 1.3;
+}
+
+.powerhouse-shop__grid.is-list .powerhouse-shop__stock {
+  margin-top: 0.25rem;
+}
+
+.powerhouse-shop__grid.is-list .powerhouse-shop__stock.is-out {
+  color: #1d1d1d;
 }
 
 .powerhouse-shop__grid.is-list .powerhouse-shop__excerpt {
   display: block;
+  margin-top: 0.65rem;
+  color: #4d4d4d;
+  font-size: 0.9375rem;
+  line-height: 1.55;
+}
+
+.powerhouse-shop__details-link {
+  display: inline-block;
+  margin-top: 0.7rem;
+  color: #1d1d1d;
+  font-size: 0.9375rem;
+  text-decoration: underline;
+}
+
+.powerhouse-shop__details-link:hover {
+  text-decoration: underline;
+}
+
+.powerhouse-shop__aside {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 1rem;
+  min-width: 0;
+  grid-column: 2;
+}
+
+.powerhouse-shop__grid.is-list .powerhouse-shop__price {
+  margin: 0;
+  min-height: 0;
 }
 
 .powerhouse-shop__grid.is-list .powerhouse-shop__actions {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 0;
+  padding-top: 0;
   opacity: 1;
   pointer-events: auto;
 }
 
+.powerhouse-shop__grid.is-list .powerhouse-shop__quickshop,
+.powerhouse-shop__grid.is-list .powerhouse-shop__atc {
+  flex: none;
+  width: 100%;
+}
+
 .powerhouse-shop__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1.25rem 10px;
+  align-items: stretch;
+  gap: 2rem 10px;
+  width: 100%;
 }
 
 .powerhouse-shop__card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   min-width: 0;
+  max-width: 100%;
 }
 
 .powerhouse-shop__media {
   position: relative;
   display: block;
+  width: 100%;
   overflow: hidden;
   background: #f3f3f3;
+  aspect-ratio: 1;
 }
 
 .powerhouse-shop__media img,
 .powerhouse-shop__placeholder {
+  position: absolute;
+  inset: 0;
   display: block;
   width: 100%;
-  aspect-ratio: 1;
+  height: 100%;
   object-fit: cover;
 }
 
@@ -396,15 +593,24 @@
 }
 
 .powerhouse-shop__info {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
   padding-top: 0.75rem;
 }
 
 .powerhouse-shop__name {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
   margin: 0;
+  min-height: calc(1em * 1.35 * 2);
   font-family: var(--font-sans, inherit);
   font-size: 1rem;
   font-weight: 400;
-  line-height: 1.3;
+  line-height: 1.35;
 }
 
 .powerhouse-shop__name a {
@@ -414,6 +620,7 @@
 
 .powerhouse-shop__stock {
   margin: 0.35rem 0 0;
+  min-height: 1.2em;
   color: #688600;
   font-size: 0.8125rem;
 }
@@ -431,7 +638,8 @@
 }
 
 .powerhouse-shop__price {
-  margin-top: 0.4rem;
+  margin: 0 0 0.4rem;
+  min-height: 2.7rem;
 }
 
 .powerhouse-shop__compare {
@@ -455,23 +663,29 @@
 
 .powerhouse-shop__actions {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-top: 0.75rem;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 0.4rem;
+  margin-top: auto;
+  padding-top: 0.75rem;
 }
 
 .powerhouse-shop__quickshop,
 .powerhouse-shop__atc {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
   min-height: 2.5rem;
-  padding: 0.5rem 0.85rem;
+  padding: 0.5rem 0.45rem;
   border-radius: 2px;
+  box-sizing: border-box;
   font-family: var(--font-sans, inherit);
   font-size: 0.8125rem;
-  font-weight: 500;
+  font-weight: 600;
   text-decoration: none;
+  text-align: center;
+  white-space: nowrap;
   cursor: pointer;
 }
 
@@ -536,40 +750,68 @@
 @media screen and (max-width: 859px) {
   .powerhouse-shop.is-filters-open .powerhouse-shop__sidebar,
   .powerhouse-shop__layout.is-filters-open .powerhouse-shop__sidebar {
-    display: block;
+    display: flex;
+    flex-direction: column;
     position: fixed;
     inset: 0 auto 0 0;
-    z-index: 40;
-    width: min(22rem, 88vw);
-    padding: 1.25rem;
-    overflow: auto;
+    z-index: 80;
+    width: min(26.5rem, 100vw);
+    max-width: 100%;
+    padding: 0;
+    overflow: hidden;
     background: #fff;
-    box-shadow: 8px 0 24px rgb(0 0 0 / 12%);
+    box-shadow: 8px 0 28px rgb(0 0 0 / 18%);
+  }
+
+  .powerhouse-shop__layout.is-filters-open .powerhouse-shop__sidebar-head {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    flex-shrink: 0;
+  }
+
+  .powerhouse-shop__layout.is-filters-open .powerhouse-shop__sidebar-body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: 0 1.15rem 2rem;
+    -webkit-overflow-scrolling: touch;
   }
 
   .powerhouse-shop__layout.is-filters-open .powerhouse-shop__close,
   .powerhouse-shop__layout.is-filters-open .powerhouse-shop__backdrop {
-    display: block;
+    display: flex;
   }
 
   .powerhouse-shop__backdrop {
     position: fixed;
     inset: 0;
-    z-index: 30;
+    z-index: 75;
     border: 0;
-    background: rgb(0 0 0 / 35%);
+    background: rgb(0 0 0 / 45%);
   }
 
   .powerhouse-shop__close {
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-right: -0.45rem;
     padding: 0;
     border: 0;
     background: none;
     color: #1d1d1d;
-    text-decoration: underline;
     cursor: pointer;
   }
 }
 
+@media screen and (max-width: 719px) {
+  .powerhouse-shop__crumbs,
+  .powerhouse-shop__masthead {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 720px) {
   .powerhouse-shop {
     padding: 0 20px 4rem;
@@ -593,18 +835,43 @@
   }
 
   .powerhouse-shop__grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 1.75rem 20px;
   }
 
   .powerhouse-shop__grid.is-list {
     grid-template-columns: 1fr;
+    gap: 1.25rem;
+  }
+
+  .powerhouse-shop__grid.is-list .powerhouse-shop__card,
+  .powerhouse-shop__card.is-list-card {
+    grid-template-columns: 11.5rem minmax(0, 1fr) 11.25rem;
+    align-items: stretch;
+    gap: 1.25rem 1.5rem;
+    padding: 1.25rem;
+  }
+
+  .powerhouse-shop__grid.is-list .powerhouse-shop__media {
+    grid-row: auto;
+  }
+
+  .powerhouse-shop__aside {
+    grid-column: auto;
+    align-items: flex-end;
+    min-width: 11.25rem;
   }
 
-  .powerhouse-shop__grid.is-list .powerhouse-shop__card {
-    grid-template-columns: 11.5rem minmax(0, 1fr);
-    gap: 1.5rem;
-    padding: 1.5rem 0;
+  .powerhouse-shop__grid.is-list .powerhouse-shop__price {
+    text-align: right;
+  }
+
+  .powerhouse-shop__grid.is-list .powerhouse-shop__actions {
+    width: 11.25rem;
+    padding-top: 1.5rem;
+  }
+
+  .powerhouse-shop__sort-control {
+    min-width: 12.5rem;
   }
 }
 
@@ -621,6 +888,11 @@
     flex-shrink: 0;
   }
 
+  .powerhouse-shop__sidebar-head {
+    padding: 0 0 0.85rem;
+    border-bottom: 0;
+  }
+
   .powerhouse-shop__sidebar-head .powerhouse-shop__close,
   .powerhouse-shop__filters-btn {
     display: none;
@@ -641,30 +913,67 @@
 
   .powerhouse-shop__utils {
     justify-content: flex-end;
+    margin-top: 0.75rem;
+  }
+
+  .powerhouse-shop__view-label {
+    display: inline;
   }
 
   .powerhouse-shop__grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .powerhouse-shop__grid.is-list {
     grid-template-columns: 1fr;
   }
 
-  .powerhouse-shop__grid.is-list .powerhouse-shop__card {
-    grid-template-columns: 14rem minmax(0, 1fr);
-    gap: 2rem;
+  .powerhouse-shop__grid.is-list .powerhouse-shop__card,
+  .powerhouse-shop__card.is-list-card {
+    grid-template-columns: 14rem minmax(0, 1fr) 11.5rem;
+    gap: 1.5rem 2rem;
+    padding: 1.35rem 1.5rem;
+  }
+
+  .powerhouse-shop__grid.is-list .powerhouse-shop__actions {
+    flex-direction: column;
+    width: 11.5rem;
+  }
+
+  .powerhouse-shop__grid.is-list .powerhouse-shop__quickshop,
+  .powerhouse-shop__grid.is-list .powerhouse-shop__atc {
+    flex: none;
+    width: 100%;
   }
 
   .powerhouse-shop__actions {
+    flex-direction: row;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease;
   }
 
+  .powerhouse-shop__quickshop,
+  .powerhouse-shop__atc {
+    flex: 1 1 0;
+    width: auto;
+    min-width: 0;
+  }
+
   .powerhouse-shop__card:hover .powerhouse-shop__actions,
+  .powerhouse-shop__card:focus-within .powerhouse-shop__actions,
   .powerhouse-shop__grid.is-list .powerhouse-shop__actions {
     opacity: 1;
     pointer-events: auto;
   }
 }
+
+@media screen and (min-width: 1100px) {
+  .powerhouse-shop__grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .powerhouse-shop__grid.is-list {
+    grid-template-columns: 1fr;
+  }
+}