/*
 * Stoeberkiste Twig parity patch
 * Reference: legacy Smarty theme / live shop, audit FINAL 9.1
 * Loaded after twig-final.css on purpose.
 */

:root {
    --sk-page-width: 1024px;
    --sk-side-width: 260px;
    --sk-column-gap: 40px;
    --sk-main-width: 724px;
    --sk-blue: #285479;
    --sk-red: #900001;
    --sk-light: #e4e8e8;
    --sk-pale: #ebe9e9;
}

html,
body {
    min-width: 0;
}

body,
body * {
    box-sizing: border-box;
}

.wrapper,
main.content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.container-xxl,
.container-xl,
.container-lg,
.container-md {
    width: var(--sk-page-width);
    max-width: calc(100% - 20px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* -------------------------------------------------------------------------
   Shared 2000 x 260 legacy hero
   ------------------------------------------------------------------------- */
.sk-list-header,
.sk-content-header,
.sk-detail-header,
.sk-account-hero,
.sk-checkout-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 260px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
}

.sk-list-header .sk-header-image,
.sk-content-header .sk-header-image,
.sk-detail-header .sk-header-image,
.sk-account-hero .sk-header-image {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 2000px !important;
    max-width: none !important;
    height: 260px !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
}

/* -------------------------------------------------------------------------
   Shared two-column shop layout
   ------------------------------------------------------------------------- */
.sk-list-body,
.sk-content-body,
.sk-detail-body,
.sk-account-shell {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--sk-column-gap) !important;
    width: var(--sk-page-width) !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 auto !important;
    padding: 26px 0 40px !important;
}

