/* ==========================================================================
   Randmarkings — cart page custom options polish
   Targets the Hyva cart item options (Max Dimension chip, attachment block).
   Scoped to body.checkout-cart-index so it never bleeds into other pages.
   ========================================================================== */

/* The option row container — kill the awkward stacked block layout */
body.checkout-cart-index .item-info .flex.flex-wrap.mt-1\.5,
body.checkout-cart-index ol li .flex.flex-wrap.mt-1\.5,
body.checkout-cart-index .flex.flex-wrap.gap-1.mt-1\.5 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 6px !important;
}

/* The attachment wrapper div (`<div class="mt-1">`) — collapse its
   top margin so it sits inline with the chip */
body.checkout-cart-index .item-info .flex.flex-wrap > .mt-1,
body.checkout-cart-index .flex.flex-wrap.gap-1.mt-1\.5 > .mt-1 {
    margin-top: 0 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
}

/* Max Dimension chip + attachment block — wrap as compact inline items
   instead of stacking as wide blocks with awkward gap. */
body.checkout-cart-index .item-info .flex-wrap > span[class*="bg-gray-200"] {
    display: inline-flex !important;
    align-items: center;
    padding: 3px 10px !important;
    font-size: 11.5px !important;
    font-weight: 500;
    background: #F3F4F6 !important;
    color: #4B5563 !important;
    border-radius: 6px !important;
}

body.checkout-cart-index .item-info .flex-wrap > span[class*="bg-gray-200"] span {
    color: #111827 !important;
    font-weight: 600;
    margin-left: 2px;
}

/* Attachment wrapper — compact card, not full-width */
body.checkout-cart-index .item-info .flex-wrap > .mt-1 > span[style*="background:#f9fafb"],
body.checkout-cart-index .item-info .flex-wrap > div > span[style*="background:#f9fafb"] {
    display: inline-block !important;
    background: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: auto !important;
}

/* Inner "📎 1 file attached" header — smaller */
body.checkout-cart-index .item-info .flex-wrap span[style*="background:#f9fafb"] > span:first-child {
    margin-bottom: 4px !important;
    gap: 4px !important;
}

body.checkout-cart-index .item-info .flex-wrap span[style*="background:#f9fafb"] > span:first-child span:nth-child(2) {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Thumbnail row */
body.checkout-cart-index .item-info .flex-wrap span[style*="background:#f9fafb"] a[data-oa-lightbox] {
    width: 48px !important;
    height: 48px !important;
}

body.checkout-cart-index .item-info .flex-wrap span[style*="background:#f9fafb"] a[data-oa-lightbox] img {
    width: 48px !important;
    height: 48px !important;
}

/* Make options + attachment sit on the same flex line with gap */
body.checkout-cart-index .item-info .flex.flex-wrap.gap-1.mt-1\\.5 {
    gap: 6px !important;
    align-items: flex-start !important;
    margin-top: 8px !important;
}

body.checkout-cart-index .item-info .flex.flex-wrap.gap-1.mt-1\\.5 > .mt-1 {
    margin-top: 0 !important;
}