/* order summary in checkout page
modify the breakpoint, and layout
*/

@media (max-width: 1023px) {
  .wc-block-components-sidebar-layout:has(.wc-block-checkout__main) {
    flex-direction: column;
  }

  .wc-block-components-sidebar-layout:has(.wc-block-checkout__main) .wc-block-components-main,
  .wc-block-components-sidebar-layout:has(.wc-block-checkout__main) .wc-block-components-sidebar {
    width: 100%;
  }

  .wc-block-checkout__sidebar {
    order: 0;
    margin-bottom: 24px;
    align-self: auto;
    top: auto;
  }

  .wc-block-checkout__sidebar.is-sticky {
    position: static;
  }

  .wc-block-checkout__main {
    order: 1;
  }
}

.wc-block-components-sidebar-layout:has(.wc-block-checkout__main){
    flex-wrap: nowrap;
    column-gap: clamp(40px,calc(40px + 24 * ((100vw - 640px) / 384)),64px);
}
.wc-block-components-sidebar-layout .wc-block-components-main.wc-block-checkout__main,
.wc-block-components-sidebar:has(.wc-block-components-order-summary) {
    padding-left: 0;
    padding-right: 0;
  }

@media (min-width:1024px){
    .wc-block-components-sidebar:has(.wc-block-components-order-summary) {
    min-width: 320px;
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height,0px) + 24x);

  }
    .wc-block-components-sidebar-layout .wc-block-components-main.wc-block-checkout__main{
        width: 65%;
        position: sticky;
    }
}

/* border */
.wp-block-woocommerce-checkout-order-summary-block, 

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content.is-open,
.wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-totals-block,

.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container:before,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container:after,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__content,

.wc-block-components-express-payment-continue-rule:after, .wc-block-components-express-payment-continue-rule:before, 

.wc-block-components-form .wc-block-components-text-input input[type=email], .wc-block-components-form .wc-block-components-text-input input[type=number], .wc-block-components-form .wc-block-components-text-input input[type=password], .wc-block-components-form .wc-block-components-text-input input[type=tel], .wc-block-components-form .wc-block-components-text-input input[type=text], .wc-block-components-form .wc-block-components-text-input input[type=url], .wc-block-components-text-input input[type=email], .wc-block-components-text-input input[type=number], .wc-block-components-text-input input[type=password], .wc-block-components-text-input input[type=tel], .wc-block-components-text-input input[type=text], .wc-block-components-text-input input[type=url],
.wc-block-components-address-card{
    border-color: var(--contrast-lg-a50);
}

/* custom design */
.wc-block-components-order-summary .wc-block-components-order-summary-item {
    display: grid;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item > *{
    grid-row-start: 1;
}
/* .wc-block-components-order-summary .wc-block-components-order-summary-item:not(:last-child) {
    margin-bottom: 16px;
} */
/* 1st col */
.wc-block-components-order-summary .wc-block-components-order-summary-item__image{
    padding-right: 16px;
    box-sizing: border-box;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__image>img{
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity{
    right: 20px;
}

.wc-block-components-order-summary:has(.wc-os-inline-qty) .wc-block-components-order-summary-item__quantity{
    display: none;
}

/* 2nd col */
.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
    padding: 4px 0px 12px 0px;
}
.wc-block-checkout__sidebar .wc-block-components-product-name{
    flex-grow: 0;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-price{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    word-break: normal;
}

/* 3rd col */
/* extra order summary */
.wp-block-woocommerce-checkout .wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper{
    display: none;
}