.side-menu-complete.sk-side-menu {
    flex: 0 0 var(--sk-side-width) !important;
    width: var(--sk-side-width) !important;
    max-width: var(--sk-side-width) !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.sk-product-list-panel,
.sk-content-main,
.sk-detail-main,
.sk-account-main {
    flex: 0 0 var(--sk-main-width) !important;
    width: var(--sk-main-width) !important;
    max-width: var(--sk-main-width) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.sk-product-list-panel.all-items,
.sk-content-main.all-items {
    margin-top: 0 !important;
}

.sk-user-meta {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    min-height: 27px !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 20px !important;
}

.sk-user-meta a {
    color: var(--sk-blue) !important;
    text-decoration: none !important;
}

.sk-user-meta a:hover {
    color: var(--sk-red) !important;
}

.sk-list-intro h1,
.sk-content-main h1,
.sk-detail-main h1 {
    margin: 14px 0 !important;
    color: var(--sk-red) !important;
    font-size: 26px !important;
    line-height: 32px !important;
    font-weight: 300 !important;
}

.sk-list-intro,
.sk-list-intro p,
.sk-list-intro li,
.sk-content-main,
.sk-content-main p,
.sk-content-main li {
    color: var(--sk-blue) !important;
    font-size: 16px !important;
    line-height: 20px !important;
}

.sk-list-intro .categoryDescription,
.sk-content-main .cmsContent {
    margin: 0 0 22px !important;
}

.sk-list-intro .categoryDescription p,
.sk-content-main .cmsContent p {
    float: none !important;
    margin: 0 0 10px !important;
}

/* Left navigation: remove Bootstrap artifacts and restore the legacy tree. */
.sk-side-menu .shop-menu,
.sk-side-menu .shop-info-menu {
    width: 260px !important;
    margin: 0 0 16px !important;
    border: 1px solid #c2c2c2 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.sk-side-menu .categoryBox,
.sk-side-menu .categoryBox .nav,
.sk-side-menu .categoryBox ol,
.sk-side-menu .categoryBox ul {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sk-side-menu .categoryBox .sidebar-header {
    padding: 10px !important;
    background: var(--sk-blue) !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
}

.sk-side-menu .categoryBox .nav-item,
.sk-side-menu .shop-menu li,
.sk-side-menu .shop-info-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #c2c2c2 !important;
    list-style: none !important;
}

.sk-side-menu .categoryBox .nav-item:last-child,
.sk-side-menu .shop-menu li:last-child,
.sk-side-menu .shop-info-menu li:last-child {
    border-bottom: 0 !important;
}

.sk-side-menu .categoryBox .nav-link,
.sk-side-menu .shop-menu li a,
.sk-side-menu .shop-info-menu li a {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 35px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sk-pale) !important;
    color: var(--sk-blue) !important;
    font-size: 15px !important;
    line-height: 19px !important;
    text-decoration: none !important;
    white-space: normal !important;
}

.sk-side-menu .categoryBox .nav-link svg {
    display: none !important;
}

.sk-side-menu .categoryBox .nav-item.active > .nav-link,
.sk-side-menu .categoryBox .nav-item.exp > .nav-link,
.sk-side-menu .shop-menu li a.act {
    background: #fff !important;
    color: var(--sk-red) !important;
}

.sk-side-menu .categoryBox .nav-link:hover,
.sk-side-menu .shop-menu li a:hover,
.sk-side-menu .shop-info-menu li a:hover {
    background: #fff !important;
}

.sk-side-menu .categoryBox .nav .nav {
    display: block !important;
    border-top: 1px solid #c2c2c2 !important;
}

.sk-side-menu .categoryBox .nav .nav .nav-link {
    padding-left: 22px !important;
    background: #fff !important;
}

.sk-side-menu .sk-brand-menu .all-brands > li:first-child {
    padding: 10px !important;
    background: var(--sk-red) !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 20px !important;
}

.sk-side-menu .sk-brand-menu .all-brands a {
    color: var(--sk-red) !important;
}

/* -------------------------------------------------------------------------
   Category/manufacturer/product lists
   ------------------------------------------------------------------------- */
.sk-legacy-list-page {
    margin: 0 !important;
    padding: 0 !important;
}

.sk-product-list-panel .row,
.sk-product-list-panel #productList,
.sk-product-list-panel .productList {
    margin: 0 !important;
    padding: 0 !important;
}

.sk-product-list-panel #productList > .card,
.sk-product-list-panel .productList > .card,
.sk-product-list-panel .card.mb-1 {
    width: 100% !important;
    min-height: 102px !important;
    margin: 0 0 10px !important;
    border: 0 !important;
    border-top: 1px solid var(--sk-pale) !important;
    border-bottom: 1px solid var(--sk-pale) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

.sk-product-list-panel .card.mb-1 > .row {
    min-height: 100px !important;
}

.sk-product-list-panel .card-img {
    width: 100px !important;
    height: 100px !important;
    border: 1px solid var(--sk-pale) !important;
    object-fit: contain !important;
}

.sk-product-list-panel .card-body {
    min-height: 100px !important;
    padding: 10px !important;
}

.sk-product-list-panel .card-title {
    color: var(--sk-blue) !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

.sk-product-list-panel .card-text,
.sk-product-list-panel .attributes,
.sk-product-list-panel .pricePerUnit {
    color: var(--sk-blue) !important;
    font-size: 13px !important;
    line-height: 17px !important;
}

.sk-product-list-panel .price {
    margin: 0 0 8px !important;
    color: var(--sk-blue) !important;
    font-size: 15px !important;
    line-height: 19px !important;
    font-weight: 400 !important;
}

.sk-product-list-panel .functions .btn,
.sk-product-list-panel .sk-line-functions .btn {
    min-width: 92px !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: var(--sk-blue) !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 18px !important;
}

.sk-subcategory-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 18px !important;
}

.sk-subcategory-links a {
    padding: 5px 10px !important;
    border-radius: 3px !important;
    background: var(--sk-pale) !important;
    color: var(--sk-blue) !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

.sk-manufacturer-overview {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 12px 0 30px !important;
}

.sk-manufacturer-tile {
    display: flex !important;
    min-height: 92px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid var(--sk-pale) !important;
    color: var(--sk-blue) !important;
    text-align: center !important;
    text-decoration: none !important;
}

.sk-manufacturer-tile img {
    max-width: 100% !important;
    max-height: 58px !important;
    object-fit: contain !important;
}

/* -------------------------------------------------------------------------
   Pia Malmros special manufacturer/category
   ------------------------------------------------------------------------- */
.sk-pia-page {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sk-pia-inner {
    width: var(--sk-page-width) !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 auto !important;
    padding: 26px 0 34px !important;
}

.sk-pia-page .all-cards-top {
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    float: none !important;
}

.sk-pia-page .ext_cards {
    display: flex !important;
    gap: 10px !important;
    margin: 0 0 24px !important;
}

.sk-pia-page .sk_button {
    display: inline-block !important;
    min-width: 70px !important;
    padding: 6px 12px !important;
    border-radius: 3px !important;
    background: var(--sk-pale) !important;
    color: var(--sk-blue) !important;
    font-size: 14px !important;
    line-height: 18px !important;
    text-align: center !important;
    text-decoration: none !important;
}

.sk-pia-page h1 {
    margin: 0 0 26px !important;
    color: var(--sk-red) !important;
    font-size: 26px !important;
    line-height: 32px !important;
    font-weight: 300 !important;
}

.sk-pia-page .categoryDescription,
.sk-pia-page .categoryDescription p {
    color: var(--sk-blue) !important;
    font-size: 16px !important;
    line-height: 20px !important;
}

.sk-pia-page .categoryDescription p {
    margin: 0 0 8px !important;
    float: none !important;
}

.sk-pia-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 36px 22px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.sk-pia-cards .card-item {
    display: block !important;
    flex: 0 0 125px !important;
    width: 125px !important;
    min-width: 125px !important;
    height: auto !important;
    margin: 0 !important;
    color: var(--sk-blue) !important;
    text-decoration: none !important;
    float: none !important;
}

.sk-pia-cards .sk-pia-card-image {
    display: block !important;
    width: 125px !important;
    height: 170px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #fff !important;
    border-radius: 2px !important;
    background: #fff !important;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, .5) !important;
}

.sk-pia-cards .sk-pia-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.sk-pia-cards .sk-pia-artnum {
    display: block !important;
    width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 7px 0 0 !important;
    border-top: 1px solid var(--sk-pale) !important;
    color: var(--sk-blue) !important;
    font-size: 16px !important;
    line-height: 18px !important;
}

.sk-pia-cards small {
    display: block !important;
    margin: 0 !important;
    color: var(--sk-blue) !important;
    font-size: 12px !important;
    line-height: 15px !important;
}

/* -------------------------------------------------------------------------
   Start page
   ------------------------------------------------------------------------- */
body.cl-start main.content,
body.cl-start .sk-frontpage {
    width: var(--sk-page-width) !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

body.cl-start .welcome-top,
body.cl-start .all-tiles,
body.cl-start .roros,
body.cl-start .brands {
    max-width: 100% !important;
}

/* -------------------------------------------------------------------------
   Account area
   ------------------------------------------------------------------------- */
.sk-account-wrapper {
    width: 100% !important;
}

.sk-account-main > .container-xxl,
.sk-account-main > .container-xl,
.sk-account-main > .container-lg,
.sk-account-main > .container-md {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sk-account-main .py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.sk-account-main .button-col {
    display: none !important;
}

.sk-account-main .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.sk-account-main .row > * {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.sk-account-main .all-user-settings {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.sk-account-main section.story {
    width: 100% !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
    float: none !important;
    color: var(--sk-blue) !important;
}

.sk-account-main section.story.with-border {
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--sk-blue) !important;
}

.sk-account-main section.story h1,
.sk-account-main .page-header,
.sk-account-main > .container-xxl > .row > h1 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--sk-red) !important;
    font-size: 26px !important;
    line-height: 32px !important;
    font-weight: 300 !important;
}

.sk-account-main section.story h2,
.sk-account-main .card-title,
.sk-account-main .card-header {
    color: var(--sk-blue) !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
}

.sk-account-dashboard section.story > h2 {
    margin: 0 0 8px !important;
    color: var(--sk-red) !important;
    font-size: 24px !important;
    line-height: 32px !important;
}

.sk-account-main .left {
    width: 360px !important;
}

.sk-account-main .right {
    width: 312px !important;
}

.sk-account-main section.story .left .btn,
.sk-account-main section.story .right .btn,
.sk-account-main .btn-primary,
.sk-account-main .btn-highlight,
.sk-account-main .submitButton,
.sk-account-main .btn.is-submit {
    min-height: 31px !important;
    padding: 5px 12px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: var(--sk-blue) !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 21px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.sk-account-main section.story .left .btn,
.sk-account-main section.story .right .btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.sk-account-main .with-arrow {
    width: 100% !important;
    margin: 6px 0 26px 8px !important;
    color: var(--sk-blue) !important;
    font-size: 16px !important;
    line-height: 20px !important;
}

.sk-account-main .with-inputs {
    width: 100% !important;
    margin: 26px 0 !important;
}

.sk-account-main .with-inputs form {
    width: 100% !important;
    max-width: 724px !important;
}

.sk-account-main .with-inputs label,
.sk-account-main form.max-600 label,
.sk-account-main .form-floating > label {
    position: static !important;
    display: block !important;
    width: 290px !important;
    height: auto !important;
    margin: 0 16px 12px 0 !important;
    padding: 5px 0 !important;
    color: var(--sk-blue) !important;
    font-size: 15px !important;
    line-height: 20px !important;
    opacity: 1 !important;
    transform: none !important;
    float: left !important;
    clear: both !important;
}

.sk-account-main .with-inputs input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.sk-account-main .with-inputs select,
.sk-account-main .with-inputs textarea,
.sk-account-main form.max-600 input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.sk-account-main form.max-600 select,
.sk-account-main form.max-600 textarea {
    width: 400px !important;
    max-width: calc(100% - 306px) !important;
    min-height: 31px !important;
    margin: 0 0 12px !important;
    padding: 4px 7px !important;
    border: 1px solid var(--sk-blue) !important;
    border-radius: 2px !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 15px !important;
    line-height: 21px !important;
    box-shadow: none !important;
    float: left !important;
}

.sk-account-main .with-inputs textarea,
.sk-account-main form.max-600 textarea {
    min-height: 130px !important;
}

.sk-account-main .with-inputs .mb-3,
.sk-account-main .with-inputs .form-floating,
.sk-account-main form.max-600 .mb-3,
.sk-account-main form.max-600 .form-floating {
    width: 100% !important;
    min-height: 43px !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
}

.sk-account-main .with-inputs .chbox,
.sk-account-main .with-inputs input[type="checkbox"],
.sk-account-main .with-inputs input[type="radio"] {
    width: auto !important;
    margin: 7px 0 12px !important;
    float: left !important;
}

.sk-account-main .with-inputs button,
.sk-account-main .with-inputs .is-submit {
    margin: 8px 0 12px 306px !important;
}

.sk-account-main .with-inputs .link {
    color: var(--sk-blue) !important;
    font-size: 15px !important;
}

/* Flatten Apex/Bootstrap account cards inside the legacy shell. */
.sk-account-main .card,
.sk-account-main .card-group {
    width: 100% !important;
    margin: 0 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sk-account-main .card-header {
    margin: 0 0 10px !important;
    padding: 7px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sk-pale) !important;
}

.sk-account-main .card-body {
    padding: 10px 0 !important;
}

.sk-account-main .max-600 {
    width: 100% !important;
    max-width: 100% !important;
}

.sk-account-main .form-floating > .form-control,
.sk-account-main .form-floating > .form-select {
    height: 31px !important;
    min-height: 31px !important;
}

.sk-account-main .alert {
    border: 0 !important;
    border-radius: 3px !important;
    font-size: 14px !important;
}

.sk-account-main .sk-register-form .card-title,
.sk-account-main .sk-register-form .card-header {
    clear: both !important;
}

/* -------------------------------------------------------------------------
   Product detail
   ------------------------------------------------------------------------- */
.sk-detail-main .detailsInfo,
.sk-detail-main #detailsMain,
.sk-detail-main .product-details {
    width: 100% !important;
    max-width: 100% !important;
}

body.cl-details .sk-detail-main .product-picture,
body.cl-details .sk-detail-main .pictureBox {
    max-width: 300px !important;
}

body.cl-details .sk-detail-main .tobasket-function {
    max-width: 268px !important;
}

body.cl-details .sk-detail-main .btn-primary,
body.cl-details .sk-detail-main .btn-highlight,
body.cl-details .sk-detail-main #toBasket {
    border: 0 !important;
    border-radius: 3px !important;
    background: var(--sk-blue) !important;
    color: #fff !important;
}

/* -------------------------------------------------------------------------
   Basket and checkout
   ------------------------------------------------------------------------- */
body.cl-basket main.content,
body.cl-user.is-checkout main.content,
body.cl-payment main.content,
body.cl-order main.content,
body.cl-thankyou main.content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.cl-basket .sk-basket-page,
body.cl-user.is-checkout .sk-checkout-user-page,
body.cl-payment main.content > .container-md,
body.cl-order main.content > .container-md,
body.cl-thankyou main.content > .container-md {
    width: var(--sk-page-width) !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 auto !important;
    padding: 24px 0 42px !important;
}

.sk-checkout-steps {
    width: 100% !important;
    max-width: 724px !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
    list-style: none !important;
}

.sk-checkout-steps li {
    min-height: 27px !important;
    margin: 0 0 5px !important;
    color: var(--sk-blue) !important;
    font-size: 14px !important;
    line-height: 23px !important;
}

.sk-checkout-steps li span {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
    border-radius: 50% !important;
    background: var(--sk-blue) !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 20px !important;
    text-align: center !important;
}

.sk-checkout-steps li.active span {
    background: var(--sk-red) !important;
}

.sk-checkout-login-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 724px !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.sk-checkout-login-options > .card {
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sk-checkout-login-options .card-header {
    min-height: 36px !important;
    padding: 7px 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--sk-blue) !important;
    font-size: 17px !important;
    line-height: 22px !important;
}

.sk-checkout-login-options .card-body {
    padding: 0 8px !important;
    color: var(--sk-blue) !important;
    font-size: 14px !important;
    line-height: 19px !important;
}

.sk-checkout-login-options .btn,
.sk-checkout-user-page .btn,
.sk-basket-page .btn,
body.cl-payment main.content .btn,
body.cl-order main.content .btn {
    min-height: 31px !important;
    padding: 5px 10px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: var(--sk-blue) !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 21px !important;
    box-shadow: none !important;
}

.sk-checkout-user-form {
    position: relative !important;
    width: 724px !important;
    max-width: 100% !important;
}

.sk-checkout-user-form > h1 {
    margin: 0 0 20px !important;
    color: var(--sk-red) !important;
    font-size: 26px !important;
    line-height: 32px !important;
    font-weight: 300 !important;
}

.sk-checkout-next-top {
    position: static !important;
    float: right !important;
    margin: -50px 0 18px !important;
}

.sk-checkout-next-bottom {
    margin: 24px 0 0 !important;
    padding: 0 !important;
    text-align: right !important;
}

body.cl-user.is-checkout #user_form,
body.cl-user.is-checkout form[name="order"] {
    width: 724px !important;
    max-width: 100% !important;
}

body.cl-user.is-checkout #user_form .row,
body.cl-user.is-checkout form[name="order"] .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body.cl-user.is-checkout #user_form .row > *,
body.cl-user.is-checkout form[name="order"] .row > * {
    padding-right: 5px !important;
    padding-left: 5px !important;
}

body.cl-basket .sk-basket-table {
    width: 100% !important;
    color: var(--sk-blue) !important;
    font-size: 13px !important;
}

body.cl-basket .sk-basket-table th {
    padding: 7px 6px !important;
    border: 0 !important;
    background: #f0f0f0 !important;
    color: var(--sk-blue) !important;
}

body.cl-basket .sk-basket-table td {
    padding: 8px 6px !important;
    border-color: var(--sk-pale) !important;
    vertical-align: top !important;
}

body.cl-basket .sk-basket-table .sk-basket-image img {
    width: 100px !important;
    height: 100px !important;
    object-fit: contain !important;
}

body.cl-basket .sk-basket-table input[type="text"] {
    width: 44px !important;
    min-height: 27px !important;
    padding: 3px !important;
    border: 1px solid var(--sk-blue) !important;
    border-radius: 2px !important;
}

body.cl-basket .sk-basket-totals {
    width: 430px !important;
    max-width: 100% !important;
    margin: 18px 0 22px auto !important;
    color: var(--sk-blue) !important;
}

body.cl-basket .sk-basket-totals > div {
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 3px 0 !important;
    border-bottom: 1px solid var(--sk-pale) !important;
}

body.cl-basket .sk-basket-bottom {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 30px !important;
}

/* Payment/order pages inherit large Bootstrap widths. Keep them in the old
   1024px canvas and remove the excessive 1320px centering. */
body.cl-payment main.content .container-md,
body.cl-order main.content .container-md,
body.cl-thankyou main.content .container-md {
    width: var(--sk-page-width) !important;
}

body.cl-payment main.content .col-xxl-6,
body.cl-order main.content .col-xxl-6,
body.cl-thankyou main.content .col-xxl-6 {
    width: 100% !important;
    max-width: 100% !important;
}

/* -------------------------------------------------------------------------
   Legacy footer
   ------------------------------------------------------------------------- */
footer.sk-legacy-footer {
    display: block !important;
    width: 100% !important;
    min-height: 245px !important;
    margin: 0 !important;
    padding: 26px 0 !important;
    border-top: 3px solid var(--sk-blue) !important;
    background: var(--sk-light) !important;
    color: var(--sk-blue) !important;
    float: none !important;
    clear: both !important;
}

footer.sk-legacy-footer .fooInner {
    display: grid !important;
    grid-template-columns: 130px 130px 180px 277px !important;
    grid-template-rows: auto auto !important;
    justify-content: space-between !important;
    align-items: start !important;
    column-gap: 28px !important;
    row-gap: 8px !important;
    width: var(--sk-page-width) !important;
    max-width: calc(100% - 20px) !important;
    min-height: 190px !important;
    margin: 0 auto !important;
}

footer.sk-legacy-footer .fooInner > ul {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    list-style: none !important;
}

footer.sk-legacy-footer .fooInner > ul:nth-of-type(1) { grid-column: 1; grid-row: 1 / span 2; }
footer.sk-legacy-footer .fooInner > ul:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; }
footer.sk-legacy-footer .fooInner > ul:nth-of-type(3) { grid-column: 3; grid-row: 1 / span 2; }

footer.sk-legacy-footer li {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--sk-blue) !important;
    font-size: 15px !important;
    line-height: 21px !important;
    list-style: none !important;
}

footer.sk-legacy-footer li:first-child {
    font-weight: 400 !important;
}

footer.sk-legacy-footer a {
    color: var(--sk-blue) !important;
    text-decoration: none !important;
}

footer.sk-legacy-footer a:hover {
    color: var(--sk-red) !important;
}

footer.sk-legacy-footer .sk-footer-withdrawal {
    margin-top: 5px !important;
}

footer.sk-legacy-footer .sk-footer-withdrawal .btn {
    display: inline-block !important;
    width: auto !important;
    min-height: 28px !important;
    padding: 3px 8px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: var(--sk-blue) !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 22px !important;
}

footer.sk-legacy-footer .help {
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: 277px !important;
    margin: 0 !important;
    padding: 16px !important;
    border: 1px solid #fff !important;
    border-radius: 2px !important;
    color: var(--sk-blue) !important;
    float: none !important;
}

footer.sk-legacy-footer .help p {
    margin: 0 0 5px !important;
    color: var(--sk-blue) !important;
    font-size: 15px !important;
    line-height: 20px !important;
    float: none !important;
}

footer.sk-legacy-footer .help small {
    color: var(--sk-blue) !important;
    font-size: 12px !important;
    line-height: 17px !important;
}

footer.sk-legacy-footer .logo-bottom {
    grid-column: 4 !important;
    grid-row: 2 !important;
    width: 277px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

footer.sk-legacy-footer .logo-bottom > a:first-child img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
}

footer.sk-legacy-footer .logo-bottom .fb-bottom {
    width: 16% !important;
    height: auto !important;
    margin: 12px 0 0 !important;
    float: right !important;
}

footer.sk-legacy-footer .logo-bottom p {
    margin: 12px 54px 0 0 !important;
    color: var(--sk-blue) !important;
    font-size: 15px !important;
    line-height: 20px !important;
    float: none !important;
    clear: both !important;
}

/* Cookie note: legacy shop uses a thin full-width strip, not a modal card. */
#cookieNote {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 10050 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#cookieNote .sk-cookie-note,
#cookieNote .alert {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px 64px 7px max(10px, calc((100% - 1024px) / 2)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #333 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    box-shadow: none !important;
}

#cookieNoteCloseButton {
    position: absolute !important;
    top: 6px !important;
    right: max(10px, calc((100% - 1024px) / 2)) !important;
    width: 38px !important;
    height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sk-blue) !important;
    color: #fff !important;
    opacity: 1 !important;
}

#cookieNoteCloseButton::before {
    content: "Ok" !important;
    display: block !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 24px !important;
    text-align: center !important;
}

