/* ==========================================================
   Base Layout
========================================================== */

.loop .loop-bs-container {
  max-width: unset !important;
}

.loop-background {
  padding-top: 0 !important;
  padding-bottom: 80px;
}

.loop-card {
  border: 0 !important;
  padding: 0 !important;
}

.loop-card-footer {
  padding: 15px !important;
}

/* ==========================================================
   Typography
========================================================== */

.loop-h1,
.loop-h2,
.loop-h3,
.loop-selected-variant-title {
  font-family: var(--font-bold) !important;
  font-weight: var(--font-body-weight-bold) !important;
}

.loop-display-product-price {
  font-family: var(--font-inter);
  font-weight: bold;
}

/* ==========================================================
   Bundle Header
========================================================== */

.loop-bundle-header-wrapper-new {
  position: relative;
}

.loop-bundle-title {
  display: none;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.loop-bundle-size-selector-label,
.loop-bundle-select-product-title-new {
  font-size: 2em;
  width:100%;
}

.loop-bundle-size-selector-label span,
.loop-bundle-select-product-title-new span {
  color: var(--color-orange);
  font-family: var(--font-bold);
  font-weight: var(--font-body-weight-bold);
  font-size: 0.6em;
  padding-left: 1em;
}

.loop-bundle-title-wrapper-new {
  padding: 0;
  margin: 0 auto;
}

.loop-bundle-title-wrapper-new,
.loop-bundle-products-wrapper,
.loop-bundle-size-selector-new-wrapper,
.loop-bundle-new-description {
  /*max-width: 120rem !important;*/
  width: 100% !important;
}

.loop-bundle-select-product-title-new {
  margin-bottom: 12px !important;
}

.loop-bundle-select-product-title-new-container {
  margin: 0 !important;
}

.loop-products-available-new {
  padding: 0 !important;
}

.loop-bundle-new-description .header_banner,
.loop-bundle-footer-description .footer_banner {
  padding: 36px 20px;
  max-width: 1100px;
  margin: 0 auto;
}


/* ==========================================================
   Bundle Containers
========================================================== */

.loop-bundle-products-section-container {
  gap: calc(var(--spacing) * 10) !important;
}

.loop-bundle-products-wrapper,
.loop-bundle-size-selector-new-wrapper {
  padding: 48px !important;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--color-black);
  margin: 48px auto 0;
  max-width: 1100px;
}

.loop-bundle-size-selector {
  justify-content: flex-start !important;
}

.loop-bundle-size-selector-btn {
  margin: 0 !important;
}

/* ==========================================================
   Bundle Description
========================================================== */

.loop-bundle-new-description {
  font-size: 15px !important;
  margin:0 auto;
}

.loop-bundle-new-description p {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* ==========================================================
   Bundle Images
========================================================== */

.loop-bundle-image-container {
  height: auto;
  max-height: unset;
}

.loop-bundle-image-container img {
  object-fit: cover;
  max-height: unset !important;
}

.loop-image-product-lg {
  height: auto !important;
}

.loop-image-product-lg img {
  border-radius: 0;
  height: auto;
}

/* ==========================================================
   Product Cards
========================================================== */

.loop-products-align-new {
  gap: 1px !important;
  border-radius: 12px;
  background-color: var(--color-black);
  border: 1px solid var(--color-black);
  grid-template-columns: repeat(2, 1fr);
  height: 100%;
  overflow: hidden;
}
.loop-products-align-new::after {
  content: '';
  background-color: var(--color-white);
  min-height: 100%;
}

.loop-bundle-product-card {
  justify-content: start;
  background-color: var(--color-white);
  border-radius:0;
}

.loop-bundle-product-card-title {
  font-family: var(--font-bold) !important;
  font-weight: var(--font-body-weight-bold) !important;
  font-size: 18px;
}

.loop-product-card-description-body {
  justify-content: space-between;
  gap: 24px;
}

.loop-bundle-product-card-description {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-bold);
  font-weight: var(--font-body-weight-bold);
  color: var(--color-black) !important;
}

