/* Mymoods Cart Page Styles - MyMoods Style */

/* WooCommerce 既定の .shop_table 装飾（枠線・角丸・ヘッダ背景）を打ち消す。
   本テーマはヘッダ下線＋行下線だけで見せるため。 */
.cart-items.shop_table {
  border: 0;
  border-radius: 0;
  margin: 0;
}

.cart-items.shop_table th,
.cart-items.shop_table td {
  background: none;
}

/* ===== 見出し（元 Shopify の title-wrapper-with-link 実測値） =====
   flex / space-between / margin-bottom 30px、
   タイトル 28px w800 #5d5d5d ls .6px、リンク 16px rgba(18,18,18,.85) 下線。 */
.mymoods-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  margin: 0 0 30px;
}

.mymoods-cart-title {
  color: #5d5d5d;
  font-size: 28px;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  letter-spacing: 0.6px;
}

@media screen and (max-width: 768px) {
  .mymoods-cart-title {
    font-size: 18px;
  }
}

.mymoods-cart-continue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(18, 18, 18, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.6px;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.mymoods-cart-continue:hover {
  opacity: 0.7;
}

.mymoods-cart-continue svg {
  display: none;
}

/* Cart Table Styles - MyMoods Style */
.cart__items {
  border-radius: 8px;
  margin-bottom: 2rem;
}

.cart-items {
  width: 100%;
  border-collapse: collapse;
  /* colgroup の指定を確実に効かせる（auto だと内容量で列幅が揺れる）。 */
  table-layout: fixed;
}

/* 列幅は元 Shopify の実測（本文 1100px 時 media 110 / details 550 / qty 316 / totals 124）。
   table-layout:fixed は指定幅の合計が表幅に満たないと余りを全列に比例配分してしまうため、
   4列すべてを % で指定して合計 100% にする（幅が変わっても比率が保たれる）。 */
.cart-items__col--media {
  width: 10%;
}

.cart-items__col--details {
  width: 50%;
}

.cart-items__col--quantity {
  width: 28.727%;
}

.cart-items__col--totals {
  width: 11.273%;
}

/* WooCommerce の `.woocommerce table.shop_table` 側（枠線・角丸・セル padding）が
   詳細度で勝ってしまうため、元 Shopify の実測値を !important で固定する。
   Shopify 側は「見出し下の 1本線」と「最終行下の 1本線」だけで、
   セルの罫線も表の枠線も持たない。 */
.mymoods-cart .cart-items {
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(18, 18, 18, 0.08) !important;
}

/* 「合計」列だけ右揃え（cart.php の th に .right が付く）。 */
.mymoods-cart .cart-items th.right {
  text-align: right;
}

.mymoods-cart .cart-items th {
  text-align: left;
  padding: 0 0 18px !important;
  border-bottom: 1px solid rgba(18, 18, 18, 0.08) !important;
  font-weight: 400;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: rgba(18, 18, 18, 0.75);
}

.mymoods-cart .cart-items td {
  padding: 40px 0 0 !important;
  border: 0 !important;
  /* 偶数行に薄い網掛け（rgba(0,0,0,.024)）が入るが、元 Shopify は無地。 */
  background: transparent !important;
  /* `.woocommerce table.shop_table td{vertical-align:middle}`(0,2,2) が勝つため強制。
     middle のままだと数量ボックスがセル内で上下中央になり、画像より下がる。 */
  vertical-align: top !important;
}

/* 元 Shopify のセル余白: 商品説明 40px / 数量 50px / 合計 40px（いずれも左）。
   上の `.mymoods-cart .cart-items td`(0,2,1) より詳細度を上げないと効かない。 */
.mymoods-cart .cart-items td.cart-item__details {
  padding-left: 40px !important;
}

.mymoods-cart .cart-items td.cart-item__quantity {
  padding-left: 50px !important;
}

.mymoods-cart .cart-items td.cart-item__totals {
  padding-left: 40px !important;
}

/* 元 Shopify は最終行の下に 40px 空けてから罫線。WooCommerce ではクーポン行
   （td.actions）が最後に来るので、そこで下余白を作る。 */
.mymoods-cart .cart-items td.actions {
  padding: 40px 0 !important;
}

/* SP で WooCommerce の shop_table_responsive が td::before に
   attr(data-title) を出すが、cart.php の td は data-label しか持たないため
   「:」だけが並んでいた。元 Shopify も SP でラベルを出さないので消す。 */
.mymoods-cart .cart-items td::before {
  content: none !important;
}

/* component-cart-items.css が @media(min-width:750px) で .cart-item__media{width:10rem}
   を当ててくるため、.mymoods-cart スコープ＋!important で確実に上書きする。 */
.mymoods-cart .cart-item__media {
  width: 110px !important;
}


/* component-cart-items.css の .cart-item__image-container{display:inline-flex}（サイズ指定なし）
   だと壊れ画像の内在サイズに縮んでしまう。固定サイズを !important で強制する。 */
.mymoods-cart .cart-item__image-container {
  /* .cart-item__link を absolute で重ねるための基準。 */
  position: relative;
  display: block !important;
  /* 元 Shopify: 110x109 の白地＋1px の極薄枠、角丸なし。 */
  background: #fff;
  border: 1px solid rgba(18, 18, 18, 0.05);
  border-radius: 0;
  overflow: hidden;
  width: 110px !important;
  height: 109px !important;
}

/* component-cart-items.css の .cart-item__image{height:auto;max-width:…} を
   打ち消して 140x140 の正方形クロップに固定する。 */
.mymoods-cart .cart-item__image-container .cart-item__image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}