#cookieNoteCloseButton::after {
    display: none !important;
}

/* -------------------------------------------------------------------------
   Responsive parity
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .wrapper,
    main.content,
    .content,
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .sk-frontpage {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .sk-list-header,
    .sk-content-header,
    .sk-detail-header,
    .sk-account-hero,
    .sk-checkout-hero {
        display: none !important;
        height: 0 !important;
    }

    .sk-list-body,
    .sk-content-body,
    .sk-detail-body,
    .sk-account-shell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 58px 10px 34px !important;
    }

    .side-menu-complete.sk-side-menu {
        display: none !important;
    }

    .sk-product-list-panel,
    .sk-content-main,
    .sk-detail-main,
    .sk-account-main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    .sk-user-meta {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        margin-bottom: 8px !important;
    }

    /* Start page: prevent the 166px shrink seen in the audit. */
    body.cl-start main.content,
    body.cl-start .sk-frontpage,
    body.cl-start .welcome-top,
    body.cl-start .hello,
    body.cl-start .teaser-top,
    body.cl-start .all-tiles,
    body.cl-start .roros,
    body.cl-start .cloud-text,
    body.cl-start .brands,
    body.cl-start .all-brands {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        float: none !important;
        clear: both !important;
    }

    body.cl-start main.content,
    body.cl-start .sk-frontpage {
        padding: 58px 10px 0 !important;
        overflow: visible !important;
    }

    body.cl-start .welcome-top {
        margin: 0 0 42px !important;
    }

    body.cl-start .hello {
        margin: 0 0 20px !important;
    }

    body.cl-start .hello p {
        font-size: 16px !important;
        line-height: 20px !important;
        float: none !important;
    }

    body.cl-start .teaser-top {
        width: 260px !important;
        max-width: 100% !important;
        height: 300px !important;
        margin: 0 auto !important;
    }

    body.cl-start .teaser-top img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    body.cl-start .all-tiles {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 0 !important;
    }

    body.cl-start .all-tiles .tile,
    body.cl-start .all-tiles .last-tile {
        width: 260px !important;
        max-width: 100% !important;
        height: 300px !important;
        margin: 0 auto 46px !important;
        float: none !important;
    }

    body.cl-start .roros {
        margin: 6px 0 34px !important;
    }

    body.cl-start .cloud-text {
        padding: 0 !important;
    }

    body.cl-start .brands {
        margin: 0 0 26px !important;
    }

    body.cl-start .brands .all-brands a {
        display: block !important;
        width: 100% !important;
        margin: 0 0 20px !important;
        text-align: center !important;
    }

    body.cl-start .brands .all-brands img {
        display: inline-block !important;
        width: auto !important;
        max-width: 190px !important;
        height: auto !important;
        margin: 0 auto !important;
        float: none !important;
    }

    /* Category/product/CMS */
    .sk-list-intro h1,
    .sk-content-main h1,
    .sk-detail-main h1 {
        margin-top: 0 !important;
    }

    .sk-product-list-panel .card.mb-1 {
        min-height: 0 !important;
    }

    .sk-product-list-panel .card.mb-1 > .row {
        display: grid !important;
        grid-template-columns: 100px minmax(0, 1fr) !important;
        min-height: 102px !important;
    }

    .sk-product-list-panel .card.mb-1 > .row > div:first-child {
        width: 100px !important;
    }

    .sk-product-list-panel .card.mb-1 > .row > div:nth-child(2) {
        width: auto !important;
    }

    .sk-product-list-panel .card-body > .row {
        display: block !important;
    }

    .sk-product-list-panel .sk-line-functions {
        width: 100% !important;
        margin-top: 6px !important;
    }

    .sk-product-list-panel .functions {
        text-align: left !important;
    }

    .sk-manufacturer-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Pia: two 125px cards on 320-414px devices. */
    .sk-pia-inner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 58px 10px 34px !important;
    }

    .sk-pia-page .ext_cards {
        margin-bottom: 22px !important;
    }

    .sk-pia-cards {
        justify-content: flex-start !important;
        gap: 36px calc((100% - 250px) / 1) !important;
    }

    .sk-pia-cards .card-item {
        flex-basis: 125px !important;
    }

    /* Account forms */
    .sk-account-main .left,
    .sk-account-main .right {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }

    .sk-account-main .with-inputs,
    .sk-account-main .with-inputs form,
    .sk-account-main form.max-600 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px 0 !important;
    }

    .sk-account-main .with-inputs label,
    .sk-account-main form.max-600 label,
    .sk-account-main .form-floating > label {
        width: 100% !important;
        margin: 0 0 4px !important;
        padding: 0 !important;
        float: none !important;
    }

    .sk-account-main .with-inputs input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .sk-account-main .with-inputs select,
    .sk-account-main .with-inputs textarea,
    .sk-account-main form.max-600 input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .sk-account-main form.max-600 select,
    .sk-account-main form.max-600 textarea {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        float: none !important;
    }

    .sk-account-main .with-inputs .mb-3,
    .sk-account-main .with-inputs .form-floating,
    .sk-account-main form.max-600 .mb-3,
    .sk-account-main form.max-600 .form-floating {
        min-height: 0 !important;
    }

    .sk-account-main .with-inputs button,
    .sk-account-main .with-inputs .is-submit {
        width: 100% !important;
        margin: 6px 0 12px !important;
    }

    /* Checkout */
    body.cl-basket .sk-basket-page,
    body.cl-user.is-checkout .sk-checkout-user-page,
    body.cl-payment main.content > .container-md,
    body.cl-order main.content > .container-md,
    body.cl-thankyou main.content > .container-md {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 58px 10px 34px !important;
    }

    .sk-checkout-login-options {
        display: block !important;
        width: 100% !important;
    }

    .sk-checkout-login-options > .card {
        margin-bottom: 20px !important;
    }

    .sk-checkout-user-form,
    body.cl-user.is-checkout #user_form,
    body.cl-user.is-checkout form[name="order"] {
        width: 100% !important;
    }

    .sk-checkout-next-top {
        margin: 0 0 18px !important;
        float: none !important;
        text-align: right !important;
    }

    body.cl-basket .sk-basket-table {
        min-width: 680px !important;
    }

    body.cl-basket .sk-basket-table-wrap,
    body.cl-basket .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
    }

    body.cl-basket .sk-basket-bottom {
        display: block !important;
    }

    body.cl-basket .sk-basket-next {
        margin-top: 22px !important;
        text-align: right !important;
    }

    /* Legacy footer mobile */
    footer.sk-legacy-footer {
        min-height: 0 !important;
        padding: 26px 10px !important;
        text-align: center !important;
    }

    footer.sk-legacy-footer .fooInner {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    footer.sk-legacy-footer .fooInner > ul {
        display: block !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        text-align: center !important;
    }

    footer.sk-legacy-footer li {
        font-size: 14px !important;
        line-height: 21px !important;
    }

    footer.sk-legacy-footer .sk-footer-withdrawal .btn {
        display: block !important;
        width: 100% !important;
        max-width: 270px !important;
        margin: 5px auto 0 !important;
    }

    footer.sk-legacy-footer .help {
        display: block !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 20px auto 14px !important;
        padding: 12px !important;
        text-align: center !important;
    }

    footer.sk-legacy-footer .logo-bottom {
        display: block !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        text-align: left !important;
    }

    footer.sk-legacy-footer .logo-bottom > a:first-child img {
        width: 100% !important;
        max-width: 100% !important;
    }

    footer.sk-legacy-footer .logo-bottom .fb-bottom {
        width: 16% !important;
        height: auto !important;
    }

    footer.sk-legacy-footer .logo-bottom p {
        margin-right: 58px !important;
        font-size: 14px !important;
    }

    #cookieNote .sk-cookie-note,
    #cookieNote .alert {
        padding: 5px 48px 5px 3px !important;
        font-size: 9px !important;
        line-height: 11px !important;
    }

    #cookieNoteCloseButton {
        top: 4px !important;
        right: 3px !important;
        width: 34px !important;
        height: 22px !important;
    }
}