.loop-bundle-product-card-description span {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--color-black);
  color: var(--black);
  font-size: 15px;
  width: max-content;
  margin: 0 auto;
}

.loop-bundle-product-card-description .label1 {
  background: #f36c217d;
}

.loop-bundle-product-card-description .label2 {
  background: #d2b9de;
}

.loop-bundle-product-card-description .label3 {
  background: #e6eb00;
}

/* ==========================================================
   Selected Bundle
========================================================== */

.loop-selected-bundle {
  background: #fff;
  border: 1px solid var(--color-black);
  border-radius: 12px;
}

.loop-selected-bundle-info {
  font-family: var(--font-bold);
  font-weight: var(--font-body-weight-bold);
}

.loop-selected-bundle-info span {
  opacity: 0.5;
}

.loop-selected-variant-info {
  justify-content: start !important;
}

.loop-selected-variant-info-container {
  width: 66%;
}

.loop-selected-variant-info-container img {
  max-width: 100px;
  height: max-content;
}

.loop-selected-variant-actions-container {
  width: 30%;
  flex: unset !important;
  max-width: unset !important;
}

.loop-selected-variant-actions {
  padding: 3px;
  border-radius: 30px;
  background: #fff;
}

.loop-bundle-discount span {
  font-size: 30px;
}

.loop-bundle-cart-btn-text-container {
  justify-content: center;
}

/* ==========================================================
   Quantity Controls
========================================================== */

.loop-form-input,
.loop-form-input-small {
  background: transparent !important;
  border: none !important;
  min-width: unset !important;
  height: unset !important;
  padding-inline: unset !important;
  padding-block: unset !important;
  width: calc(100% - 48px) !important;
}

.loop-form-input-small {
  opacity: 1 !important;
}

.loop-bundle-product-quantity-controls {
  background: var(--color-beige);
  border-radius: 30px !important;
  padding: 3px;
  margin: 5px;
}

.loop-btn-input-decrease,
.loop-btn-input-increase {
  padding: 0px 0px 2px !important;
  width: 24px;
  height: 24px !important;
  border-radius: 50%;
  font-family: serif;
  line-height: 1rem;
  font-size: 18px !important;
}

.loop-btn-input-decrease-small,
.loop-btn-input-increase-small {
  border-radius: 50%;
  padding: 0px 0px 2px !important;
  width: 24px;
  height: 24px;
  font-family: serif;
  line-height: 1rem;
  font-size: 18px !important;
}

/* ==========================================================
   Category
========================================================== */

.loop-category-list-container,
.loop-category-list-new-container {
  background-color: var(--color-beige) !important;
}

.loop-category-container {
  gap: calc(var(--spacing) * 10) !important;
}

.loop-category-list-new-container,
.loop-category-container-section {
  margin-inline: 0 !important;
  padding: 0 !important;
}

.loop-category-container-section {
  background: #fff;
  border: 1px solid var(--color-black);
}

.loop-category-title-as-text {
  background: #fff;
}

.loop-category-header {
  background: var(--color-green-bg);
  border-bottom: 1px solid var(--color-black);
  padding-block: 15px 10px;
}

.loop-category-header-content-left {
  gap: 6px;
}

.loop-category-header-content > div p {
  color: var(--color-black);
  line-height: 1.5;
}

/* ==========================================================
   Buttons
========================================================== */

.loop-btn-add-product {
  background: var(--color-orange) !important;
  color: var(--color-white) !important;
}

.loop-btn-add-to-cart {
  box-shadow: unset;
  font-family: var(--font-bold) !important;
  font-weight: var(--font-body-weight-bold) !important;
}

/* ==========================================================
   Progress
========================================================== */

.loop-progress-bar,
.loop-new-progress-bar-container {
  height: 12px !important;
}

.loop-padding-saved-total {
  display: none;
}

/* ==========================================================
   Frequency Selector
========================================================== */

.loop-bundle-widget-frequency-dropdown {
  border-radius: 0;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 5.5);
}

