/* Nörda cart, toast and checkout. Colours, radii and button colours come from the Flex tokens and the
   cart_drawer, cart-items, cart-summary and loki-checkout-labels settings; this file only holds what no
   setting reaches. Every rule is scoped to one of those surfaces. */

/* The cart surfaces paint with Tailwind slate and gray literals, which compile to variables. Remapping them
   on the surface root warms every grey at once without touching a template. --color-fg and --color-surface
   resolve on :root, so they are restated here rather than through --flex-text-primary. */
:is(dialog[x-data="initAjaxCartModal"],#cart-drawer,body.checkout-cart-index #maincontent,body.flex-loki-checkout-page){
  --color-slate-50:#FBF9F5;--color-slate-100:#EAE2D5;--color-slate-200:#E4DCCD;--color-slate-300:#D9CFBF;
  --color-slate-400:#8C8274;--color-slate-500:#5E574E;--color-slate-600:#3A352E;--color-slate-700:#3A352E;
  --color-slate-800:#1E1B17;--color-slate-900:#1E1B17;--color-slate-950:#1E1B17;
  --color-gray-50:#FBF9F5;--color-gray-100:#F5F1EA;--color-gray-200:#E4DCCD;--color-gray-300:#D9CFBF;
  --color-gray-400:#8C8274;--color-gray-500:#5E574E;--color-gray-600:#3A352E;--color-gray-700:#3A352E;
  --color-gray-800:#2A2722;--color-gray-900:#1E1B17;--color-gray-950:#1E1B17;
  --color-green-50:#EEF0EA;--color-green-500:var(--n-accent);--color-green-700:#4A5644;
  --color-emerald-50:#EEF0EA;--color-emerald-600:var(--n-accent);--color-emerald-700:#4A5644;
  --color-red-50:#F7ECEA;--color-red-500:#9F2D2D;--color-red-600:#9F2D2D;
  --color-fg:#1E1B17;--color-fg-secondary:#5E574E;--color-surface:#FBF9F5;--color-surface-container:#EAE2D5;
  --card-stroke:#E4DCCD;
}
/* Checkout fields stay white on the surface cards, so the white remap stops at the cart. */
:is(dialog[x-data="initAjaxCartModal"],#cart-drawer,body.checkout-cart-index #maincontent){--color-white:#FBF9F5}

/* Added-to-cart modal. Nörda shows the toast instead (flex/cart/ajax_display_on_success = none), so this
   only matters when a store switches the modal back on. */
dialog[x-data="initAjaxCartModal"]{background:var(--n-surface);color:var(--n-ink);border:1px solid var(--n-line);border-radius:6px;box-shadow:0 24px 56px -28px rgba(30,27,23,.4)}
dialog[x-data="initAjaxCartModal"]::backdrop{background:rgba(30,27,23,.5)}
dialog[x-data="initAjaxCartModal"] .text-xl.font-bold{font-family:var(--n-serif);font-size:28px;font-weight:400;line-height:1.15}
dialog[x-data="initAjaxCartModal"] .btn{min-height:48px;border-radius:24px;font-weight:500}
dialog[x-data="initAjaxCartModal"] img{border-radius:4px;mix-blend-mode:multiply}
dialog[x-data="initAjaxCartModal"] button[aria-label]{color:var(--n-muted)}
dialog[x-data="initAjaxCartModal"] button[aria-label]:hover{color:var(--n-ink)}

/* Toast: the card radius and pill actions of the rest of the shop, 44px targets, and the white packshot
   tinted onto the linen tile like in the minicart. */
#messages .toast-notification{border-color:var(--n-line);border-radius:14px;box-shadow:0 18px 40px -22px rgba(30,27,23,.38)}
#messages div:has(>.toast-thumb){border-radius:4px;background:#EFE8DD}
#messages .toast-thumb{border-radius:4px;border-color:transparent;background:transparent;mix-blend-mode:multiply}
#messages div:has(>.toast-action-primary){flex-wrap:wrap;gap:8px}
#messages :is(.toast-action-primary,.toast-action-secondary){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:22px;box-sizing:border-box;font-size:13px;white-space:nowrap;text-decoration:none}
#messages .toast-action-primary{background:var(--n-ink);color:#F5F1EA}
#messages .toast-action-primary:hover{background:#3A352E;color:#F5F1EA}
#messages .toast-action-secondary{border:1px solid #D9CFBF;background:transparent}
#messages .toast-action-secondary:hover{border-color:var(--n-ink)}
#messages :is(.toast-action-primary,.toast-action-secondary,.toast-close):focus-visible{outline:2px solid var(--n-ink);outline-offset:2px}
#messages .toast-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-12px -12px 0 0;padding:0}
/* On a phone the toast would cover the header search and the room chips; it rises from the bottom instead. */
@media (max-width:639px){
  #messages{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  body.flex-loki-checkout-page #messages{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}
#messages .toast-message-text > div > p:first-child{font-family:var(--n-serif);font-size:19px;font-weight:400;line-height:1.2}
#messages :is(.toast-meta,.toast-action-secondary){color:var(--n-muted)}
#messages .toast-action-secondary:hover{color:var(--n-ink)}
#messages .toast-action-primary{font-weight:500}
#messages .toast-close{color:var(--n-muted)}

/* Minicart drawer. A side sheet that runs the full height reads as part of the page, so no rounded corners.
   The shadow draws the edge; a hairline showed as a light strip against the scrim. */
#cart-drawer{background:var(--n-surface);color:var(--n-ink);border-left:0;border-radius:0;box-shadow:-28px 0 56px -40px rgba(30,27,23,.45)}
/* Close and remove: Flex's grey fill is not a Nörda colour, and the ring only shows for the keyboard. */
#cart-drawer button.btn.rounded-full{min-width:44px;min-height:44px;justify-content:center;background:transparent}
#cart-drawer button.btn.rounded-full:hover{background:#EDE6DA}
#cart-drawer button.btn.rounded-full:focus:not(:focus-visible){outline:none;box-shadow:none}
#cart-drawer button.btn.rounded-full:focus-visible{outline:2px solid var(--n-ink);outline-offset:2px}
#cart-drawer::backdrop{background:rgba(30,27,23,.35)}
#cart-drawer-title strong{font-family:var(--n-serif);font-size:32px;font-weight:400;line-height:1.1}
#cart-drawer-title .items-total{color:var(--n-muted);font-size:13px}
#cart-drawer .cart-drawer-item{border-color:var(--n-line)}
#cart-drawer .cart-drawer-item__media{border-radius:4px;background:#EFE8DD;overflow:hidden}
#cart-drawer .cart-drawer-item__media img{mix-blend-mode:multiply}
#cart-drawer .cart-drawer-item__name strong{font-weight:500}
#cart-drawer .cart-drawer-item__buttons .btn{border-color:#D9CFBF}
#cart-drawer .cart-drawer-item__details dd{font-weight:500}
#cart-drawer .cart-item-stepper{background:var(--n-surface);border-color:#D9CFBF}
#cart-drawer :is(.cart-drawer-cta-primary,.cart-drawer-cta-secondary){display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:24px;font-weight:500;letter-spacing:.01em;filter:none}
#cart-drawer :is(.cart-drawer-cta-primary,.cart-drawer-cta-secondary):focus-visible{outline:2px solid var(--n-ink);outline-offset:2px}
#cart-drawer{--color-sky-100:#EAE2D5;--color-blue-400:var(--n-accent);--color-blue-300:#D9CFBF}
#cart-drawer .grow.grid strong{font-family:var(--n-serif);font-size:26px;font-weight:400}

/* Cart page */
body.checkout-cart-index .page-title{font-family:var(--n-serif);font-size:44px;font-weight:400;line-height:1.05;letter-spacing:-.005em;color:var(--n-ink)}
body.checkout-cart-index .flex-cart-summary-card{background:var(--n-surface)}
body.checkout-cart-index .flex-cart-summary-card > :is(h2,.title,strong):first-child{font-family:var(--n-serif);font-size:26px;font-weight:400}
body.checkout-cart-index .flex-cart-items-card{border-color:var(--n-line)}
body.checkout-cart-index .product-item-name{font-weight:500}
/* The option table stretched over the whole line, so "Kleur" and its value sat far apart. */
body.checkout-cart-index #maincontent dl.item-options{width:fit-content}
body.checkout-cart-index .product-item-photo{border-color:transparent;border-radius:4px;background:#EFE8DD}
body.checkout-cart-index .product-item-photo img{mix-blend-mode:multiply}
body.checkout-cart-index .cart-item-stepper{border-color:#D9CFBF}
body.checkout-cart-index #checkout-link-button{min-height:48px;font-weight:500;letter-spacing:.01em}
body.checkout-cart-index .cart-summary .btn{font-weight:500}
/* Cross-sell sits outside norda-catalog.css's page scope, so it gets the catalogue's serif title and quiet image tile here. */
body.checkout-cart-index #crosssell h3{font-family:var(--n-serif);font-size:36px;font-weight:400;line-height:1.1;color:var(--n-ink)}
body.checkout-cart-index #crosssell .flex-card-image-wrap--lifestyle{border-radius:4px;background:#EFE8DD}
body.checkout-cart-index #crosssell .flex-card-image-wrap--lifestyle img{mix-blend-mode:multiply}
@media (max-width:767px){body.checkout-cart-index .page-title{font-size:34px}body.checkout-cart-index #crosssell h3{font-size:28px}}
/* The title sits in its own .container, outside the 48px gutters of .page-main>.columns that hold the cards. */
@media (min-width:900px){body.checkout-cart-index .page-main>.container:has(>.page-title-wrapper,>h1,>.page-title){padding-inline:48px}}
/* Cart page touch targets. Hit areas grow with pseudo-elements where the drawn control keeps its size. */
@media (max-width:767px){
  body.checkout-cart-index #maincontent .cart-item-stepper{padding:0 2px}
  body.checkout-cart-index #maincontent .cart-item-stepper>button{width:44px;height:44px}
  body.checkout-cart-index #maincontent .cart-item-stepper>input{height:44px}
  body.checkout-cart-index #maincontent .item-actions .btn{min-width:44px;min-height:44px;justify-content:center}
}
body.checkout-cart-index #maincontent .product-item-name a{display:inline-block;padding-block:2px}
body.checkout-cart-index #crosssell .cart-btn{position:relative}
body.checkout-cart-index #crosssell .cart-btn::after{content:"";position:absolute;inset:-4px}
body.checkout-cart-index #crosssell .swatch-option{position:relative}
body.checkout-cart-index #crosssell .swatch-option::after{content:"";position:absolute;inset:-3px}

/* Loki checkout. flex-loki-checkout.css loads after this file with body.flex-loki-checkout-page on most of
   its rules, so the variables are set on that same selector (the module declares them one class lower) and
   the hard-coded properties need the extra html in front to win. */
body.flex-loki-checkout-page{
  --flex-checkout-ink:#1E1B17;--flex-checkout-surface:#FBF9F5;--flex-checkout-line:#E4DCCD;--flex-checkout-muted:#5E574E;
  --flc-action:#1E1B17;--flc-accent:var(--n-accent);--flc-radius:6px;
  --form-stroke:#9A8F80;
}

html body.flex-loki-checkout-page :is(.loki-checkout-steps h2,.loki-checkout-sidebar h2),
html body.flex-loki-checkout-page .flex-loki-section-summary-label{font-family:var(--n-serif);font-size:1.375rem;font-weight:400;letter-spacing:0;line-height:1.2;color:var(--n-ink)}
html body.flex-loki-checkout-page .flex-loki-care-title{font-family:var(--n-serif);font-size:1.375rem;font-weight:400}
html body.flex-loki-checkout-page .flex-loki-reviews-title{font-family:var(--n-serif);font-size:1.25rem;font-weight:400}

html body.flex-loki-checkout-page :is(.loki-checkout-steps-billing-forward-button,.loki-checkout-steps-shipping-forward-button,.loki-checkout-sidebar button[type="submit"]){min-height:52px;font-weight:500;letter-spacing:.01em;transition:background-color .2s var(--n-ease)}
html body.flex-loki-checkout-page :is(.loki-checkout-steps-billing-forward-button,.loki-checkout-steps-shipping-forward-button,.loki-checkout-sidebar button[type="submit"]):hover{opacity:1;background-color:#3A352E}
html body.flex-loki-checkout-page :is(.loki-checkout-steps-billing-forward-button,.loki-checkout-steps-shipping-forward-button,.loki-checkout-sidebar button[type="submit"]):focus-visible{outline:2px solid var(--n-ink);outline-offset:3px}

html body.flex-loki-checkout-page .flex-loki-section--complete:not(.is-collapsed) > .flex-loki-section-save{min-height:40px;padding-inline:1.25rem;border-radius:var(--radius-button);background:var(--n-ink);color:var(--n-surface);font-weight:500;filter:none}
html body.flex-loki-checkout-page .flex-loki-section--complete:not(.is-collapsed) > .flex-loki-section-save:hover{background:#3A352E}
html body.flex-loki-checkout-page .flex-loki-section-summary-edit{color:var(--n-ink);font-weight:500}

html body.flex-loki-checkout-page :is(.loki-checkout-shipping-methods-item,.loki-checkout-payment-methods-item).active{background:var(--n-ground)}
html body.flex-loki-checkout-page :is(.loki-checkout-sidebar-totals-grand-total__grand_total-label,.loki-checkout-sidebar-totals-grand-total__grand_total-value){font-weight:600}

html body.flex-loki-checkout-page [data-child-name] label :is(.required,sup){color:#9F2D2D}

/* The field icons are data URIs with a cool slate stroke baked in; the same shapes in Nörda's warm grey. */
html body.flex-loki-checkout-page :is([data-child-name="firstname"],[data-child-name="lastname"]) input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238C8274' stroke-width='1.6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E")}
html body.flex-loki-checkout-page [data-child-name="street0"] input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238C8274' stroke-width='1.6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 12l9-9 9 9M5 10v10h14V10'/%3E%3C/svg%3E")}
html body.flex-loki-checkout-page [data-child-name="telephone"] input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238C8274' stroke-width='1.6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 5a2 2 0 012-2h2l2 5-2 1a12 12 0 006 6l1-2 5 2v2a2 2 0 01-2 2A16 16 0 013 5z'/%3E%3C/svg%3E")}
html body.flex-loki-checkout-page .loki-checkout-customer input[type="email"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238C8274' stroke-width='1.6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 8l9 6 9-6M3 6h18v12H3z'/%3E%3C/svg%3E")}

html body.flex-loki-checkout-page .flex-loki-reviews-star,
html body.flex-loki-checkout-page .flex-loki-reviews-star.is-half{color:#D9CFBF}
html body.flex-loki-checkout-page .flex-loki-reviews-star.is-full,
html body.flex-loki-checkout-page .flex-loki-reviews-star.is-half::before{color:var(--n-accent)}
html body.flex-loki-checkout-page .flex-loki-reviews-source-name{font-weight:600}

/* The theme's text wordmark (Disrex_FlexLokiCheckout/layout/checkout_index_index.xml), as in the storefront header. */
html body.flex-loki-checkout-page .flex-loki-header-logo .flex-logo-text{display:inline-flex;align-items:center;min-height:44px;font-family:var(--n-serif);font-weight:400;font-size:38px;line-height:1;letter-spacing:-.01em;color:var(--n-ink);text-decoration:none;white-space:nowrap}
html body.flex-loki-checkout-page .flex-loki-header-logo .flex-logo-text:focus-visible{outline:2px solid var(--n-accent);outline-offset:4px;border-radius:2px}
@media (max-width:767px){html body.flex-loki-checkout-page .flex-loki-header-logo .flex-logo-text{font-size:32px}}

/* The checkout module sets the columns to full width without padding; this is the header's own 1408px and 24px. */
html body.flex-loki-checkout-page .page-main>.columns{box-sizing:border-box;max-width:1408px;margin-inline:auto;padding-inline:24px}
@media (max-width:767px){html body.flex-loki-checkout-page .page-main>.columns{padding-inline:16px}}

html body.flex-loki-checkout-page [data-flex-section] .loki-checkout-login-form__button{min-height:44px}
html body.flex-loki-checkout-page .loki-checkout :is(input[type="radio"],input[type="checkbox"]){width:22px;height:22px}
/* The packshots have a white ground; on the linen tile they read as a white box. */
html body.flex-loki-checkout-page .loki-checkout-sidebar-items-item :has(>img){border-radius:4px;background:#EFE8DD}
html body.flex-loki-checkout-page .loki-checkout-sidebar-items-item img{background:transparent;mix-blend-mode:multiply}
html body.flex-loki-checkout-page .flex-loki-progress-dot{background:var(--n-surface)}
html body.flex-loki-checkout-page .flex-loki-progress-step.is-current{font-weight:600}

html body.flex-loki-checkout-page .flex-loki-mobile-bar{background:var(--n-surface);box-shadow:0 -10px 28px -18px rgba(30,27,23,.35)}
html body.flex-loki-checkout-page .flex-loki-mobile-bar-total{font-weight:600}
html body.flex-loki-checkout-page .flex-loki-mobile-bar-cta{font-weight:500}

/* Demo notice (Disrex_FlexWidgetsNorda::checkout/demo-notice.phtml) on the cart and the checkout. Under the place-order
   button it sits between the button and the pay note: flex-loki-checkout.css orders the button 10 and the note 20,
   and 31 and 32 on a phone, where the tie with the note falls back to the DOM order. */
.norda-demo-notice{display:flex;align-items:flex-start;gap:10px;box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid #D9CFBF;border-radius:6px;background:var(--n-linen);color:var(--n-ink);font-size:14px;line-height:1.45}
.norda-demo-notice__icon{flex:none;width:18px;height:18px;margin-top:1px;color:var(--n-muted)}
.norda-demo-notice__text{margin:0}
body.checkout-cart-index .norda-demo-notice--cart{margin-block:16px 12px}
html body.flex-loki-checkout-page .norda-demo-notice--checkout-top{margin-bottom:20px}
/* The sidebar strips the background, border and padding of its children and draws a divider between them. */
html body.flex-loki-checkout-page .loki-checkout-sidebar>.norda-demo-notice--checkout-button{order:15;margin-top:0;padding:12px 14px;border:1px solid #D9CFBF;background:var(--n-linen)}
@media (max-width:767px){
  .norda-demo-notice{gap:8px;padding:10px 12px;font-size:13px;line-height:1.4}
  .norda-demo-notice__icon{width:16px;height:16px}
  html body.flex-loki-checkout-page .norda-demo-notice--checkout-top{margin-bottom:14px}
  html body.flex-loki-checkout-page .loki-checkout-sidebar>.norda-demo-notice--checkout-button{order:32;padding:10px 12px}
}