@media only screen and (max-width: 640px) {
    .sk-product-list-panel .attributes {
        display: none !important;
    }

    .sk-manufacturer-overview {
        grid-template-columns: 1fr !important;
    }

    .sk-pia-cards {
        justify-content: space-between !important;
        gap: 36px 0 !important;
    }

    .sk-account-main section.story .btn {
        width: 100% !important;
    }

    body.cl-basket .sk-basket-table .sk-basket-image {
        display: none !important;
    }
}

@media only screen and (max-width: 319px) {
    .sk-pia-cards {
        justify-content: center !important;
    }
}

/* =========================================================================
   Robbie parity hardening 2026-07-16
   These rules deliberately sit at EOF so Bootstrap/Apex compatibility rules
   cannot re-introduce the large layout differences from audit FINAL 9.1.
   ========================================================================= */

/* Every checkout state uses the same 2000 x 260 shop banner as the live shop. */
.sk-checkout-hero {
    background-color: #fff !important;
    background-image: url("../img/header-shop.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 2000px 260px !important;
}

body.cl-basket .sk-basket-page,
body.cl-user.is-checkout .sk-checkout-user-page,
body.cl-payment .sk-checkout-payment-page,
body.cl-order .sk-checkout-order-page,
body.cl-thankyou .sk-checkout-thankyou-page {
    width: var(--sk-page-width) !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 auto !important;
    padding: 24px 0 42px !important;
}

body.cl-payment .sk-checkout-payment-page > .row,
body.cl-order .sk-checkout-order-page > .row {
    width: 100% !important;
    margin: 0 !important;
}

body.cl-payment .sk-checkout-payment-page > .row > *,
body.cl-order .sk-checkout-order-page > .row > * {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

body.cl-payment .sk-checkout-payment-page .row,
body.cl-order .sk-checkout-order-page .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body.cl-payment .sk-checkout-payment-page .row > *,
body.cl-order .sk-checkout-order-page .row > * {
    padding-right: 6px !important;
    padding-left: 6px !important;
}

body.cl-payment .sk-checkout-payment-page .card,
body.cl-order .sk-checkout-order-page .card {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.cl-payment .sk-checkout-payment-page .card-header,
body.cl-order .sk-checkout-order-page .card-header {
    padding: 6px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sk-pale) !important;
    background: transparent !important;
    color: var(--sk-blue) !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
}

body.cl-payment .sk-checkout-payment-page .card-body,
body.cl-order .sk-checkout-order-page .card-body {
    padding: 10px 0 18px !important;
    color: var(--sk-blue) !important;
}

/* Checkout step 1: old shop uses two columns, with account creation below the
   no-registration option. */
.sk-checkout-login-options {
    display: grid !important;
    grid-template-columns: 300px 400px !important;
    grid-template-areas:
        "noreg login"
        "register login" !important;
    gap: 44px 24px !important;
    align-items: start !important;
    width: 724px !important;
    max-width: 100% !important;
    margin: 48px 0 30px !important;
}

.sk-checkout-option {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--sk-blue) !important;
}

.sk-checkout-option--noreg { grid-area: noreg !important; }
.sk-checkout-option--login { grid-area: login !important; }
.sk-checkout-option--register { grid-area: register !important; }

.sk-checkout-option-number {
    display: block !important;
    margin: 0 0 10px !important;
    color: var(--sk-red) !important;
    font-size: 19px !important;
    line-height: 25px !important;
    font-weight: 400 !important;
}

.sk-checkout-option-body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--sk-blue) !important;
    font-size: 14px !important;
    line-height: 19px !important;
}

