/* Shop look for every Lamoi shop: cart, one-page checkout, My account. Colours come from the site's
   own theme presets, icons from assets/icons (one outline set). */
:root {
	--sh-ink: var(--wp--preset--color--contrast, #14201c);
	--sh-muted: var(--wp--preset--color--muted-contrast, #4b5d57);
	--sh-line: var(--wp--preset--color--line, #e2e6e3);
	--sh-bg: var(--wp--preset--color--muted, #eef1ef);
	--sh-card: var(--wp--preset--color--surface, #fff);
	--sh-brand: var(--wp--preset--color--primary, #1f6f5c);
	--sh-on-brand: var(--wp--preset--color--primary-contrast, #fff);
	--sh-radius: var(--lamoi-radius, 14px);
}

/* Icons: a mask in the current text colour, so one set fits every brand. */
.lamoi-ico { display: inline-block; flex: none; width: 1.25em; height: 1.25em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* ---------- Cart and checkout (blocks) ---------- */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart { max-width: var(--sh-wide, 1320px); margin-inline: auto; }
.wc-block-checkout, .wc-block-cart { gap: 32px; }
.wc-block-components-sidebar-layout { align-items: flex-start; }
.wc-block-components-sidebar { position: sticky; top: 24px; }
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart__sidebar > * { background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: var(--sh-radius); }
.wp-block-woocommerce-checkout-order-summary-block { padding: 20px 22px; }

/* Steps: numbered, airy, one column of calm fields. */
.wc-block-checkout__main { counter-reset: sh-step; }
.wc-block-components-checkout-step { padding: 0 0 8px; margin-bottom: 28px !important; border: 0 !important; }
.wc-block-components-checkout-step__title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem !important; font-weight: 700 !important; color: var(--sh-ink); }
.wc-block-components-checkout-step__title::before { counter-increment: sh-step; content: counter(sh-step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sh-brand); color: var(--sh-on-brand); font-size: .85rem; }
.wc-block-components-checkout-step__container::after { display: none !important; }

.wc-block-components-text-input input,
.wc-block-components-combobox .components-form-token-field__input,
.wc-blocks-components-select select,
.wc-block-components-textarea { min-height: 52px; border: 1px solid var(--sh-line) !important; border-radius: calc(var(--sh-radius) * .7) !important; background: var(--sh-card) !important; font-size: 16px !important; transition: border-color .15s, box-shadow .15s; }
.wc-block-components-text-input input:focus,
.wc-blocks-components-select select:focus,
.wc-block-components-textarea:focus { border-color: var(--sh-brand) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-brand) 18%, transparent) !important; outline: 0; }

/* Delivery and payment choices as cards: the chosen one carries the brand colour. */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option { border: 1px solid var(--sh-line) !important; border-radius: calc(var(--sh-radius) * .7) !important; background: var(--sh-card); margin-bottom: 10px !important; box-shadow: none !important; }
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted { border-color: var(--sh-brand) !important; box-shadow: 0 0 0 1px var(--sh-brand) inset !important; }
.wc-block-components-radio-control__input:checked { border-color: var(--sh-brand) !important; }
.wc-block-components-radio-control__input:checked::before { background: var(--sh-brand) !important; }

/* Express payments first (Apple Pay, Google Pay, Klarna). */
.wc-block-components-express-payment { border-radius: var(--sh-radius); }
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after { border-color: var(--sh-line) !important; }

/* The one button that matters. */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button { width: 100%; min-height: 56px; border-radius: calc(var(--sh-radius) * .7) !important; background: var(--sh-brand) !important; color: var(--sh-on-brand) !important; font-size: 1.05rem !important; font-weight: 700 !important; border: 0 !important; }
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover { filter: brightness(1.06); }

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 1.15rem !important; font-weight: 800 !important; }
.wc-block-components-order-summary-item__image img { border-radius: 10px; border: 1px solid var(--sh-line); }

/* Trust line under the order button. */
.lamoi-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--sh-muted); font-size: .85rem; }
.lamoi-trust li { display: inline-flex; align-items: center; gap: 6px; }
.lamoi-trust .lamoi-ico { color: var(--sh-brand); }

/* ---------- My account ---------- */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 270px 1fr; gap: 32px; max-width: var(--sh-wide, 1320px); margin-inline: auto; align-items: start; }
.woocommerce-account .woocommerce > * { grid-column: 1 / -1; }
/* Signed out too (WooCommerce's own sheet caps it at 1000px): same store width as every page. */
body.woocommerce-account main .woocommerce { max-width: var(--sh-wide, 1320px); }
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; }
.woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; }
.woocommerce-MyAccount-navigation ul { display: grid; gap: 2px; }
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content { float: none !important; width: auto !important; }
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 6px; list-style: none; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: var(--sh-radius); position: sticky; top: 24px; }
.woocommerce-MyAccount-navigation li a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--sh-ink); text-decoration: none !important; font-weight: 500; font-size: .9375rem; line-height: 1.3; transition: background .15s, color .15s; }
.woocommerce-MyAccount-navigation li a::before { content: ""; width: 20px; height: 20px; flex: none; background: var(--sh-muted); -webkit-mask: var(--i, var(--lamoi-i-acc-dashboard)) center / contain no-repeat; mask: var(--i, var(--lamoi-i-acc-dashboard)) center / contain no-repeat; transition: background .15s; }
.woocommerce-MyAccount-navigation li a:hover { background: var(--sh-bg); }
.woocommerce-MyAccount-navigation li a:hover::before { background: var(--sh-ink); }
.woocommerce-MyAccount-navigation li.is-active a { background: color-mix(in srgb, var(--sh-brand) 8%, transparent); color: var(--sh-brand); }
.woocommerce-MyAccount-navigation li.is-active a::before { background: var(--sh-brand); }
.woocommerce-MyAccount-navigation-link--dashboard a { --i: var(--lamoi-i-acc-dashboard); }
.woocommerce-MyAccount-navigation-link--orders a { --i: var(--lamoi-i-acc-orders); }
.woocommerce-MyAccount-navigation-link--downloads a { --i: var(--lamoi-i-acc-downloads); }
.woocommerce-MyAccount-navigation-link--edit-address a { --i: var(--lamoi-i-acc-addresses); }
.woocommerce-MyAccount-navigation-link--payment-methods a { --i: var(--lamoi-i-acc-payment); }
.woocommerce-MyAccount-navigation-link--edit-account a { --i: var(--lamoi-i-acc-account); }
.woocommerce-MyAccount-navigation-link--customer-logout a { --i: var(--lamoi-i-acc-logout); }
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px !important; padding-top: 6px !important; border-top: 1px solid var(--sh-line); }
/* Signed out: the sign-in form as a compact card at the store's left edge, under a calm title. */
body.woocommerce-account:not(.logged-in) main h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
body.woocommerce-account:not(.logged-in) main .woocommerce :is(form.login, form.register, form.lost_reset_password) { max-width: 440px; margin: 0; padding: 28px; border: 1px solid var(--sh-line); border-radius: var(--sh-radius); background: var(--sh-card); }
body.woocommerce-account:not(.logged-in) main .woocommerce .u-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 440px)); gap: 24px; }
body.woocommerce-account:not(.logged-in) main .woocommerce .u-column1, body.woocommerce-account:not(.logged-in) main .woocommerce .u-column2 { float: none; width: auto; }
body.woocommerce-account main .woocommerce input.input-text { min-height: 44px; padding: 0 14px; border: 1px solid var(--sh-line); border-radius: 10px; background: var(--sh-card); }
body.woocommerce-account main .woocommerce input.input-text:focus { border-color: var(--sh-brand); outline: 2px solid color-mix(in srgb, var(--sh-brand) 20%, transparent); outline-offset: 0; }
body.woocommerce-account main .woocommerce form .form-row { margin: 0 0 16px; }
body.woocommerce-account main .woocommerce form.login .button { width: 100%; margin: 4px 0 12px; }

