@font-face {
    font-family: 'Oplynt Header Inter'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
}
.hn-header-cart-dialog {
    inset: 0 0 0 auto; margin: 10px; width: min(480px, calc(100% - 20px)); max-width: none;
    height: calc(100dvh - 20px); max-height: none; padding: 24px;
    border: 0; border-radius: 16px; background: #fff; color: #171717; box-sizing: border-box;
    overflow: hidden; overscroll-behavior: contain; scrollbar-width: thin;
    font: 400 14px/1.5 'Oplynt Header Inter', Inter, sans-serif; text-align: left;
}
.hn-header-cart-dialog:not([open]) { display: none; }
.hn-header-cart-dialog[open] { display: flex; flex-direction: column; animation: hn-drawer-in .3s ease both; }
.hn-header-cart-dialog::backdrop { background: #0005; }
body:has(.hn-header-cart-dialog[open]) { overflow: hidden; }
.hn-header-cart-dialog *, .hn-header-cart-dialog *::before, .hn-header-cart-dialog *::after { box-sizing: border-box; }
.hn-header-cart-dialog a { color: inherit; text-decoration: none; }
.hn-header-cart-dialog button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; box-shadow: none; text-transform: none; }
.hn-header-cart-dialog button:is(:hover, :focus) { background: transparent; color: #171717; }
.hn-header-cart-dialog .hn-drawer-primary:is(:hover, :focus) { background: #333; color: #fff; }
.hn-header-cart-dialog :is(a,button,summary):focus-visible { outline: 2px solid #64748b; outline-offset: -2px; }
.hn-header-cart-dialog button:disabled { cursor: not-allowed; opacity: .35; }
.hn-drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; }
.hn-header-cart-dialog .hn-drawer-heading h2 { font: 700 24px/1.25 'Oplynt Header Inter', Inter, sans-serif; margin: 0; color: inherit; }
.hn-header-cart-dialog .hn-drawer-x { font: 400 30px/1 sans-serif; width: 44px; height: 44px; padding: 0; margin: -8px -8px 0 0; border-radius: 0; }
.hn-drawer-status { margin: 0; flex: none; }
.hn-drawer-status:not(:empty) { margin-top: 12px; }
.hn-drawer-status[data-error] { color: #a31515; }
.hn-drawer-content { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; padding-top: 16px; }
.hn-drawer-shipping { margin-bottom:0!important; }
.hn-drawer-shipping .hn-shipping-gift { color:#868686; margin-right:0; }
.hn-drawer-shipping-full .hn-shipping-gift { color:#256029; }
.hn-drawer-shipping .hn-shipping-gift svg { width:20px; height:20px; }
.hn-drawer-shipping .hn-drawer-shipping-label { display:flex; align-items:center; gap:8px; min-width:0; font-weight:400; }
.hn-drawer-shipping p { margin:0 0 12px; color:#666; font-size:12px; line-height:1.5; }
.hn-drawer-discount-label { display:flex; align-items:center; gap:8px; min-width:0; }
.hn-drawer-discount-label svg { flex:none; width:20px; height:20px; color:#868686; }
.hn-drawer-items { display: flex; flex-direction: column; flex: 1; min-height: 90px; gap: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 4px 0 0; margin: 0; list-style: none; }
.hn-drawer-item { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 14px; margin: 0; padding: 14px 0; border: 0; border-bottom: 1px solid #eee; background: none; flex: none; }
.hn-drawer-item:first-child { padding-top: 0; }
.hn-drawer-item:last-child { border-bottom: 0; }
.hn-drawer-image { position: relative; display: block; align-self: start; width: 72px; height: 88px; overflow: hidden; border-radius: 6px; isolation: isolate; }
.hn-header-cart-dialog .hn-drawer-image img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: 100%; margin: 0; float: none; border-radius: 0; }
.hn-drawer-image::after { content: ''; position: absolute; pointer-events: none; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(to right, #fff0, #ffffff4d); transform: skew(-25deg); }
.hn-drawer-detail { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-content: start; column-gap: 8px; }
.hn-header-cart-dialog .hn-drawer-name { grid-column: 1 / -1; display: inline; font-weight: 700; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; background: linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat; transition: background-size .3s ease; }
.hn-drawer-unit-price { grid-column: 1 / -1; margin-top: 4px; font-size: 12px; color: #666; }
.hn-drawer-detail > dl { grid-column: 1 / -1; }
.hn-drawer-detail dl { margin: 3px 0 0; padding: 0; font-size: 13px; border: 0; }
.hn-drawer-detail dt { display: inline; font-weight: 400; float: none; margin-right: 4px; }
.hn-drawer-detail dd { display: inline; margin: 0; }
.hn-drawer-detail dd::after { content: ''; display: block; }
.hn-drawer-detail dd p { display: inline; margin: 0; }
.hn-drawer-item-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.hn-drawer-quantity { display: grid; grid-template-columns: 28px minmax(30px,1fr) 28px; width: 94px; height: 34px; border-radius: 6px; background: #f1f1f1; overflow: hidden; flex: none; }
.hn-header-cart-dialog .hn-drawer-quantity button { padding: 0; font-size: 18px; height: 34px; border-radius: 0; }
.hn-header-cart-dialog .hn-drawer-quantity input { width: 100%; min-width: 0; height: 34px; border: 0; border-radius: 0; padding: 0; margin: 0; background: transparent; color: inherit; font: 700 13px/1 'Oplynt Header Inter',sans-serif; text-align: center; appearance: textfield; box-shadow: none; }
.hn-drawer-quantity input::-webkit-inner-spin-button, .hn-drawer-quantity input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.hn-drawer-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 34px; flex: none; transition: transform .3s ease; }
.hn-drawer-remove svg { width: 17px; height: 17px; }
.hn-drawer-line-total { margin-top: 8px; align-self: center; text-align: right; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.hn-drawer-footer { flex: none; min-width:0; max-width:100%; max-height: 58%; overflow-y: auto; overflow-x:hidden; scrollbar-width: thin; margin-top: 12px; padding-top: 0; border-top: 1px solid #e5e5e5; }
.hn-drawer-discount { border-bottom: 1px solid #e5e5e5; margin-bottom: 12px; }
.hn-drawer-discount summary { display: flex; justify-content: space-between; gap: 16px; cursor: pointer; padding: 12px 0; font-weight: 700; list-style: none; }
.hn-drawer-discount summary::-webkit-details-marker { display: none; }
.hn-drawer-discount summary > span:last-child { flex:none; width:20px; text-align:center; font-size:0; transform:none; }
.hn-drawer-discount summary > span:last-child::before { content:'+'; font-size:14px; }
.hn-drawer-discount[open] summary > span:last-child::before { content:'−'; }
.hn-drawer-coupon { display: flex; gap: 8px; min-width:0; max-width:100%; margin:0; padding-bottom: 18px; }
.hn-header-cart-dialog .hn-drawer-coupon input { width: 100%; min-width: 0; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: #fff; color: #171717; font: inherit; }
.hn-header-cart-dialog .hn-drawer-coupon button { flex:none; padding: 10px; font-weight: 700; }
.hn-drawer-coupon-applied, .hn-drawer-summary-row, .hn-drawer-subtotal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 7px 0; font-size: 13px; line-height: 1.4; }
.hn-drawer-coupon-applied > span:first-child { overflow-wrap: anywhere; min-width: 0; }
.hn-drawer-coupon-applied > span:last-child { flex: none; }
.hn-header-cart-dialog .hn-drawer-coupon-applied button { padding: 2px 8px; }
.hn-drawer-total { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e5e5; font-size: 20px; font-weight: 700; }
.hn-drawer-note { font-size: 11px; margin: 8px 0 14px; color: #666; }
.hn-header-cart-dialog .hn-drawer-primary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 12px 20px; border: 0; border-radius: 8px; background: #171717; color: #fff; font-weight: 700; text-decoration: none; transition: background-color .3s ease; }
.hn-drawer-primary span { display: inline-block; transition: transform .3s ease; }
.hn-drawer-bottom { display: flex; align-items: center; justify-content: center; margin-top: 10px; }
.hn-header-cart-dialog .hn-drawer-bottom a { padding: 10px 0; margin: 0; font-weight: 400; font-size: 16px; text-align: center; background: none; color: inherit; }
.hn-drawer-empty { margin: auto 0; text-align: center; }
.hn-drawer-empty p { margin-bottom: 24px; }
.hn-header-cart-dialog[aria-busy=true] .hn-drawer-content { opacity: .65; pointer-events: none; }
@keyframes hn-drawer-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes hn-drawer-shine { to { left: 150%; } }
@media (hover:hover) and (pointer:fine) {
    .hn-drawer-image:hover::after, .hn-drawer-image:focus-visible::after { animation: hn-drawer-shine .75s ease; }
    .hn-drawer-name:hover { background-size: 100% 1px; }
    .hn-drawer-remove:hover { transform: translateY(-4px); }
    .hn-header-cart-dialog .hn-drawer-primary:hover { background: #333; }
    .hn-drawer-primary:hover span { transform: translateY(-2px); }
}
@media(max-width:767px) {
    .hn-header-cart-dialog { margin: 0; width: 100%; height: 100dvh; border-radius: 0; padding: 24px 20px max(24px,env(safe-area-inset-bottom)); }
    .hn-header-cart-dialog .hn-drawer-x { margin-right: -8px; }
    .hn-drawer-item { grid-template-columns: 64px minmax(0,1fr); gap: 10px; }
    .hn-drawer-image { width: 64px; height: 80px; }
    .hn-drawer-item-actions { gap: 4px; }
    .hn-drawer-line-total { font-size: 13px; }
}
@media(max-width:359px) {
    .hn-drawer-detail { grid-template-columns: minmax(0,1fr); }
    .hn-drawer-line-total { text-align: left; margin-top: 4px; }
}
@media(prefers-reduced-motion:reduce) {
    .hn-header-cart-dialog[open], .hn-drawer-image:hover::after, .hn-drawer-image:focus-visible::after { animation: none; }
    .hn-drawer-name, .hn-drawer-remove, .hn-drawer-primary, .hn-drawer-primary span { transition: none; }
}