.sk-checkout-option-body h2 {
    margin: 0 0 2px !important;
    color: var(--sk-blue) !important;
    font-size: 16px !important;
    line-height: 21px !important;
    font-weight: 700 !important;
}

.sk-checkout-option-note,
.sk-checkout-option-body p {
    margin: 0 0 14px !important;
    color: var(--sk-blue) !important;
}

.sk-checkout-option label {
    display: block !important;
    margin: 0 0 3px !important;
    color: var(--sk-blue) !important;
    font-size: 13px !important;
    line-height: 17px !important;
    font-weight: 700 !important;
}

.sk-checkout-option input.user-reg-input {
    display: block !important;
    width: 400px !important;
    max-width: 100% !important;
    height: 32px !important;
    margin: 0 0 10px !important;
    padding: 4px !important;
    border: 1px solid var(--sk-pale) !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: var(--sk-blue) !important;
    font: inherit !important;
    box-shadow: none !important;
}

.sk-checkout-option-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;
    margin-top: 4px !important;
}

.sk-checkout-option-actions a {
    color: var(--sk-blue) !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.sk-checkout-option-actions a:hover {
    color: var(--sk-red) !important;
}

.sk-account-benefits {
    margin: 4px 0 18px !important;
    padding: 0 !important;
    list-style: none !important;
}

.sk-account-benefits li {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--sk-blue) !important;
    font-size: 13px !important;
    line-height: 18px !important;
}

