/* Basket page only; reusable listing-panel tiles remain in mainStyles.css. */

/* PAGE LAYOUT AND HEADING */
.basket-page                   {padding: 40px 0;}
.basket-page .basket-header    {display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 24px;}
.basket-page .basket-header h1 {margin: 0; font-size: 30px; font-weight: 300; line-height: 1.2;}
.basket-page #item-count       {margin-left: 8px; color: #6B6B6B; font-size: 20px; font-weight: 400; white-space: nowrap;}
.basket-page .basket-continue  {color: #00ACC8; text-decoration: none;}
.basket-page .basket-layout    {display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 48px; align-items: start;}
.basket-page .basket-products  {min-width: 0;}

/* BASKET ITEMS */
.basket-page .basket-list-labels                                {display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #EFEFEF; color: #6B6B6B; font-size: 14px;}
.basket-page .basket-item                                       {display: grid; grid-template-columns: 100px minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 12px 20px; padding: 24px 0; margin: 0; border-bottom: 1px solid #EFEFEF;}
.basket-page .basket-image                                      {grid-column: 1; grid-row: 1 / 3; width: 100px; height: 100px; margin: 0; border: 1px solid #EFEFEF; display: flex; align-items: center; justify-content: center;}
.basket-page .basket-image img                                  {max-width: 90px; max-height: 90px; width: auto; height: auto; object-fit: contain;}
.basket-page .basket-item-copy                                  {grid-column: 2; grid-row: 1; min-width: 0;}
.basket-page .basket-item h2                                    {margin: 0 0 6px; font-size: 18px; line-height: 1.3; font-weight: 400; text-transform: none;}
.basket-page .basket-item h2 strong                             {font-weight: 700;}
.basket-page .basket-item h2 a                                  {text-decoration: none; color: inherit;}
.basket-page .basket-item-meta, .basket-page .basket-unit-price {margin: 0 0 6px; font-size: 14px; color: #6B6B6B; line-height: 1.3;}
.basket-page .basket-unit-price                                 {display: none;}

/* STOCK STATUS */
.basket-page .basket-stock              {display: flex; gap: 6px; align-items: center; margin: 0; font-size: 14px;}
.basket-page .basket-stock span         {width: 7px; height: 7px; border-radius: 50%; background: currentColor;}
.basket-page .basket-stock--available   {color: #269E48;}
.basket-page .basket-stock--unavailable {color: #DC5626;}
.basket-page .basket-stock--unknown     {color: #6B6B6B;}

/* QUANTITY AND REMOVAL */
.basket-page .basket-item-controls                    {grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 20px;}
.basket-page .basket-item .qty                        {display: flex; width: 136px; min-width: 136px; height: 40px; border: 1px solid #00C1D5; border-radius: 0; align-items: center; overflow: hidden;}
.basket-page .basket-item .qty button                 {width: 40px; height: 38px; flex: 0 0 40px; border: 0; background-color: #fff; background-size: 12px auto; background-position: center; background-repeat: no-repeat;}
.basket-page .basket-item .qty .minus                 {background-image: url(/_uploads/_assets/icon-minus.svg);}
.basket-page .basket-item .qty .plus                  {background-image: url(/_uploads/_assets/icon-plus.svg);}
.basket-page .basket-item .qty input                  {min-width: 0; width: 54px; height: 38px; padding: 0; text-align: center; background: #fff; border: 0; font-size: 16px;}
.basket-page .basket-remove                           {display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #6B6B6B; text-decoration: underline; font-size: 14px; cursor: pointer;}
.basket-page .basket-remove span                      {text-decoration: none;}
.basket-page .basket-remove.item                      {text-decoration: none;}
.basket-page .basket-remove.item .basket-remove-label {text-decoration: underline;}

/* BASKET ITEMS */
.basket-page .basket-line-price {grid-column: 3; grid-row: 1 / 3; text-align: right;}
.basket-page .basket-line-total {display: block; color: #00ACC8; font-size: 24px; font-weight: 600; line-height: 1.2;}
.basket-page .basket-price-each {display: block; color: #6B6B6B; font-size: 14px; margin-top: 8px;}

/* ORDER SUMMARY AND CHECKOUT */
.basket-page .basket-summary-column                                    {box-sizing: border-box; width: 400px; min-width: 0; padding: 28px 28px 24px; border: 1px solid #EFEFEF; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.04);}
.basket-page .basket-summary h2                                        {margin: 0 0 24px; font-size: 22px; font-weight: 600; line-height: 1.2;}
.basket-page .basket-summary-lines                                     {margin-top: 24px;}
.basket-page .basket-summary-lines p                                   {display: flex; align-items: baseline; gap: 4px; margin: 0 0 12px; font-size: 16px;}
.basket-page .basket-summary-lines p > span:last-child                 {margin-left: auto; text-align: right;}
.basket-page .basket-summary-lines small                               {font-size: 14px; color: #6B6B6B;}
.basket-page #pnlDeliveryRow[data-free="true"] #basket-delivery-amount {color: #00ACC8; font-weight: 600;}
.basket-page .basket-total                                             {display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 1px solid #EFEFEF; padding-top: 16px; margin: 0 0 16px; font-size: 20px; font-weight: 600;}
.basket-page .basket-total strong                                      {font-size: 28px; font-weight: 700;}
.basket-page .basket-checkout                                          {display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0; padding: 16px 8px; background: #DC5626; color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none; border-radius: 3px;}
.basket-page .basket-checkout:hover                                    {background: #c64b20; color: #fff; transform: none;}

/* PAYMENT METHODS */
.basket-page .basket-payment       {padding: 16px 0; text-align: center;}
.basket-page .basket-payment p     {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: #6B6B6B;}
.basket-page .basket-klarna        {width: 46px; height: 24px; object-fit: contain; margin-right: 8px;}
.basket-page .basket-payment-cards {display: block; width: 180px; max-width: 100%; height: auto; margin: 12px auto 0;}

/* DISCOUNT CODE */
.basket-page .basket-discount                                             {border-top: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF;}
.basket-page .basket-discount summary                                     {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 16px; cursor: pointer; list-style: none;}
.basket-page .basket-discount summary::-webkit-details-marker             {display: none;}
.basket-page .basket-discount summary span                                {width: 8px; height: 8px; border-bottom: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); margin-right: 4px;}
.basket-page .basket-discount[open] summary span                          {transform: rotate(225deg);}
.basket-page .basket-discount-form, .basket-page .basket-discount-applied {padding-bottom: 12px;}
.basket-page .basket-discount-flex                                        {display: flex; gap: 12px; align-items: center;}
.basket-page .basket-discount-flex > div                                  {flex: 1; min-width: 0;}
.basket-page .basket-discount-flex input[type="text"]                     {width: 100%; height: 40px; border: 1px solid #ddd; padding: 8px;}
.basket-page .basket-discount-flex .btn                                   {width: 80px; min-width: 80px; margin: 0; padding: 8px;}

/* ORDER HELP AND SAVINGS */
.basket-page .basket-enquiry, .basket-page .basket-returns, .basket-page .basket-savings {margin: 12px 0 0; font-size: 14px; color: #6B6B6B; text-align: center;}
.basket-page .basket-enquiry a                                                           {font-weight: 700; text-decoration: none; white-space: nowrap;}
.basket-page .promo-message                                                              {margin-top: 12px; padding: 12px; background: #f6f1e1; font-size: 14px; line-height: 1.4;}

/* FREE DELIVERY PROGRESS */
.basket-page .basket-delivery-progress                                 {display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 12px; align-items: start;}
.basket-page .basket-delivery-icon                                     {padding-top: 3px;}
.basket-page .basket-progress-track, .basket-page .basket-weight-track {height: 4px; background: #ccc; overflow: hidden;}
.basket-page .basket-progress-track                                    {height: 12px; border-radius: 6px;}
.basket-page .basket-progress-fill                                     {border-radius: 6px;}
.basket-page .basket-progress-fill                                     {height: 100%; background: #00ACC8;}
.basket-page .basket-progress-fill--complete                           {background: #98C83D;}
.basket-page .basket-delivery-progress p                               {margin: 8px 0 0; font-size: 15px; line-height: 1.4;}
.basket-page .basket-delivery-progress strong                          {text-decoration: underline;}
.basket-page .basket-delivery-progress p > span                        {display: block;}

/* PARCEL WEIGHT */
.basket-page .basket-weight         {margin: 24px 0;}
.basket-page .basket-weight-fill    {height: 100%; background: #f15a24;}
.basket-page .basket-weight-info    {display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; color: #8A8A8A; font-size: 13px; line-height: 1.3;}
.basket-page .basket-weight-help    {position: relative; flex: 0 0 auto;}
.basket-page .basket-weight-trigger {appearance: none; border: 0; background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: help;}

/* DISCOUNT CODE */
.basket-page .basket-weight-trigger:focus-visible, .basket-page .basket-discount summary:focus-visible {outline: 2px solid #00ACC8; outline-offset: 3px;}

/* PARCEL WEIGHT */
.basket-page .basket-weight-popup                                                                                               {position: absolute; z-index: 10; right: 0; bottom: calc(100% + 8px); width: 240px; max-width: calc(100vw - 48px); padding: 12px; background: #3c3c3c; color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.18); font-size: 12px; line-height: 1.5; visibility: hidden; opacity: 0;}
.basket-page .basket-weight-popup::after                                                                                        {content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 8px;}
.basket-page .basket-weight-help:hover .basket-weight-popup, .basket-page .basket-weight-help:focus-within .basket-weight-popup {visibility: visible; opacity: 1;}

/* DELIVERY INFORMATION */
.basket-page .basket-delivery-note        {display: flex; gap: 16px; margin-top: 24px; font-size: 14px; line-height: 1.5;}
.basket-page .basket-delivery-note > span {flex: 0 0 21px;}
.basket-page .basket-delivery-secondary   {display: block; margin-top: 8px; color: #6B6B6B;}
.basket-page .basket-delivery-note a      {color: #00ACC8;}
.basket-page .basket-delivery-details     {display: block; margin-top: 12px;}

/* COMPLETE YOUR ORDER */
.basket-page .previously-viewed {margin-top: 40px;}

/* STICKY CHECKOUT */
.basket-page #basket-mobile-delivery, .basket-page #basket-mobile-note, .basket-page .basket-sticky-checkout {display: none;}

@media (max-width:1075px)
{
	/* PAGE LAYOUT AND HEADING */
	.basket-page .basket-layout {gap: 24px;}

	/* BASKET ITEMS */
	.basket-page .basket-item      {grid-template-columns: 90px minmax(0,1fr); gap: 12px 16px;}
	.basket-page .basket-image     {width: 90px; height: 90px;}
	.basket-page .basket-image img {max-width: 80px; max-height: 80px;}

	/* QUANTITY AND REMOVAL */
	.basket-page .basket-item-controls {grid-column: 1 / 3;}

	/* BASKET ITEMS */
	.basket-page .basket-line-price {grid-column: 2; grid-row: 3;}
	.basket-page .basket-price-each {display: none;}
	.basket-page .basket-unit-price {display: block;}
}

@media (max-width:850px)
{
	/* PAGE LAYOUT AND HEADING */
	.basket-page .basket-layout {grid-template-columns: minmax(0,1fr) 340px; gap: 20px;}

	/* ORDER SUMMARY AND CHECKOUT */
	/* Insets include the 1px border: 29px top/sides, 25px bottom; 342px content at 400px. */
	.basket-page .basket-summary-column {width: 340px;}
}

@media (max-width:640px)
{
	/* PAGE LAYOUT AND HEADING */
	.basket-page                  {padding: 24px 0 calc(94px + env(safe-area-inset-bottom));}
	.basket-page .basket-header   {margin-bottom: 20px;}
	.basket-page .basket-continue {display: none;}
	.basket-page .basket-layout   {display: flex; flex-direction: column; gap: 24px;}

	/* ORDER SUMMARY AND CHECKOUT */
	.basket-page .basket-products, .basket-page .basket-summary-column {width: 100%;}

	/* BASKET ITEMS */
	.basket-page .basket-list-labels {display: none;}

	/* MOBILE DELIVERY PLACEMENT */
	.basket-page #basket-mobile-delivery                                                                              {display: block; margin-bottom: 24px;}
	.basket-page #basket-mobile-delivery:empty, .basket-page #basket-mobile-delivery:has(#basket-free-delivery:empty) {display: none;}

	/* BASKET ITEMS */
	.basket-page .basket-item      {position: relative; grid-template-columns: 72px minmax(0,1fr); grid-template-rows: auto auto; padding: 20px 0; gap: 12px;}
	.basket-page .basket-image     {grid-row: 1; width: 72px; height: 72px; margin: 0;}
	.basket-page .basket-image img {max-width: 64px; max-height: 64px;}

	/* QUANTITY AND REMOVAL */
	.basket-page .basket-item-controls {grid-column: 1 / 3; grid-row: 2; padding-right: 90px; gap: 12px;}

	/* BASKET ITEMS */
	.basket-page .basket-line-price {position: absolute; right: 0; bottom: 28px;}
	.basket-page .basket-line-total {font-size: 18px;}

	/* QUANTITY AND REMOVAL */
	.basket-page .basket-item .qty        {width: 112px; min-width: 112px;}
	.basket-page .basket-item .qty button {width: 32px; flex-basis: 32px;}
	.basket-page .basket-item .qty input  {width: 46px;}

	/* STICKY CHECKOUT */
	.basket-page .basket-sticky-checkout                     {display: flex; align-items: center; justify-content: space-between; gap: 16px; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: calc(70px + env(safe-area-inset-bottom)); padding: 8px 20px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #EFEFEF; box-shadow: 0 -2px 12px rgba(0,0,0,.05);}
	.basket-page .basket-sticky-checkout > div               {min-width: 0;}
	.basket-page .basket-sticky-checkout p                   {font-size: 12px; color: #6B6B6B; margin-bottom: 4px; line-height: 1.25;}
	.basket-page #basket-sticky-delivery:not(:empty)::before {content: " · ";}
	.basket-page .basket-sticky-checkout strong              {font-size: 20px; font-weight: 700;}
	.basket-page .basket-sticky-checkout .basket-checkout    {width: auto; min-width: 120px; padding: 12px; font-size: 16px;}

	/* DELIVERY INFORMATION */
	.basket-page #basket-delivery-note {margin-top: 0;}
}

/* ORDER SUMMARY AND CHECKOUT */
.basket-page .basket-checkout svg {display: block; color: #fff;}

@media (max-width:640px)
{
	/* MOBILE DELIVERY PLACEMENT */
	.basket-page #basket-mobile-note       {display: block;}
	.basket-page #basket-mobile-note:empty {display: none;}
}