/** Shopify CDN: Minification failed

Line 16:54 Expected identifier but found whitespace
Line 23:1 Expected identifier but found "%"
Line 25:0 Unexpected "{"
Line 25:1 Expected identifier but found "%"
Line 26:0 Unexpected "{"
Line 27:2 Expected identifier but found "\"name\""
Line 187:0 Unexpected "{"
Line 187:1 Expected identifier but found "%"
Line 189:0 Unexpected "`"
Line 198:1 Expected identifier but found "%"
... and 324 more hidden warnings

**/
Yahan aapki teeno files ka complete, updated code hai. Aap inko direct copy karke apni files mein replace kar sakte hain. Isme aapki nayi **Schema Settings (Typography & Color)** aur **Grid Layout (Blank space / Title wrap fix)** dono apply kar diye gaye hain.

### 1. `_cart-product.liquid` (Schema File)

Isme title aur price ke font-size, font-weight aur color ki nayi settings add ki gayi hain.

```liquid
{% render 'cart-products' %}

{% schema %}
{
  "name": "t:names.cart_products",
  "tag": null,
  "settings": [
    {
      "type": "range",
      "id": "gap",
      "label": "t:settings.gap",
      "min": 10,
      "max": 50,
      "step": 2,
      "unit": "px",
      "default": 10
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:options.auto"
        },
        {
          "value": "portrait",
          "label": "t:options.portrait"
        },
        {
          "value": "square",
          "label": "t:options.square"
        }
      ],
      "default": "adapt",
      "label": "t:settings.aspect_ratio"
    },
    {
      "type": "checkbox",
      "id": "border",
      "label": "t:settings.border",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "vendor",
      "label": "t:settings.vendor",
      "default": false
    },
    {
      "type": "header",
      "content": "Typography & Colors (Title)"
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Title Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "title_font_size",
      "label": "Title Font Size",
      "min": 12,
      "max": 30,
      "step": 1,
      "unit": "px",
      "default": 14
    },
    {
      "type": "select",
      "id": "title_font_weight",
      "label": "Title Font Weight",
      "options": [
        { "value": "400", "label": "Normal" },
        { "value": "500", "label": "Medium" },
        { "value": "600", "label": "Semi-Bold" },
        { "value": "700", "label": "Bold" }
      ],
      "default": "500"
    },
    {
      "type": "header",
      "content": "Typography & Colors (Price)"
    },
    {
      "type": "color",
      "id": "price_color",
      "label": "Price Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "price_font_size",
      "label": "Price Font Size",
      "min": 12,
      "max": 30,
      "step": 1,
      "unit": "px",
      "default": 14
    },
    {
      "type": "select",
      "id": "price_font_weight",
      "label": "Price Font Weight",
      "options": [
        { "value": "400", "label": "Normal" },
        { "value": "500", "label": "Medium" },
        { "value": "600", "label": "Semi-Bold" },
        { "value": "700", "label": "Bold" }
      ],
      "default": "600"
    },
    {
      "type": "header",
      "content": "t:content.padding"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-start",
      "label": "t:settings.left",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-end",
      "label": "t:settings.right",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "t:names.cart_products"
    }
  ]
}
{% endschema %}

```

---

### 2. `cart-products.liquid` (Snippet File)

Isme maine wo `<style>` block add kar diya hai jo aapki nayi typography/color schema settings ko fetch karke render karega.