.sk-account-benefits li::before {
    content: "- " !important;
}

/* Contact page: restore the compact label/input rows of the reference theme. */
.sk-contact-main h2 {
    margin: 20px 0 8px !important;
    color: var(--sk-blue) !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
}

.sk-contact-address,
.sk-contact-address address {
    color: var(--sk-blue) !important;
    font-size: 15px !important;
    line-height: 20px !important;
    font-style: normal !important;
}

.sk-contact-form form {
    width: 100% !important;
    max-width: 724px !important;
    margin: 16px 0 0 !important;
}

.sk-contact-form .form-floating,
.sk-contact-form .mb-3 {
    display: grid !important;
    grid-template-columns: 190px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 0 10px !important;
}

.sk-contact-form .form-floating > label,
.sk-contact-form label {
    position: static !important;
    grid-column: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    color: var(--sk-blue) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    opacity: 1 !important;
    transform: none !important;
}

.sk-contact-form input.form-control,
.sk-contact-form select,
.sk-contact-form textarea.form-control {
    position: static !important;
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    border: 1px solid var(--sk-blue) !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: var(--sk-blue) !important;
    font-size: 14px !important;
    line-height: 22px !important;
    box-shadow: none !important;
}

.sk-contact-form textarea.form-control {
    height: 140px !important;
    min-height: 140px !important;
    resize: vertical !important;
}

