/* Bullets and indentation for <ul>/<ol> inside CMS content. Scoped to
   .page-cms .cms_content (NOT .style_content alone) so the rule does NOT
   leak into footer blocks - the footer easycontent blocks also carry
   .style_content as their wrapper class and would render bullets in front
   of their Policies/Support nav links otherwise. */
.page-cms .cms_content ul { list-style: disc outside; padding-left: 1.5em; margin-bottom: 1rem; }
.page-cms .cms_content ol { list-style: decimal outside; padding-left: 1.5em; margin-bottom: 1rem; }
.page-cms .cms_content ul ul, .page-cms .cms_content ol ul { list-style-type: circle; }
.page-cms .cms_content li { margin-bottom: 0.25em; }

/* Subcategory tiles - orange frame around image + orange caption band (matches
   apshop.eu .cw-catcontainer styling). The default theme adds a 1px gray
   border to every <img>; reset it inside tiles so only the orange frame shows.
   Bootstrap row makes siblings equal-height; making each <li> a flex column
   and letting .s_title_block grow makes all bands align to the same bottom. */
.subcate_grid_view > li { margin-bottom: 1.5rem !important; padding-bottom: 0 !important; padding-left: 8px !important; padding-right: 8px !important; display: flex !important; flex-direction: column !important; }
.subcate_grid_view > li > a.img { display: block; flex: 0 0 auto; border: 2px solid #FF5539 !important; border-bottom: 0 !important; border-radius: 8px 8px 0 0; padding: 0; background: #fff; overflow: hidden; margin: 0 !important; }
.subcate_grid_view > li > a.img picture, .subcate_grid_view > li > a.img picture img, .subcate_grid_view > li img { border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; max-width: 100%; height: auto; display: block; }
.subcate_grid_view .s_title_block { flex: 1 1 auto !important; background-color: #FF5539 !important; margin: 0 !important; padding: 14px 8px !important; text-align: center; height: auto !important; min-height: 4.5em !important; line-height: 1.2 !important; overflow: visible !important; display: flex !important; align-items: center; justify-content: center; border: 2px solid #FF5539 !important; border-top: 0 !important; border-radius: 0 0 8px 8px; }
.subcate_grid_view .s_title_block a.subcategory-name, .subcate_grid_view .subcategory-name { color: #ffffff !important; text-transform: uppercase; font-weight: 700; text-decoration: none !important; font-size: 0.85rem !important; line-height: 1.2 !important; display: block !important; }
.subcate_grid_view > li:hover > a.img, .subcate_grid_view > li:hover .s_title_block { border-color: #07a0dc !important; }
.subcate_grid_view > li:hover .s_title_block { background-color: #07a0dc !important; }

/* Header search submit button - orange */
.search_widget_btn, .btn.btn-search.search_widget_btn, button.search_widget_btn { background-color: #FF5539 !important; color: #ffffff !important; border-color: #FF5539 !important; }
.search_widget_btn:hover, .btn.btn-search.search_widget_btn:hover { background-color: #07a0dc !important; border-color: #07a0dc !important; color: #ffffff !important; }

/* Header shopping cart - single solid orange button. Force every descendant
   to inherit transparent background so no inner element shows white over orange. */
a.st_shopping_cart, .st_shopping_cart.header_item { background-color: #FF5539 !important; color: #ffffff !important; border-radius: 0; padding: 0 7px !important; height: 44px; line-height: 44px; }
a.st_shopping_cart:hover, .st_shopping_cart.header_item:hover { background-color: #07a0dc !important; color: #ffffff !important; }
a.st_shopping_cart *, .st_shopping_cart.header_item * { background: transparent !important; background-color: transparent !important; color: #ffffff !important; border-color: transparent !important; }
.st_shopping_cart .cart_icon_item, .st_shopping_cart .ajax_cart_bag.cart_icon_item { border: 0 !important; padding: 0 4px !important; }
.st_shopping_cart .ajax_cart_bag .icon_text { display: block !important; font-size: 0.85em; line-height: 1.1; margin-top: 2px; }
.st_shopping_cart .ajax_cart_bag .ajax_cart_quantity.amount_circle { display: none !important; }

/* Top-bar Login link always orange (matches apshop.eu). PS9 markup is
   <a class="login top_bar_item header_icon_btn_1"> with inner <span class="header_item">,
   so target the anchor and all descendants; both normal and :hover stay orange.
   On hover the global STSN_HEADER_LINK_HOVER_BG=#fff still gives white background. */
a.login.top_bar_item, a.login.top_bar_item:hover, a.login.top_bar_item .header_item, a.login.top_bar_item:hover .header_item, a.login.top_bar_item .header_item *, a.login.top_bar_item:hover .header_item * { color: #FF5539 !important; }

/* Top categories menu hover - just orange text, no underline/border. The
   default theme draws a red (#E54D26) border-bottom on .ma_level_0:hover;
   apshop.eu shows only a color change, so suppress the border. */
#st_mega_menu_wrap .ma_level_0:hover, .ma_level_0:hover { color: #FF5539 !important; border-bottom-color: transparent !important; }

/* Left-column category list (ps_categorytree) - blue hover, matching
   apshop.eu global STSN_LINK_HOVER_COLOR=#07a0dc (we don't set the STSN
   value globally to avoid changing every other a:hover on the site). */
.block-categories .category-sub-menu li a:hover, .block-categories .acc_header a:hover { color: #07a0dc !important; }

/* Left-column my-account nav (.my_account_left_column on /my-account, etc.):
   match the same blue hover used by the ps_categorytree side menu, so the
   sidebar feels consistent. The dashboard tiles on the right
   (.row.myacount_dashbord_list) keep their own design - this scope hits
   only .my_account_left_column .list-group items. */
.my_account_left_column .list-group .list-group-item a:hover,
.my_account_left_column .list-group .list-group-item a:hover i { color: #07a0dc !important; }

/* Empty cart alert background - match apshop.eu (#FDEDA4 instead of the
   Bootstrap-default #fcf8e3 baked into theme.css). */
.cart-empty-message.alert.alert-warning { background-color: #FDEDA4 !important; }

/* Header search placeholder - readable grey #B2AFBA. The default theme
   sets it to rgb(172 170 166 / .5) which is nearly invisible on white. */
.search_widget_text::-webkit-input-placeholder { color: #B2AFBA !important; opacity: 1 !important; }
.search_widget_text::-moz-placeholder         { color: #B2AFBA !important; opacity: 1 !important; }
.search_widget_text:-ms-input-placeholder      { color: #B2AFBA !important; opacity: 1 !important; }
.search_widget_text::placeholder              { color: #B2AFBA !important; opacity: 1 !important; }

/* Cart info text right of the bag icon - bold (matches apshop.eu). */
.st_shopping_cart .ajax_cart_quantity.cart_icon_item, .st_shopping_cart .ajax_cart_product_txt, .st_shopping_cart .ajax_cart_split, .st_shopping_cart .ajax_cart_total { font-weight: 700 !important; }

/* Required-field asterisk on the registration form ONLY. PS9
   form-fields-1.tpl puts class="required" on the <label> of every required
   field; the psgdpr consent uses a checkbox-style label so target it
   separately by its st_form_item_psgdpr wrapper. Scoped by
   #register_form_block so the login page (.from_blcok / authentication.tpl)
   stays clean (no asterisks on email/password). */
#register_form_block .form-group label.required::after { content: " *"; color: #FF0000; font-weight: bold; }
#register_form_block .form-group.st_form_item_psgdpr .flex_child::after { content: " *"; color: #FF0000; font-weight: bold; margin-left: 4px; }

/* Bold field names + Mr./Mrs. on the registration form ONLY. Consent
   checkbox text (psgdpr / newsletter) stays regular weight - those rows
   are long sentences, bold makes them look like alerts. The login page
   (.from_blcok / authentication.tpl) is intentionally NOT scoped here. */
#register_form_block .form-group > label { font-weight: 700; }
#register_form_block .form-group label.radio-inline > span:last-child, #register_form_block .form-group label.radio-inline { font-weight: 700; }
#register_form_block .st_form_item_psgdpr .flex_child, #register_form_block .st_form_item_newsletter .flex_child { font-weight: 400 !important; }

/* Wider layout for registration page ONLY (login stays at default col-lg-6). */
body#registration .col-lg-6.offset-lg-3 { flex: 0 0 66.6667%; max-width: 66.6667%; margin-left: 16.6667%; }

/* Registration form: labels to the LEFT of inputs (horizontal layout) and
   birthday with 3 dropdowns inline. Scoped to #register_form_block only -
   login form (#login_form_block) and other .from_blcok blocks intentionally
   keep their default vertical layout. */
#register_form_block .form-group { display: flex !important; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
#register_form_block .form-group > label:not(.checkbox-inline):not(.radio-inline) { flex: 0 0 35%; max-width: 35%; margin-bottom: 0; padding-right: 12px; text-align: right; }
#register_form_block .form-group > .js-input-column { flex: 1 1 auto; min-width: 0; }
.st_form_item_birthday .js-parent-focus { display: flex; gap: 10px; }
.st_form_item_birthday .js-parent-focus br { display: none; }
.st_form_item_birthday .js-parent-focus select { flex: 1 1 0; min-width: 0; }
#register_form_block .st_form_item_psgdpr, #register_form_block .st_form_item_newsletter { padding-left: 35%; display: block !important; }
#register_form_block .st_form_item_psgdpr .js-input-column, #register_form_block .st_form_item_newsletter .js-input-column { flex: 1 1 auto; }

/* "Added to cart" modal - vertical stack: header / product / summary /
   actions (themes/transformer/modules/stshoppingcart/views/templates/hook/modal.tpl.new). */
#blockcart-modal.cart-added-modal .modal-dialog { max-width: 480px; }
#blockcart-modal.cart-added-modal .modal-content { border-radius: 4px; }
#blockcart-modal.cart-added-modal .modal-header { background: #f7f7f7; padding: 12px 16px; border-bottom: 1px solid #e5e5e5; }
#blockcart-modal.cart-added-modal .modal-title { font-weight: 600; margin: 0; }
#blockcart-modal.cart-added-modal .modal-title .fto-ok-1 { color: #28a745; }
#blockcart-modal.cart-added-modal .modal-body { padding: 0; }
#blockcart-modal .cart-added-product { padding: 14px 16px; border-bottom: 1px solid #e5e5e5; gap: 14px; }
#blockcart-modal .cart-added-product-img { flex: 0 0 90px; }
#blockcart-modal .cart-added-product-img img { max-width: 100%; height: auto; border: 1px solid #eee; border-radius: 2px; }
#blockcart-modal .cart-added-product-info .product-name { font-weight: 700; margin: 0 0 6px 0; }
#blockcart-modal .cart-added-product-info .product-reference { color: #888; font-size: 0.85em; margin-bottom: 4px; }
#blockcart-modal .cart-added-product-info > div { margin-bottom: 2px; }
#blockcart-modal .cart-added-summary { padding: 14px 16px; border-bottom: 1px solid #e5e5e5; background: #fafafa; }
#blockcart-modal .cart-added-summary > div { margin-bottom: 4px; }
#blockcart-modal .cart-added-actions { display: flex; gap: 14px; padding: 14px 16px; align-items: center; }
/* "Continue shopping" - text-only link on the left, sized to its own
   text. The blue (#07a0dc) hover matches every other text-link on the
   site. */
.cart-added-continue { color: inherit; text-decoration: underline; font-size: 0.875rem; padding: 4px 0; cursor: pointer; display: inline-block; }
.cart-added-continue:hover, .cart-added-continue:focus { color: #07a0dc; text-decoration: underline; }
.cart-added-continue .fto-left-open { margin-right: 4px; }
#blockcart-modal .cart-added-actions .cart-added-continue { flex: 0 0 auto; }
/* "Go to cart" - orange CTA on the right, takes the rest of the row
   (flex:1, like the original 50/50 layout did, just with the other
   half being a compact link now). Blue on hover, same as every other
   primary button. */
#blockcart-modal .cart-added-actions .btn { flex: 0 0 50%; max-width: 50%; margin-left: auto; background-color: #FF5539 !important; border-color: #FF5539 !important; color: #ffffff !important; }
#blockcart-modal .cart-added-actions .btn:hover, #blockcart-modal .cart-added-actions .btn:focus, #blockcart-modal .cart-added-actions .btn:active { background-color: #07a0dc !important; border-color: #07a0dc !important; color: #ffffff !important; }

/* Orange/blue page-scoped buttons (matches the unified cart-modal style).
   Each rule is restricted to a body#<id> so other .btn instances stay default. */
/* Send button on /contact-us. The theme override at modules/contactform/
   views/templates/widget/contactform.tpl emits an <input type="submit">,
   not a <button>, so target by name= attribute regardless of element. */
body#contact form [name="submitMessage"] { background-color: #FF5539 !important; border-color: #FF5539 !important; color: #fff !important; padding: 9px 18px; border-radius: 0; cursor: pointer; }
body#contact form [name="submitMessage"]:hover, body#contact form [name="submitMessage"]:focus, body#contact form [name="submitMessage"]:active { background-color: #07a0dc !important; border-color: #07a0dc !important; color: #fff !important; }
body#product .product-add-to-cart .add-to-cart { background-color: #FF5539 !important; border-color: #FF5539 !important; color: #fff !important; }
body#product .product-add-to-cart .add-to-cart:hover, body#product .product-add-to-cart .add-to-cart:focus, body#product .product-add-to-cart .add-to-cart:active { background-color: #07a0dc !important; border-color: #07a0dc !important; color: #fff !important; }
/* Shipping Policy / Terms of Sale on the product card. Both rendered by
   apshop_customizations::hookDisplayProductAdditionalInfo with the same
   .cart-added-continue class as "Continue shopping" - text link with blue
   hover. Wrap in a small flex row so the two sit side-by-side with a gap. */
.apshop-product-info-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.apshop-product-info-links .cart-added-continue { font-size: 0.875rem; }
.apshop-product-info-links .cart-added-continue i { margin-right: 4px; }

/* "incl. VAT, excl. shipping" - small grey subtext rendered under the
   "Estimated total" line when apshop_customizations::hookActionPresentCart
   set $cart.shippingPending (delivery address not yet complete). Sits
   under the LABEL column of the cart-total row (left aligned) because
   the surrounding card-block is full-width and the label sits on the
   left, the price on the right. */
.estimated-total-subtext { font-size: 11px; color: #999; margin-top: 2px; }
li.estimated-total-subtext { display: list-item; margin-top: 2px; padding: 0; border: 0; background: none; font-size: 11px; color: #999; }

/* "Calculated at checkout" - small italic grey placeholder inside the
   shipping row"s value column when delivery address is incomplete
   (apshop_customizations::hookActionPresentCart sets the placeholder
   text plus a .shipping-pending class on the row). One rule fits the
   three rendering templates by selecting the value column inside any
   .shipping-pending parent. */
.cart-summary-line.shipping-pending .value,
.line_item.shipping-pending .cart-summary-v,
li.shipping-pending { font-size: 11px !important; color: #999 !important; font-style: italic; font-weight: normal !important; }
li.shipping-pending span { font-style: normal; }

/* APshop: redesigned checkout Order Summary block. The thecheckout AJAX loader
   inserts cart-summary.tpl into #thecheckout-cart-summary > .inner-area. The
   wrapper is always our sticky positioning shell, but its card chrome (border,
   padding, background, shadow) is conditional:
     - Initial load: the Shopping Cart placeholder is showing, no
       .apshop-order-summary inside yet -> KEEP the theme chrome so the
       placeholder looks like the other blocks (Billing address etc.) and is
       not borderless.
     - After AJAX: .apshop-order-summary is inserted -> strip the wrapper
       chrome so it does not double up with our inner card.
   :has() handles the toggle declaratively (supported by all evergreen browsers). */
/* The Transformer theme has a GROUPED rule
     .st-container,.st-content,.st-content-inner{position:relative;overflow:hidden}
   that puts overflow:hidden on THREE consecutive ancestors of the cart-summary
   (#st-container > .st-pusher > .st-content > .st-content-inner > ... > the
   sticky wrapper). Any ancestor with overflow other than visible silently
   breaks position:sticky on a descendant. We have to override ALL THREE - not
   just .st-content-inner - otherwise the others keep clipping the scroll
   context and sticky never engages. The off-canvas panels (.st-menu,
   #side_categories) are position:fixed and viewport-relative, so they do not
   depend on these wrappers clipping anything. */
.st-container, .st-content, .st-content-inner { overflow: visible !important; }
/* Override only the `top` of the thecheckout sticky rule
     #tc-container .checkout-block.sticky{position:sticky;top:0}
   from front.less.css - keep position:sticky from the theme, push the offset
   to 36px to clear the sticky checkout menu above. Same selector as theme
   with !important: thecheckout front.less.css loads AFTER customer-s1.css in
   the bundle (priority 1150 vs 50) so without !important the theme top:0
   wins on cascade. */
#tc-container .checkout-block.sticky { top: 36px !important; }
#thecheckout-cart-summary:has(.apshop-order-summary) { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
#thecheckout-cart-summary:has(.apshop-order-summary) > .inner-area { padding: 0 !important; background: transparent !important; }
/* Skeleton/loading state for the Order Summary. We piggyback on the
   `disable-user-input` body class that thecheckout sets on updateQuantity,
   selectDeliveryOption, selectPaymentOption, and account-modification AJAX
   (front.js:3118-3125), and removes when all in-flight AJAX finishes
   (line 3140) or after a 2 s safety timeout. This is FAR more reliable than
   the .tc-ajax-loading marker thecheckout uses internally: that marker is
   killed the moment the success handler runs el.inner-area.html(newHtml),
   which replaces every child of .inner-area before the browser ever paints
   - so on fast networks the sibling-combinator skeleton flash is invisible.
   The body class persists for the whole round-trip. Also hide the default
   thecheckout spinner since we draw our own. */
#thecheckout-cart-summary .inner-area > .tc-ajax-loading { display: none !important; }
body.disable-user-input .apshop-order-summary,
body.disable-user-input .apshop-order-summary * { color: #aaa !important; }
body.disable-user-input .apshop-order-summary .os-value {
  color: transparent !important; background: #e5e5e5; border-radius: 3px;
  min-width: 56px; display: inline-block; user-select: none;
}
body.disable-user-input .apshop-order-summary .os-pay-normal { display: none !important; }
body.disable-user-input .apshop-order-summary .os-pay-updating { display: inline !important; }
/* Same swap rule applied to the bottom #confirm_order button so its
   "Pay €N.NN" → "Updating…" flip mirrors the sticky button's during
   thecheckout's AJAX refreshes. */
body.disable-user-input #confirm_order .os-pay-normal { display: none !important; }
body.disable-user-input #confirm_order .os-pay-updating { display: inline !important; }
body.disable-user-input .apshop-order-summary #thecheckout-pay-btn-sticky { background: #aaa !important; pointer-events: none; cursor: default; }
body.disable-user-input .apshop-order-summary #thecheckout-pay-btn-sticky,
body.disable-user-input .apshop-order-summary #thecheckout-pay-btn-sticky * { color: #fff !important; }
body.disable-user-input .apshop-order-summary .os-subtext { display: none !important; }
body.disable-user-input .apshop-order-summary .os-updating-msg { display: block !important; }

/* APshop: mirror the bottom #confirm_order confirm-loading spinner on the
   in-summary sticky Pay button so the two Pay buttons animate 1:1.
   showConfirmButtonLoader (thecheckout front.js) toggles .confirm-loading on
   both; these rules give the sticky the same transparent-text + centered
   spinner treatment the bottom button gets from front.less. */
#thecheckout-pay-btn-sticky.confirm-loading { position: relative; color: transparent !important; }
#thecheckout-pay-btn-sticky > div.tc-loader { display: none; }
#thecheckout-pay-btn-sticky.confirm-loading > div.tc-loader {
  display: block; position: absolute; margin: 0 auto;
  width: 100%; height: 100%; top: 0; left: 0;
}
#thecheckout-pay-btn-sticky.confirm-loading .os-pay-normal,
#thecheckout-pay-btn-sticky.confirm-loading .os-pay-updating { color: transparent !important; }
/* While the confirm spinner runs, BOTH Pay buttons show the neutral grey
   "processing" background — never the resting orange. The sticky's inline
   background is #F15A22 and the bottom is btn-primary; confirm-loading itself
   only makes the text transparent, so without this the button stayed orange
   under the spinner. It was only grey when a disable-user-input AJAX happened
   to overlap (rule above), which is exactly why it flashed orange<->grey.
   Forcing grey on .confirm-loading makes it unconditional and keeps the two
   buttons 1:1. pointer-events:none guards against the :hover blue swap firing
   mid-submit (the button isn't :disabled during confirm-loading). */
#thecheckout-pay-btn-sticky.confirm-loading,
#confirm_order.confirm-loading {
  background: #aaa !important; border-color: #aaa !important; pointer-events: none;
}
body.disable-user-input .apshop-order-summary a, body.disable-user-input .apshop-order-summary button { pointer-events: none; }

/* VAT-number field placeholder visibility. The has-float-label CSS pattern in
   thecheckout dims the placeholder to opacity:0 whenever the input is empty
   AND not focused (front.less.css:1252) - the label is supposed to convey the
   field meaning, so the placeholder is only used during entry. For our
   "e.g. EE100000000" hint we want the format example visible at all times. */
.form-group.vat_number input::placeholder { opacity: 1 !important; }

/* Quantity input: drop the native spinner arrows so the +/- chevrons we render
   are the only controls. */
#thecheckout-cart-summary .apshop-order-summary input.cart-line-product-quantity { -moz-appearance: textfield; }
#thecheckout-cart-summary .apshop-order-summary input.cart-line-product-quantity::-webkit-outer-spin-button,
#thecheckout-cart-summary .apshop-order-summary input.cart-line-product-quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Sticky "Pay" button hover -> brand blue (matching the empty-cart Continue
   shopping button and other primary CTA hovers). The base orange is set inline
   on the button, so the override needs !important to beat the inline rule. */
#thecheckout-pay-btn-sticky:not(:disabled):hover, #thecheckout-pay-btn-sticky:not(:disabled):focus { background-color: #07a0dc !important; }

/* Product card layout - applies wherever miniatures/product.tpl is included:
   category grid, cross-sell carousel on product page, featured/related
   sliders on homepage. Selectors target .ajax_block_product directly (no
   .products.grid prefix) so the same design ships everywhere this tile
   appears. List view (.product_list.list .ajax_block_product .pro_first_box)
   has its own float-left rules in the theme bundle with equal specificity
   that come later in cascade order, so they still win for that layout.
   Make every tile the same height by:
     1) turning the inner card into a column flex container,
     2) clamping the title to 2 lines with a fixed min-height
        (so cards with 1-word and 6-word names align identically),
     3) styling the Add-to-cart button to a fixed 44px height.
   Transformer theme classes used:
     .ajax_block_product   = <article> wrapper (already inside .product_list_item col).
     .pro_outer_box        = visible card body - gets the border + rounded corner.
     .pro_first_box        = image area.
     .product_img_link img = the actual <img>.
     .pro_second_box       = text body (title/ref/price/desc/cart-btn).
     .s_title_block        = product title <h3>.
     .product-price-and-shipping = price block.
     .act_box_cart         = Add-to-cart button container. */
.ajax_block_product { display: flex; height: 100%; }
.ajax_block_product .pro_outer_box { display: flex; flex-direction: column; width: 100%; border: 1px solid #e6e6e6; border-radius: 4px; overflow: hidden; background: #fff; }
.ajax_block_product .pro_first_box { flex: 0 0 auto; }
.ajax_block_product .pro_second_box { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px !important; text-align: left; }
.ajax_block_product .s_title_block { font-size: 15px; line-height: 1.35; font-weight: 500; margin: 0; min-height: calc(15px * 1.35 * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; }
.ajax_block_product .s_title_block a { color: #333; text-decoration: none; }
.ajax_block_product .product-price-and-shipping { font-size: 20px; font-weight: 700; color: #222; margin-top: 8px; padding: 0; text-align: left; width: 100%; }
.ajax_block_product .product-price-and-shipping .price { display: inline-block; font-size: 20px; font-weight: 700; }
/* Out-of-stock tile: gray-out the price. Detected via the .out-of-stock
   stock-status sibling rendered below the price in miniatures/product.tpl. */
.ajax_block_product .pro_second_box:has(.product-stock-status.out-of-stock) .product-price-and-shipping,
.ajax_block_product .pro_second_box:has(.product-stock-status.out-of-stock) .product-price-and-shipping .price { color: #999 !important; }
/* Stock status indicator under price. Icon is inline SVG (Tabler-style
   check / x stroke), colored via currentColor so the green/red text-color
   stays the single source of truth. */
.ajax_block_product .product-stock-status { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; line-height: 1.1; }
.ajax_block_product .product-stock-status .stock-status-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.ajax_block_product .product-stock-status.in-stock { color: #2a7a2a; }
.ajax_block_product .product-stock-status.out-of-stock { color: #a32d2d; }
/* Force the Add-to-cart row visible (the theme defaults can collapse it via
   .display_when_hover / .add_hide_on_mobile / .display_none).  Both
   Add-to-cart and Notify-me share the same fixed 44px height and centered
   flex content, so the top and bottom edges match across in-stock and
   out-of-stock tiles.  The Add-to-cart button has an inner
   .hover_fly_btn_inner wrapper (rendered by btn-add-to-cart.tpl) whose
   default rule pins the icon to height/line-height:30px in Arial - we
   override that here so its content sizes naturally and matches the simpler
   <i>+text Notify-me layout. */
.ajax_block_product .act_box_cart { display: block !important; padding-top: 8px; visibility: visible !important; opacity: 1 !important; }
.ajax_block_product .act_box_cart > a.btn, .ajax_block_product .act_box_cart > a.ajax_add_to_cart_button, .ajax_block_product .act_box_cart > a.notify-me { display: flex !important; align-items: center; justify-content: center; gap: 6px; width: 100% !important; height: 44px; padding: 0 14px !important; border-radius: 3px; font-size: 14px; font-weight: 500; text-transform: none; box-shadow: none; line-height: 1; }
.ajax_block_product .act_box_cart > a.btn, .ajax_block_product .act_box_cart > a.ajax_add_to_cart_button { background-color: #FF5539 !important; border-color: #FF5539 !important; color: #fff !important; }
.ajax_block_product .act_box_cart > a.btn:hover, .ajax_block_product .act_box_cart > a.btn:focus, .ajax_block_product .act_box_cart > a.ajax_add_to_cart_button:hover, .ajax_block_product .act_box_cart > a.ajax_add_to_cart_button:focus { background-color: #07a0dc !important; border-color: #07a0dc !important; color: #fff !important; }
.ajax_block_product .act_box_cart .hover_fly_btn_inner { display: inline-flex; align-items: center; gap: 6px; height: auto; line-height: 1; overflow: visible; }
.ajax_block_product .act_box_cart .hover_fly_btn_inner i { height: auto; line-height: 1; font-size: 14px; margin: 0; }
/* Outline-style Notify-me button - transparent fill, gray border, bell icon.
   Declared AFTER the orange `> a.btn` rule above; Notify-me also carries the
   `.btn` class, so this needs to come later in source order to win the
   cascade (same specificity, so order matters). */
.ajax_block_product .act_box_cart > a.notify-me { background: transparent !important; background-color: transparent !important; border: 1px solid #ccc !important; color: #555 !important; }
.ajax_block_product .act_box_cart > a.notify-me:hover, .ajax_block_product .act_box_cart > a.notify-me:focus { background: #f5f5f5 !important; background-color: #f5f5f5 !important; border-color: #999 !important; color: #333 !important; }
/* Hide elements the mockup omits: image-hover overlay, short description,
   bottom Quick-view/Share row, manufacturer/reference labels. */
.ajax_block_product .hover_fly,
.ajax_block_product .product-desc,
.ajax_block_product .act_box_inner,
.ajax_block_product .pro_list_manufacturer,
.ajax_block_product .pro_list_reference { display: none !important; }

/* The card rules above are generic (.ajax_block_product) so they cover both the
   category grid and the cross-sell/featured sliders. But the category LIST view
   (.product_list.list) lays cards out horizontally (floated image + info), and
   the column flex + overflow:hidden clips that floated image (only ~half shows
   on mobile, which defaults to list). Restore native list behaviour here. */
.product_list.list .ajax_block_product { display: block; height: auto; }
.product_list.list .ajax_block_product .pro_outer_box { display: block; overflow: visible; border: 0; border-radius: 0; background: none; }
.product_list.list .ajax_block_product .pro_second_box { display: block; }
.product_list.list .ajax_block_product .s_title_block { -webkit-line-clamp: unset; display: block; min-height: 0; overflow: visible; }
.product_list.list .ajax_block_product .product-desc,
.product_list.list .ajax_block_product .pro_list_manufacturer,
.product_list.list .ajax_block_product .pro_list_reference { display: block !important; }

/* Stickers over the image (grid only):
     - hide the NEW badge (type=1) - visual noise on a parts catalogue.
     The Out-of-stock badge (type=4) is moved by SQL below into the
     same image-area position NEW used (sticker_position=1), so the
     theme picks it up over the picture instead of under it. We do not
     touch its visual style - it keeps the theme default look. A small
     padding nudge gives a symmetric inset relative to the image edges. */
.ajax_block_product .st_sticker_type_1 { display: none !important; }
/* Symmetric inset for the Out-of-stock pill - overrides the ststickers inline
   "top:0px; left:0px" so the badge sits 8px in from the picture corners. */
.ajax_block_product .pro_first_box .st_sticker_type_4 { top: 8px !important; left: 8px !important; background: rgba(255,255,255,0.75) !important; }

/* Hide the struck-through "regular price" on catalog surfaces (product tiles,
   sliders and the product page). The shop no longer advertises the discount
   delta - this matches the disabled SALE / "-N%" stickers; only the final
   price is shown (its .st_discounted_price carries no colour, so it renders
   as a normal #444 price). The cart line keeps its own regular-price: it lives
   under .product-line-info.product-price (not the selectors below), so checkout
   still shows the applied saving. */
.product-price-and-shipping .regular-price,
.current-price .regular-price { display: none !important; }

/* Align the first top-menu item (Home) flush-left with the Categories block
   that sits below it in the left column. The theme gives every .ma_level_0 a
   16px left padding at >=1200px (8px below); zero it on the FIRST item only so
   "Home" lines up with the .block-categories edge. Inter-item spacing stays
   intact: the gap between two items is the left item right-padding plus the
   right item left-padding, neither of which this rule changes. */
#st_mega_menu_wrap .st_mega_menu.mu_level_0 > li.ml_level_0:first-child > .ma_level_0 { padding-left: 0 !important; }

/* Country + VAT selector (Hetzner-style) replacing the top-bar language dropdown.
   Pill: [flag] | VAT N% with a gray separator. Modal: language + country, no
   currency; centered on desktop, bottom-sheet on mobile. */
.cvs-wrap { position: relative; display: inline-flex; align-items: center; }
/* Top-bar grey strip + country/VAT pill.
   - strip bg #C9C9C9, text #303030.
   - pill default: transparent (strip shows through), text #303030.
   - pill HOVER: white bg with thin #FFF4F0 border, vertically inset ~20% so
     the strip grey still shows above and below. The default theme rule
     "#top_bar .top_bar_item .header_item:hover { background:#fff }" (generated
     from STSN_HEADER_LINK_HOVER_BG, baked into customer-s1.css) paints the
     full pill height on hover, which makes a flush-edge box rather than the
     inset one we want. We override that hover bg back to transparent and
     paint the inset white box on a ::before pseudo-element instead, so the
     visual can be shorter than the pill without any layout shift.
   The pill text is "EN · <flag> CountryName"; the separator is a real dot
   character set in the template (.cvs-sep no longer styled as a bar). */
#top_bar { background: #C9C9C9 !important; color: #303030; }
/* Theme overrides text colour with several higher-specificity rules:
     #top_bar .top_bar_item .header_item { color: #fff }  (default white)
     a.login.top_bar_item .header_item { color: #FF5539 !important }  (orange)
     .welcome.top_bar_item .header_item:hover { color: #fff !important }
   Beat them all with #top_bar + !important so every word on the strip lands
   on the requested #303030. */
#top_bar, #top_bar a, #top_bar .header_item, #top_bar .top_bar_item,
#top_bar .top_bar_item .header_item, #top_bar .top_bar_item .header_item *,
#top_bar a.login, #top_bar a.login.top_bar_item, #top_bar a.login.top_bar_item .header_item,
#top_bar a.login.top_bar_item .header_item *,
#top_bar .welcome.top_bar_item, #top_bar .welcome.top_bar_item .header_item { color: #303030 !important; }
/* Override JUST the login link to brand-orange #FF5539 - listed AFTER the
   general #303030 rule above so equal-specificity last-wins kicks in. */
#top_bar a.login, #top_bar a.login.top_bar_item, #top_bar a.login.top_bar_item .header_item,
#top_bar a.login.top_bar_item .header_item * { color: #FF5539 !important; }
/* Vertical separator (1×12px, #9C9C9C) at the right edge of the cvs-pill
   wrap, visually dividing the country/VAT pill from the Welcome / Login
   item next to it. Lives inside .cvs-wrap as an absolutely-positioned
   pseudo-element so it does not affect layout flow. */
#top_bar .cvs-wrap { position: relative; padding-right: 12px; }
#top_bar .cvs-wrap::after { content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #9C9C9C; }
/* #top_bar prefix is required: the theme sets
     .nav_bar.horizontal-s-fullheight .top_bar_item .header_item { padding:0 6px }
     .nav_bar .header_item { display: inline-block; height:44px; line-height:44px }
   with 3-class specificity. Without the #top_bar id our rule would lose, the
   pill would stay display:inline-block (so gap is ignored!) and padding would
   collapse to 0 6px. !important on padding+gap is belt-and-suspenders.
   Hover is intentionally NOT customised - the pill inherits the default theme
   behaviour (full-height white bg on hover from STSN_HEADER_LINK_HOVER_BG),
   matching the other top_bar items. */
#top_bar .cvs-pill { display: inline-flex !important; align-items: center; gap: 17px !important; background: transparent; border: 0; border-radius: 0 !important; padding: 3px 21px !important; cursor: pointer; line-height: 1; color: #303030; font: inherit; font-size: 13px; }
/* Caret on the right: ▾ closed → ▴ open. Single empty span in the markup;
   the glyph is set via ::before content so we can swap it with a selector
   instead of changing the markup. */
.cvs-pill .cvs-caret { display: inline-block; font-size: 10px; line-height: 1; color: #303030; }
.cvs-pill .cvs-caret::before { content: "▾"; }
.cvs-pill[aria-expanded="true"] .cvs-caret::before { content: "▴"; }
.cvs-pill .cvs-lang-iso { font-weight: 400; }
.cvs-pill .cvs-country-name { white-space: nowrap; font-weight: 400; }
/* Tighten 3 of the 4 gaps inside the pill via negative margins (the parent
   has gap:17px which works fine for the caret slot but is too wide between
   lang-iso ↔ · ↔ flag and flag ↔ country). Net effective gap ~7px. */
.cvs-pill .cvs-sep { margin: 0 -10px; }
.cvs-pill .cvs-country-name { margin-left: -10px; }
.cvs-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; display: inline-block; }
.cvs-sep { display: inline-block; color: #aaa; font-weight: 400; }

/* Modal Language section: visitor asked to drop flags from the language
   picker. Hide them on the toggle button AND on each option in the list. */
.cvs-section-lang .cvs-combo-flag,
.cvs-section-lang .cvs-combo-opt img { display: none !important; }
.cvs-modal[hidden] { display: none; }
.cvs-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; }
.cvs-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.cvs-modal-box { position: relative; background: #fff; width: 420px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); overflow: auto; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.cvs-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eee; }
.cvs-modal-title { font-size: 16px; font-weight: 600; }
.cvs-x { background: none; border: none; font-size: 24px; line-height: 1; color: #888; cursor: pointer; padding: 0 4px; }
.cvs-form { padding: 16px 20px 20px; }
.cvs-section { margin-bottom: 18px; }
.cvs-section-label { font-size: 14px; font-weight: 600; color: #555; margin-bottom: 8px; }
.cvs-combo { position: relative; }
.cvs-combo-toggle { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid #ccc; border-radius: 4px; background: #fff; padding: 8px 10px; cursor: pointer; font: inherit; text-align: left; }
.cvs-combo-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
.cvs-combo-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvs-combo-caret { margin-left: auto; color: #888; font-size: 12px; }
.cvs-combo-panel { margin-top: 4px; background: #fff; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; }
.cvs-combo-panel[hidden] { display: none; }
.cvs-combo-search { width: 100%; border: none; border-bottom: 1px solid #eee; padding: 8px 10px; outline: none; font: inherit; box-sizing: border-box; }
.cvs-combo-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.cvs-combo-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 14px; }
.cvs-combo-opt:hover { background: #f5f5f5; }
.cvs-combo-opt.is-active { background: #fff5f3; }
.cvs-combo-opt img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
.cvs-combo-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvs-save { margin-top: 4px; background-color: #FF5539 !important; border-color: #FF5539 !important; color: #fff !important; }
.cvs-save:hover, .cvs-save:focus { background-color: #07a0dc !important; border-color: #07a0dc !important; color: #fff !important; }
html.cvs-open { overflow: hidden; }
@media (max-width: 575px) {
  .cvs-modal { align-items: flex-end; }
  .cvs-modal-box { width: 100%; max-width: 100%; max-height: 85vh; border-radius: 12px 12px 0 0; }
}
/* ============================================================
   Mobile header customizations - gated by a MEDIA QUERY at the theme breakpoint
   (theme.js sets min_width 992, i.e. mobile is < 992px), NOT the body class
   .use_mobile_header. The theme adds that class only on initial page load and
   does not re-toggle it on viewport resize, so class-scoped rules went stale
   when crossing the breakpoint without a refresh (the grey #top_bar strip
   vanished going to mobile; mobile styling lingered going back to desktop).
   The theme switches #mobile_bar / #top_bar with the SAME @media
   (max-width:991px), so matching that here keeps everything in sync via pure
   CSS - no refresh needed. (Desktop, >=992px, is untouched: rules below simply
   do not apply.) Requested phone tweaks: grey strip shorter + centered, burger
   +25%, logo half size + centered, cart instead of 3-dots on the right, wide
   search row, slim off-canvas border.
   ============================================================ */
@media only screen and (max-width: 991px) {
  /* Grey top strip: the theme media query hides #top_bar at this width - re-show
     it above the mobile header and centre its items (country/VAT pill + login).
     The standalone left nav (duplicate multilink) is hidden. */
  #top_bar { display: block !important; background: #CCC !important; padding-top: 1px !important; padding-bottom: 1px !important; margin-bottom: 6px !important; }
  #top_bar #top_bar_row { justify-content: center !important; align-items: center !important; flex-wrap: wrap; gap: 10px; min-height: 0 !important; }
  #top_bar #nav_left, #top_bar #nav_center, #top_bar #nav_right { float: none !important; }
  #top_bar #nav_right, #top_bar #nav_right .flex_box { display: flex !important; align-items: center !important; justify-content: center; }
  #top_bar #nav_left { display: none !important; }
  /* Shorter strip: its height is the MAX of two theme-fixed 44px boxes - the
     .header_item (height/line-height:44px) and the inter-item separator pseudo
     .top_bar_item:before (height:44px). Drop BOTH to 30px; the pill/login keep
     their own size and stay centred (just less grey around them). */
  #top_bar .top_bar_item, #top_bar .header_item { display: inline-flex !important; align-items: center !important; line-height: 30px !important; height: 30px !important; }
  #top_bar .top_bar_item:before { height: 30px !important; }
  /* Hide the guest "Welcome" greeting on mobile (desktop keeps it). */
  #top_bar .welcome { display: none !important; }

  /* Burger 25% bigger (theme .fs_xl is 1.25rem). */
  #mobile_bar_left .menu_mobile_bar_tri i { font-size: 1.5625rem !important; }

  /* Logo half size (theme renders it 280x50) and vertically centred - the logo
     <a> is a block whose inline <img> sat on the baseline, so make it a centring
     flex box. */
  #mobile_bar .mobile_logo .logo { height: 25px !important; width: auto !important; display: block; }
  #mobile_bar .mobile_logo { display: flex !important; align-items: center !important; height: 100%; }
  #mobile_bar_top, #mobile_bar_center > .flex_container { align-items: center !important; }

  /* Cart in the right slot (sidebar item repurposed to the native cart in SQL
     section [16]). No icon-box background; the .amount_circle count bubble stays. */
  #mobile_bar_right .cart_mobile_bar_tri { background: transparent !important; }
  #mobile_bar_right .cart_mobile_bar_tri .ajax_cart_bag { margin-top: 0 !important; position: relative; display: inline-block; }

  /* Wide search row under a divider in #mobile_bar_bottom (rendered by
     apshop_customizations::hookDisplayMobileBarBottom). Flex row + equal 10px
     side margins on the search block. */
  #mobile_bar_bottom { display: flex !important; align-items: center; border-top: 1px solid rgba(0,0,0,.15); margin-top: 8px; padding-top: 8px; }
  #mobile_bar_bottom .search_widget_block { flex: 1 1 auto !important; width: auto !important; margin-left: 10px !important; margin-right: 10px !important; }
  #mobile_bar_bottom .search_widget, #mobile_bar_bottom .search_widget_form, #mobile_bar_bottom .search_widget_form_inner { width: 100% !important; }

  /* Off-canvas panels (.st-menu, e.g. #side_products_cart): thin 1px grey left
     border (theme uses 4px solid #444) and reach the bottom (theme leaves a 50px
     gap via .mobile_device.use_mobile_header .st-menu{bottom:50px}). */
  .st-menu { border-left: 1px solid #ccc !important; bottom: 0 !important; }
}

/* Small "All prices incl. VAT" note under the product-page price. */
.product-prices .product-vat-note { font-size: 12px; color: #888; margin-top: 4px; line-height: 1.2; }

/* Mobile: widen the "added to cart" confirmation popup (default #blockcart-modal
   .modal-dialog is width:80%, too narrow on phones). Desktop untouched. */
@media (max-width: 575px) {
  #blockcart-modal .modal-dialog { width: 94% !important; max-width: 94% !important; margin: 16px auto !important; }
}
/* The generic .modal-content reserves margin-right:40px for the close button,
   which we removed from the cart-added popup - match the 10px left margin so the
   content (and the Go-to-cart button) is centered. Scoped to #blockcart-modal so
   other modals (e.g. quickview) keep room for their close button. */
#blockcart-modal .modal-content { margin-right: 10px !important; }

/* Mobile: the burger (stsidebar native_modules==6) now opens the left column
   (categories), so the separate "Left column" toggle button is redundant. */
#switch_left_column { display: none !important; }
/* The slide-in left/right column was pinned bottom:50px (room for the old mobile
   bar), leaving a gap above the screen bottom - drop it so it reaches the edge. */
.slide_lr_column #left_column.sidebar_opened, .slide_lr_column #right_column.sidebar_opened { bottom: 0 !important; }

/* Single mobile categories overlay (#side_categories), rendered on every page by
   apshop_customizations so the burger opens the same sliding panel on any layout
   (the theme #left_column is absent on full-width pages like /cart). Slides in
   from the left over a dim backdrop; no shadow; one consistent panel. */
.cvs-cats-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1090; }
.cvs-cats-backdrop[hidden] { display: none; }
#side_categories.cvs-cats { position: fixed; top: 0; bottom: 0; left: 0; width: 82%; max-width: 320px; background: #fff; z-index: 1100; transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: none; }
#side_categories.cvs-cats.open { transform: translateX(0); }
#side_categories .cvs-cats-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eee; }
#side_categories .cvs-cats-title { font-weight: 600; font-size: 16px; }
#side_categories .cvs-cats-close { background: none; border: none; font-size: 26px; line-height: 1; color: #888; cursor: pointer; padding: 0 4px; }
#side_categories .cvs-cats-body { padding: 6px 12px 24px; }
/* Hide the category widget "Categories" title_block - our panel header already
   shows it, so it would be a duplicate inside the overlay. */
#side_categories .title_block { display: none !important; }
html.cvs-cats-lock { overflow: hidden; }
/* The panel is now rendered on every page (not UA-gated) so the burger works
   the instant the viewport crosses into mobile, with no refresh. Keep it fully
   inert on desktop (>=992px, where the burger is hidden anyway): hide the panel
   and backdrop so the duplicate category tree is not reachable. */
@media only screen and (min-width: 992px) {
  #side_categories.cvs-cats, .cvs-cats-backdrop { display: none !important; }
}

/* Header icon labels: hide the visible "Search" / "Cart" captions next to the
   icons but keep the spans in the DOM so crawlers still read them (SEO). The
   accessible name is carried by aria-label/title on the button and the cart
   link.
   - Search: the icon_text span now carries the Bootstrap .sr-only class in the
     template (visually hidden via clip, still read by SEO + assistive tech as a
     fallback), and the <i> glyph is aria-hidden, so NO display:none here - that
     would drop the text from the accessibility tree and defeat .sr-only.
   - Cart: still hidden with display:none; its accessible name comes from the
     anchor aria-label. The selector must out-specify the theme rule
     .st_shopping_cart .ajax_cart_bag .icon_text{display:block!important} (0,3,0),
     so .cart_icon_item brings it to 0,4,0. */
.st_shopping_cart .ajax_cart_bag.cart_icon_item .icon_text { display: none !important; }
/* Bump the cart glyph a touch (theme default .shopping_cart_style_0
   .ajax_cart_bag i is 1.333em, 0,2,1). Add .st_shopping_cart for 0,3,1 so it
   out-specifies the default. */
.shopping_cart_style_0 .st_shopping_cart .ajax_cart_bag i { font-size: 1.5em; }

/* The theme rule .btn{text-transform:capitalize} title-cases the label as
   "Proceed To Checkout". Force sentence case (source string "Proceed to
   checkout") by disabling the transform on this button. */
body#cart .cart-detailed-actions .btn_to_checkout { text-transform: none !important; }
body#cart .cart-grid-body > a.btn, body#cart .cart-detailed-actions .btn_to_checkout, body#cart .cart-empty-page .btn { background-color: #FF5539 !important; border-color: #FF5539 !important; color: #fff !important; }
body#cart .cart-grid-body > a.btn:hover, body#cart .cart-grid-body > a.btn:focus, body#cart .cart-detailed-actions .btn_to_checkout:hover, body#cart .cart-detailed-actions .btn_to_checkout:focus, body#cart .cart-empty-page .btn:hover, body#cart .cart-empty-page .btn:focus { background-color: #07a0dc !important; border-color: #07a0dc !important; color: #fff !important; }

/* "Shopping cart" / "Checkout" / "Close" buttons appear in TWO places that
   share the same stshoppingcart-list.tpl include: the off-canvas side panel
   (#side_products_cart) AND the hover-dropdown popup over the header cart
   icon (.blockcart .dropdown_list). Targeting the unique .small_cart_btn
   class covers both with one rule. */
.small_cart_btn { background-color: #FF5539 !important; border-color: #FF5539 !important; color: #fff !important; }
.small_cart_btn:hover, .small_cart_btn:focus, .small_cart_btn:active { background-color: #07a0dc !important; border-color: #07a0dc !important; color: #fff !important; }

/* Password-recovery: Send reset link + Back to Login forced to identical
   dimensions (height/padding/min-width) so they line up side-by-side. */
body#password .form-control-submit, body#password .account-link { background-color: #FF5539 !important; border-color: #FF5539 !important; color: #fff !important; display: inline-flex !important; align-items: center; justify-content: center; height: 40px; padding: 0 18px !important; min-width: 160px; line-height: 1 !important; font-size: 0.875rem !important; box-sizing: border-box; text-decoration: none; vertical-align: middle; margin-right: 6px; }
body#password .form-control-submit:hover, body#password .form-control-submit:focus, body#password .form-control-submit:active, body#password .account-link:hover, body#password .account-link:focus, body#password .account-link:active { background-color: #07a0dc !important; border-color: #07a0dc !important; color: #fff !important; }

/* Orange primary buttons on Login + Registration forms (matches apshop.eu).
   Hover → blue, same as cart/search-button pattern. Scoped to the auth
   blocks so checkout/contact/etc. .btn-primary stays default. */
#login_form_block .btn.btn-primary, #create_account_block .btn.btn-primary, #register_form_block .btn.btn-primary { background-color: #FF5539 !important; border-color: #FF5539 !important; color: #ffffff !important; }
#login_form_block .btn.btn-primary:hover, #login_form_block .btn.btn-primary:focus, #login_form_block .btn.btn-primary:active, #create_account_block .btn.btn-primary:hover, #create_account_block .btn.btn-primary:focus, #create_account_block .btn.btn-primary:active, #register_form_block .btn.btn-primary:hover, #register_form_block .btn.btn-primary:focus, #register_form_block .btn.btn-primary:active { background-color: #07a0dc !important; border-color: #07a0dc !important; color: #ffffff !important; }

/* My-account dashboard tiles - match prod apshop.eu look: white card with
   subtle gray border + drop shadow + rounded corners; the icon is a large
   round orange badge on the LEFT, label on the right. Two columns at >= md.
   Bootstrap's `.list-group-item { display:flex; flex-flow:row wrap;
   border-radius:0 }` from theme.css forces single-column + square corners,
   so we override with `.row.myacount_dashbord_list .list-group-item` (higher
   specificity) and `!important` on layout-critical props. Hover lifts the
   shadow and switches the border to red (apshop palette). */
.row.myacount_dashbord_list { display: flex !important; flex-wrap: wrap !important; gap: 14px !important; padding: 0 !important; margin: 0 0 1rem 0 !important; }
.row.myacount_dashbord_list .list-group-item { flex: 0 0 calc(50% - 7px) !important; max-width: calc(50% - 7px) !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; background: #fff !important; border: 1px solid #e5e5e5 !important; border-radius: 12px !important; box-shadow: none !important; transition: box-shadow 0.15s, border-color 0.15s !important; }
.row.myacount_dashbord_list .list-group-item:hover { box-shadow: 0 3px 14px rgba(0,0,0,0.18) !important; border-color: #FF5539 !important; }
.row.myacount_dashbord_list .list-group-item > a { display: flex !important; align-items: center; gap: 16px; padding: 14px 18px !important; width: 100%; height: 100%; text-decoration: none; color: #292b2c; }
.row.myacount_dashbord_list .list-group-item > a:hover { color: #292b2c; text-decoration: none; }
.row.myacount_dashbord_list .list-group-item > a > i { flex: 0 0 44px; width: 44px; height: 44px; background: #FF5539; color: #fff !important; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center; font-size: 22px; margin: 0 !important; line-height: 1; }
@media (max-width: 575.98px) { .row.myacount_dashbord_list .list-group-item { flex: 0 0 100% !important; max-width: 100% !important; } }

/* Tighter gap between search and cart blocks (default .top_bar_item adds
   8+8=16px of horizontal padding; halve it for these two specific items). */
.search_widget_block.top_bar_item, .blockcart.top_bar_item { padding-left: 3px !important; padding-right: 3px !important; }

/* Vertically center the icon column and trailing text spans inside the cart. */
.st_shopping_cart .flex_container { display: flex !important; align-items: center !important; height: 100%; }
.st_shopping_cart .ajax_cart_bag { margin-top: 0 !important; }
.st_shopping_cart .cart_icon_item { line-height: 1.1 !important; height: auto !important; vertical-align: middle; }

/* "Welcome" label is non-clickable text - kill the global hover styling
   (#top_bar .top_bar_item .header_item:hover sets bg=#fff and color=#FF5539)
   so it looks identical normal vs hover (white on transparent). */
.welcome.top_bar_item:hover .header_item, .welcome.top_bar_item .header_item:hover { background-color: transparent !important; color: #ffffff !important; }

/* Phone call-prefix: hide thecheckout"s static <span class="country-
   call-prefix"> entirely. checkout-carriers.js handles country-change
   by rewriting the leading "+<prefix>" inside the phone <input> value
   itself (only when the customer hasn"t manually edited the prefix),
   so the dedicated decoration is redundant. With the span hidden we
   also no longer need the original padding-left:51px reservation on
   the phone input - it falls back to thecheckout"s default. */
.country-call-prefix { display: none !important; }
.has-call-prefix .has-float-label input.form-control { padding-left: 12px !important; }

/* Cart quantity touchspin: visually disable the + button when stock is
   reached. cart-detailed-product-line.tpl seeds .hits_the_max_limit on
   the <input> when $product.quantity >= $product.stock_quantity, and
   theme.js toggles the same class after each touchspin click. The +
   button is a bootstrap-touchspin-up sibling of the input inside
   .bootstrap-touchspin, so use :has() to reach it from the input.
   pointer-events:none prevents the click from firing (defence-in-depth
   - theme.js already early-returns on max for non-oosp products).
   The − button is intentionally NOT disabled at minimal_quantity:
   pressing − at qty=1 is a valid "remove from cart" gesture (handled
   by the existing remove-from-cart link, but the dimming would confuse
   users who have not reached the limit yet). */
.bootstrap-touchspin:has(> input.hits_the_max_limit:not([data-allow-oosp="1"])) .bootstrap-touchspin-up,
.bootstrap-touchspin:has(input.hits_the_max_limit:not([data-allow-oosp="1"])) .bootstrap-touchspin-up { pointer-events: none; opacity: 0.4; cursor: not-allowed; }

/* === Carrier UI styling moved to the theme template override at
   themes/transformer/modules/thecheckout/views/templates/front/blocks/
   shipping-css.tpl (included by shipping.tpl). Edits to carrier row /
   modal / Omniva inline-column / DPD pickup trigger styling now happen
   there, not in this file. STSN_CUSTOM_CSS stays for non-carrier custom
   theme rules only. */

/* === Universal CMS / content-page design ===
   Single source of truth for all CMS pages (/en/content/*). Targets the
   .page-cms wrapper so edits here propagate to every CMS page (FAQ, Terms,
   Privacy, etc.). Inline text-align/font-size cruft pasted by the legacy
   WYSIWYG is overridden with !important so we don't have to re-clean each
   page's raw HTML. */
.page-cms #content.page-cms { background: transparent; }
/* No max-width: content should occupy the same column as the page header /
   breadcrumb (HOME · FAQ) - i.e. the theme's default content width. */
.page-cms .cms_content { color: #333; font-family: inherit; padding: 8px 0 32px; }

/* Page title (h1) - left-aligned, no uppercase, 28px/600. Overrides legacy
   <h2 style="text-align:center"><strong>...</strong></h2> patterns once the
   content is rewritten with <h1>. */
.page-cms .cms_content h1 { text-align: left !important; text-transform: none !important; font-size: 28px !important; font-weight: 600 !important; color: #222 !important; margin: 0 0 8px 0 !important; padding: 0 !important; border: 0 !important; line-height: 1.25 !important; display: block !important; }
.page-cms .cms_content h1 * { color: inherit !important; text-transform: none !important; font-weight: inherit !important; background: transparent !important; }

/* Section heading (h2) - orange bold + underline that is ONLY as wide as the
   text (display:inline-block + border-bottom). */
.page-cms .cms_content h2 { display: inline-block !important; font-size: 18px !important; font-weight: 600 !important; color: #F15A22 !important; text-align: left !important; text-transform: none !important; margin: 32px 0 12px 0 !important; padding: 0 0 8px 0 !important; border: 0 !important; border-bottom: 2px solid #F15A22 !important; line-height: 1.3 !important; }
.page-cms .cms_content h2 * { color: inherit !important; text-transform: none !important; font-weight: inherit !important; background: transparent !important; text-decoration: none !important; }

/* Sub-section heading (h3) - plain dark, 16px/600. */
.page-cms .cms_content h3 { font-size: 16px !important; font-weight: 600 !important; color: #333 !important; margin: 20px 0 10px 0 !important; text-transform: none !important; text-align: left !important; }

/* Body text - readable 14px / 1.65, dark gray, left-aligned (kills inline
   text-align: justify/center pasted into legacy WYSIWYG content). */
.page-cms .cms_content p { font-size: 14px !important; line-height: 1.65 !important; color: #444 !important; margin: 0 0 12px 0 !important; text-align: left !important; }
.page-cms .cms_content p span, .page-cms .cms_content p strong, .page-cms .cms_content p em, .page-cms .cms_content p b, .page-cms .cms_content p i { color: inherit !important; }

/* Inline links - orange, underline on hover only. */
.page-cms .cms_content a { color: #F15A22; text-decoration: none; }
.page-cms .cms_content a:hover { color: #F15A22; text-decoration: underline; }

/* Lists tightened a touch (bullets/numbering already restored by .cms_content
   rules above). */
.page-cms .cms_content ul, .page-cms .cms_content ol { margin: 8px 0 14px 0; }
.page-cms .cms_content li { font-size: 14px; line-height: 1.7; color: #444; }

/* Horizontal rule between sections. */
.page-cms .cms_content hr { border: 0; border-top: 1px solid #eee; margin: 28px 0; }

/* Universal "Jump to section" navigation block - full-width light-gray band
   right under the page title, pill-style anchor links inside. Generic class
   (.cms-jump-nav) so any future CMS page that includes the same markup gets
   the same look - no per-page CSS. */
.page-cms .cms-jump-nav { background: #f7f7f7; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; padding: 18px 20px; margin: 12px 0 28px; }
.page-cms .cms-jump-nav .cms-jump-nav__label { font-size: 13px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.page-cms .cms-jump-nav .cms-jump-nav__list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.page-cms .cms-jump-nav .cms-jump-nav__list li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.page-cms .cms-jump-nav .cms-jump-nav__list li::before { content: none !important; }
.page-cms .cms-jump-nav .cms-jump-nav__list a { display: inline-block; background: #ffffff; border: 1px solid #d6d6d6; border-radius: 20px; padding: 6px 14px; font-size: 13px; line-height: 1.3; color: #444; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.page-cms .cms-jump-nav .cms-jump-nav__list a:hover { border-color: #F15A22; color: #F15A22; text-decoration: none; }

/* Headroom so jump-anchor clicks don't hide the H2 under the sticky header
   (top bar 36px + main header ~44px). */
.page-cms .cms_content h2[id] { scroll-margin-top: 96px; }

/* === Contact-us page (body.page-contact) - redesigned layout ===
   Top header h1 + tagline above the two columns; left column "Send a message"
   form with orange-underlined section heading; right column easycontent
   block with icon-rows (address / phone / email / hours) + two gray panels
   for company and bank details. */
.page-contact .apshop-contact-page-header { padding: 0 0 14px; }
.page-contact .apshop-contact-page-header h1 { font-size: 28px; font-weight: 600; color: #222; margin: 0 0 6px 0; text-align: left !important; text-transform: none !important; line-height: 1.25; }
.page-contact .apshop-contact-page-header p { font-size: 14px; color: #555; margin: 0 0 22px 0; line-height: 1.6; }

/* Both columns share the orange-underline section heading look. The form
   block uses .title_block (markup from contactform.tpl) and the easycontent
   block ALSO uses .title_block - same hierarchy, same selector. */
.page-contact .col-md-6 .title_block { display: block !important; margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; }
.page-contact .col-md-6 .title_block .flex_child { display: none !important; }
.page-contact .col-md-6 .title_block .title_block_inner {
    display: inline-block !important;
    font-size: 16px !important; font-weight: 700 !important;
    color: #F15A22 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 0 8px !important;
    border-bottom: 2px solid #F15A22 !important;
    margin: 0 !important;
}
.page-contact .col-md-6 .title_block .opener { display: none !important; }

/* Form fields - clean white background, soft border, focus turns orange. */
.page-contact .contact-form .form-group { margin-bottom: 14px; }
.page-contact .contact-form .form-control,
.page-contact .contact-form select.form-control,
.page-contact .contact-form textarea.form-control {
    background-color: #fff !important;
    background-image: none !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    box-shadow: none !important;
}
.page-contact .contact-form .form-control:focus,
.page-contact .contact-form textarea.form-control:focus {
    border-color: #F15A22 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 2px rgba(241,90,34,0.12) !important;
}
.page-contact .contact-form label.form-control-label { font-weight: 600; color: #444; font-size: 13px; margin-bottom: 6px; }

/* Subject <select> - strip the browser default appearance and paint our own
   chevron via inline SVG so it visually reads as a dropdown (without it the
   select looks identical to a text input). 28px right padding leaves room
   for the chevron. */
.page-contact .contact-form select.apshop-subject-select,
.page-contact .contact-form select.form-control-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 10px 6px !important;
    padding-right: 32px !important;
    cursor: pointer;
}
/* Placeholder option keeps the field looking unselected until the user
   actively picks a subject - render it in light gray to read as a hint.
   !important is required because the general .form-control color rule
   above carries !important and would otherwise override :invalid. */
.page-contact .contact-form select.apshop-subject-select:invalid { color: #999 !important; }
.page-contact .contact-form select.apshop-subject-select option { color: #333; }
.page-contact .contact-form select.apshop-subject-select option[value=""] { color: #999; }

/* Send button + helper text below it. Left-aligned, helper inline-ish under
   the button. */
.page-contact .contact-form .form-footer { text-align: left; margin-top: 16px; }
.page-contact .contact-form .btn-primary {
    background: #F15A22 !important; border-color: #F15A22 !important;
    color: #fff !important; padding: 10px 28px !important;
    font-weight: 600 !important; text-transform: none !important;
    border-radius: 3px !important;
}
.page-contact .contact-form .btn-primary:hover { background: #d6491a !important; border-color: #d6491a !important; }
.page-contact .apshop-form-helper { font-size: 12px; color: #999; margin: 10px 0 0; text-align: left; }

/* Right-column block: icon rows + gray panels. */
.page-contact .apshop-contact-info .icon-row {
    display: flex; gap: 12px; align-items: flex-start;
    margin-bottom: 14px;
}
.page-contact .apshop-contact-info .icon-row > i {
    font-size: 18px; color: #999; margin-top: 2px; flex: 0 0 22px;
    line-height: 1;
}
/* Make the message textarea visibly taller - server renders rows=6, also
   enforce a min-height as a backup against theme overrides shrinking it. */
.page-contact .contact-form textarea[name="message"] { min-height: 160px; }

/* Footer contact list - when a contact-line wraps onto a second visual line
   (currently only the Address: "Männiku tee 96G" + <br> + "11215 Tallinn,
   Estonia"), the icon should sit on the first line only and the wrapped
   line should indent UNDER the text, not under the icon. Flex layout: icon
   becomes a fixed flex item, the rest of the <li> content (text + <br> +
   text) becomes a second flex item that takes a column of its own, so the
   <br> creates a soft break inside that column. */
#footer .footer_block_content ul.contact_list li {
    display: flex !important;
    align-items: baseline;
    gap: 6px;
    line-height: 1.5;
    margin-bottom: 10px;
}
#footer .footer_block_content ul.contact_list li > i {
    flex: 0 0 auto;
    margin-top: 0;
    line-height: 1.5;
}

/* Footer columns (Policies / Support links) - ~25% more vertical breathing
   room: extra padding between menu items, slightly larger line-height, and
   a bigger gap between the column heading and the first link. The
   .contact_list column is excluded - its own flex rules above already
   handle its layout. */
#footer-secondary .footer_block_content ul.inline_list:not(.contact_list) li {
    padding: 4px 0 !important;
    line-height: 1.75 !important;
}
#footer-secondary .title_block { margin-bottom: 18px !important; }
#footer-secondary .footer_block_content { padding-top: 4px !important; }

.page-contact .apshop-contact-info .icon-row .lbl {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #888; margin-bottom: 2px;
}
.page-contact .apshop-contact-info .icon-row .val { font-size: 14px; color: #333; }
.page-contact .apshop-contact-info .icon-row .val a { color: #333; }
.page-contact .apshop-contact-info .gray-panel {
    background: #f7f7f7; border-radius: 5px; padding: 16px;
    font-size: 13px; color: #444; line-height: 1.7; margin-top: 18px;
}
.page-contact .apshop-contact-info .gray-panel .panel-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #888; margin-bottom: 10px;
}
.page-contact .apshop-contact-info .gray-panel a { color: #F15A22; text-decoration: none; }
.page-contact .apshop-contact-info .gray-panel strong { color: #333; }

/* Hide the form's own title_block flex bars on the contact page (the empty
   .flex_child siblings around the title were rendering as faint dot rows). */
.page-contact #content-wrapper { background: transparent; }

/* Checkout "Order with an obligation to pay" button (#confirm_order in
   thecheckout's payment step) — match the sticky Pay-button's orange
   (#F15A22) with a blue hover (#07a0dc), reusing the brand accent pair
   already used by create_account / register_form buttons. !important is
   needed because the base .btn / .btn-primary rules from the theme would
   otherwise paint the button neutral; transition kept short so the colour
   change reads as a single accent flip, not an animation. */
button#confirm_order,
#confirm_order.btn {
    background: #F15A22 !important;
    border-color: #F15A22 !important;
    color: #fff !important;
    text-transform: none;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
    /* Match the sticky Pay button look (12px padding, 4px radius, 16px
       text) and width — capped at 360px so it visually equals the right-
       column sticky button instead of stretching across the wider left
       column. Centered (margin:0 auto) in the form column. */
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    padding: 12px !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}
button#confirm_order:hover, button#confirm_order:focus, button#confirm_order:active,
#confirm_order.btn:hover, #confirm_order.btn:focus, #confirm_order.btn:active {
    background: #07a0dc !important;
    border-color: #07a0dc !important;
    color: #fff !important;
}
button#confirm_order:disabled,
#confirm_order.btn:disabled {
    background: #aaa !important;
    border-color: #aaa !important;
    cursor: not-allowed;
}

/* APshop: show the out-of-stock label ("Nicht auf Lager" and all other
   languages) in RED instead of the theme's orange (#ff9a52). Uses id + class
   so it beats the theme rule `.product-unavailable{color:#ff9a52}` regardless
   of stylesheet load order. "Last items in stock" (product-last-items) stays
   orange. */
#product-availability.product-unavailable {
    color: #e02b27;
}

/* APshop: GDPR page (/module/psgdpr/gdpr) — the grey ".psgdprinfo17" panels
   ("Access to my data" / "Rectification & Erasure requests") hold float:right
   "Get my data to PDF/CSV" buttons, but the col-xs-12 wrapper doesn't
   establish a block formatting context, so the buttons overflow BELOW the grey
   box. display:flow-root makes each panel contain its floated buttons. */
.psgdprinfo17,
.psgdprinfo16 {
    display: flow-root;
}

/* APshop: Guest Order Tracking (body#guest-tracking) — the theme's guest-login
   template renders a bare form. It's now wrapped in a .from_blcok card (see
   themes/transformer/templates/customer/guest-login.tpl). Add the finishing
   touches the manual label markup doesn't get for free: red required asterisks,
   a divider between the two field rows, the unified orange (#FF5539) submit
   button that turns blue (#07a0dc) on hover (site-wide button style), and extra
   space between the last field and the button. */
body#guest-tracking .from_blcok .form-control-label.required::after {
    content: " *";
    color: #FF0000;
    font-weight: bold;
}
body#guest-tracking #guestOrderTrackingForm .form-fields .form-group.row {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}
body#guest-tracking #guestOrderTrackingForm .form-fields .form-group.row:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
body#guest-tracking #guestOrderTrackingForm .form-footer {
    margin-top: 25px;
}
body#guest-tracking #guestOrderTrackingForm .btn {
    background-color: #FF5539 !important;
    border-color: #FF5539 !important;
    color: #fff !important;
}
body#guest-tracking #guestOrderTrackingForm .btn:hover,
body#guest-tracking #guestOrderTrackingForm .btn:focus,
body#guest-tracking #guestOrderTrackingForm .btn:active {
    background-color: #07a0dc !important;
    border-color: #07a0dc !important;
    color: #fff !important;
}


/* APshop: Stripe payment methods rebuild loader (country change). The Payment
   Element must be recreated to change its method list; dim + spinner over the
   payment area while stripe-country-methods.js rebuilds it. */
.apshop-stripe-loading { position: relative; min-height: 60px; pointer-events: none; opacity: 0.55; }
.apshop-stripe-loading::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 28px; height: 28px; margin: -14px 0 0 -14px;
    border: 3px solid #d9d9d9; border-top-color: #FF5539; border-radius: 50%;
    animation: apshop-stripe-spin 0.7s linear infinite;
}
@keyframes apshop-stripe-spin { to { transform: rotate(360deg); } }

/* APshop: password reset card — center symmetrically with margin auto instead
   of the theme's col-md-6/offset-md-3 (fixed 383px width + 25% offset don't
   match on wide screens -> the card drifts off-centre). Wider so the hint text
   fits on 2 lines. */
.apshop-pwd-card {
    max-width: 600px;
    margin: 0 auto;
}
/* Theme sets .renew-password{margin-left:10px} which pushes the whole form
   (and buttons) right -> right padding looks smaller than left. Reset it. */
body#password .renew-password {
    margin-left: 0;
}
/* Wider inputs (theme caps .form-group-small .form-control at 360px) */
body#password .form-group-small .form-control,
body#password .form-group-small .input-group {
    max-width: none;
}
/* Centered, slightly wider action buttons */
body#password .form-footer {
    justify-content: center !important;
    align-items: center !important;
}
body#password .form-control-submit,
body#password .account-link {
    min-width: 200px;
}
/* Theme adds .renew-password [type="submit"]{margin-left:50px}, which shifts the
   submit button right so the button row isn't centred. Reset it. */
body#password .renew-password [type="submit"] {
    margin-left: 0;
}
/* Password requirements explanation shown under the last error, inside the alert. */
.ps-alert-error .item .apshop-pwd-explain {
    display: inline-block;
    margin-top: 6px;
    color: #666;
    font-size: 0.875rem;
    line-height: 1.45;
}

/* APshop: "Create a strong password" info panel on the password reset page
   (password-new.tpl). Peach card with a shield icon + guidance, shown before
   the fields. */
.apshop-pwd-hint {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fdf3ef;
    border: 1px solid #ffd9cc;
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 26px;
    box-sizing: border-box;
}
.apshop-pwd-hint-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border: 1px solid #ffcdbc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.apshop-pwd-hint-icon svg { width: 26px; height: 26px; fill: #FF5539; }
.apshop-pwd-hint-title { display: block; font-size: 1.05rem; font-weight: 600; color: #333; margin-bottom: 4px; }
.apshop-pwd-hint-text { margin: 0; color: #666; font-size: 0.9rem; line-height: 1.5; }

/* Password reset buttons: filled orange primary + orange outline secondary
   (overrides the generic body#password rules below for .account-link). */
body#password .account-link {
    background-color: #fff !important;
    border: 1px solid #FF5539 !important;
    color: #FF5539 !important;
}
body#password .account-link:hover,
body#password .account-link:focus,
body#password .account-link:active {
    background-color: #FF5539 !important;
    border-color: #FF5539 !important;
    color: #fff !important;
}

/* thecheckout global AJAX-error UI — never show it. On any failed AJAX the module
   adds body.ajax-error, which renders #ajax-error-modal ("Something went wrong
   during the AJAX call" + Reload page) over a full-screen dimming backdrop
   (body.ajax-error::before). The backdrop covers the viewport and swallows clicks
   so the Reload button is unusable. We don't want this dialog or the dimming at
   all. thecheckout's own `tc_disableAjaxErrorOverlay = true` flag already gates it,
   but that lives in module-core front.js and reverts on every module update — so
   neutralise it here (upgrade-safe) regardless of the class ever being added. */
#ajax-error-modal,
body.ajax-error #ajax-error-modal { display: none !important; }
body.ajax-error::before { display: none !important; content: none !important; }