```liquid
{% assign bl_stts = block.settings %}

<style>
  .cart__items[data-id="{{ section.id }}"] .cart-item__name {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal;
    word-break: break-word;
    color: {{ bl_stts.title_color | default: 'inherit' }};
    font-size: {{ bl_stts.title_font_size | default: 14 }}px;
    font-weight: {{ bl_stts.title_font_weight | default: '500' }};
  }

  .cart__items[data-id="{{ section.id }}"] .cart-item__price-wrapper .price,
  .cart__items[data-id="{{ section.id }}"] .cart-item__price-wrapper .cart-item__old-price {
    color: {{ bl_stts.price_color | default: 'inherit' }};
    font-size: {{ bl_stts.price_font_size | default: 14 }}px;
    font-weight: {{ bl_stts.price_font_weight | default: '600' }};
  }
</style>

<div
  class="cart-items__wrapper spacing-style"
  style="{% render 'spacing-style', settings: bl_stts %}"
  {{ block.shopify_attributes }}
>
  {% if cart.empty? %}
    <div class="cart__warnings">
      <h1 class="cart__empty-text">{{ 'content.empty' | t }}</h1>
      <a href="{{ routes.all_products_collection_url }}" class="button">
        {{ 'content.continue_shopping' | t }}
      </a>

      {%- if shop.customer_accounts_enabled and customer == null -%}
        <h2 class="cart__login-title">{{ 'content.login.title' | t }}</h2>
        <p class="cart__login-paragraph">
          {{ 'content.login.paragraph_html' | t: link: routes.account_login_url }}
        </p>
      {%- endif -%}
    </div>
  {%- else -%}
    <span
      class="cart-item-count visually-hidden"
      aria-hidden="true"
    >
      {{- cart.item_count -}}
    </span>
    <form
      action="{{ routes.cart_url }}"
      class="cart__contents critical-hidden"
      method="post"
      id="cart"
    >
      <div
        class="cart__items" id="main-cart-items"
        data-id="{{ section.id }}"
        style="--cart-items-gap:{{ bl_stts.gap | append: "px" }};"
      >
        <div class="js-contents">
          {%- if cart != empty -%}
            <table
              class="cart-items cart-items__table"
              role="table"
            >
              <caption
                class="visually-hidden"
                role="caption"
              >
                {{ 'content.cart_total' | t }}
                <span>{{ cart.total_price | money_with_currency }}</span>
              </caption>
              <thead role="rowgroup">
                <tr
                  role="row"
                  class="cart-items__table-row"
                >
                  <th
                    id="productImage"
                    class="cart-items__table-heading cart-item__media caption-with-letter-spacing--medium font-bold"
                    scope="col"
                    role="columnheader"
                  >
                    <span>{{ 'content.product' | t }}</span>
                  </th>
                  <th
                    id="productInformation"
                    class="cart-items__table-heading cart-item__details caption-with-letter-spacing--medium font-bold"
                    scope="col"
                    role="columnheader"
                  >
                    <span class="visually-hidden">{{ 'content.product_information' | t }}</span>
                  </th>
                  <th
                    id="productPrice"
                    class="cart-items__table-heading cart-item__price small-hide center caption-with-letter-spacing--medium font-bold"
                    scope="col"
                    role="columnheader"
                  >
                    <span>{{ 'content.price' | t }}</span>
                  </th>
                  <th
                    id="productTotalMobile"
                    class="cart-items__table-heading cart-item__totals medium-hide large-up-hide right caption-with-letter-spacing--medium font-bold"
                    scope="col"
                    role="columnheader"
                  >
                    <span>{{ 'content.total' | t }}</span>
                  </th>
                  <th
                    id="quantity"
                    class="cart-items__table-heading cart-item__quantity cart-items__heading--wide cart-items__heading--quantity small-hide center caption-with-letter-spacing--medium font-bold"
                    scope="col"
                    role="columnheader"
                  >
                    <span>{{ 'content.quantity' | t }}</span>
                  </th>
                  <th
                    id="productTotal"
                    class="cart-items__table-heading cart-item__totals small-hide center caption-with-letter-spacing--medium font-bold"
                    scope="col"
                    role="columnheader"
                  >
                    <span>{{ 'content.total' | t }}</span>
                  </th>
                  <th
                    id="productRemove"
                    class="cart-items__table-heading right caption-with-letter-spacing--medium font-bold"
                    scope="col"
                    role="columnheader"
                  >
                    <span class="visually-hidden">{{ 'content.remove' | t }}</span>
                  </th>
                </tr>
              </thead>

              <tbody role="rowgroup">
                {%- for item in cart.items -%}
                  <tr
                    role="row"
                    class="cart-item cart-items__table-row{% if item.parent_relationship.parent != null %} cart-items__nested-line{% endif %}{% if bl_stts.border == true %} cart-items--border{% endif %}"
                    data-line="{{ item.index | plus: 1 }}"
                    id="CartItem-{{ item.index | plus: 1 }}"
                  >
                    <td
                      class="cart-item__media"
                      role="cell"
                      headers="productImage"
                    >
                      {% if item.image %}
                        {% liquid
                          assign ratio = 1

                          if bl_stts.image_ratio == 'portrait'
                            assign ratio = 0.8
                          elsif bl_stts.image_ratio == 'adapt'
                            assign ratio = item.image.aspect_ratio
                          endif
                        %}
                        <a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"></a>
                        <div
                          class="cart-item__image-container"
                          style="--aspect-ratio:{{ ratio }};"
                        >
                          <img
                            src="{{ item.image | image_url: width: 300 }}"
                            class="cart-item__image"
                            alt="{{ item.image.alt | escape }}"
                            loading="lazy"
                            width="150"
                            height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
                          >
                        </div>
                      {% endif %}
                    </td>
                    <td
                      class="cart-item__details"
                      role="cell"
                      headers="productInformation"
                    >
                      {%- if bl_stts.vendor -%}
                        <p class="caption-with-letter-spacing">{{ item.product.vendor }}</p>
                      {%- endif -%}

                      <a href="{{ item.url }}" class="cart-item__name break link--hover-underline">
                        <span class="text">{{ item.product.title | escape }}</span>
                      </a>

                      {%- if item.product.has_only_default_variant == false
                        or item.properties.size != 0
                        or item.selling_plan_allocation != null
                      -%}
                        {%- if item.product.has_only_default_variant == false -%}
                          <div class="product-option flex items-center gap-sm">
                            {{ item.variant.title }}

                            {%- if settings.show_quick_edit_cart -%}
                              <edit-cart>
                                <button
                                  type="button"
                                  class="product-edit button-unstyled cursor-pointer"
                                  data-modal="#halo-edit-cart-popup"
                                  data-open-edit-cart
                                  data-edit-cart-url="{{ item.url }}&view=ajax_edit_cart"
                                  data-edit-cart-id="{{ item.id }}"
                                  data-edit-cart-quantity="{{ item.quantity }}"
                                  data-line="{{ item.key }}"
                                  data-index="{{ item.index | plus: 1 }}"
                                  title="{{ 'content.cart.edit_title' | t: title: item.variant.title }}"
                                >
                                  <span class="svg-wrapper">
                                    {% render 'icon-edit' %}
                                  </span>
                                </button>
                              </edit-cart>
                            {%- endif -%}
                          </div>
                        {%- endif -%}
                        {% if item.selling_plan_allocation != null %}
                          <p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
                        {% endif %}
                      {%- endif -%}

                      {%- for property in item.properties -%}
                        {%- assign property_first_char = property.first | slice: 0 -%}
                        {%- if property.last != blank and property.last != 'undefined' and property_first_char != '_' -%}
                          <div class="customization-option product-option flex items-center gap-xs whitespace-nowrap">
                            <dt>{{ property.first }}:</dt>
                            <dd>
                              {%- if property.last contains '/uploads/' -%}
                                <a href="{{ property.last }}" class="link" target="_blank">
                                  {{ property.last | split: '/' | last }}
                                </a>
                              {%- else -%}
                                {{ property.last }}
                              {%- endif -%}
                            </dd>
                          </div>
                        {%- endif -%}
                      {%- endfor -%}

                      <ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
                        {%- for discount in item.line_level_discount_allocations -%}
                          <li class="discounts__discount">
                            <span class="discounts__discount-text font-medium">
                              <span class="svg-wrapper">
                                {{- 'icon-discount.svg' | inline_asset_content -}}
                              </span>
                              {{ discount.discount_application.title | escape }}
                            </span>
                          </li>
                        {%- endfor -%}
                      </ul>

                      <div class="cart-item__price-wrapper relative medium-hide large-up-hide">
                        <text-loader-component>
                          {%- render 'loading-spinner' -%}
                          <div class="cart-item__price-wrapper">
                          
                            {%- assign compare_price = item.variant.compare_at_price -%}
                            {%- assign regular_price = item.original_price -%}
                         
                            {%- assign final_price = item.final_price -%}

                            {%- if compare_price > regular_price or regular_price > final_price -%}
                              <dl class="cart-item__discounted-prices">
                              <div class="flex flex-row gap-6">
                                <dt class="visually-hidden">
                                  {{ 'products.product.price.regular_price' | t }}
                                </dt>
                                <dd class="center mr-3">
                                  <s class="cart-item__old-price price price--end">
                                    {{ compare_price | default: regular_price | money }}
                                  </s>
                                </dd>
                               
                                <dt class="visually-hidden">
                                  {{ 'products.product.price.sale_price' | t }}
                                </dt>
                                <dd class="price price--end center ml-3">
                                  {{ final_price | money }}
                                </dd>
                                 </div>
                              </dl>
                            {%- else -%}
                              <span class="price price--end center">
                                {{ final_price | money }}
                              </span>
                            {%- endif -%}

                            {%- if item.variant.available and item.unit_price_measurement -%}
                              <div class="unit-price caption center">
                                <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                                {{ item.unit_price | money }}
                                <span aria-hidden="true">/</span>
                                <span class="visually-hidden"
                                  >&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span
                                >
                                {%- if item.unit_price_measurement.reference_value != 1 -%}
                                  {{- item.unit_price_measurement.reference_value -}}
                                {%- endif -%}
                                {{ item.unit_price_measurement.reference_unit }}
                              </div>
                            {%- endif -%}
                          </div>
                        </text-loader-component>
                      </div>
                    </td>
                    <td
                      class="cart-item__price relative small-hide"
                      role="cell"
                      headers="productPrice"
                    >
                      <text-loader-component>
                        {%- render 'loading-spinner' -%}
                        <div class="cart-item__price-wrapper">
                          {%- assign compare_price = item.variant.compare_at_price -%}
                          {%- assign regular_price = item.original_price -%}
                          {%- assign final_price = item.final_price -%}

                          {%- if compare_price > regular_price or regular_price > final_price -%}
                            <dl class="cart-item__discounted-prices">
                              <dt class="visually-hidden">
                                {{ 'products.product.price.regular_price' | t }}
                              </dt>
                              <dd class="center">
                                <s class="cart-item__old-price price price--end">
                                  {{ compare_price | default: regular_price | money }}
                                </s>
                              </dd>
                              <dt class="visually-hidden">
                                {{ 'products.product.price.sale_price' | t }}
                              </dt>
                              <dd class="price price--end center">
                                {{ final_price | money }}
                              </dd>
                            </dl>
                          {%- else -%}
                            <span class="price price--end center">
                              {{ final_price | money }}
                            </span>
                          {%- endif -%}

                          {%- if item.variant.available and item.unit_price_measurement -%}
                            <div class="unit-price caption center">
                              <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                              {{ item.unit_price | money }}
                              <span aria-hidden="true">/</span>
                              <span class="visually-hidden"
                                >&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span
                              >
                              {%- if item.unit_price_measurement.reference_value != 1 -%}
                                {{- item.unit_price_measurement.reference_value -}}
                              {%- endif -%}
                              {{ item.unit_price_measurement.reference_unit }}
                            </div>
                          {%- endif -%}
                        </div>
                      </text-loader-component>
                    </td>
                    <td
                      class="cart-item__quantity"
                      role="cell"
                      headers="quantity"
                    >
                      {% liquid
                        assign variant = item.product.selected_or_first_available_variant
                        assign can_update_quantity = item.instructions.can_update_quantity | default: true, allow_false: true
                      %}
                      <quantity-selector-component
                        class="quantity-selector quantity cart-quantity"
                        {% if item.index == null %}
                          {{- block.shopify_attributes -}}
                        {% endif %}
                      >
                        <button
                          class="button quantity__button quantity-minus button-unstyled"
                          type="button"
                          name="minus"
                          onclick="this.closest('quantity-selector-component').dispatchEvent(new CustomEvent('decreaseQuantity', { bubbles: true }))"
                          {% if can_update_quantity == false %}
                            disabled
                          {% endif %}
                        >
                          <span class="visually-hidden">
                            {{- 'products.product.quantity.decrease' | t: product: item.product.title | escape -}}
                          </span>
                          <span class="svg-wrapper icon-minus">
                            {{- 'icon-minus.svg' | inline_asset_content -}}
                          </span>
                        </button>
                        <input
                          class="quantity__input"
                          type="number"
                          name="{% if item.index %}updates[]{% else %}quantity{% endif %}"
                          value="{{ item.quantity | default: 1 }}"
                          min="0"
                          onblur="this.closest('quantity-selector-component').dispatchEvent(new CustomEvent('quantity-selector:update', { bubbles: true }))"
                          onfocus="this.closest('quantity-selector-component').selectInputValue()"
                          data-index="{{ item.index | plus: 1 }}"
                          aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
                          inputmode="numeric"
                          data-quantity-variant-id="{{ item.variant.id }}"
                          {% if item.index %}
                            data-cart-line="{{ item.index | plus: 1 }}"
                          {% endif %}
                          {% if variant.quantity_rule.max %}
                            max="{{ variant.quantity_rule.max }}"
                          {% endif %}
                          step="{{ variant.quantity_rule.increment | default: 1 }}"
                          {% if can_update_quantity == false or variant.available == false %}
                            disabled
                          {% endif %}
                        >
                        <button
                          class="button quantity__button quantity-plus button-unstyled"
                          type="button"
                          name="plus"
                          onclick="this.closest('quantity-selector-component').dispatchEvent(new CustomEvent('increaseQuantity', { bubbles: true }))"
                          {% if can_update_quantity == false %}
                            disabled
                          {% endif %}
                        >
                          <span class="visually-hidden">
                            {{- 'products.product.quantity.increase' | t: product: item.product.title | escape -}}
                          </span>
                          <span class="svg-wrapper icon-plus">
                            {{- 'icon-plus.svg' | inline_asset_content -}}
                          </span>
                        </button>
                      </quantity-selector-component>
                      <div class="cart-item__error" id="Line-item-error-{{ item.index | plus: 1 }}" role="alert">
                        <small class="cart-item__error-text"></small>
                        <span class="svg-wrapper">
                          {{- 'icon-error.svg' | inline_asset_content -}}
                        </span>
                      </div>
                    </td>
                    <td
                      class="cart-item__remove"
                      role="cell"
                      headers="productRemove"
                    >
                      <button
                        class="button button-unstyled button-close-circle"
                        type="button"
                        aria-label="{{ 'accessibility.remove_item' | t: title: item.title | escape }}"
                        onclick="
                          const container = this.closest('cart-items-component') || this.closest('cart-drawer-items');
                          if (container) {
                            container.dispatchEvent(
                              new CustomEvent('onLineItemRemove', {
                                detail: { line: {{ item.index | plus: 1 }} },
                                bubbles: true
                              })
                            );
                          }
                        "
                        {% assign can_remove = item.instructions.can_remove | default: true, allow_false: true %}
                        {% if can_remove == false %}
                          hidden
                        {% endif %}
                      >
                        <span class="svg-wrapper icon-remove">
                          {{- 'icon-close.svg' | inline_asset_content -}}
                        </span>
                        <span class="visually-hidden">
                          {{ 'content.remove_title' | t: title: item.title | escape }}
                        </span>
                      </button>
                    </td>
                  </tr>
                {%- endfor -%}
              </tbody>
            </table>
          {%- endif -%}
        </div>
      </div>

      <p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
      <p
        class="visually-hidden"
        id="shopping-cart-line-item-status"
        aria-live="polite"
        aria-hidden="true"
        role="status"
      >
        {{ 'accessibility.loading' | t }}
      </p>
    </form>
  {%- endif -%}
</div>

```