.sk-contact-form form > .mb-3:last-child {
    display: block !important;
    margin-top: 16px !important;
    text-align: right !important;
}

.sk-contact-form .req-warning {
    margin: 0 0 8px !important;
    color: var(--sk-blue) !important;
    font-size: 12px !important;
    text-align: left !important;
}

.sk-contact-form .btn {
    min-height: 31px !important;
    padding: 5px 14px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: var(--sk-blue) !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 21px !important;
    box-shadow: none !important;
}

/* Keep the proven 724px product-detail grid from twig-bridge intact after all
   generic container resets. */
@media (min-width: 1025px) {
    body.cl-details #details_container .sk-detail-main .container-xxl,
    body.cl-details .details-top .container-xxl,
    body.cl-details .details-more .container-xxl,
    body.cl-details .details-related .container-xxl {
        width: 724px !important;
        max-width: 724px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.cl-details .details-top .row {
        display: grid !important;
        grid-template-columns: 362px 334px !important;
        gap: 0 28px !important;
        width: 724px !important;
        margin: 0 !important;
    }

    body.cl-details .details-top .col-12:first-child,
    body.cl-details .details-top .col-lg-8,
    body.cl-details .details-top .col-xl-9 {
        width: 362px !important;
        max-width: 362px !important;
        padding: 0 !important;
    }

    body.cl-details .details-top .col-12:nth-child(2),
    body.cl-details .details-top .col-lg-4,
    body.cl-details .details-top .col-xl-3 {
        width: 334px !important;
        max-width: 334px !important;
        padding: 0 !important;
    }
}

/* Footer follows the original float geometry rather than Bootstrap columns. */
@media (min-width: 1025px) {
    footer.sk-legacy-footer .fooInner {
        display: block !important;
        width: 1024px !important;
        max-width: 1024px !important;
        min-height: 190px !important;
        margin: 0 auto !important;
    }

    footer.sk-legacy-footer .fooInner::after {
        display: table !important;
        clear: both !important;
        content: "" !important;
    }

    footer.sk-legacy-footer .fooInner > ul {
        display: block !important;
        width: auto !important;
        margin: 0 100px 0 0 !important;
        float: left !important;
    }

    footer.sk-legacy-footer .fooInner > ul:nth-of-type(3) {
        margin-right: 0 !important;
    }

    footer.sk-legacy-footer .help {
        display: block !important;
        width: 277px !important;
        margin: 0 !important;
        float: right !important;
    }

    footer.sk-legacy-footer .logo-bottom {
        display: block !important;
        width: 277px !important;
        margin: 8px 0 0 !important;
        float: right !important;
        clear: right !important;
    }
}

@media (max-width: 1024px) {
    .sk-checkout-hero {
        display: none !important;
        height: 0 !important;
        background-image: none !important;
    }

    body.cl-basket .sk-basket-page,
    body.cl-user.is-checkout .sk-checkout-user-page,
    body.cl-payment .sk-checkout-payment-page,
    body.cl-order .sk-checkout-order-page,
    body.cl-thankyou .sk-checkout-thankyou-page {
        width: 100% !important;
        max-width: 100% !important;
        padding: 26px 10px 40px !important;
    }

    .sk-checkout-login-options {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "noreg"
            "login"
            "register" !important;
        gap: 34px !important;
        width: 100% !important;
        margin: 24px 0 !important;
    }

    .sk-checkout-option input.user-reg-input {
        width: 100% !important;
    }

    .sk-contact-form .form-floating,
    .sk-contact-form .mb-3 {
        display: block !important;
    }

    .sk-contact-form .form-floating > label,
    .sk-contact-form label,
    .sk-contact-form input.form-control,
    .sk-contact-form select,
    .sk-contact-form textarea.form-control {
        display: block !important;
        width: 100% !important;
        margin: 0 0 4px !important;
    }

    footer.sk-legacy-footer li {
        margin-bottom: 8px !important;
    }

    footer.sk-legacy-footer .logo-bottom {
        width: 277px !important;
        max-width: calc(100% - 20px) !important;
    }
}

@media (max-width: 767px) {
    body.cl-details #details_container .sk-detail-main .container-xxl,
    body.cl-details .details-top .container-xxl,
    body.cl-details .details-more .container-xxl,
    body.cl-details .details-related .container-xxl,
    body.cl-details .details-top .row,
    body.cl-details .details-top .col-12:first-child,
    body.cl-details .details-top .col-lg-8,
    body.cl-details .details-top .col-xl-9,
    body.cl-details .details-top .col-12:nth-child(2),
    body.cl-details .details-top .col-lg-4,
    body.cl-details .details-top .col-xl-3 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.cl-details .details-top .row {
        display: block !important;
    }
}

/* Checkout address forms: turn Apex floating/column forms back into the
   compact legacy label/value rows used by the reference shop. */
body.cl-user.is-checkout .sk-checkout-user-form {
    width: 724px !important;
    max-width: 100% !important;
}

body.cl-user.is-checkout #user_form,
body.cl-user.is-checkout form[name="order"] {
    width: 610px !important;
    max-width: 100% !important;
    color: var(--sk-blue) !important;
}

body.cl-user.is-checkout #user_form h2,
body.cl-user.is-checkout form[name="order"] h2 {
    margin: 20px 0 8px !important;
    color: var(--sk-blue) !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
}

body.cl-user.is-checkout #user_form .row,
body.cl-user.is-checkout form[name="order"] .row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

body.cl-user.is-checkout #user_form .row > [class*="col"],
body.cl-user.is-checkout form[name="order"] .row > [class*="col"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.cl-user.is-checkout #user_form .form-floating,
body.cl-user.is-checkout form[name="order"] .form-floating {
    display: grid !important;
    grid-template-columns: 100px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 32px !important;
    margin: 0 0 7px !important;
}

body.cl-user.is-checkout #user_form .form-floating > label,
body.cl-user.is-checkout form[name="order"] .form-floating > label {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    overflow: visible !important;
    color: var(--sk-blue) !important;
    font-size: 13px !important;
    line-height: 18px !important;
    white-space: normal !important;
    opacity: 1 !important;
    transform: none !important;
}

body.cl-user.is-checkout #user_form .form-floating > .form-control,
body.cl-user.is-checkout #user_form .form-floating > .form-select,
body.cl-user.is-checkout form[name="order"] .form-floating > .form-control,
body.cl-user.is-checkout form[name="order"] .form-floating > .form-select {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    border: 1px solid var(--sk-blue) !important;
    border-radius: 2px !important;
    background: #fff !important;
    color: var(--sk-blue) !important;
    font-size: 13px !important;
    line-height: 23px !important;
    box-shadow: none !important;
}

body.cl-user.is-checkout #user_form .form-floating > textarea.form-control,
body.cl-user.is-checkout form[name="order"] .form-floating > textarea.form-control {
    height: 150px !important;
    min-height: 150px !important;
    line-height: 18px !important;
}

body.cl-user.is-checkout #user_form > .mb-3,
body.cl-user.is-checkout form[name="order"] > .mb-3 {
    width: 100% !important;
    margin: 0 0 7px !important;
}

body.cl-user.is-checkout #user_form .form-check,
body.cl-user.is-checkout form[name="order"] .form-check {
    min-height: 28px !important;
    margin: 12px 0 !important;
    padding-left: 0 !important;
}

body.cl-user.is-checkout #user_form .form-check-input,
body.cl-user.is-checkout form[name="order"] .form-check-input {
    width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    margin: 3px 7px 0 0 !important;
    padding: 0 !important;
    float: left !important;
}

body.cl-user.is-checkout #user_form .form-check-label,
body.cl-user.is-checkout form[name="order"] .form-check-label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--sk-blue) !important;
    font-size: 13px !important;
    line-height: 20px !important;
}