.woocommerce-MyAccount-content { background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: var(--sh-radius); padding: clamp(18px, 3vw, 28px); }

/* Dashboard tiles: centred line icons in quiet boxes; the accent stroke of each icon takes the brand colour. */
.lamoi-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.lamoi-tiles li { margin: 0; }
.lamoi-tiles a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; box-sizing: border-box; padding: 30px 16px 26px; text-align: center; border: 1px solid var(--sh-line); border-radius: var(--sh-radius); background: var(--sh-card); color: var(--sh-ink); text-decoration: none !important; transition: border-color .2s, box-shadow .2s; }
.lamoi-tiles a:hover { border-color: color-mix(in srgb, var(--sh-ink) 22%, transparent); box-shadow: 0 10px 28px -16px rgba(0, 0, 0, .28); }
.lamoi-acc-ico { width: 46px; height: 46px; margin-bottom: 10px; color: var(--sh-ink); transition: transform .25s ease; }
.lamoi-acc-ico * { vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
.lamoi-acc-ico .a { color: var(--sh-brand); }
.lamoi-tiles a:hover .lamoi-acc-ico { transform: translateY(-3px); }
.lamoi-tiles strong { font-size: .9375rem; font-weight: 600; }
.lamoi-tiles small { font-size: .8125rem; color: var(--sh-muted); }
.lamoi-tile-customer-logout a { background: transparent; border-style: dashed; }

.woocommerce-orders-table, .woocommerce-table { border: 1px solid var(--sh-line) !important; border-radius: var(--sh-radius); border-collapse: separate !important; overflow: hidden; }
.woocommerce-orders-table th, .woocommerce-table th { background: var(--sh-bg); }

@media (max-width: 782px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 16px; }
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
	.woocommerce-MyAccount-navigation ul { position: static; display: flex; overflow-x: auto; gap: 4px; }
	.woocommerce-MyAccount-navigation li a { white-space: nowrap; }
	.woocommerce-MyAccount-navigation-link--customer-logout { margin: 0; padding: 0; border: 0; }
	.wc-block-components-sidebar { position: static; }
}