---

### 3. CSS File (Cart Drawer CSS)

Ye aapki original CSS hai jisme maine sirf `.cart-items__table-row` ke andar `grid-template-areas` mein `"media details details"` aur uske width property ko fix kiya hai, baaki sab aapka same rakha hai.

```css
.cart-drawer .drawer__inner {
  padding-inline: var(--padding-md);
}

cart-drawer.is-empty .drawer__inner {
  display: grid;
  grid-template-rows: 1fr;
  align-items: center;
  padding: 0;
}

cart-drawer:not(.is-empty) .cart-drawer__warnings,
cart-drawer.is-empty .cart-drawer__collection {
  display: none;
}

.cart-drawer__warnings--has-collection .cart__login-title {
  margin-top: 2.5rem;
}

.cart-drawer__warnings .drawer__close {
  right: .5rem;
}

cart-drawer-items.is-empty {
  display: none;
}

cart-drawer-items .section--main-cart {
  display: flex;
  flex-direction: column;
  height: 100%;

  .cart__contents {
    overflow-y: auto;
    flex: 1;
    max-height: calc(87dvh - var(--cart-drawer-header-height));
  }
}

.cart-drawer .drawer__cart-items-wrapper {
  flex-grow: 1;
}

.cart-drawer .cart-items,
.cart-drawer tbody {
  display: block;
  width: 100%;
}

.cart-drawer thead {
  display: inline-table;
  width: 100%;
}

cart-drawer-items .loading  .cart__contents,
cart-drawer-items .loading + .drawer__footer {
  opacity: var(--opacity-20);
  pointer-events: none;
}

cart-drawer-items .cart-items *.center {
  text-align: left;
}

@media screen and (max-height: 650px) {
  cart-drawer-items {
    overflow: visible;
  }

  .drawer__inner {
    overflow: scroll;
  }
}

.cart-drawer .cart-item .loading__spinner {
  right: .5rem;
  padding-top: 0;
}

.cart-drawer .cart-item__totals {
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.cart-drawer .cart-item__price-wrapper > *:only-child {
  margin-top: 0;
}

.cart-drawer .cart-item__price-wrapper .cart-item__discounted-prices {
  display: flex;
  flex-direction: column;
}

.cart-drawer .unit-price {
  margin-top: 0.6rem;
}

.cart-drawer .cart-items .cart-item__quantity {
  padding-top: 0;
  grid-column: 2 / 5;
}

@media screen and (max-width: 749px) {
  .cart-drawer .cart-item cart-remove-button {
    margin-left: 0;
  }
}

.cart-drawer__footer > * + * {
  margin-top: 1.5rem;
}

.cart-drawer .totals {
  justify-content: space-between;
}

.cart-drawer .tax-note {
  margin: 1.2rem 0 2rem auto;
  text-align: left;
}

.cart-drawer .product-option dd {
  word-break: break-word;
}

.cart-drawer details[open] > summary .icon-caret {
  transform: rotateX(180deg);
}

.cart-drawer .cart__checkout-button {
  max-width: 100%;
}

/* Drawer footer */
.drawer__footer {
  padding-block: 1.5rem;
  /* margin-top: auto; */
}

.drawer__footer > details[open] {
  padding-bottom: 1.5rem;
}

.drawer__footer summary {
  display: flex;
  position: relative;
  line-height: 1;
  padding: 1.5rem 2.8rem 1.5rem 0;
}

.drawer__footer > details + .cart-drawer__footer {
  padding-top: 1.5rem;
}

.drawer__footer .cart__dynamic-checkout-buttons {
  max-width: 100%;
}

.drawer__footer #dynamic-checkout-cart ul {
  flex-wrap: wrap !important;
  flex-direction: row !important;
  margin: 0.5rem -0.5rem 0 0 !important;
  gap: 0.5rem;
}

.drawer__footer [data-shopify-buttoncontainer] {
  justify-content: flex-start;
}

.drawer__footer #dynamic-checkout-cart ul > li {
  flex-basis: calc(50% - 0.5rem) !important;
  margin: 0 !important;
}

.drawer__footer #dynamic-checkout-cart ul > li:only-child {
  flex-basis: 100% !important;
  margin-right: 0.5rem !important;
}

@media screen and (min-width: 750px) {
  .drawer__footer #dynamic-checkout-cart ul > li {
    flex-basis: calc(100% / 3 - 0.5rem) !important;
    margin: 0 !important;
  }

  .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(2),
  .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(2) ~ li,
  .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(4),
  .drawer__footer #dynamic-checkout-cart ul > li:first-child:nth-last-child(4) ~ li {
    flex-basis: calc(50% - 0.5rem) !important;
  }
}

cart-drawer-items::-webkit-scrollbar {
  width: .3rem;
}

cart-drawer-items::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  border-radius: 100%;
}

cart-drawer-items::-webkit-scrollbar-track-piece {
  margin-top: 3.1rem;
}

.cart-drawer .quantity-popover-container {
  padding: 0;
}

.cart-drawer .quantity-popover__info.global-settings-popup {
  transform: translateY(0);
  top: 100%;
}

.cart-drawer .quantity-popover__info + .cart-item__error {
  margin-top: 0.2rem;
}

@media screen and (min-width: 750px) {
  .cart-drawer .cart-item__quantity--info quantity-popover > * {
    padding-left: 0;
  }

  .cart-drawer .cart-item__error {
    margin-left: 0;
  }
}

/* Cart items */
.cart-drawer .cart-items thead {
  display: none;
}

.cart-drawer .cart-items__table-row {
  --cart-item-price-width: 6rem;
  display: grid;
  grid-template-columns: clamp(6rem, 17cqi, 10rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
  /* --- MAIN FIX APPLIED HERE --- */
  grid-template-areas:
      "media details details"
      "media quantity remove";
  gap: var(--gap-xl);
  align-items: start;
  padding-block: var(--cart-items-gap);
  padding-inline: 0 var(--cart-items-gap);
  margin-bottom: 0;
  border: none;
  border-bottom: .1rem solid rgb(var(--color-foreground-rgb) / var(--opacity-8));

  .cart-item__price-wrapper.medium-hide.large-up-hide {
    display: block !important;
  }

  .cart-item__price.small-hide {
    display: none !important;
  }

  .cart-item__media {
    grid-area: media;
  }

  /* --- FULL WIDTH FIX APPLIED HERE --- */
  .cart-item__details {
    grid-area: details;
    width: 100%;

    .loading__spinner {
      display: none;
    }
  }

  .cart-item__price {
    grid-area: price;
  }

  .cart-item__totals {
    grid-area: totals;

    .price {
      text-align: right;
    }
  }

  .cart-item__quantity {
    grid-area: quantity;

    .cart-quantity {
      width: 100%;
      max-width: min(100%, 12rem);
    }
  }

  .cart-item__price-wrapper .price {
    text-align: left;
  }

  .cart-item__remove {
    grid-area: remove;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 4.5rem;


    @media (hover: hover) {
      .button {
        overflow: visible;
        transition: transform var(--animation-speed) var(--animation-easing);
        will-change: transform;
        position: relative;

        .svg-wrapper {
          display: block;
        }

        &::after {
          content: "";
          position: absolute;
          inset: -5px;
          border: 0.1rem solid var(--color-foreground);
          border-radius: 50%;
          z-index: -1;
          transform: scale(0.8);
          transition: transform var(--animation-speed) var(--animation-easing), opacity var(--animation-speed) var(--animation-easing);
          will-change: transform, opacity;
          opacity: 0;
        }

        &:hover {
          transform: rotate(90deg);
          &::after {
            transform: scale(1);
            opacity: 1;
          }
        }
      }
    }
  }
}

.cart-drawer .cart-item:last-child {
  margin-bottom: 1.5rem;
}

.drawer--function-blocks {
  font-size: var(--font-size--3xs);
  display: flex;
  /* border: 0.1rem solid rgb(var(--color-border-rgb) / var(--opacity-80)); */

  &:has(.function-block:first-child) .function-block {
    width: 100%;
  }

  &:has(.function-block:nth-child(n+2)) .function-block {
    width: 50%;
  }

  &:has(.function-block:nth-child(n+3)) .function-block {
    width: 33.3333333%;
  }

  &:has(.function-block:nth-child(n+4)) .function-block {
    width: 25%;
  }

  .function-block {
    align-items: center;
    justify-items: center;
    padding: 1.6rem 1rem;
    border: none;
    border-right: 0.1rem solid rgb(var(--color-border-rgb) / var(--opacity-80));
    border-radius: 0;

    &:has(+ modal-component) {
      border-right: none;
    }

    .svg-wrapper {
      width: 2.4rem;
      height: 2.4rem;
    }
  }
}

```