body.cl-user.is-checkout #user_form .req-warning,
body.cl-user.is-checkout form[name="order"] .req-warning {
    margin: 8px 0 !important;
    color: var(--sk-red) !important;
    font-size: 12px !important;
    line-height: 17px !important;
}

body.cl-user.is-checkout .sk-checkout-next-top {
    position: static !important;
    width: auto !important;
    margin: -48px 0 20px !important;
    float: right !important;
}

body.cl-user.is-checkout .sk-checkout-next-bottom {
    width: 610px !important;
    max-width: 100% !important;
    margin: 30px 0 0 !important;
    padding: 0 !important;
    text-align: right !important;
}

@media (max-width: 1024px) {
    body.cl-user.is-checkout #user_form,
    body.cl-user.is-checkout form[name="order"] {
        width: 100% !important;
    }

    body.cl-user.is-checkout #user_form .form-floating,
    body.cl-user.is-checkout form[name="order"] .form-floating {
        grid-template-columns: 88px minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    body.cl-user.is-checkout .sk-checkout-next-top {
        width: 100% !important;
        margin: 12px 0 18px !important;
        float: none !important;
        text-align: left !important;
    }

    body.cl-user.is-checkout .sk-checkout-next-bottom {
        width: 100% !important;
        text-align: left !important;
    }

    body.cl-user.is-checkout .sk-checkout-next .btn {
        width: auto !important;
        max-width: 100% !important;
    }
}