/* クーポン欄＋カート更新の行（cart.php の <td colspan="4" class="actions">）。 */
.cart-items td.actions {
  border-bottom: 0;
}

.cart__actions-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cart-items td.actions .coupon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  flex: 1 1 auto;
  max-width: 460px;
}

.cart-items td.actions .coupon .input-text {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: 0.85rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
}

.cart-items td.actions .coupon .input-text:focus {
  outline: none;
  border-color: var(--mymoods-blue);
  box-shadow: 0 0 0 3px rgba(var(--mymoods-blue-rgb, 37, 0, 193), 0.12);
}

.cart-items td.actions .button {
  padding: 0.6rem 1.5rem;
  border: none;
  border-radius: 25px;
  background: var(--mymoods-blue);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cart-items td.actions .button:hover:not(:disabled) {
  opacity: 0.85;
}

.cart-items td.actions .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Product Info - MyMoods Style */
/* 元 Shopify: 商品名 15px/1.3 #121212、その下の単価 14px rgba(18,18,18,.75) を 6px 空けて。 */
.cart-item__name {
  font-size: 15px;
  font-weight: 400;
  color: #121212;
  text-decoration: none;
  display: block;
  margin-bottom: 0;
  line-height: 1.3;
  letter-spacing: 0.6px;
}

.cart-item__name:hover {
  opacity: 0.7;
}

.product-option {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(18, 18, 18, 0.75);
  margin: 6px 0 0;
}

.cart-item__discounted-prices {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.cart-item__old-price {
  color: #999;
  font-size: 14px;
}

.cart-item__final-price {
  color: #ff0000;
  font-size: 14px;
}

/* Quantity - MyMoods Style（− [10] + のステッパー） */
/* 元 Shopify: 140x45 の白地・角丸10px・枠線なし（本文背景 #f4f4f4 との差で箱に見える）。
   −/＋ は 45x45、入力欄は 50px。 */
.quantity {
  display: inline-flex;
  align-items: stretch;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  width: 140px;
  height: 45px;
  background: #fff;
}

/* cart-stepper.js が挿入する −／＋ ボタン。 */
.quantity__button {
  background: none;
  border: none;
  width: 45px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: #333;
  transition: background-color 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}

.quantity__button:hover {
  background-color: #f2f2f4;
}

.quantity__button:active {
  background-color: #e8e8ec;
}

.quantity__button svg {
  width: 12px;
  height: 12px;
}

/* woocommerce_quantity_input() が出すのは input.qty のため、
   Rise 由来の .quantity__input と同じ見た目を .qty にも当てる。 */
/* WooCommerce 既定の `.woocommerce .quantity .qty`（詳細度 0,3,0）に勝つため
   td.cart-item__quantity を挟んで 0,3,1 にしている。 */
.quantity__input,
.cart-items td.cart-item__quantity .quantity .qty {
  border: none;
  width: 50px;
  height: 100%;
  padding: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #121212;
  background: transparent;
  -moz-appearance: textfield;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 数量と削除ボタンを同じ行に並べる。
   セルの line-height（24px）とタグ間の空白文字があると、数量ボックスが
   画像より 28px 下がり、削除ボタンとの間隔も 10px より広がってしまう。
   セル側で font-size/line-height を 0 にして、子要素を上端で揃える。 */
.cart-item__quantity {
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
}

.cart-item__quantity .quantity {
  vertical-align: top;
}

/* Remove Button（元 Shopify: ブランドブルー地・角丸10px・35x54 の
   ゴミ箱アイコンボタン。数量ボックス 45px より背が高いのも実測どおり）。
   cart.php は <a class="cart-remove-button"> を出す（Shopify の
   <cart-remove-button> 要素ではない）ため、クラスセレクタで当てる。 */
/* 文字色は `.mmv2 a{color:inherit}`(0,1,1) に負けるとアイコンが本文色になるため、
   .mymoods-cart を足して (0,2,1) で白を確定させる。 */
.mymoods-cart cart-remove-button a,
.mymoods-cart a.cart-remove-button {
  width: 35px;
  height: 54px;
  background: var(--mymoods-blue);
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  transition: opacity 0.2s ease;
  padding: 0;
  margin-left: 10px;
}

.mymoods-cart cart-remove-button a:hover,
.mymoods-cart a.cart-remove-button:hover {
  opacity: 0.85;
  color: #fff;
}

cart-remove-button svg,
.cart-remove-button svg {
  width: 15px;
  height: 15px;
}

/* Price - MyMoods Style */
.cart-item__totals {
  text-align: right;
}

.price {
  font-size: 16px;
  font-weight: 400;
  color: #000;
}

.cart-item__discounted-prices .price {
  color: #ff0000;
}

/* Empty Cart - MyMoods Style */
.cart__warnings {
  text-align: center;
  padding: 4rem 0;
}

.mymoods-cart-empty {
  text-align: center;
}

.mymoods-cart-empty-title {
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 2rem;
  color: #333;
}

.mymoods-cart-empty-button {
  display: inline-block;
  background-color: var(--mymoods-blue);
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.mymoods-cart-empty-button:hover {
  background-color: var(--mymoods-blue-dark);
}

.mymoods-cart-empty-button svg {
  display: none;
}

/* ===== SP（元 Shopify 390px の実測値） =====
   表をブロック化して、1行を次のグリッドに組む（列 102 / 71 / 71 / 71、gap 15px = 本文 360px）。
     [画像(2行ぶち抜き)] [商品名・単価 (2列)] [合計]
     [画像             ] [数量＋削除    (3列)      ]
   見出しは「商品」と「合計」だけを両端に出す（数量は伏せる）。 */
/* WooCommerce の `.woocommerce table.shop_table_responsive`（thead を消し、
   tr/td を block にして右寄せする）が同等以上の詳細度で当たるため、
   display 系は !important で奪い返す。 */
@media (max-width: 749px) {
  .mymoods-cart .cart-items,
  .mymoods-cart .cart-items thead,
  .mymoods-cart .cart-items tbody {
    display: block !important;
  }

  .mymoods-cart .cart-items thead tr {
    display: flex !important;
    justify-content: space-between;
    border-bottom: 1px solid rgba(18, 18, 18, 0.2);
  }

  .mymoods-cart .cart-items th {
    display: block;
    padding: 0 0 12px !important;
    border: 0 !important;
  }

  .mymoods-cart .cart-items th.small-hide {
    display: none !important;
  }

  .mymoods-cart .cart-items tr.cart-item {
    display: grid !important;
    grid-template-columns: 102px repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 15px;
    padding: 30px 0 0;
  }

  /* グリッド化した行では、セルの余白は grid の gap に任せる。 */
  /* WooCommerce の shop_table_responsive はセルを右寄せにするので左に戻す
     （合計セルだけ下で右寄せに戻す）。 */
  .mymoods-cart .cart-items td,
  .mymoods-cart .cart-items td.cart-item__details,
  .mymoods-cart .cart-items td.cart-item__quantity,
  .mymoods-cart .cart-items td.cart-item__totals {
    padding: 0 !important;
    text-align: left !important;
  }

  .mymoods-cart .cart-items td.cart-item__media {
    grid-column: 1;
    grid-row: 1 / 3;
    width: auto !important;
  }

  .mymoods-cart .cart-item__image-container {
    width: 102px !important;
    height: 101px !important;
  }

  .mymoods-cart .cart-items td.cart-item__details {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  .mymoods-cart .cart-items td.cart-item__totals {
    grid-column: 4 / 5;
    grid-row: 1;
    display: flex !important;
    justify-content: flex-end;
    text-align: right !important;
  }

  .mymoods-cart .cart-items td.cart-item__quantity {
    grid-column: 2 / 5;
    grid-row: 2;
    white-space: nowrap;
  }

  /* SP の削除ボタンは 45x54（PC は 35x54）、数量ボックスとの間は 15px。 */
  .mymoods-cart a.cart-remove-button,
  .mymoods-cart cart-remove-button a {
    width: 45px;
    margin-left: 15px;
  }

  .mymoods-cart .cart-items td.actions {
    display: block;
    padding: 30px 0 !important;
  }

  .cart__actions-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cart-items td.actions .coupon .input-text {
    width: 100%;
  }
}

/* Additional MyMoods-style elements */
.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2rem;
}

.underlined-link {
  font-size: 14px;
  color: #333;
  text-decoration: underline;
}

.underlined-link:hover {
  opacity: 0.7;
}

/* Checkout button styling */
.cart__checkout-button {
  background: var(--mymoods-blue);
  color: white;
  border: none;
  padding: 1rem 3rem;
  font-size: 16px;
  font-weight: 500;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%;
  max-width: 400px;
}

.cart__checkout-button:hover:not(:disabled) {
  background-color: var(--mymoods-blue-dark);
}

.cart__checkout-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 購入制限に抵触している間、購入手続きボタンの代わりに出す案内 */
.cart__checkout-blocked {
  width: 100%;
  max-width: 400px;
  margin: 0;
  padding: 1rem 1.5rem;
  border: 1px solid var(--mymoods-blue);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* Cart footer styling - MyMoods Style */
.cart__footer {
  border-radius: 8px;
  margin-top: 2rem;
}

.cart__blocks {
  max-width: 500px;
  margin-left: auto;
}

.totals {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0;
}

.totals__total {
  font-size: 14px;
  font-weight: 400;
  color: #666;
  margin: 0;
}

.totals__total-value {
  font-size: 14px;
  font-weight: 400;
  color: #000;
  margin: 0;
}

/* 強調するのは注文合計。各行に .totals を付けたため :first-of-type だと
   小計にマッチしてしまうので、.order-total を明示して指定する。 */
.totals.order-total .totals__total,
.totals.order-total .totals__total-value {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

/* 配送行はラベル左・内容も左揃え。内容が複数行になるため上端揃えにする。 */
.totals--shipping {
  align-items: flex-start;
  gap: 1rem;
}

.cart-collaterals .totals--shipping .totals__total-value {
  text-align: left !important;
  flex: 1;
  min-width: 0;
}

.shipping__methods ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart-collaterals .shipping__methods ul#shipping_method li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
}

.shipping__methods .woocommerce-shipping-destination {
  font-size: 12px;
  color: #666;
  margin: 0.5rem 0 0;
}

/* 「住所を変更」リンクも左揃えに。 */
.cart-collaterals .shipping__methods .woocommerce-shipping-calculator {
  text-align: left;
}

.shipping__methods .woocommerce-shipping-calculator {
  margin-top: 0.5rem;
}

.shipping__methods .shipping-calculator-button {
  font-size: 12px;
  color: #333;
  text-decoration: underline;
}

.tax-note {
  font-size: 12px;
  color: #666;
  margin-bottom: 1.5rem;
  display: block;
}

.cart__ctas {
  text-align: center;
}

/* Cart note styling */
.cart__note {
  margin-bottom: 2rem;
}

.cart__note label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.cart__note textarea {
  width: 100%;
  min-height: 80px;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
}

/* ===== レイアウト（元 Shopify: 全幅テーブル → その下・右寄せに合計ブロック） =====
   以前は「商品リスト｜sticky 注文サマリー」の2カラムだったが、元 Shopify の
   main-cart-items + main-cart-footer に合わせて縦積みに戻した。
   見出し（.mymoods-cart-header 系）の指定はこのファイル冒頭にある。

   元 Shopify の .page-width は max-width 1200 / padding 0 50px = 本文 1100px。
   列幅（media 110 / details 550 / qty 316 / totals 124）はこの 1100 前提の実測値
   なので、カートも本文 1100px に揃える。 */
.mymoods-cart-header,
.mymoods-cart-layout {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.mymoods-cart-layout {
  display: block;
  margin-top: 36px;
  margin-bottom: 96px;
}

/* 合計ブロックは表の下・右寄せ（元 Shopify の .cart__footer .cart__blocks と同じ）。
   実測: footer padding 40px 0 / ブロック幅 350px / 各行は右寄せ（space-between ではない）。
   カード化（枠・影・sticky）は Shopify 側に無いので外した。 */
.cart-collaterals {
  padding: 40px 0;
}

/* WooCommerce の `.cart-collaterals .cart_totals{width:48%;float:right}`（0,3,0）が
   勝つので、詳細度を合わせたうえで !important で 350px に固定する。 */
.cart-collaterals .cart__blocks.cart_totals {
  width: 350px !important;
  max-width: 100%;
  float: none !important;
  margin-left: auto;
}

/* 元 Shopify はラベルと金額を右端に寄せて並べる（justify-content: flex-end）。
   ラベル 16px #121212（margin-top 5px）／金額 18px rgba(18,18,18,.75)（margin-left 20px）。 */
.cart-collaterals .totals {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end;
  text-align: left;
  margin: 0;
}

.cart-collaterals .totals .totals__total,
.cart-collaterals .totals > span:first-child {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #121212;
  letter-spacing: 0.6px;
  margin: 5px 0 0;
}

.cart-collaterals .totals .totals__total-value,
.cart-collaterals .totals > span + span {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: rgba(18, 18, 18, 0.75);
  letter-spacing: 0.6px;
  text-align: right;
  margin: 0 0 0 20px;
}

/* wc_cart_totals_order_total_html() は金額を <strong> で包む。元 Shopify は
   見積もり合計と送料込みが同じ字面なので、太字を打ち消す。 */
.cart-collaterals .totals .totals__total-value strong {
  font-weight: 400;
}

/* 税・購入制限の注記（実測 13px / 1.5 / rgba(18,18,18,.75) / margin 22px 0 / ls .4px）。 */
.cart-collaterals .tax-note {
  display: block;
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.4px;
  color: rgba(18, 18, 18, 0.75);
  margin: 22px 0 0;
}

.cart-collaterals .cart__checkout-button,
.cart-collaterals .cart__ctas {
  width: 100%;
  max-width: none;
}

/* WooCommerce の .wc-proceed-to-checkout（padding 1em 0）を消す。
   ボタン上の余白は元 Shopify どおりボタン側の margin-top 22px で作る。
   .cart__ctas は既定で display:flex + gap:10px（コンテナ幅より子が縮む）なので
   block に戻し、ボタンが 100% 幅になるようにする。 */
.cart-collaterals .cart__ctas {
  display: block;
  padding: 0;
  margin: 0;
}

/* 元 Shopify の #checkout: 350x45 / bg #2500c1 / 角丸10px / 15px / ls 1px。
   WooCommerce の `.woocommerce .wc-proceed-to-checkout a.checkout-button`(0,3,1) が
   display:block / padding:1em / margin を当ててくるので、body クラスを足して
   (0,4,1) にして確実に勝たせる。 */
.woocommerce-cart .cart-collaterals .cart__ctas a.cart__checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 45px;
  padding: 0 30px;
  margin: 22px 0 0;
  background: var(--mymoods-blue);
  border-radius: 10px !important;
  color: #fff;
  font-size: 15px !important;
  font-weight: 400;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
}

.cart-collaterals a {
  color: var(--mymoods-blue);
}

/* SP の合計ブロック（元 Shopify 実測）: 全幅・各行は中央寄せ・footer 上下 30px。 */
@media (max-width: 749px) {
  .cart-collaterals {
    padding: 30px 0;
  }

  .cart-collaterals .cart__blocks.cart_totals {
    width: 100% !important;
  }

  .cart-collaterals .totals {
    justify-content: center !important;
  }

  .cart-collaterals .tax-note {
    margin: 22px 0 16px;
  }

  .woocommerce-cart .cart-collaterals .cart__ctas a.cart__checkout-button {
    margin-top: 10px;
  }
}

/* Error message styling - only for actual errors */
.cart-limit-error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 1rem;
  border-radius: 8px;
  font-size: 14px;
  margin-top: 1rem;
}