toggle js

assets/css/gp-style-core.css

@@ -1021,7 +1021,7 @@ button{
   cursor: pointer;
 }
 .toggle__block-content{
-  /* height: 0; */
+  height: 0;
   overflow: hidden;
 
   transition: height .2s ease-out;

assets/css/gp-style-desktop.css

@@ -674,6 +674,7 @@
   margin: 48px 24px 24px 24px;
 
   display: flex;
+  align-items: start;
   flex-wrap: wrap;
 }
 .detail__images{
@@ -855,6 +856,41 @@
   margin-bottom: 48px;
 }
 .detail__catalot{
+  margin-top: 64px;
+}
+.detail-catalot__header{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.detail-catalot__control{
+  display: flex;
+  align-items: center;
+}
+.detail-catalot-control__button{
+  margin-left: 24px;
+
+  width: 48px;
+  aspect-ratio: 1;
+
+  border-radius: 50%;
+  border: 1px solid var(--background-black);
+  background: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.detail-catalot__title{
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 100%;
+  text-transform: uppercase;
+  text-align: center;
+  color: var(--text-0);
+}
+.detail-catalot__content{
   margin: 12px -12px -12px -12px;
 
   width: 100%;

assets/css/gp-style-mobile.css

@@ -66,6 +66,16 @@
     margin-top: 20px;
 }
 /* footer */
+
+/* detail */
+.toggle__table--two .toggle-table__block{
+    width: 100%;
+}
+.toggle__table--two .toggle-table__block:nth-child(even){
+    margin-top: 32px;
+    margin-left: 0;
+}
+/* detail */
 }
 
 @media only screen and (max-width: 576px) {

assets/css/gp-style-tablet.css

@@ -57,4 +57,20 @@
     width: calc(50% - 24px);
 }
 /* product */
+
+
+/* detail */
+.detail{
+    flex-direction: column;
+}
+
+.detail__images,
+.detail__content{
+    width: 100%;
+}
+.detail__content{
+    margin-top: 48px;
+    margin-left: 0;
+}
+/* detail */
 }