.loop-bundle-widget-frequency-dropdown:focus {
  box-shadow: none;
}
.loop-bundle-widget-radio-btn-container {
  display:none;
}
.loop-bundle-widget-selling-plan-text {
  display:none;
}
.loop-bundle-widget-frequency-dropdown-label {
  position:unset;
  font-size: 1.25em;
  font-family: var(--font-bold) !important;
  font-weight: var(--font-body-weight-bold) !important;
  margin-bottom: 8px;
}

.loop-bundle-widget-frequency-dropdown-options {
  border-radius: 12;
  background: var(--color-white);
  height: 160px;
  border: none;
  margin-top: 0;
}

.loop-bundle-widget-frequency-interval-items,
.loop-bundle-widget-frequency-interval-items.selected {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
}

.loop-bundle-widget-frequency-interval-items {
  background: var(--color-white);
}

.loop-bundle-widget-frequency-interval-items.selected {
  background-color: var(--color-gray-300);
  color: var(--color-black);
}

.loop-widget-bundle-frequency-dropdown-icon {
  color: var(--color-black);
}

.loop-bundle-widget-selling-plan .flex {
  flex-direction: column-reverse;
}
.loop-bundle-widget-selling-plan-info {
  display:none;
}

.loop-bundle-widget-selling-plan-subscription {
  flex-direction:column;
}
.loop-bundle-widget-discount-badge-container {
  font-family: var(--font-degular);
}
.loop-bundle-widget-selling-plan-price-subscription,
.loop-bundle-widget-selling-plan-actual-price,
.loop-bundle-widget-selling-plan-discount-price,
.loop-bundle-widget-selling-plan-diff-price {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items: center;
}
.loop-bundle-widget-selling-plan-actual-price::before {
  content: "通常価格";
  display:block;
}

.loop-bundle-widget-selling-plan-discount-price {
  color:var(--color-orange);
  font-family:var(--font-inter);
  font-weight:700;
  font-size:120%;
}

.loop-bundle-widget-selling-plan-discount-price::before {
  content: "定期便価格";
  color:var(--color-black);
  display:block;
  font-size:initial;
}

.loop-bundle-widget-selling-plan-diff-price {
  color:var(--color-orange);
  font-family:var(--font-inter);
  font-weight:700;
  font-size:120%;
}
.loop-bundle-widget-selling-plan-diff-price span {
  color:var(--color-black);
  display:block;
  font-size:initial;
}

/* ==========================================================
   Bottom Sheet
========================================================== */

.loop-bottom-sheet,
.loop-bottom-sheet-header-container,
.loop-bottom-sheet-body-container {
  background: var(--color-light-beige);
}

.loop-bottom-sheet-header-container {
  border-bottom: 1px solid var(--color-black);
}

.loop-bottom-sheet-purchase-options-container {
  border-top: 1px solid var(--color-black);
}

.loop-bottom-sheet-body-info-text {
  color: #171717 !important;
}

.loop-actions-container {
  overflow: visible;
}

.loop-bundle-footer-description {
  width:100%;
  max-width:120rem;
}
/* ==========================================================
   Responsive
========================================================== */

@media (min-width: 64rem) {
  .loop-form-input-small {
    background: transparent !important;
  }

  .loop-selected-variant-actions {
    background: #F4EEE9 !important;
  }
}

@media (max-width: 64rem) {
  .loop-bundle-products-wrapper, 
  .loop-bundle-size-selector-new-wrapper {
    padding: 24px !important;
    margin: 24px auto 0;
    width: 94% !important;    
  }
  .loop-bundle-size-selector-label span, .loop-bundle-select-product-title-new span {
    display:block;
    padding-left:0;
  }
  .loop-bundle-product-card-title {
    font-size:18px;
  }
  .loop-image-product-lg img {
    height:180px;
  }
  .loop-bundle-product-card-title {
    min-height:unset;
  }
  .loop-bundle-product-card-description,
  .loop-display-product-price {
    font-size:15px;
  }
}