/**
 * App-specific styles for the functional storefront (phase 3): side-cart drawer
 * contents, the cart page, and later checkout/BMI. Kept separate from the
 * WordPress-derived main.css so the dynamic UI is self-contained.
 */

/* `hidden` must actually hide.
 *
 * The browser's own rule is `[hidden] { display: none }` at specificity (0,1,0),
 * so ANY class rule that sets a display value beats it. The checkout summary
 * rows are `display: flex`, so the two rows the template explicitly marks hidden
 * were shown to every customer anyway: "Allahindlus -0,00 €" on every order with
 * no discount, and "Käibemaks 0% 0,00 €" whenever VAT is switched off. (The
 * admin stylesheet carries the same guard for the same reason — see §34.3.) */
[hidden] { display: none !important; }

/* ---- Side-cart drawer items -------------------------------------------- */
.eom-cart-items { display: flex; flex-direction: column; }
.eom-cart-item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    grid-template-areas: "thumb info line" "thumb info remove";
    gap: 6px 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.eom-cart-thumb { grid-area: thumb; }
.eom-cart-thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; display: block; }
.eom-cart-info { grid-area: info; min-width: 0; }
.eom-cart-name { display: block; font-weight: 600; line-height: 1.25; text-decoration: none; }
.eom-cart-name:hover { text-decoration: underline; }
.eom-cart-price { font-size: .9em; color: #666; margin: 2px 0 6px; }
.eom-cart-line { grid-area: line; font-weight: 700; white-space: nowrap; align-self: start; margin-right: 20px; }
.eom-cart-remove {
    grid-area: remove; justify-self: end; align-self: end;
    background: none; border: none; cursor: pointer;
    font-size: 20px; line-height: 1; color: #999; padding: 0 4px; margin-right: 20px;
}
.eom-cart-remove:hover { color: #c0392b; }

/* Undo toast at the top of the side-cart drawer after removing an item. */
.eom-cart-undo { padding: 10px 16px; background: #eaf5ee; border-bottom: 1px solid #a9d6b9; }
.eom-cart-undo[hidden] { display: none; }
.eom-cart-undo-inner { display: flex; align-items: center; gap: 10px; }
.eom-cart-undo-msg { flex: 1 1 auto; font-size: 13.5px; line-height: 1.35; color: #1c6b39; }
.eom-cart-undo-btn {
    flex: 0 0 auto; background: #196314; color: #fff; border: 0; border-radius: 6px;
    padding: 6px 12px; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.eom-cart-undo-btn:hover { background: #14520f; }
.eom-cart-undo-close {
    flex: 0 0 auto; background: none; border: 0; font-size: 18px; line-height: 1;
    color: #1c6b39; cursor: pointer; padding: 0 2px;
}
.eom-cart-undo-close:hover { color: #14520f; }

.eom-cart-qty { display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; }
.eom-qty-btn {
    width: 30px; height: 30px; border: none; background: #f6f6f6; cursor: pointer;
    font-size: 16px; line-height: 1; color: #333;
}
.eom-qty-btn:hover { background: #ececec; }
/* High specificity so the theme's generic input[type=text] width can't widen it. */
.eom-cart-qty input.eom-qty-val { width: 40px; min-width: 40px; max-width: 40px; height: 30px; border: none; text-align: center; font-size: 14px; box-sizing: border-box; background: #fff; -moz-appearance: textfield; }
.eom-qty-val::-webkit-outer-spin-button, .eom-qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.eom-cart-summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 1.05em; }
.eom-cart-actions { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.eom-cart-actions .button, .eom-cart-actions .btn { text-align: center; }
.eom-cart-checkout { font-weight: 700; }

/* ---- Cart page --------------------------------------------------------- */
.eom-cartpage { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 16px; }
@media (min-width: 768px) { .eom-cartpage { grid-template-columns: 2fr 1fr; align-items: start; } }
/* Cart-page rows use a robust flexbox layout (no grid-area dependency).
 *
 * ⚠️ THE NAME COLUMN MUST BE ALLOWED TO WRAP ONTO ITS OWN LINE.
 *
 * Every other cell here is `flex: 0 0 auto` — thumbnail, stepper, line total,
 * remove — so when the row runs out of width the ONLY thing that can shrink is
 * the name. With `min-width: 0` it is allowed to shrink all the way to nothing,
 * and it did: measured across viewport widths, the product name rendered
 *
 *     375–430px  (every common phone)      0–34px wide → one letter per line
 *     820–1024px (tablet landscape, split) 0–75px wide → same
 *
 * On the cart page, which is the last thing a customer sees before paying. The
 * fix is to let the row wrap and give the name a basis wide enough that it takes
 * a line of its own rather than being crushed between the controls. */
.eom-cartpage-items .eom-cart-item {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 12px 16px; padding: 16px 0;
}
.eom-cartpage-items .eom-cart-thumb { flex: 0 0 auto; }
.eom-cartpage-items .eom-cart-thumb img { width: 80px; height: 80px; }
.eom-cartpage-items .eom-cart-info { flex: 1 1 12rem; min-width: 0; }
.eom-cartpage-items .eom-cart-name { white-space: normal; overflow-wrap: break-word; }
.eom-cartpage-items .eom-cart-qty { flex: 0 0 auto; margin: 0; }
.eom-cartpage-items .eom-cart-line { flex: 0 0 auto; align-self: center; white-space: nowrap; }
.eom-cartpage-items .eom-cart-remove { flex: 0 0 auto; align-self: center; margin-left: auto; }
/* Narrow screens: name on its own full-width line, controls on the next. */
@media (max-width: 480px) {
    .eom-cartpage-items .eom-cart-info { flex: 1 1 100%; order: 1; }
    .eom-cartpage-items .eom-cart-thumb { order: 0; }
    .eom-cartpage-items .eom-cart-qty { order: 2; }
    .eom-cartpage-items .eom-cart-line { order: 3; }
    .eom-cartpage-items .eom-cart-remove { order: 4; }
}
.eom-cartpage-summary { background: #fafafa; border: 1px solid #eee; border-radius: 10px; padding: 16px 20px; }
.eom-cartpage-summary .button, .eom-cartpage-summary .btn { display: block; text-align: center; margin-top: 10px; }
.eom-cart-note { font-size: .85em; color: #777; margin: 4px 0 12px; }

/* ---- Checkout ---------------------------------------------------------- */
.eom-checkout-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 16px; }
@media (min-width: 860px) { .eom-checkout-grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.eom-checkout-section { margin-bottom: 26px; }
.eom-checkout-section h2 { font-size: 1.25em; margin: 0 0 12px; }
.eom-field { display: block; margin-bottom: 12px; font-size: .95em; }
.eom-field input, .eom-field textarea, .eom-field select { width: 100%; padding: 9px 11px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; margin-top: 4px; box-sizing: border-box; }
.eom-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .eom-field-row { grid-template-columns: 1fr; } }
.eom-field-error { display: block; color: #c0392b; font-size: .82em; margin-top: 3px; }

.eom-shipping-methods, .eom-payment-method, .eom-shipping-method { display: block; }
.eom-shipping-method, .eom-payment-method { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 8px; cursor: pointer; }
.eom-shipping-method:has(input:checked), .eom-payment-method:has(input:checked) { border-color: #111; background: #fafafa; }
.eom-shipping-name { flex: 1; }
.eom-shipping-cost { font-weight: 600; }
.eom-parcel-picker, .eom-home-address { margin: 10px 0 4px; padding: 12px; background: #fafafa; border: 1px solid #eee; border-radius: 8px; }
.eom-parcel-select { height: auto; }

/* On-page card form. The gateway's iframe brings its own card/panel styling and
 * sets its own height, so this only positions it under the chosen payment
 * method — no padding or background, which would double the frame's own box. */
.eom-card-element { margin: -2px 0 10px; }
.eom-card-element iframe { display: block; width: 100%; border: 0; }
/* Shown only when the gateway's on-page form could not be loaded and the pay
   button falls back to the hosted card page — see payment-element.js. */
.eom-card-element__fallback {
    margin: 0; padding: 10px 12px; border: 1px solid #e0d7c3; border-radius: 4px;
    background: #fdf8ec; font-size: 14px; line-height: 1.45;
}
.eom-card-error { margin: 0 0 10px; padding: 9px 12px; border-radius: 8px; background: #fdecea; border: 1px solid #f5c6c2; color: #c0392b; font-size: .9em; }

.eom-checkout-summary { background: #fafafa; border: 1px solid #eee; border-radius: 10px; padding: 18px 20px; position: sticky; top: 20px; }
.eom-checkout-summary h2 { font-size: 1.2em; margin: 0 0 12px; }
.eom-summary-item { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 6px 0; font-size: .92em; border-bottom: 1px solid #eee; }
.eom-summary-qty { color: #666; }
.eom-summary-totals { margin: 14px 0; }
.eom-summary-row { display: flex; justify-content: space-between; padding: 4px 0; }
.eom-summary-total { font-weight: 700; font-size: 1.1em; border-top: 1px solid #ddd; margin-top: 6px; padding-top: 8px; }
.eom-coupon { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.eom-coupon-applied { display: flex; flex-wrap: wrap; gap: 6px; }
.eom-coupon-applied:empty { display: none; }
.eom-coupon-input { display: flex; gap: 8px; align-items: center; }
.eom-coupon-code { flex: 1; min-width: 140px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; }
.eom-coupon-chip { display: inline-flex; align-items: center; gap: 6px; background: #eaf5ee; border: 1px solid #a9d6b9; color: #1c6b39; border-radius: 999px; padding: 4px 6px 4px 12px; font-size: .85em; font-weight: 600; }
.eom-coupon-chip.is-invalid { background: #fdecec; border-color: #e0b4b4; color: #8a1f1f; }
.eom-coupon-remove { background: rgba(0,0,0,.08); border: 0; border-radius: 50%; width: 18px; height: 18px; line-height: 1; cursor: pointer; color: inherit; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.eom-coupon-remove:hover { background: rgba(0,0,0,.18); }
.eom-coupon-msg { font-size: .85em; }
.eom-coupon-msg.ok { color: #178a3a; }
.eom-coupon-msg.err { color: #c0392b; }
.eom-terms { display: flex; gap: 8px; align-items: flex-start; font-size: .88em; margin: 12px 0; }
.eom-place-order { width: 100%; text-align: center; font-weight: 700; padding: 12px; }

/* ---- Order received + bank instructions -------------------------------- */
.eom-order-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 18px 0; }
.eom-order-meta span { display: block; color: #666; font-size: .82em; }
.eom-bank-instructions, .eom-card-pending { background: #f6f8ff; border: 1px solid #dce3ff; border-radius: 10px; padding: 14px 18px; margin: 18px 0; }
.eom-bank-instructions table { border-collapse: collapse; }
.eom-bank-instructions th { text-align: left; padding: 4px 16px 4px 0; color: #555; font-weight: 600; vertical-align: top; }
.eom-order-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.eom-order-table th, .eom-order-table td { padding: 8px; border-bottom: 1px solid #eee; text-align: left; }
.eom-order-table tfoot th, .eom-order-table tfoot td { border-bottom: none; }
.eom-order-total th, .eom-order-total td { font-weight: 700; font-size: 1.05em; border-top: 2px solid #ddd; }

/* ---- Modern pagination (overrides the theme's default page-numbers) ----- */
.woocommerce-pagination { margin: 30px 0 10px; }
.woocommerce-pagination ul.page-numbers {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
    list-style: none; margin: 0; padding: 0; border: 0;
}
.woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; display: inline-flex; }
.woocommerce-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 13px; box-sizing: border-box;
    border: 1px solid #e4e4e7; border-radius: 10px; background: #fff;
    color: #18181b; font-weight: 600; line-height: 1; text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.woocommerce-pagination a.page-numbers:hover { border-color: #18181b; background: #18181b; color: #fff; }
.woocommerce-pagination a.page-numbers:active { transform: translateY(1px); }
/* !important so the active page always reads as filled, even if a theme rule
   with higher specificity styles .current. */
.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
    background: #18181b !important; border-color: #18181b !important; color: #fff !important;
}
.woocommerce-pagination .page-numbers.dots { border: 0; background: transparent; min-width: 26px; color: #a1a1aa; }
.woocommerce-pagination .prev.page-numbers, .woocommerce-pagination .next.page-numbers { font-size: 17px; }

/* ---- Sticky footer on short personalised pages ---------------------------
   cart / checkout / order-received / the customer order panel.

   `woocommerce-account` was missing from this list, which is the body class the
   customer's own order panel uses (includes/account.php). Its pages are the
   shortest on the site — "no orders yet", a single order, one review — so the
   footer stopped wherever the content did and left a band of background beneath
   it. Both shops had this; it is simply more obvious on the Finnish one, where
   the footer paints itself white against the grey page (see the note below).   */
body.woocommerce-cart, body.woocommerce-checkout,
body.woocommerce-order-received, body.woocommerce-account {
    display: flex; flex-direction: column; min-height: 100vh;
}
/* `width: 100%` is not decoration — without it these pages are HALF THE SITE WIDE.
   Making `body` a flex container turns `#page` into a flex ITEM, and `#page` is
   `.grid-container`, which carries `margin-left/right: auto`. An auto margin on
   the CROSS axis suppresses `align-items: stretch` and centres the item at its
   SHRINK-TO-FIT width instead — so the page became as narrow as its content.
   Measured at a 1440px viewport before the fix: the customer order panel was
   698px wide and the cart and checkout **347px**, against 1440px on every other
   page. Restoring an explicit width makes the auto margins resolve to 0 and lets
   `max-width: 1640px` do the centring it was always meant to do. */
body.woocommerce-cart #page, body.woocommerce-checkout #page,
body.woocommerce-order-received #page, body.woocommerce-account #page { flex: 1 0 auto; width: 100%; }
body.woocommerce-cart .site-footer, body.woocommerce-checkout .site-footer,
body.woocommerce-order-received .site-footer, body.woocommerce-account .site-footer { flex-shrink: 0; }

/* ---- Free-shipping progress (side cart) + checkout note ----------------- */
.eom-freeship { margin: 4px 20px 14px; padding: 10px 12px; background: #f2f8f3; border: 1px solid #cfe8d3; border-radius: 8px; font-size: .85em; }
.eom-freeship.is-qualified { background: #e7f7ec; border-color: #a6dcb4; }
.eom-freeship-msg { margin-bottom: 7px; line-height: 1.4; }
.eom-freeship-track { height: 8px; background: #e2e2e2; border-radius: 5px; overflow: hidden; }
.eom-freeship-fill { height: 100%; background: linear-gradient(90deg, #4caf50, #2e9e4f); border-radius: 5px; transition: width .35s ease; }
.eom-freeship-note { background: #e7f7ec; border: 1px solid #a6dcb4; border-radius: 8px; padding: 9px 12px; font-size: .85em; margin-bottom: 12px; }

/* ---- Product-card buy area: prominent buttons + quantity stepper -------- */
.eom-card-buy { display: flex; gap: 6px; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-top: 10px; }

.eom-card-qty { display: inline-flex; align-items: stretch; border: 1.5px solid #d4d4d8; border-radius: 9px; overflow: hidden; background: #fff; flex: 0 0 auto; }
.eom-card-qty .eom-card-qbtn { width: 30px; border: none; background: #f4f4f5; cursor: pointer; font-size: 17px; line-height: 1; color: #333; padding: 0; }
.eom-card-qty .eom-card-qbtn:hover { background: #e4e4e7; }
.eom-card-qty input.eom-card-qval { width: 50px; min-width: 50px; max-width: 50px; border: none; text-align: center; font-size: 15px; font-weight: 600; background: #fff; box-sizing: border-box; -moz-appearance: textfield; }
.eom-card-qty input.eom-card-qval::-webkit-outer-spin-button, .eom-card-qty input.eom-card-qval::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Bold, high-contrast buttons that clearly stand out from the card. The extra
   selectors + !important beat the theme's flat `.button` styling. */
.wc-columns-container ul.products li.product a.eom-add-btn,
.wc-columns-container ul.products li.product a.eom-more-btn,
ul.products li.product a.eom-add-btn,
ul.products li.product a.eom-more-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 18px !important; border-radius: 9px !important; border: 0 !important;
    font-weight: 700 !important; font-size: .95em; letter-spacing: .01em;
    text-decoration: none; cursor: pointer; line-height: 1.1;
    transition: transform .05s ease, background-color .15s ease, box-shadow .15s ease;
}
.wc-columns-container ul.products li.product a.eom-add-btn,
ul.products li.product a.eom-add-btn {
    flex: 1 1 auto; min-width: 120px;
    background: #2e9e4f !important; color: #fff !important;
    box-shadow: 0 2px 7px rgba(46, 158, 79, .38);
}
.wc-columns-container ul.products li.product a.eom-add-btn:hover,
ul.products li.product a.eom-add-btn:hover { background: #24803e !important; box-shadow: 0 4px 12px rgba(46, 158, 79, .5); }
.wc-columns-container ul.products li.product a.eom-add-btn:active,
ul.products li.product a.eom-add-btn:active { transform: translateY(1px); }

.wc-columns-container ul.products li.product a.eom-more-btn,
ul.products li.product a.eom-more-btn {
    background: #18181b !important; color: #fff !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .2);
}
.wc-columns-container ul.products li.product a.eom-more-btn:hover,
ul.products li.product a.eom-more-btn:hover { background: #000 !important; }

/* ---- Side-cart cross-sell ("Sulle võib veel maitseda") ------------------ */
.eom-crosssell { padding: 12px 0px 4px; border-top: 1px solid #eee; }
.eom-crosssell-heading { display: block; font-weight: 700; font-size: 1.1em; margin-bottom: 8px; }
.eom-crosssell-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eom-cs-item { display: flex; align-items: center; gap: 10px; }
.eom-cs-thumb { flex: 0 0 auto; }
.eom-cs-thumb img { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; display: block; }
.eom-cs-info { flex: 1 1 auto; min-width: 0; }
.eom-cs-title { display: block; font-size: .85em; font-weight: 600; line-height: 1.2; text-decoration: none; color: #18181b; }
.eom-cs-title:hover { text-decoration: underline; }
.eom-cs-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 8px; }
.eom-cs-price { font-size: .85em; font-weight: 700; color: #555; }
.eom-cs-add { flex: 0 0 auto; background: #2e9e4f; color: #fff; font-size: .8em; font-weight: 700; padding: 5px 12px; border-radius: 7px; text-decoration: none; white-space: nowrap; }
.eom-cs-add:hover { background: #24803e; color: #fff; }

/* ---- Cookie consent bar ------------------------------------------------- */
.eom-cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000; background: #18181b; color: #fff; box-shadow: 0 -2px 14px rgba(0, 0, 0, .22); padding: 14px 16px; }
.eom-cookie-bar[hidden] { display: none; }
.eom-cookie-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.eom-cookie-msg { flex: 1 1 340px; margin: 0; font-size: .9em; line-height: 1.45; }
.eom-cookie-msg a { color: #fff; text-decoration: underline; }
.eom-cookie-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.eom-cookie-btn { border: 0; border-radius: 8px; padding: 10px 22px; font-weight: 700; font-size: .9em; cursor: pointer; line-height: 1.1; transition: background-color .15s ease, border-color .15s ease; }
.eom-cookie-accept { background: #2e9e4f; color: #fff; }
.eom-cookie-accept:hover { background: #24803e; }
.eom-cookie-decline { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); }
.eom-cookie-decline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
@media (max-width: 600px) { .eom-cookie-btns { width: 100%; } .eom-cookie-btn { flex: 1 1 auto; } }

/* ---- Order-received: unpaid card payment ------------------------------- */
.eom-pay-pending { padding: 16px 20px; margin: 16px 0; }
.eom-pay-now { display: inline-block; background: #2e9e4f !important; color: #fff !important; font-weight: 700; padding: 12px 26px !important; border-radius: 9px !important; text-decoration: none; margin-top: 6px; }
.eom-pay-now:hover { background: #24803e !important; }

/* ---- Checkout validation error summary --------------------------------- */
.eom-error-summary { background: #fdecea; border: 1px solid #f5c6cb; color: #a12622; border-radius: 8px; padding: 12px 16px; margin: 0 0 16px; }
.eom-error-summary ul { margin: 6px 0 0; padding-left: 20px; }
.eom-error-summary p { margin: 0; }

/* ---- Trainer ("Treener") enquiry form ---------------------------------- */
/* Collapsible wrapper — big button (summary), form hidden until opened. */
.eom-trainer-toggle { margin: 8px 0 34px; border: 1px solid #cfe0c6; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(25,99,20,.05), 0 8px 24px rgba(25,99,20,.06); }
.eom-trainer-toggle__btn { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: linear-gradient(180deg, #2e9e4f, #24803e); color: #fff; user-select: none; }
.eom-trainer-toggle__btn::-webkit-details-marker { display: none; }
.eom-trainer-toggle__btn:hover { background: linear-gradient(180deg, #34ab57, #268942); }
.eom-trainer-toggle__btn:focus-visible { outline: 3px solid #196314; outline-offset: 2px; }
.eom-trainer-toggle__text { display: flex; flex-direction: column; gap: 3px; }
.eom-trainer-toggle__title { font-size: 1.28em; font-weight: 700; line-height: 1.15; }
.eom-trainer-toggle__hint { font-size: .86em; opacity: .92; font-weight: 400; }
.eom-trainer-toggle__chev { flex: none; width: 14px; height: 14px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); transition: transform .2s ease; margin-right: 4px; }
.eom-trainer-toggle[open] .eom-trainer-toggle__chev { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .eom-trainer-toggle__chev { transition: none; } }
/* Inside the panel the form fills it edge-to-edge (no double border/margin). */
.eom-trainer-toggle .eom-trainer-form { margin: 0; border: 0; border-radius: 0; background: #f6f8f4; }

.eom-trainer-form { margin: 40px 0 8px; padding: 26px 24px; background: #f6f8f4; border: 1px solid #e2e8dc; border-radius: 12px; }
.eom-trainer-form__title { margin: 0 0 6px; color: #196314; font-size: 1.5em; }
.eom-trainer-form__lead { margin: 0 0 20px; color: #585858; line-height: 1.5; }
.eom-tf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.eom-tf-field { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; }
.eom-tf-grid .eom-tf-field { margin: 0; }
.eom-tf-field--full { grid-column: 1 / -1; }
.eom-tf-label { font-size: .9em; font-weight: 600; color: #2f2f2f; }
.eom-tf-req { color: #c0392b; }
.eom-trainer-form input[type="text"],
.eom-trainer-form input[type="tel"],
.eom-trainer-form input[type="email"],
.eom-trainer-form input[type="number"],
.eom-trainer-form select,
.eom-trainer-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #ccd4c6; border-radius: 8px; font-size: 1em; font-family: inherit; background: #fff; color: #2f2f2f; line-height: 1.4; }
.eom-trainer-form textarea { resize: vertical; }
.eom-trainer-form input:focus,
.eom-trainer-form select:focus,
.eom-trainer-form textarea:focus { outline: none; border-color: #2e9e4f; box-shadow: 0 0 0 2px rgba(46, 158, 79, .18); }
.eom-tf-consent { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 18px; font-size: .9em; color: #585858; line-height: 1.4; }
.eom-tf-consent input { margin-top: 2px; flex: 0 0 auto; }
.eom-tf-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.eom-tf-submit { background: #2e9e4f; color: #fff; border: 0; border-radius: 9px; padding: 12px 30px; font-weight: 700; font-size: 1em; cursor: pointer; transition: background-color .15s ease; }
.eom-tf-submit:hover { background: #24803e; }
.eom-tf-submit:disabled { opacity: .6; cursor: default; }
.eom-tf-output { margin: 0; font-weight: 600; }
.eom-tf-output.is-ok { color: #178a3a; }
.eom-tf-output.is-error { color: #c0392b; }
.eom-tf-noscript { margin: 14px 0 0; color: #585858; }
@media (max-width: 600px) { .eom-tf-grid { grid-template-columns: 1fr; } .eom-trainer-form { padding: 20px 16px; } }

/* A logout control that must be a POST (CSRF) but should still read as the
   plain text link it replaced. */
.eom-logout-form { display: inline; }
.eom-linkbutton {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Product page: the delivery / dispatch / returns assurances under the buy
   button (includes/product_commerce.php → product_assurance_block).
   Quiet by design — it answers questions, it does not compete with the price.
   --------------------------------------------------------------------------- */
.eom-product-assurance {
    list-style: none;
    margin: 18px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #e6e6e6;
    font-size: .92em;
    line-height: 1.5;
    color: #4a4a4a;
}
.eom-product-assurance li {
    margin: 0 0 7px;
    padding-left: 22px;
    position: relative;
}
.eom-product-assurance li:last-child { margin-bottom: 0; }

/* The short description follows the assurance list with no margin of its own, so
   "14-päevane tagastusõigus…" and the first line of the product's own text ran
   together and read as one block. A gap here is the only cue that the
   boilerplate has ended and the description has begun. Scoped to the adjacency,
   so a product page without the assurance list is untouched. */
.eom-product-assurance + .woocommerce-product-details__short-description { margin-top: 18px; }
.eom-product-assurance li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #2e9e4f;
    font-weight: 700;
}
.eom-product-assurance a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Related products on a PRODUCT page: two columns on mobile (ADS-28).

   Archives use the theme's own class (templates/archive.php now emits
   wc-mobile-columns-2), but the related-products grid's class lives inside the
   stored product body_html, which is never rewritten — so it is corrected here
   instead, with the theme's exact selector and breakpoint so specificity ties
   and source order decides.

   This also fixes a real bug: with one mobile column the related grid did not
   shrink at all, and its second card ran to x=716 in a 390px viewport. The
   single most likely ad landing page scrolled sideways, which is the clearest
   form of the "difficult to navigate" that Google's Destination Requirements
   name. `minmax(0, 1fr)` cannot blow out its container, so it cannot recur.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .wc-related-upsell-mobile-columns-1 .related ul.products,
    .wc-related-upsell-mobile-columns-1 .up-sells ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The card image is the reason two columns did not simply work: the
       migrated rules leave it at `width:auto` inside an inline-block wrapper, so
       it keeps its intrinsic 300px no matter how narrow the cell is — 300px is
       wider than half of a 390px screen, and the grid overflowed the viewport.
       Making it fluid is what lets the cell decide the size. Mobile only, so the
       desktop cascade is untouched. */
    .woocommerce ul.products li.product .wc-product-image,
    .woocommerce ul.products li.product .inside-wc-product-image,
    .woocommerce-page ul.products li.product .wc-product-image,
    .woocommerce-page ul.products li.product .inside-wc-product-image,
    .related ul.products li.product .wc-product-image,
    .related ul.products li.product .inside-wc-product-image {
        display: block;
        width: 100%;
    }

    .woocommerce ul.products li.product .wc-product-image img,
    .woocommerce-page ul.products li.product .wc-product-image img,
    .related ul.products li.product .wc-product-image img {
        width: 100%;
        height: auto;
    }
}

/* 404 inside the site layout (templates/not-found.php). The search form is the
   site's normal one, whose input has a fixed width that overflowed a 390px
   screen by a few pixels — enough for the page to scroll sideways. */
.eom-404-search { margin: 26px 0; max-width: 420px; }
.eom-404-search p { margin: 0 0 8px; }
.eom-404-search .wp-block-search__inside-wrapper { display: flex; max-width: 100%; }
.eom-404-search .wp-block-search__input { flex: 1 1 auto; min-width: 0; width: auto; }
.eom-404-search .wp-block-search__button { flex: 0 0 auto; }
/* The block's own label rule gives the visually-hidden <label> a full-width
   box, which pushed the document 5px wider than the viewport and made the page
   scroll sideways. Clip it properly instead. */
.eom-404-search .wp-block-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.eom-404-links { margin: 22px 0 34px; }

/* ---------------------------------------------------------------------------
   Stop off-canvas furniture from widening the document.

   The side-cart drawer and the slideout menu are parked off to the right with
   `position: fixed; right: -500px`. On the CART and CHECKOUT pages — the last
   two steps before a sale — that dragged the scrollable area out to 1560px in a
   390px viewport, so those pages scrolled sideways on a phone with nothing but
   blank space to the right of the content.

   `overflow-x: clip` rather than `hidden`: clip does not create a scroll
   container, so `position: sticky` (the sticky header) keeps working. Nothing
   reachable is hidden — the drawers are fixed-position and slide in over the
   page; they were never scrolled to.
   --------------------------------------------------------------------------- */
html { overflow-x: clip; }


/* ---------------------------------------------------------------------------
   Accessibility corrections (ADS-31).

   These are also "ease of navigation" in Google's destination-experience terms.
   Every value below is the smallest change that clears the WCAG AA threshold,
   so the design reads as it did — the breadcrumb grey moves by two shades, not
   to black.
   --------------------------------------------------------------------------- */

/* Breadcrumb.
 *
 * The trail used to paint EVERY crumb the same grey, links included, so the
 * clickable "Esileht" looked exactly like the dead "you are here" crumb next to
 * it — and it was not even consistent. A post's stored breadcrumb has its middle
 * crumb ("Blogi") sitting bare in the nav rather than wrapped in
 * .eb-breadcrumb-item, so that one crumb escaped the grey and rendered blue.
 * Meanwhile in the shop the same trail also carries WooCommerce's
 * `woocommerce-breadcrumb` class, and woocommerce.css paints its links #767676
 * — which is why "Esileht" read as dead text on every product and category page
 * while the identical crumb on a blog post was a link.
 *
 * So now: crumbs that are NOT links are grey (#767676 on #f7f8f9 is 4.27:1, just
 * under the 4.5:1 minimum, hence #6b6b6b), and every crumb that IS a link is
 * painted in `LinkText` — the standard system colour that each browser uses for
 * its own links. A hex would match one engine and be a shade off in the others;
 * this is the same blue as the body-text links next to it, everywhere.
 *
 * The selector list is wide on purpose: `.eb-breadcrumb a` also catches the
 * unwrapped crumb in the stored markup, and the .woocommerce variants are what
 * out-specify woocommerce.css's own `…woocommerce-breadcrumb a` rule. */
.eb-breadcrumb .eb-breadcrumb-item { color: #6b6b6b; }
.eb-breadcrumb .eb-breadcrumb-separator { color: #6b6b6b; }
.eb-breadcrumb a,
.woocommerce .eb-breadcrumb a,
.woocommerce-page .eb-breadcrumb a,
.eb-breadcrumb.woocommerce-breadcrumb a { color: LinkText; }

/* "Järeltellimusel" was #958e09 on #f7f8f9 — 3.21:1, and it is the one line
   that tells a buyer the item is not on the shelf. */
.woocommerce div.product p.stock.available-on-backorder { color: #7a6f00; }

/* The announcement bar's red on near-white was 4.42:1. */
.marquee-hsas-shortcode-50 { color: #d10000; }

/* White on the brand green #2e9e4f is 3.43:1 — under the 4.5:1 that 14px text
   needs. #1f7a3a is 4.6:1 and reads as the same green. Applied wherever that
   colour is used as a button background; the !important matches the rules being
   overridden, which set it the same way. */
.wc-columns-container ul.products li.product a.eom-add-btn,
ul.products li.product a.eom-add-btn { background: #1f7a3a !important; }
.eom-cs-add,
.eom-cookie-accept,
.eom-tf-submit { background: #1f7a3a; }
.eom-pay-now { background: #1f7a3a !important; }

/* Footer and legal links sat at 17px tall with no gap, under the 24px minimum
   touch target. Padding rather than font-size, so nothing reflows. */
.site-footer p a,
.eom-404-links a {
    display: inline-block;
    padding-block: 4px;
    min-height: 24px;
}

/* ---- Single product: quantity + add-to-cart go BELOW the price ------------
   The WordPress child theme (style.css, bundled into main.css) forced
   `.summary .price` and `.summary form.cart` to `display: inline-flex` under a
   comment reading "Price and Add to Cart on same line". It only ever LOOKED
   deliberate on the products that have a stock line ("Järeltellimusel"): that
   <p> is a block box, so it broke the inline flow and pushed the form onto its
   own row. Every product WITHOUT a stock line — a large minority of the
   catalogue, which is why the affected products looked unrelated — put the
   29,00 € and the buy controls on one cramped line instead.

   Both are restored to block-level flow, so the price always sits on its own
   line and the buy controls always sit under it, on every product. The
   `!important` matches the specificity of the rule being overridden. */
.single-product div.product .summary .price {
    display: block !important;
    margin-right: 0;
}
.single-product div.product .summary form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 4px;
}

/* ---- Shop sidebar widgets: Maitsesegud / Top tooted / Soovitatud tooted ----
   These three GenerateBlocks query loops are frozen markup carried over from
   the WordPress export (see includes/archive.php), so they are restyled here
   rather than rebuilt. What the export left behind: a grey left-to-right
   gradient panel, 75px thumbnails floated out of the flow (which is why the
   headings carried a hand-tuned `margin-left:75px`), underlined blue product
   links, and no visual separation between the three lists.

   The rewrite keeps the exact same DOM and turns each widget into a card with
   a clearly-marked heading and evenly-spaced product rows. Everything is scoped
   to #right-sidebar so no other query loop on the site is touched. */
#right-sidebar .inside-right-sidebar > .gb-container {
    background: none;                 /* kills the export's grey gradient */
    max-width: none;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
/* Each widget = one card. */
#right-sidebar .inside-right-sidebar > .gb-container > .gb-container {
    padding: 4px 0 0;
    background: #fff;
    border: 1px solid #e6e8e3;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 40, 20, .05), 0 8px 20px -14px rgba(20, 40, 20, .35);
    overflow: hidden;
}

/* The three headings. Brand green, generous, with a rule beneath so each list
   visibly belongs to its own title. */
#right-sidebar h5.gb-headline {
    margin: 0;
    padding: 16px 18px 14px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #14350f;
    background: linear-gradient(180deg, #f3f8f0 0%, #ffffff 100%);
    border-bottom: 1px solid #e6e8e3;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* A short brand-green bar as the heading's marker. */
#right-sidebar h5.gb-headline::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    align-self: stretch;
    min-height: 22px;
    border-radius: 3px;
    background: #1f7a3a;
}

/* Product rows. */
#right-sidebar .gb-grid-wrapper { display: block; row-gap: 0; }
#right-sidebar .gb-query-loop-item { width: 100%; }
#right-sidebar .gb-query-loop-item + .gb-query-loop-item > .gb-container { border-top: 1px solid #eef0ec; }
#right-sidebar .gb-query-loop-item > .gb-container > .gb-container {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas: "thumb title" "thumb price";
    align-content: center;
    column-gap: 14px;
    row-gap: 4px;
    padding: 12px 18px;
    transition: background-color .15s ease;
}
#right-sidebar .gb-query-loop-item > .gb-container > .gb-container:hover { background: #f7faf6; }

#right-sidebar .gb-block-image {
    grid-area: thumb;
    float: none;
    align-self: center;
    margin: 0;
}
#right-sidebar .gb-block-image img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 10px;
    background: #fafbf9;
    border: 1px solid #eceee9;
    display: block;
}

#right-sidebar .gb-query-loop-item .gb-headline {
    grid-area: title;
    margin: 0;
    align-self: end;
    font-size: 14.5px;
    line-height: 1.35;
    font-weight: 600;
}
#right-sidebar .gb-query-loop-item .gb-headline a {
    color: #1f2a1c;
    text-decoration: none;
}
#right-sidebar .gb-query-loop-item .gb-headline a:hover { color: #1f7a3a; text-decoration: underline; }

#right-sidebar .gb-query-loop-item .wp-block-columns {
    grid-area: price;
    align-self: start;
    margin: 0;
}
#right-sidebar .gb-query-loop-item .woocommerce-Price-amount {
    font-size: 15px;
    font-weight: 800;
    color: #1f7a3a;
}

/* ---- Lightbox image on WooCommerce pages — DO NOT DELETE ------------------
   `.woocommerce-page img { max-width: 100% }` (woocommerce.css) also matches the
   lightbox's `img.pswp__img`, because PhotoSwipe appends its viewer to <body>,
   and the product/archive <body> carries `woocommerce woocommerce-page`.

   PhotoSwipe positions that img absolutely inside a `.pswp__zoom-wrap` that is
   itself `width:auto`, so "100% of the containing block" resolves against a box
   whose width depends on the image — the percentage collapses to 0 and the photo
   renders 0px wide: the viewer opens, the caption and controls are there, and
   the picture is simply not visible. Blog and recipe pages have no `.woocommerce`
   body class, which is why only product images were affected.

   This override used to live in WooCommerce's bundled PhotoSwipe **v4**
   stylesheet, which was excised as dead in ef853a82 — the rest of that file was
   genuinely dead (it double-drew every toolbar button), but this first rule was
   not. It is kept here, in the last stylesheet the page loads, so it cannot be
   lost again to a rebuild of main.css. */
.woocommerce img.pswp__img,
.woocommerce-page img.pswp__img { max-width: none; }

/* ---------------------------------------------------------------------------
   Content blocks the admin editor can insert.

   Everything here is authored in /admin and must render on a page that may not
   carry the per-page WordPress stylesheet the block classes came from — so it is
   defined once, globally, rather than hoped for.
   --------------------------------------------------------------------------- */

/* --- Video embeds ----------------------------------------------------------
   These declarations are a VERBATIM copy of the WordPress embed rules that ship
   inside the per-page stylesheets (e.g. css/pages/_shared/retsept-*.css). They
   are repeated globally because those bundles are attached per page: a recipe
   built before the block editor got them, a blog post, or anything the manager
   writes from now on may load a stylesheet that has no embed rules at all —
   and then a video renders at its raw 1200x675 instead of shrinking to the
   column. Being identical is the point: where the per-page copy already exists,
   this adds nothing and the cascade is unchanged; where it does not, the video
   behaves for the first time.

   This is what the "some videos are tiny and the new ones are enormous" report
   came down to. tools/audit/normalise_embeds.php puts the two aspect classes
   onto every stored embed so this rule can reach them. */
.wp-block-embed { overflow-wrap: break-word; }
.wp-block-embed iframe { max-width: 100%; }
.wp-block-embed__wrapper { position: relative; }
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 50%; }
.wp-embed-responsive .wp-embed-aspect-21-9 .wp-block-embed__wrapper::before { padding-top: 42.85%; }
.wp-embed-responsive .wp-embed-aspect-18-9 .wp-block-embed__wrapper::before { padding-top: 50%; }
.wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { padding-top: 56.25%; }
.wp-embed-responsive .wp-embed-aspect-4-3  .wp-block-embed__wrapper::before { padding-top: 75%; }
.wp-embed-responsive .wp-embed-aspect-1-1  .wp-block-embed__wrapper::before { padding-top: 100%; }
.wp-embed-responsive .wp-embed-aspect-9-16 .wp-block-embed__wrapper::before { padding-top: 177.77%; }
.wp-embed-responsive .wp-embed-aspect-1-2  .wp-block-embed__wrapper::before { padding-top: 200%; }
.wp-embed-responsive .wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Not every page carries the `wp-embed-responsive` body class (the shop pages do
   not), so a video pasted into a product description would still stand at its
   raw height there. Same geometry, expressed on the figure itself. */
body:not(.wp-embed-responsive) .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
    aspect-ratio: 16 / 9;
}
body:not(.wp-embed-responsive) .wp-block-embed.wp-has-aspect-ratio iframe {
    position: absolute; inset: 0; width: 100%; height: 100%;
}

/* A width set by dragging in the editor lands as an inline style on the figure;
   these two make "smaller than full width" actually look placed rather than
   stranded against the left margin. */
.wp-block-embed[style*="width"] { max-width: 100%; }
.entry-content img[style*="width"] { height: auto; }

/* --- Callout ("Märkuse kast") ---------------------------------------------- */
.eom-callout {
    border-left: 4px solid #1f7a3a;
    background: #f1f8f3;
    padding: 14px 18px;
    margin: 1.4em 0;
    border-radius: 0 8px 8px 0;
}
.eom-callout p:last-child { margin-bottom: 0; }

/* --- Call-to-action button -------------------------------------------------- */
.eom-btn-wrap { margin: 1.4em 0; }
.eom-btn {
    display: inline-block;
    background: #1f7a3a;
    color: #fff !important;
    padding: 12px 26px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
}
.eom-btn:hover, .eom-btn:focus { background: #17602d; color: #fff !important; }

/* --- Bar chart ("Tulpdiagramm") --------------------------------------------
   Deliberately not a charting library: the editor writes <div>s whose widths are
   already computed, so the figure needs no JavaScript, survives a blocked script,
   prints, and cannot be affected by the content-security policy. */
.eom-chart {
    margin: 1.6em 0;
    padding: 16px 18px;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    background: #fbfcfd;
}
.eom-chart__title {
    font-weight: 700;
    margin-bottom: 12px;
    text-align: left;
}
.eom-chart__row {
    display: grid;
    grid-template-columns: minmax(90px, 26%) 1fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}
.eom-chart__row:last-child { margin-bottom: 0; }
.eom-chart__label { font-size: 15px; }
.eom-chart__track {
    background: #e8ecef;
    border-radius: 4px;
    height: 18px;
    overflow: hidden;
}
.eom-chart__bar {
    display: block;
    height: 100%;
    background: #1f7a3a;
    border-radius: 4px;
}
.eom-chart__value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .eom-chart__row { grid-template-columns: 1fr auto; }
    /* On a narrow screen the bar drops to its own line rather than being
       squeezed to a stub between the label and the number. */
    .eom-chart__track { grid-column: 1 / -1; }
}

/* --- Tables ----------------------------------------------------------------
   WordPress's own table rules exist, but — like the embed rules above — only
   inside the per-page stylesheets, so a table the manager adds to a recipe lands
   on a page that has never heard of wp-block-table and renders as an unstyled
   run of text. Defined globally here instead, and NOT scoped to .entry-content:
   a recipe body sits in .dynamic-entry-content, so that scope silently excluded
   the exact pages the editor writes for.

   The border colour is the one departure from WordPress's version, which uses a
   bare `border: 1px solid` — that inherits the text colour and draws a hard
   black grid. Nothing in the stored content uses a table today, so there is no
   existing page for this to change. */
.wp-block-table { overflow-x: auto; margin: 1.4em 0; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th,
.wp-block-table td { border: 1px solid #e0e3e7; padding: 8px 10px; text-align: left; }
.wp-block-table th { background: #f3f5f7; font-weight: 600; }

/* ---------------------------------------------------------------------------
   YouTube consent placeholder (content_defer_youtube + app.js).

   Sits exactly where the iframe would, so the theme's 16:9 box still governs the
   size and nothing on the page moves when the real video replaces it.
   --------------------------------------------------------------------------- */
.eom-ytph {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    background: #1c1f24;
    border-radius: 4px;
    overflow: hidden;
}
/* A page without the responsive embed box still needs a sensible shape. */
.wp-block-embed:not(.wp-has-aspect-ratio) .eom-ytph { position: relative; aspect-ratio: 16 / 9; }
.eom-ytph__btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; width: 100%; height: 100%; padding: 18px;
    border: 0; background: transparent; color: #fff;
    font: inherit; text-align: center; cursor: pointer;
}
.eom-ytph__btn:hover .eom-ytph__play,
.eom-ytph__btn:focus-visible .eom-ytph__play { background: #cc0000; transform: scale(1.06); }
.eom-ytph__play {
    width: 68px; height: 48px; border-radius: 12px;
    background: rgba(0, 0, 0, .65);
    transition: background .15s ease, transform .15s ease;
    position: relative; flex: 0 0 auto;
}
.eom-ytph__play::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-42%, -50%);
    border-style: solid; border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #fff;
}
.eom-ytph__title { font-weight: 600; font-size: 1rem; line-height: 1.3; max-width: 32ch; }
.eom-ytph__note { font-size: .78rem; opacity: .75; max-width: 40ch; line-height: 1.4; }
@media (max-width: 480px) {
    .eom-ytph__title { font-size: .9rem; }
    .eom-ytph__note { display: none; }
}

/* While YouTube's player boots (measured at roughly 8 seconds on a cold
   connection) the box says so, instead of going blank. */
.eom-ytph iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%; border: 0;
    opacity: 0; transition: opacity .2s ease;
}
.eom-ytph.is-ready iframe { opacity: 1; }
.eom-ytph.is-ready .eom-ytph__btn { display: none; }
.eom-ytph.is-loading .eom-ytph__btn { cursor: default; }
.eom-ytph.is-loading .eom-ytph__play {
    background: transparent;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    width: 42px; height: 42px;
    animation: eom-ytph-spin .9s linear infinite;
}
.eom-ytph.is-loading .eom-ytph__play::after { content: none; }
.eom-ytph.is-loading .eom-ytph__note { visibility: hidden; }
.eom-ytph.is-loading .eom-ytph__title::after { content: " — laen…"; font-weight: 400; opacity: .8; }
@keyframes eom-ytph-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .eom-ytph.is-loading .eom-ytph__play { animation: none; }
}

/* ---------------------------------------------------------------------------
   Admin panel link in the header (components/admin-link.php).

   Sized to the 24px minimum touch target and kept muted, so it sits beside the
   cart without competing with it.
   --------------------------------------------------------------------------- */
/* `a.` and the nav-scoped copy are needed to beat the theme's
   `.main-navigation a { display: block }` (0,1,1). Losing that fight left the
   anchor as a block, so align/justify did nothing and the 20px icon sat in the
   top-left corner of its 34px hover square. */
a.eom-adminlink,
.main-navigation a.eom-adminlink {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-left: 6px;
    border-radius: 8px;
    color: #8a9099;
    flex: 0 0 auto;
    transition: color .15s ease, background-color .15s ease;
    margin-bottom: 10px;
}
.eom-adminlink:hover, .eom-adminlink:focus-visible { color: #1f7a3a; background: rgba(31, 122, 58, .1); }
.eom-adminlink:focus-visible { outline: 2px solid #1f7a3a; outline-offset: 2px; }
.eom-adminlink > svg { display: block; flex: 0 0 auto; }
/* The desktop header puts the cart in its own narrow column, so without this the
   key wraps onto a second line underneath it. Scoped with :has() to exactly the
   column that holds the pair, leaving every other frozen theme column alone. */
.eb-column-inner:has(> .eom-adminlink) {
    /* flex-START, not centre: the cart was a block element filling this column,
       so centring the pair shifted it left over the search icon in the column
       next door. Starting at the same edge leaves the cart exactly where it has
       always been and simply puts the key after it. */
    display: flex; align-items: center; justify-content: flex-start; gap: 2px;
}
/* …and its siblings must keep their own size. Without this the cart container
   becomes a shrinkable flex item and collapses — measured at 13px wide, with the
   basket drawn on top of the search icon. */
.eb-column-inner:has(> .eom-adminlink) > * { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   Motion and print.
   --------------------------------------------------------------------------- */

/* The red announcement bar scrolls continuously. Continuous motion in the
   periphery is precisely what "prefers-reduced-motion" is asked for — it can
   provoke nausea and migraine — and the text is just as readable standing
   still. Stopping the animation leaves the first message visible rather than
   hiding the bar, so nothing is lost. */
@media (prefers-reduced-motion: reduce) {
    .js-marquee-wrapper,
    .js-marquee,
    [class*="marquee"] { animation: none !important; transform: none !important; }
}

/* The side cart is an overlay; on paper it lands on top of the page it was
   covering. Same for the cookie bar and the back-to-top control. */
@media print {
    .xoo-wsc-modal,
    .xoo-wsc-opac,
    .xoo-wsc-container,
    .eom-cookie-bar,
    .eom-cart-undo { display: none !important; }
}

/* A shipping option that costs nothing says so in the same green the rest of
   the shop uses for good news, so "Tasuta" reads as a benefit rather than as a
   missing price. */
.eom-shipping-cost.is-free,
.eom-shipping-method .eom-shipping-cost:not([data-shipping-cost]) { font-weight: inherit; }
.eom-shipping-cost.is-free { color: #1f7a3a; font-weight: 700; }

/* =========================================================================
   Landing-page customer-review strip.
   Lives HERE, not in pages/home.css, because tools/build_assets.py
   REGENERATES every pages/*.css from the WordPress export and would
   silently delete it — which is exactly what happened once already.
   app.css is hand-written and the build never touches it.
   ========================================================================= */
/* ---- Landing-page customer reviews (auto-scrolling strip) ---------------- */
.eom-stars { display: inline-flex; font-size: 20px; line-height: 1; letter-spacing: 1px; }
.eom-stars .eom-star { color: #d3d8de; }
.eom-stars .eom-star.is-on { color: #f5a623; }
.eom-reviews { margin: 40px 0; overflow: hidden; }
.eom-reviews__title { text-align: center; color: #196314; margin: 0 0 20px; }
.eom-reviews__viewport { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.eom-reviews__track { display: flex; width: max-content; gap: 18px; animation: eom-rev-scroll 60s linear infinite; }
.eom-reviews__viewport:hover .eom-reviews__track,
.eom-reviews__track:focus-within { animation-play-state: paused; }
@keyframes eom-rev-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.eom-rev-card { flex: 0 0 300px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; background: #fff; border: 1px solid #e2e6e0; border-radius: 14px; text-decoration: none; color: #2f2f2f; box-shadow: 0 2px 10px rgba(25,99,20,.05); transition: transform .15s, box-shadow .15s, border-color .15s; }
.eom-rev-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(25,99,20,.12); border-color: #a9d6b9; }
.eom-rev-card .eom-stars { font-size: 18px; }
.eom-rev-card__body { margin: 0; font-size: 15px; line-height: 1.5; color: #585858; }
.eom-rev-card__author { margin: 0; font-weight: 700; color: #196314; }
.eom-rev-card__more { font-size: 13px; color: #0654ba; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .eom-reviews__track { animation: none; }
  .eom-reviews__viewport { overflow-x: auto; }
}

/* ---------------------------------------------------------------------------
   Footer background.

   Estonia's footer is an Essential-Blocks row that paints itself white
   (.eb-row-root-container{background-color:var(--base-3)}), so the strip reads
   as a separate band under the page. Finland's WordPress builds the same footer
   out of GenerateBlocks instead, and its container carries only margins — no
   background — so the footer inherited the page background (--base, grey) and
   melted into the content above it. Paint it white edge-to-edge and keep the
   columns centred at the theme's 1200px grid width.
   --------------------------------------------------------------------------- */
.site-footer.grid-container {
    max-width: none;
    background-color: var(--base-3);
    padding-top: 10px;
    padding-bottom: 10px;

    /* `.grid-container` also carries `margin-left:auto; margin-right:auto`, and
       THAT is what cropped the footer to a centred column on the cart, checkout,
       order-received and account pages.

       Those pages make <body> a flex column so the footer can be pushed to the
       bottom on short pages. A flex item with `margin: auto` does NOT stretch —
       auto margins win over `align-items: stretch` and size it to its content,
       then centre it. So the footer rendered 1118px wide inside a 1440px window
       while every other page showed it full-width. `max-width: none` alone did
       not help, because the constraint was never max-width.

       Estonia never hit this: its footer is `<div class="site-footer">` with no
       `grid-container`, so there are no auto margins to win. Finland's export
       emits `<div class="site-footer grid-container">`.

       Neutralise the margins and stretch explicitly. The inner .gb-container
       below keeps the CONTENT centred at the theme's 1200px grid width, which is
       what the auto margins were there to do in the first place. */
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
.site-footer.grid-container > .gb-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}


/* ---------------------------------------------------------------------------
   Mobile header: cart + admin icons sit SIDE BY SIDE.

   Estonia's export puts search, cart and admin in one container and styles it
   (`.gb-container-7fb3c9d8{display:flex;flex-direction:row;flex-wrap:nowrap}`,
   repeated into all 36 of its per-page stylesheets). Finland's export splits
   them into two containers inside a flex parent — but emitted NO rule for
   either child: `.gb-container-c0faf5e9` and `.gb-container-a8ac02d5` appear in
   0 of the 29 Finnish page stylesheets. So the cart/admin box stayed a plain
   block and the admin icon dropped BELOW the cart icon on mobile.

   Lives here rather than in pages/*.css because tools/build_assets.py
   regenerates every pages/*.css from the WordPress export and would delete it —
   and because header chrome belongs on every page, not on the 29 that happen to
   have a stylesheet.
   --------------------------------------------------------------------------- */
.gb-container-c0faf5e9,
.gb-container-a8ac02d5 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

/* ---------------------------------------------------------------------------
   Home page — the promotional banner grid, and the contact tile.

   Six tiles in a two-column grid (one column under 768px). Two of them are
   half-height artwork, so they share a cell by stacking; the rest are one tile
   each. The GenerateBlocks hashes below come from the WordPress export and are
   what the per-page stylesheet targets — the overrides live HERE rather than in
   css/pages/home.css because that file is generated from the export and is
   rewritten by tools/dedupe_page_css.py, which would silently undo them.
   --------------------------------------------------------------------------- */

/* The lead banner ("Maitsesegud" / "Mausteseokset") used to be a full-width
   strip ABOVE the grid. It is the first cell OF the grid now, so it takes the
   same 16:9 frame as its neighbours instead of its own 32:9 strip. */
.gb-element-808ff489 > .gb-element-a386d33f {
    aspect-ratio: 16 / 9;
    margin-bottom: 0;
}

/* The two half-height banners share ONE cell by stacking. They give up their
   own 32:9 ratio and split the cell instead, which is what makes the pair
   exactly as tall as the full-size tile beside it — and what keeps them apart
   on a phone, where the grid collapses to one column and the two used to sit
   edge to edge with nothing between them. The gap is the grid's own 10px. */
.eom-home-stack {
    display: flex;
    flex-direction: column;
    /* Wider than the grid's own 10px, on purpose — see below. */
    gap: 16px;
    aspect-ratio: 16 / 9;
}
.eom-home-stack > .r-framed-banner {
    aspect-ratio: auto;
    flex: 1 1 0;
    min-height: 0;
    /* The artwork for these two is 1952 x 544 (3.59:1) — exported for this slot,
       unlike the 16:9 files every other tile uses. The slot itself is ~3.7:1
       (the pair is pinned to 16:9 and the gap comes out of it), so `100% 100%`
       fits the whole image with about 4% of horizontal stretch and nothing
       cropped. It was ~46% while the artwork was still 16:9; the number is now
       small enough to be invisible, and the rule stays because the slot ratio
       moves with the gap while the file's does not.

       The padding is a mat: it insets the picture from the frame so the pair can
       sit closer together without the images themselves appearing to touch.
       `background-origin: content-box` is what makes the background respect it —
       without that, padding moves nothing. */
    box-sizing: border-box;
    padding: 5px;
    background-origin: content-box;
    /* …and CLIPPED to it as well, which is the part that matters.
       `background-clip` defaults to `border-box`, so the picture kept SQUARE
       corners while the tile's are rounded 15px — and at the corner the square
       poked visibly past the frame. Clipping to the content box rounds the
       background's corners too: per spec the clip radius is the border radius
       minus the padding, so 15 − 5 = 10px, concentric with the frame. */
    background-clip: content-box;
    background-size: 100% 100%;
}

/* WHY THE GAP IS 16px AND NOT THE GRID'S 10px.
   Every tile's frame is an inset shadow ~10px deep on all four edges
   (--frame-shadow in main.css). At a 10px gap the bottom blur of the upper tile
   and the top blur of the lower one overlapped into a single heavy grey band
   through the middle of the pair — twice the weight of any other seam on the
   page. A first attempt thinned the two facing edges by clipping the
   pseudo-element; that fixed the band but left the pair looking unframed where
   they met. A second held them 26px apart, which worked but read as a hole.

   16px is the settled distance, and it works because the artwork is INSET from
   the frame (see the padding below): the gap a reader perceives is the 16px plus
   the two 5px mats, while the two blurs still have enough room not to merge.
   The pair totals exactly 16:9, so it stays flush with the full-size tile beside
   it. */

/* The contact tile. It used to carry the entire contact form — two inputs,
   three checkboxes and a submit — inside a 16:9 box, in white text over a
   photograph of herbs. It is an ordinary tile now: the same picture, a title,
   and a link to the contact page, where the form has room to be legible.

   The background image is restated here rather than left to the per-page sheet:
   the Finnish export had it as an absolute
   https://esitaomamaitse.ee/wp-content/... URL — a cross-site request from the
   Finnish shop to the Estonian one, and a tile that would have gone blank the
   day the old WordPress site is switched off. */
.eom-home-contact {
    background-image: url(/assets/images/eom-home-yhteystiedot.webp);
    /* The new artwork is 16:9, exactly the tile's ratio, so nothing is cropped
       and the white blend the export applied would only wash it out. */
    background-blend-mode: normal;
    background-color: transparent;
    background-size: contain;
}
/* The tile carries no text of its own — the artwork already says "Võta
   ühendust" / "Ota yhteyttä". The anchor is therefore EMPTY and stretched over
   the whole tile, exactly like the six banner tiles, which is why the template
   gives it an `aria-label`: without one it is an unnamed link. */
.eom-home-contact__link {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------------------------
   Contact page — the rebuilt form (see page_contact() / contact_page_body()).

   Everything here is scoped to .eom-contact, because the form markup is the
   shared contact-form component and it opens with .r-contactform-container —
   which main.css paints white with a twelve-layer text-shadow for use over a
   photograph. On a white card that is invisible text, so the first job of this
   block is to undo it.
   --------------------------------------------------------------------------- */
.eom-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
    margin: 8px 0 28px;
}
@media (max-width: 900px) {
    .eom-contact { grid-template-columns: 1fr; }
}
.eom-contact .r-contactform-container,
.eom-contact .r-contactform-container a {
    color: #2f2f2f;
    text-shadow: none;
    line-height: 1.5;
}

.eom-contact__card {
    background: #fff;
    border: 1px solid #e2e6dd;
    border-radius: 14px;
    padding: 26px 26px 22px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
.eom-contact__title {
    margin: 0 0 18px;
    font-size: 26px;
    line-height: 1.25;
    color: #2f2f2f;
    text-align: left;
}

.eom-contact .contactform-field { margin: 0 0 16px; }
.eom-contact .wpcf7-form p { margin: 0; }
.eom-contact input[type="email"],
.eom-contact textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #c8cfc2;
    border-radius: 10px;
    /* 16px exactly: anything smaller and iOS Safari zooms the page on focus. */
    font-size: 16px;
    font-family: inherit;
    line-height: 1.45;
    color: #2f2f2f;
    background: #fff;
}
.eom-contact textarea { min-height: 150px; resize: vertical; }
.eom-contact input[type="email"]::placeholder,
.eom-contact textarea::placeholder { color: #8a8f84; }
.eom-contact input[type="email"]:focus,
.eom-contact textarea:focus {
    outline: none;
    border-color: #2e9e4f;
    box-shadow: 0 0 0 3px rgba(46, 158, 79, .18);
}

/* The three consent/opt-in rows. In the export they are three inline spans
   separated by <br>, which wraps the long labels around the checkbox; each is a
   flex row here so the text hangs in its own column and the box stays put. */
.eom-contact .wpcf7-checkbox,
.eom-contact .wpcf7-acceptance { display: block; }
.eom-contact .wpcf7-form-control-wrap { display: block; }
.eom-contact .wpcf7-list-item { display: block; margin: 0 0 10px; }
.eom-contact .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.eom-contact .wpcf7-list-item input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #2e9e4f;
}
.eom-contact .wpcf7-list-item-label {
    font-size: 15px;
    line-height: 1.45;
    color: #4a4a4a;
}
.eom-contact .wpcf7-list-item-label a { color: #0654ba; text-decoration: underline; }
.eom-contact .wpcf7-form br { display: none; }

.eom-contact .r-contactform-send-button { margin-top: 20px; }
.eom-contact .r-contactform-send-button p { align-items: flex-start; }
/* Matched on the same shape as main.css's own rule — `.r-contactform-send-button
   input[type="submit"]`, which paints the button pale yellow for use over the
   photograph — because a shorter selector loses to it and leaves the button
   unreadable on the white card. */
.eom-contact .r-contactform-send-button input[type="submit"] {
    margin: 0;
    padding: 13px 34px;
    border: 0;
    border-radius: 10px;
    background: #2e9e4f;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
}
.eom-contact .r-contactform-send-button input[type="submit"]:hover { background: #24803e; }

/* contact.js writes the result here and sets display:block itself. */
.eom-contact .wpcf7-response-output {
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 1.5;
    text-shadow: none;
}
.eom-contact .wpcf7-not-valid-tip {
    margin: 6px 0 0;
    font-size: 14px;
    color: #c0392b;
    text-shadow: none;
}

/* The no-JS result notice (?sent=1 / ?sent=0). */
.eom-contact__notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.5;
}
.eom-contact__notice.is-ok { background: #eaf7ee; border: 1px solid #b8e0c4; color: #1c6b33; }
.eom-contact__notice.is-error { background: #fdeeec; border: 1px solid #f0c2bb; color: #a3281c; }

/* The phone/e-mail and postal address that live under the form in the stored
   page. Beside it on a wide screen, under it on a narrow one. */
.eom-contact__aside {
    background: #f4f6f1;
    border: 1px solid #e2e6dd;
    border-radius: 14px;
    padding: 20px 22px;
}
.eom-contact__aside p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    text-shadow: none;
}
.eom-contact__aside p:last-child { margin-bottom: 0; }
.eom-contact__aside a { color: #0654ba; text-decoration: underline; }


/* ---------------------------------------------------------------------------
   "You are here" in the navigation, and the announcement bar's size.
   --------------------------------------------------------------------------- */

/* The active item gets a small triangle pointing at its label, and a weight
   bump. 600 rather than 700: the nav is uppercase and already fairly heavy, so
   full bold reads as a different font rather than as a state.

   One rule covers all four places the menu appears — the desktop bar, the
   mobile header, the slideout, and the dropdown children — because they all
   render through components/menu.php. */
/* `.main-navigation a` sets font-weight 400 at specificity (0,1,1), so a bare
   `.eom-nav-current` (0,1,0) loses to it and the item stayed at normal weight —
   the arrow appeared, the bold did not. Matched at (0,2,1) here, with a plain
   `a.eom-nav-current` as the floor for any menu context that is not
   `.main-navigation`. */
.main-navigation a.eom-nav-current,
.slideout-navigation a.eom-nav-current,
a.eom-nav-current { font-weight: 600; }

/* A CSS triangle, not a glyph: no font has to carry it, it inherits the link
   colour, and it scales with the text. */
/* A little arrow — a shaft with a head, not a bare triangle.
   
   Sized and positioned in em so it tracks the font, and so the sums below hold
   at any size. Measured: cap height is 0.765em, so the optical centre of an
   uppercase label sits 0.382em above the baseline. The arrow box is 0.48em
   tall, so its own centre is 0.24em above its bottom edge — putting that edge
   at 0.14em above the baseline lands the two together.

   The first version used `vertical-align: -1px`, which put the centre 3.5px
   BELOW the cap centre at 17px. Measured, not eyeballed: take
   `actualBoundingBoxAscent` from a canvas `measureText` for the cap top and a
   zero-height inline probe for the baseline. */
.eom-nav-arrow {
    position: relative;
    display: inline-block;
    width: 0.6em;
    height: 0.48em;
    margin-right: 6px;
    vertical-align: 0.14em;
}
/* The tail. It runs slightly UNDER the head (the head starts at 0.3em and the
   tail ends at 0.34em) so no hairline gap opens between them at fractional
   pixel sizes or on a non-integer device pixel ratio. */
.eom-nav-arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.34em;
    height: 0.11em;
    margin-top: -0.055em;
    background: currentColor;
    border-radius: 0.055em;
}
/* The head — still a border triangle: no font has to carry it, it inherits the
   link colour, and it scales with the text. */
.eom-nav-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 0.24em solid transparent;
    border-bottom: 0.24em solid transparent;
    border-left: 0.3em solid currentColor;
}

/* The red scrolling bar under the header. +4px on the 17px the theme inherited
   — it is the shop's only standing announcement and it was the smallest text on
   the page. It is set on the container so the marquee measures the wider text
   when it computes its loop. */
.r-scroller { font-size: 21px; }


/* ---------------------------------------------------------------------------
   Checkout — the parcel-machine picker.

   This is the one control on the site a customer can get wrong in a way that
   costs a parcel, so it is deliberately the largest thing on the page. It
   overrides the compact `.eom-parcel-select { height: auto }` further up.
   --------------------------------------------------------------------------- */

/* A native <select size=8> is still the control: it is keyboard-navigable,
   type-ahead works, mobile gets the full-screen native picker for free, and the
   value posts without JavaScript having to shadow it. What it needed was room —
   six cramped rows on a 400px-wide phone is a target you miss. */
.eom-parcel-picker .eom-parcel-select {
    width: 100%;
    box-sizing: border-box;
    min-height: 320px;
    padding: 4px;
    border: 1px solid #c8cfc2;
    border-radius: 10px;
    /* 16px exactly, like the other checkout fields: anything smaller and iOS
       Safari zooms the page when the field takes focus. */
    font-size: 16px;
    line-height: 1.45;
    background: #fff;
}
.eom-parcel-picker .eom-parcel-select option {
    padding: 10px 12px;
    border-radius: 6px;
}
.eom-parcel-picker .eom-parcel-select optgroup {
    padding: 6px 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: #6b7266;
}
/* The browser's own highlight is a thin bar that fades the moment the list
   loses focus — on a page with a dozen other fields, that is most of the time.
   Restate it so the choice stays visible. */
.eom-parcel-picker .eom-parcel-select option:checked {
    background: #2e9e4f linear-gradient(0deg, #2e9e4f 0%, #2e9e4f 100%);
    color: #fff;
    font-weight: 600;
}
.eom-parcel-picker .eom-parcel-select:focus {
    outline: none;
    border-color: #2e9e4f;
    box-shadow: 0 0 0 3px rgba(46, 158, 79, .18);
}
.eom-parcel-searchwrap { position: relative; display: block; }
.eom-parcel-picker .eom-parcel-search {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    padding: 11px 13px;
}

/* Once a machine is chosen the field stops being a search box and becomes the
   label for that choice: green, semi-bold, and with room on the right for the
   clear button. It is still a real input — one Backspace empties it (see
   checkout.js) — so it is never a control that looks editable and is not. */
.eom-parcel-picker .eom-parcel-search.is-chosen {
    padding-right: 42px;
    border-color: #2e9e4f;
    background: #eaf7ee;
    color: #14522a;
    font-weight: 600;
    text-overflow: ellipsis;
}
.eom-parcel-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #1c6b33;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.eom-parcel-clear:hover { background: #d4efdc; }
.eom-parcel-clear:focus-visible { outline: 2px solid #2e9e4f; outline-offset: 1px; }

/* "Valitud pakiautomaat: …" under the list. */
.eom-parcel-chosen {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid #b8e0c4;
    border-radius: 10px;
    background: #eaf7ee;
    font-size: 15px;
    line-height: 1.45;
    color: #1c6b33;
}
.eom-parcel-chosen__label { color: #4a6b52; }
.eom-parcel-chosen strong { color: #14522a; }

/* …and again in the order summary, above the totals. */
.eom-summary-parcel {
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.45;
}
.eom-summary-parcel > span:last-child {
    text-align: right;
    font-weight: 600;
    color: #2f2f2f;
}