/* Cart drawer + cart page additions on top of Dawn's component-cart-drawer.css.
   Dawn's drawer is written for a left-to-right page: it slides in from the right edge and parks
   the close button top-right. On an Arabic page it must come from the left, mirrored. */
[dir="rtl"] .drawer__inner{transform:translate(-100%);border-right:.1rem solid rgba(var(--color-foreground),.2);border-left:0}
[dir="rtl"] .drawer.active .drawer__inner{transform:translate(0)}
[dir="rtl"] .drawer__close{right:auto;left:-10px}
[dir="rtl"] .cart-drawer .tax-note{margin:1.2rem auto 2rem 0;text-align:right}
[dir="rtl"] .drawer__footer summary{padding:1.5rem 0 1.5rem 2.8rem}
.drawer__footer summary{cursor:pointer;list-style:none;justify-content:space-between}
.drawer__footer summary::-webkit-details-marker{display:none}
.drawer__footer textarea{width:100%;min-height:8rem;padding:1rem 1.2rem;border:.1rem solid rgba(var(--color-foreground),.25);border-radius:var(--inputs-radius,.8rem);font:inherit}
.cart-drawer .cart-item__media{position:relative}
.cart-drawer .cart-item__link{position:absolute;inset:0}
.cart-drawer .cart-item__image{border-radius:.8rem;aspect-ratio:1/1;object-fit:cover;width:100%;height:auto}
.cart-drawer .cart__checkout-button{width:100%;display:flex;justify-content:center}
cart-drawer-items[aria-busy="true"]{opacity:.6;pointer-events:none;transition:opacity .15s}

/* Free-delivery progress — the "you are X away" bar Shopify merchants add with an app. */
.nh-free-delivery{padding:.4rem 0 1.4rem}
.nh-free-delivery__text{margin:0 0 .8rem;color:rgb(var(--color-foreground))}
.nh-free-delivery__bar{height:.6rem;border-radius:99rem;background:rgba(var(--color-foreground),.1);overflow:hidden}
.nh-free-delivery__bar>span{display:block;height:100%;border-radius:inherit;background:rgb(var(--color-button));transition:width .4s ease}

/* Cart page: note + free-delivery sit above the totals. */
.cart__note-field{margin-bottom:2rem}
.cart__note-field textarea{width:100%;min-height:9rem;padding:1.2rem;border:.1rem solid rgba(var(--color-foreground),.25);border-radius:var(--inputs-radius,.8rem);font:inherit;background:rgb(var(--color-background))}
.cart__note-field label{display:block;margin-bottom:.6rem}
.cart__footer .nh-free-delivery{max-width:40rem;margin-inline-start:auto}
/* The drawer is 40rem wide: column headings there only crowd the first line. Kept for screen readers. */
.cart-drawer .cart-items thead{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Drawer: header and footer stay put, only the lines scroll. Dawn lets the whole panel scroll below 650px
   of height, which pushed "Check out" off a phone screen; 100dvh keeps it above the browser's toolbar. */
cart-drawer,cart-drawer.drawer{height:100%;height:100dvh}
.cart-drawer .drawer__inner{overflow:hidden}
.cart-drawer cart-drawer-items{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.cart-drawer .drawer__header,.cart-drawer .drawer__footer{flex-shrink:0}
.cart-drawer .drawer__footer{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}
/* A short screen (a phone held sideways): header + footer can outgrow it, so the whole panel scrolls again
   and Check out stays reachable. */
@media screen and (max-height:500px){.cart-drawer .drawer__inner{overflow-y:auto}.cart-drawer cart-drawer-items{flex:0 0 auto;overflow:visible}}
/* Variant and bundle count on one line ("فردة عدد 4 (زوجين) · 2×" fits a 360px phone at 1.3rem). A longer
   label wraps between words, never truncated; the count stays with its last word, never alone. */
.cart-drawer .nh-variant-line{font-size:1.3rem;word-break:normal;overflow-wrap:anywhere}
.cart-drawer .nh-variant-line__qty{white-space:nowrap}
/* Stepper and trash on one row, the trash centred on the stepper. */
.cart-drawer .cart-item__quantity-wrapper{flex-wrap:nowrap;align-items:center;gap:.8rem}
.cart-drawer .cart-remove-button{flex-shrink:0;min-width:4.4rem;min-height:4.4rem;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center}

/* Cart page: the note and the summary never share a line's space. Dawn gives each child a fixed 35rem
   and a physical margin-left; a grid with a real gap replaces both. Below 990px (a tablet's note column
   would be ~23rem) they stack: note first, then the summary. */
.cart__footer{display:flex;flex-direction:column;gap:3.2rem}
.cart__footer>*,.cart__footer>*+*{width:auto;margin:0}
.cart__footer .cart__note-field{margin-bottom:0;min-width:0}
@media screen and (min-width:990px){
  .cart__footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(28rem,38rem);column-gap:6rem;align-items:start}
  .cart__footer>.cart__blocks{grid-column:-2}
}