/* Checkout header: the shop's logo, not plain text. */
.wc-block-checkout-header .custom-logo, .lamoi-checkout-logo img { max-height: 44px; width: auto; }

/* Posti pickup point (posti-shipping, a WordPress components select in the block checkout): a calm
   field like the others, its own card, no red block before the customer has even chosen. */
.components-base-control:has(#pakettikauppa_pickup_point) { margin: 6px 0 4px; padding: 16px; border: 1px solid var(--sh-line); border-radius: var(--sh-radius); background: var(--sh-bg); }
.components-base-control:has(#pakettikauppa_pickup_point) label { font-size: .95rem !important; font-weight: 700 !important; text-transform: none !important; color: var(--sh-ink) !important; }
#pakettikauppa_pickup_point { min-height: 52px !important; padding: 0 14px !important; font-size: 16px !important; background: var(--sh-card) !important; color: var(--sh-ink) !important; border-radius: calc(var(--sh-radius) * .7) !important; }
.components-input-control__container:has(#pakettikauppa_pickup_point) { background: transparent !important; }
.components-input-control__container:has(#pakettikauppa_pickup_point) .components-input-control__backdrop { border: 1px solid var(--sh-line) !important; border-radius: calc(var(--sh-radius) * .7) !important; }
.components-input-control__container:has(#pakettikauppa_pickup_point:focus) .components-input-control__backdrop { border-color: var(--sh-brand) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-brand) 18%, transparent) !important; }
#pakettikauppa_pickup_point__help { color: var(--sh-muted) !important; font-size: .85rem; }