@import url(https://fonts.googleapis.com/css2?family=Spicy+Rice&display=swap);

:root {
    --font-display: "Spicy Rice", serif;
    --font-text: Arial, Helvetica, sans-serif;
}

/* Butikens startsida */
.store-home { color: #071a31; }
.store-home-shell { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.store-home-hero { min-height: 520px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 4rem 0; background: linear-gradient(90deg, rgba(3, 25, 45, .92), rgba(3, 25, 45, .38)), url('../images/Ny_Kälke_1.png') center/cover no-repeat; }
.store-home-hero-content { box-sizing: border-box; width: 100%; min-width: 0; max-width: 720px; color: #fff; }
.store-home-kicker { margin: 0 0 .6rem; color: #ed713f; font-family: var(--font-display) !important; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.store-home h1, .store-home h2, .store-home h3 { font-family: var(--font-display) !important; line-height: 1.13; }
.store-home h1 { max-width: 18ch; margin: 0 0 1rem; font-size: clamp(2.7rem, 5vw, 4.8rem); color: #fff; }
.store-home h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 3rem); color: #082247; }
.store-home h3 { margin: .85rem 0 .55rem; font-size: 1.65rem; color: #082247; }
.store-home p { font-size: 1.08rem; line-height: 1.65; }
.store-home-hero p { max-width: 65ch; margin: 0 0 1rem; }
.store-home-lead { font-size: clamp(1.18rem, 2vw, 1.45rem) !important; font-weight: 700; line-height: 1.45 !important; }
.store-home-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }
.store-home-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .65rem 1.1rem; border: 2px solid #ed713f; border-radius: .55rem; background: #ed713f; color: #fff; font-family: var(--font-display) !important; font-size: 1.05rem; text-decoration: none; }
.store-home-button:hover { background: #c85229; border-color: #c85229; }
.store-home-button-secondary { border-color: #fff; background: transparent; }
.store-home-button-secondary:hover { background: #fff; color: #082247; }
.store-home-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: center; padding: 5rem 0; }
.store-home-intro { color: #fff; }
.store-home-intro h2 { color: #fff; }
.store-home-intro p:last-child { margin: 0; font-size: 1.18rem; }
.store-home-options { padding: 4.5rem 0; background: rgba(225, 241, 252, .94); }
.store-home-options > .store-home-shell > h2 { margin-bottom: 2rem; }
.store-home-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 1.15rem; }
.store-home-card { display: flex; min-height: 250px; flex-direction: column; padding: 1.5rem; border: 3px outset #386db3; border-radius: 1rem; background: rgba(255, 255, 255, .96); box-shadow: 0 .75rem 1.6rem rgba(3, 25, 45, .12); }
.store-home-builder-card { background: rgba(255, 255, 255, .96); }
.store-home-card-number { color: #ed713f; font-family: var(--font-display) !important; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.store-home-card p { margin: 0 0 1.3rem; font-size: 1rem; }
.store-home-card a, .store-home-text-link { margin-top: auto; color: #082247; font-family: var(--font-display) !important; font-size: 1.05rem; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.store-home-order-info { box-sizing: border-box; display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center; margin: 4.5rem auto; padding: 1.75rem; border: 3px outset #386db3; border-radius: 1rem; background: rgba(255, 255, 255, .9); }
.store-home-order-info h2 { font-size: 1.8rem; }
.store-home-order-info p { margin: .4rem 0 0; font-size: 1rem; }
.store-home-order-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 50%; background: #ed713f; color: #fff; font-size: 2rem; font-weight: 700; }
@media (max-width: 760px) {
    .store-home-shell { width: min(100% - 2rem, 1180px); }
    .store-home-hero { min-height: 570px; padding: 3.5rem 0; }
    .store-home-intro { grid-template-columns: 1fr; gap: 1rem; padding: 3.5rem 0; }
    .store-home-options { padding: 3.5rem 0; }
    .store-home h1 { font-size: clamp(2rem, 9vw, 2.7rem); overflow-wrap: anywhere; }
    .store-home-hero p { overflow-wrap: anywhere; }
    .store-home-card-grid { grid-template-columns: minmax(0, 1fr); }
    .store-home-card { box-sizing: border-box; min-width: 0; }
    .store-home-card h3,
    .store-home-card p,
    .store-home-card a { overflow-wrap: anywhere; }
    .store-home-order-info { grid-template-columns: auto minmax(0, 1fr); margin: 3rem auto; }
    .store-home-order-info > * { min-width: 0; }
    .store-home-order-info .store-home-text-link { grid-column: 1 / -1; margin-top: 0; }
}


/*---Allmäna inställningar ---------------------*/
*{
    font-family: var(--font-display);
    font-weight: 400;
    font-style: normal;
}

html, body {
    margin: 0;
}


/* -- Index --*/
.backround {
    background-image: url("../images/Ny_Kälke_1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.welcomeInfoIndex {
    background-color: rgba(0, 255, 255, 0.832);
    border-style: outset;
    border-radius: 1rem;
    margin: 2rem;
    padding: 1rem;
    font-size: 1rem;
}

/* -- Tilläg --*/

.info-box-new {
    border-style: outset;
    border-color: rgb(10, 76, 168);
    border-radius: 0.5rem;
    font-size: 75%;
    height: auto;
    text-align: center;
    background-color: rgba(240, 248, 255, 0.782);
    width: 19%;

    margin-left: 2%;
}

.info-box-new img {
    width: 90%;
    height: auto;
    border-radius: 5%;
    display: block;
    margin-inline: auto;
}

button, input, select, textarea { font-family: var(--font-display); }

.terms-page p, .admin-overview p, .stock-status, .order-terms-acceptance label,
.discount-summary, .discount-code-field, .discount-admin-form label,
.discount-code-list li, .order-registration-info, .saved-sledge-identifier,
.order-status-warning li, .order-customer-note p, .site-toast, .cookie-notice p {
    font-family: var(--font-text);
}

/* Kundens rabatt- och villkorsval är en del av köpupplevelsen och ska ha samma typografi som övriga formulär. */
.discount-summary, .discount-summary *, .discount-code-field, .discount-code-field *,
.order-terms-acceptance, .order-terms-acceptance * {
    font-family: var(--font-display);
}

/* Produktkort: åtgärdsknapparna ska alltid ligga på samma höjd. */
.info-box-new {
    display: flex;
    flex-direction: column;
}

.info-box-new > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 9.5rem;
}

.info-box-new > div > form:first-of-type {
    position: absolute;
    right: 12.5%;
    bottom: 4.75rem;
    margin: 0;
}

.info-box-new > div > form {
    width: 75%;
    margin-bottom: 0.65rem;
}

.info-box-new > div > br {
    display: none;
}

.info-box-new > div > form:nth-of-type(2) {
    position: absolute;
    right: 12.5%;
    bottom: 0;
    margin: 0;
}

.info-box-new .buy-details-button {
    width: 100%;
}

/* Samma knappplacering för kategorikort som saknar en inre innehållsbehållare. */
.info-box-new > form:first-of-type {
    width: 75%;
    align-self: center;
    margin-top: auto;
    margin-bottom: 0.65rem;
}

.info-box-new > form:nth-of-type(2) {
    width: 75%;
    align-self: center;
    margin: 0 0 1rem;
}

.info-box-new > br {
    display: none;
}

.builder-cta-card { box-sizing: border-box; }
.builder-cta-card p { line-height: 1.5; }
.builder-cta-card .buy-details-button {
    box-sizing: border-box;
    padding: 0.35rem 0.5rem;
    font-size: clamp(1.1rem, 1.7vw, 1.75rem);
    font-family: "Spicy Rice", serif;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
}

.product-text {
    white-space: pre-wrap;
}

.buy-details-button {
    font-size: 250%;
    width: 75%;
    border-radius: 2rem;
}

.buy-details-button:hover {
    cursor: pointer;
    background-color: ivory;
}

#sledDesk {
    font-size: large;
    width: 50rem;
    height: 25rem;
}
#sledDeskLabel{
    display: block;
    margin-bottom: 0.5rem;
}



/*----Orderform---*/

.orderdItems, .finalCost, .customerDetails {
    background-color: rgba(163, 196, 233);
}

.orderList h1 {
    margin-left: 3rem;
}


.orderdItems {
    border-style: outset;
    border-radius: 1rem;
    margin-top: 1rem;
    margin-right: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 2rem;
    gap: 1%;
}

.orderdItems img {
    width: 20%;
    margin-left: 2%;
    display: flex;
    align-items: center;
}

.deleteBtnSC{
    width: 80%;
    height: 2rem;
    border-style: double;
    border-radius: 1rem;
    background-color: red;
    display: flex;    
    margin: 1rem;
    align-items: end;

}

.orderdItems form:last-child{
    margin-left: auto;
}
.stock-status { margin: 0.3rem 0 0.7rem; font-family: sans-serif; font-weight: 700; color: #287a31; }
.stock-status.out-of-stock { color: #a21d1d; }
.buy-details-button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Varukorg: håll åtgärderna samlade på samma rad som produkten. */
.orderdItems {
    flex-wrap: nowrap;
    gap: 1.25rem;
}

.orderdItems .priceRow {
    flex: 1 1 auto;
    min-width: 0;
}

.orderdItems .cart-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.65rem;
    margin-left: auto;
}

.orderdItems .cart-actions form,
.orderdItems .cart-actions form:last-child {
    width: auto;
    margin: 0;
}

.orderdItems .cart-actions .editBtnSC,
.orderdItems .cart-actions .deleteBtnSC {
    width: auto;
    min-width: max-content;
    margin: 0;
    padding: 0.55rem 1rem;
    align-items: center;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .orderdItems { flex-wrap: wrap; }
    .orderdItems .cart-actions { width: 100%; margin-left: 0; }
}

.priceRow {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 1rem;
}

.btnAmount{
    cursor: pointer;
    background-color: rgba(0, 0, 255, 0.596);
    width: 50%;
    height: auto;
    border-radius: 40%;
    display: block;
    margin-right: 1.5rem;
    margin-left: 0.5rem;
    margin-top: 0.2rem;
    display: flex;
    flex-direction: column;
}

.btnAmount button:hover{
    background-color: rgba(0, 0, 255, 0.425);

}


label, #orderAmount{
    display: inline;
    margin-left: 1rem;
}

.totalPriceRow {
    display: flex;
    align-items: cemter;
    gap: 1rem;
    margin-left: 1rem;
}


.totalCost {
    display: inline;
    align-content: center;
    gap: 10%;
}

.totalCost p {
    margin: 5rem;
}

.deleteBtnSC:hover{
    cursor: pointer;
    background-color: rgba(255, 0, 0, 0.644);
}



/* Total kostnad*/

.finalCost {
    border-style: outset;
    border-radius: 1rem;
    margin: 2rem;
    padding: 2%;
    display: flex;
    align-items: center;
    flex-direction:row;
    gap: 1rem;
    flex-wrap: wrap;
}
.line-discount-total { display: flex; align-items: center; gap: 0.45rem; color: #0a4ca8; font-weight: 700; }
.line-discount-total p { margin: 0; }
.original-line-total { color: #5c6470; text-decoration: line-through; text-decoration-thickness: 0.12rem; }
.orderdItems:has(.line-discount-total) .totalPriceRow { gap: 0.35rem; }

.finalCost p {
    margin: 0;
    font-size: 1.5rem;
    white-space: nowrap;
}

.finalCostLabel {
    font-size: 2rem;
}

/*Beställarens uppgifter*/

.customerDetails{
    border-style: outset;
    border-radius: 1rem;
    margin-top: 1rem;
    margin: 2rem;
}

.customerDetailsForm .field {
    display: flex;
    align-items: center;
    gap: 5rem;
}

.customerDetailsForm .field label {
    min-width: 10rem;
    margin-top: 1rem;
}

.customerDetailsForm .field.delivery-choice {
    display: grid;
    grid-template-columns: minmax(16rem, 24rem) auto;
    justify-content: start;
    align-items: center;
    gap: 1rem;
}

.customerDetailsForm .field.delivery-choice label {
    min-width: 0;
    margin: 0;
}

.customerDetailsForm .field.delivery-choice input[type="radio"] {
    width: auto;
    min-height: 0;
    margin: 0;
}

.custInfo{
    padding: 1rem;
}

.customerDetails .actionBtn {
    margin-top: 2rem;
    margin-left: 2rem;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    border-radius: 1rem;
}

.actionBtn:hover{
    cursor: pointer;
    background-color: aliceblue;
}

/*Adminsida*/

body.adminForm  {
    background-image: none;
}

.adminForm {
    border-style: outset;
    border-radius: 1rem;
    margin: 2rem;
    padding: 2rem;
}

/* Adminpanelen samlar arbetsytorna och gör navigeringen tydligare. */
.admin-page {
    max-width: 92rem;
    margin: 0 auto 3rem;
    padding: 1.25rem;
}

.admin-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.8rem;
    background: rgba(163, 196, 233, 0.35);
}

.admin-overview h1,
.admin-overview p { margin: 0; }
.admin-overview p { margin-top: 0.35rem; font-family: sans-serif; }

.admin-quick-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.admin-quick-nav a {
    padding: 0.55rem 0.75rem;
    border: 1px solid rgb(10, 76, 168);
    border-radius: 0.45rem;
    color: inherit;
    background: rgba(240, 248, 255, 0.7);
    text-decoration: none;
    white-space: nowrap;
}
.admin-quick-nav a:hover { background: rgb(10, 76, 168); color: white; }

.admin-page .admin-panel {
    margin: 1rem 0;
    padding: 1.25rem;
    border: 1px solid rgba(10, 76, 168, 0.35);
    background: rgba(240, 248, 255, 0.32);
}

.admin-section > summary {
    display: flex;
    align-items: center;
    min-height: 2.8rem;
    padding: 0.25rem 0.35rem;
    border-radius: 0.45rem;
}
.admin-section > summary:hover { background: rgba(163, 196, 233, 0.25); }
.admin-section[open] > summary { margin-bottom: 1rem; border-bottom: 1px solid rgba(10, 76, 168, 0.22); }
.admin-category-row { margin: 0.55rem 0; padding: 0.65rem 0.8rem; border: 1px solid rgba(10, 76, 168, 0.25); border-radius: 0.45rem; background: rgba(240, 248, 255, 0.45); }
.admin-category-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
.admin-category-row > summary small { font-family: var(--font-text); color: #444; }
.admin-category-create {
    display: grid;
    grid-template-columns: minmax(13rem, 0.65fr) minmax(0, 1.35fr);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(10, 76, 168, 0.24);
    border-radius: 0.55rem;
    background: rgba(163, 196, 233, 0.16);
}
.admin-category-create h2 { margin: 0; }
.admin-category-create p { margin: 0.35rem 0 0; font-family: var(--font-text); line-height: 1.45; }
.admin-category-form { display: grid; gap: 0.75rem; }
.admin-category-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.7rem; }
.admin-category-form-grid label { display: grid; gap: 0.35rem; font-family: var(--font-text); font-weight: bold; }
.admin-category-form input[type="text"],
.admin-category-edit-form input[type="text"] { box-sizing: border-box; width: 100%; min-height: 2.4rem; padding: 0.45rem 0.55rem; border: 1px solid rgba(10, 76, 168, 0.4); border-radius: 0.35rem; font-family: var(--font-text); font-size: 1rem; }
.admin-category-properties { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; margin: 0; padding: 0.7rem 0.8rem; border: 1px solid rgba(10, 76, 168, 0.22); border-radius: 0.4rem; }
.admin-category-properties legend { font-family: var(--font-text); font-weight: bold; }
.admin-category-properties label { font-family: var(--font-text); white-space: nowrap; }
.admin-category-form > button { justify-self: start; padding: 0.5rem 0.8rem; }
.admin-category-list { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(10, 76, 168, 0.22); }
.admin-category-list > h2 { margin: 0 0 0.65rem; }
.admin-category-sort-list,
.admin-product-sort-list { display: grid; width: 100%; gap: 0.55rem; }
.admin-sort-hint { margin: 0.35rem 0 0.65rem; color: #4d5a68; font-family: var(--font-text); line-height: 1.45; }
.admin-sort-status { min-height: 1.25rem; margin: 0.35rem 0 0; font-family: var(--font-text); font-size: 0.92rem; line-height: 1.35; }
.admin-sort-status.is-saving { color: #4d5a68; }
.admin-sort-status.is-success { color: #287a31; }
.admin-sort-status.is-error { color: #8b1f1f; }
.admin-sort-handle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    min-height: 2rem;
    border: 1px dashed rgba(10, 76, 168, 0.5);
    border-radius: 0.35rem;
    color: rgb(10, 76, 168);
    cursor: grab;
    font-family: var(--font-text);
    font-size: 1.25rem;
    line-height: 1;
    touch-action: none;
    user-select: none;
}
.admin-sort-handle:active { cursor: grabbing; }
.admin-sort-handle:focus-visible { outline: 3px solid rgba(10, 76, 168, 0.55); outline-offset: 2px; }
.admin-category-row.is-dragging,
.admin-product-row.is-dragging { opacity: 0.45; border-style: dashed; }
.admin-category-sort-list.is-saving,
.admin-product-sort-list.is-saving { pointer-events: none; opacity: 0.7; }
.admin-category-row > summary { justify-content: flex-start; }
.admin-category-row > summary > span:not(.admin-sort-handle) { display: grid; gap: 0.15rem; margin-right: auto; }
.admin-category-edit-layout { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.admin-category-move-form { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; padding: 0.65rem 0.75rem; border-radius: 0.4rem; background: rgba(163, 196, 233, 0.16); }
.admin-category-move-form span { margin-right: 0.2rem; font-family: var(--font-text); font-weight: bold; }
.admin-category-move-form button { padding: 0.4rem 0.65rem; }
.admin-category-edit-form { display: grid; gap: 0.75rem; }
.admin-category-edit-form .admin-category-form-grid label { display: grid; gap: 0.35rem; font-family: var(--font-text); font-weight: bold; }
.admin-category-edit-form > button { justify-self: start; padding: 0.5rem 0.8rem; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.quick-stock-panel { scroll-margin-top: 1rem; }
.quick-stock-panel .admin-section > summary { justify-content: space-between; gap: 1rem; }
.quick-stock-panel .admin-section > summary > small { font-family: var(--font-text); font-weight: normal; color: #4d5a68; }
.quick-stock-intro { margin: 0 0 0.9rem; font-family: var(--font-text); line-height: 1.45; }
.admin-list-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; margin: 0 0 0.9rem; padding: 0.75rem; border: 1px solid rgba(10, 76, 168, 0.2); border-radius: 0.5rem; background: rgba(163, 196, 233, 0.12); }
.admin-list-filters label { display: grid; gap: 0.28rem; min-width: min(100%, 15rem); font-family: var(--font-text); font-weight: 700; }
.admin-list-filters input,
.admin-list-filters select { min-height: 2.35rem; padding: 0.35rem 0.55rem; border: 1px solid rgba(10, 76, 168, 0.4); border-radius: 0.35rem; font-family: var(--font-text); font-size: 1rem; }
.admin-list-filters--catalog { margin-top: 0.75rem; }
.admin-filter-result { margin: 0 0 0.15rem auto; color: #4d5a68; font-family: var(--font-text); font-size: 0.9rem; }
.quick-stock-list { display: grid; gap: 0.55rem; overflow: visible; }
.quick-stock-row {
    display: grid;
    grid-template-columns: auto minmax(13rem, 1fr) auto minmax(8.5rem, auto);
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(10, 76, 168, 0.24);
    border-radius: 0.5rem;
    background: rgba(163, 196, 233, 0.18);
}
.quick-stock-product { display: grid; gap: 0.15rem; min-width: 0; }
.quick-stock-product strong { overflow-wrap: anywhere; }
.quick-stock-product small { font-family: var(--font-text); color: #4d5a68; }
.quick-stock-info { position: relative; z-index: 1; }
.quick-stock-info[open] { z-index: 100; }
.quick-stock-row:has(.quick-stock-info[open]) { position: relative; z-index: 101; }
.quick-stock-info summary { display: block; cursor: pointer; list-style: none; }
.quick-stock-info summary::-webkit-details-marker { display: none; }
.quick-stock-thumb, .quick-stock-info-icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 1px solid rgba(10, 76, 168, 0.3); border-radius: 0.4rem; background: #fff; }
.quick-stock-thumb { object-fit: contain; }
.quick-stock-info-icon { color: #0a4ca8; font-family: var(--font-text); font-size: 1.25rem; font-weight: 700; }
.quick-stock-info summary:hover .quick-stock-thumb, .quick-stock-info summary:hover .quick-stock-info-icon { border-color: #0a4ca8; box-shadow: 0 0 0 2px rgba(10, 76, 168, 0.14); }
.quick-stock-popover { position: absolute; top: calc(100% + 0.45rem); left: 0; z-index: 102; display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.55rem; width: min(24rem, 75vw); padding: 0.7rem; border: 1px solid rgba(10, 76, 168, 0.35); border-radius: 0.45rem; background: #fff; box-shadow: 0 0.5rem 1.25rem rgba(3, 25, 45, 0.2); font-family: var(--font-text); }
.quick-stock-popover img { width: 5rem; height: 5rem; object-fit: contain; border-radius: 0.3rem; background: #f5f8fd; }
.quick-stock-popover p { grid-column: 1 / -1; margin: 0; font-size: 0.88rem; line-height: 1.4; }
.quick-stock-popover img + p { grid-column: 2; }
.quick-stock-popover p:last-child:not(:first-child) { grid-column: 1 / -1; }
.quick-stock-controls { display: flex; align-items: center; gap: 0.4rem; }
.quick-stock-controls input {
    box-sizing: border-box;
    width: 4.8rem;
    min-height: 2.35rem;
    padding: 0.35rem;
    border: 1px solid rgba(10, 76, 168, 0.48);
    border-radius: 0.35rem;
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}
.quick-stock-adjust,
.quick-stock-save {
    min-height: 2.35rem;
    border: 1px solid rgb(10, 76, 168);
    border-radius: 0.35rem;
    font-family: var(--font-text);
    cursor: pointer;
}
.quick-stock-adjust { min-width: 2.35rem; padding: 0.2rem 0.55rem; font-size: 1.3rem; line-height: 1; }
.quick-stock-save { padding: 0.35rem 0.7rem; }
.quick-stock-adjust:hover,
.quick-stock-save:hover { background: rgb(10, 76, 168); color: white; }
.quick-stock-status { font-family: var(--font-text); font-size: 0.95rem; font-weight: bold; color: #176526; text-align: right; }
.quick-stock-status.is-untracked { color: #6a4d16; font-weight: normal; }
.quick-stock-status.is-error { color: #a21d1d; }
.quick-stock-row--readonly { grid-template-columns: auto minmax(13rem, 1fr) auto; }
.quick-stock-row--readonly .quick-stock-status { text-align: right; }

@media (max-width: 48rem) {
    .quick-stock-panel .admin-section > summary { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
    .admin-list-filters { align-items: stretch; }
    .admin-list-filters label { width: 100%; }
    .admin-filter-result { width: 100%; margin-left: 0; }
    .quick-stock-row { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
    .quick-stock-controls { justify-content: flex-start; flex-wrap: wrap; }
    .quick-stock-status,
    .quick-stock-row--readonly .quick-stock-status { text-align: left; }
}

/* Gemensam navigering med huvudsidan. */
.shop-site-header {
    position: sticky;
    top: 0.5rem;
    z-index: 9000;
    padding: 0 0.75rem;
}

.headernav {
    width: min(1120px, calc(100% - 2rem));
    min-height: 76px;
    margin: 0 auto;
    padding: 0.7rem 1.25rem;
    border-radius: 2rem;
    box-shadow: 0 0.7rem 1.8rem rgba(3, 25, 45, 0.22);
    font-size: 1.05rem;
}

.headernav a,
.headernav label {
    margin-left: 0.8rem;
}

.headernav .companyLogo { margin-left: 0; }
.headernav .main-site-link { font-family: Arial, Helvetica, sans-serif; font-weight: 700; }
.headernav .companyLogo img { display: block; width: 9.5rem; max-height: 58px; object-fit: contain; }
.headernav .dropBtn,
.headernav .ourOffer,
.headernav a { font-size: 1.05rem; }
.headernav .dropIcon { width: 1.45rem; height: 1.45rem; }
#shoppC { display: grid; width: 3.1rem; height: 3.1rem; padding: 0; place-items: center; line-height: 0; }
#shoppC img { width: 1.45rem; height: 1.45rem; padding: 0; }

@media (max-width: 48rem) {
    .shop-site-header { top: 0.5rem; margin: 0 0.5rem; padding: 0; }
    .headernav { width: 100%; min-height: 0; margin: 0; padding: 0.85rem 1rem; border-radius: 1.25rem; font-size: 1rem; }
    .headernav a,
    .headernav label { margin-left: 0; }
    .headernav .companyLogo img { width: 118px; max-height: 54px; }
    #shoppC { width: 2.8rem; height: 2.8rem; }
}

/* Produktdetalj: bild och beskrivning till vänster, specifikationer till höger. */
.product-detail-page {
    width: min(82rem, calc(100% - 2rem));
    margin: 1rem auto 2rem;
    padding: 1.1rem;
}
.product-detail-page > h1 { margin: 0 0 0.8rem; }
.product-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(14rem, 0.8fr);
    gap: 1rem;
    align-items: start;
}
.product-detail-main { min-width: 0; }
.product-detail-main .moreInfoImgDesc { gap: 1rem; }
.product-detail-main .product-image-gallery {
    flex: 0 1 18rem;
    width: min(100%, 18rem);
}
.product-detail-main .product-gallery-viewer { aspect-ratio: 1 / 1; }
.product-detail-main .product-gallery-main { object-fit: contain; }
.product-detail-main .descMoreInfo { line-height: 1.35; }
.product-detail-price {
    display: grid;
    gap: 0.15rem;
    margin-top: 0.75rem;
    padding: 0.65rem 0.8rem;
    border-radius: 0.5rem;
    background: rgba(163, 196, 233, 0.22);
}
.product-detail-price strong { font-size: clamp(1.35rem, 2vw, 1.8rem); }
.product-detail-price small { font-family: var(--font-text); }
.product-detail-main .stock-status { margin: 0.55rem 0; }
.product-detail-main form { margin: 0; }
.product-detail-main .buy-details-button { min-height: 2.65rem; padding: 0.3rem 1rem; font-size: 1.4rem; }
.product-detail-specs {
    padding: 0.85rem;
    border: 1px solid rgba(10, 76, 168, 0.3);
    border-radius: 0.6rem;
    background: rgba(240, 248, 255, 0.72);
}
.product-detail-specs h2 { margin: 0 0 0.55rem; font-size: 1.35rem; }
.product-detail-specs table { width: 100%; }
.product-detail-specs th,
.product-detail-specs td { padding: 0.35rem 0.45rem; font-size: 0.95rem; }
.product-detail-components { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid rgba(10, 76, 168, 0.22); }
.product-detail-components h2 { margin-bottom: 0.45rem; }
.product-detail-components ul { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.product-detail-components li { padding: 0.4rem 0.45rem; border-radius: 0.35rem; background: rgba(10, 76, 168, 0.08); font-family: var(--font-text); font-size: 0.92rem; line-height: 1.3; }
.product-detail-components li strong { color: #0a4ca8; }
.product-detail-page ~ .moreInfo { display: none; }

@media (max-width: 60rem) {
    .product-detail-layout { grid-template-columns: 1fr; }
    .product-detail-main .product-image-gallery { width: min(100%, 22rem); }
}

@media (max-width: 48rem) {
    .product-detail-page { width: min(100% - 1rem, 82rem); margin-top: 0.75rem; padding: 0.85rem; }
    .product-detail-main .moreInfoImgDesc { flex-direction: column; }
}

/* Kompakt visning för produktlistor. Produktkorten ska kunna överblickas
   utan att knappar och dekorfont tar över hela skärmen. */
.storefront-product-grid { gap: 0.75rem; }
.storefront-product-grid > .info-box-new > img {
    height: clamp(8rem, 14vw, 10rem) !important;
}
.storefront-product-grid > .info-box-new h2 {
    margin: 0.3rem 0 !important;
    font-size: clamp(1.15rem, 1.5vw, 1.45rem);
    line-height: 1.15;
}
.storefront-product-grid > .info-box-new h3 {
    margin: 0.3rem 0 !important;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
}
.storefront-product-grid > .info-box-new .product-text {
    margin: 0.35rem 0;
    line-height: 1.25;
    -webkit-line-clamp: 2;
}
.storefront-product-grid > .info-box-new .stock-status { margin: 0.25rem 0 0.45rem; }
.storefront-product-grid > .info-box-new > form {
    width: 78%;
    margin-bottom: 0.45rem;
}
.storefront-product-grid > .info-box-new .buy-details-button {
    min-height: 2.6rem;
    padding: 0.3rem 0.5rem;
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    line-height: 1;
}

@media (min-width: 48.0625rem) and (max-width: 64rem) {
    .headernav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.45rem; width: auto; min-height: 0; margin: 0.75rem; padding: 0.75rem; border-radius: 1.1rem; font-size: 1rem; }
    .headernav > .companyLogo { grid-column: 2; grid-row: 1; justify-self: center; }
    .headernav .companyLogo img { width: 8rem; max-height: 52px; }
    .site-navigation { display: block; position: relative; grid-column: 1 / -1; grid-row: 2; min-width: 0; margin: 0; }
    .site-navigation-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; min-height: 2.8rem; padding: 0.55rem 0.75rem; border-radius: 0.55rem; color: ivory; cursor: pointer; font-family: Arial, Helvetica, sans-serif; font-weight: 700; list-style: none; }
    .site-navigation-toggle::-webkit-details-marker { display: none; }
    .site-navigation-toggle::marker { content: ''; }
    .site-navigation-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
    .site-navigation[open] .site-navigation-toggle { background: rgba(255, 255, 255, 0.13); }
    .site-navigation-links { display: none; margin-top: 0.45rem; padding: 0.45rem; border-radius: 0.55rem; background: rgb(3, 25, 45); box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.28); }
    .site-navigation[open] .site-navigation-links { display: grid; gap: 0.25rem; }
    .site-navigation-links > a,
    .site-navigation-links > .addonDropd > .ourOffer { display: flex; box-sizing: border-box; width: 100%; min-height: 2.8rem; margin: 0; padding: 0.65rem 0.7rem; border-radius: 0.45rem; color: ivory; }
    .site-navigation-links .addonDropd { width: 100%; margin-left: 0; }
    .site-navigation-links .dropBtn { margin-left: 0; font-size: 1rem; }
    .site-navigation-links .dropIcon { width: 1.35rem; height: 1.35rem; margin-left: auto; }
    .site-navigation-links .dropdown { position: static; width: auto; min-width: 0; margin: 0.2rem 0 0; border-color: rgba(255, 255, 255, 0.18); border-radius: 0.45rem; }
    .site-navigation-links .addonDropd[open] .dropdown { display: grid; }
    .shoppC { position: relative; display: block; grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
    .totaltOrderdItems { position: absolute; top: -0.35rem; right: -0.3rem; z-index: 2; margin: 0; }
}

/* Slutlig storleksjustering av butikens toppmeny. */
.headernav {
    min-height: 76px;
    padding: 0.7rem 1.25rem;
}

.headernav .companyLogo img {
    display: block;
    width: 9.5rem;
    max-height: 58px;
    object-fit: contain;
}

.headernav .dropBtn,
.headernav .ourOffer,
.headernav a {
    font-size: 1.05rem;
}

.headernav .dropIcon {
    width: 1.45rem;
    height: 1.45rem;
}

#shoppC {
    display: grid;
    width: 3.1rem;
    height: 3.1rem;
    padding: 0;
    place-items: center;
    line-height: 0;
}

#shoppC img {
    width: 1.45rem;
    height: 1.45rem;
    padding: 0;
}

@media (max-width: 64rem) {
    .headernav .companyLogo img { width: 8rem; max-height: 52px; }
    #shoppC { width: 2.8rem; height: 2.8rem; }
}

/* Fäll ihop butikens navigering innan länkarna blir trånga. */
@media (max-width: 64rem) {
    .shop-site-header { top: 0; padding: 0; }
    .headernav {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0.45rem;
        width: auto;
        min-height: 0;
        margin: 0.75rem;
        padding: 0.75rem;
        border-radius: 1.1rem;
        font-size: 1rem;
    }
    .headernav > .companyLogo { grid-column: 2; grid-row: 1; justify-self: center; }
    .companyLogo img { width: 8.5rem; }
    .site-navigation { display: block; position: relative; grid-column: 1 / -1; grid-row: 2; min-width: 0; margin: 0; }
    .site-navigation-toggle {
        display: inline-flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        width: 100%;
        min-height: 2.8rem;
        padding: 0.55rem 0.75rem;
        border-radius: 0.55rem;
        color: ivory;
        cursor: pointer;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 700;
        list-style: none;
    }
    .site-navigation-toggle::-webkit-details-marker { display: none; }
    .site-navigation-toggle::marker { content: ''; }
    .site-navigation-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
    .site-navigation[open] .site-navigation-toggle { background: rgba(255, 255, 255, 0.13); }
    .site-navigation-links { display: none; width: auto; margin-top: 0.45rem; padding: 0.45rem; border-radius: 0.55rem; background: rgb(3, 25, 45); box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.28); }
    .site-navigation[open] .site-navigation-links { display: grid; gap: 0.25rem; }
    .site-navigation-links > a,
    .site-navigation-links > .addonDropd > .ourOffer { box-sizing: border-box; width: 100%; min-height: 2.8rem; margin: 0; padding: 0.65rem 0.7rem; border-radius: 0.45rem; color: ivory; }
    .site-navigation-links > a:hover,
    .site-navigation-links > .addonDropd > .ourOffer:hover { background: rgba(255, 255, 255, 0.1); }
    .site-navigation-links .addonDropd { width: 100%; margin-left: 0; }
    .site-navigation-links .dropBtn { margin-left: 0; font-size: 1rem; }
    .site-navigation-links .dropIcon { width: 1.35rem; height: 1.35rem; margin-left: auto; }
    .site-navigation-links .dropdown { position: static; width: auto; min-width: 0; margin: 0.2rem 0 0; border-color: rgba(255, 255, 255, 0.18); border-radius: 0.45rem; }
    .site-navigation-links .addonDropd:not([open]):hover .dropdown { display: none; }
    .site-navigation-links .addonDropd[open] .dropdown { display: grid; }
    .site-navigation-links .dropdown a { min-height: 2.65rem; padding: 0.6rem 0.7rem; }
    .shoppC { position: relative; display: block; grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
    .totaltOrderdItems { position: absolute; top: -0.35rem; right: -0.3rem; z-index: 2; margin: 0; }
    #shoppC { margin: 0; }
    #shoppC img { width: 1.2rem; height: 1.2rem; padding: 0.65rem; }
}

@media (max-width: 48rem) {
    .admin-category-create { grid-template-columns: 1fr; }
}

/* Köp- och returvillkor */
.terms-page {
    max-width: 52rem;
    margin: 2rem auto 3rem;
    padding: 0 1.25rem;
}
.terms-intro,
.terms-page section {
    margin: 1rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: 0.65rem;
    background: rgba(240, 248, 255, 0.7);
    border: 1px solid rgba(10, 76, 168, 0.25);
}
.terms-page h1, .terms-page h2 { margin-top: 0; }
.terms-page p { font-family: sans-serif; line-height: 1.55; }
.terms-updated { color: #555; font-size: 0.9rem; }
.order-terms-acceptance { display: block; margin: 1rem 0; }
.order-terms-acceptance label { font-family: sans-serif; }
.discount-summary, .discount-code-field { display: block; margin: 1rem 0; padding: .75rem; border: 1px solid rgba(10, 76, 168, 0.35); border-radius: .45rem; background: rgb(163, 196, 233); font-family: sans-serif; }
.discount-code-field { box-sizing: border-box; margin: 2rem; padding: 2%; border-style: outset; border-color: initial; border-radius: 1rem; background: rgb(163, 196, 233); }
.finalCost > .discount-summary { flex-basis: 100%; margin-top: 1.5rem; }
.old-total { color: #666; text-decoration: line-through; text-decoration-thickness: 0.14rem; }
.finalCost .inkl:not(.old-total) { color: inherit; }
.discount-code-field small { display: block; margin-top: .35rem; }
.finalCostRev .confirmation-discount {
    flex: 0 0 100%;
    order: -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid rgba(10, 76, 168, 0.25);
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.25;
}
.discount-admin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; align-items: end; margin-top: 1rem; }
.discount-admin-form label { display: grid; gap: .35rem; font-family: sans-serif; }
.discount-admin-form input, .discount-admin-form select { box-sizing: border-box; width: 100%; padding: .45rem; }
.discount-admin-form .discount-product-select { grid-column: 1 / -1; max-width: 34rem; }
.discount-admin-form small { color: #555; }
.discount-code-list { display: grid; gap: .55rem; padding: 0; list-style: none; }.discount-code-list li { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; padding: .65rem; background: rgba(163,196,233,.22); border-radius: .4rem; font-family: sans-serif; }.discount-code-list li span { flex: 1 1 26rem; }.discount-code-list form { margin: 0; }
.discount-products { margin-top: .55rem; }.discount-products ul { margin: .25rem 0 0; padding-left: 1.35rem; }.discount-products li { display: list-item; padding: 0; background: transparent; }

.cart-actions { margin-left: auto; }
.cart-actions .deleteBtn { margin-left: 0; }
.editBtnSC { width: 80%; height: 2rem; border-style: double; border-radius: 1rem; background-color: rgba(0, 76, 168, 0.75); color: ivory; display: flex; margin: 1rem; align-items: end; }
.editBtnSC:hover { cursor: pointer; background-color: rgba(0, 76, 168, 0.55); }

.custom-build-summary { background: rgba(240, 248, 255, 0.8); border-left: 0.35rem solid rgb(10, 76, 168); border-radius: 0.35rem; padding: 0.75rem 1rem; margin: 0.5rem 0; }
.priceRow:has(.custom-build-summary) { flex-wrap: wrap; gap: 0.6rem 1rem; }
.priceRow .custom-build-summary { flex-basis: 100%; margin: 0 0 0.5rem; }
.custom-build-summary p { margin: 0.4rem 0; }
.custom-build-summary ul { margin: 0.4rem 0 0; padding-left: 1.25rem; }
.custom-build-summary li { margin: 0.25rem 0; }
.custom-build-summary li span { color: #555; font-size: 0.9em; }

.adminForm summary {
    cursor: pointer;
    font-size: 1.5rem;
}

.builder-options { margin: 0.5rem 0; padding: 0.75rem; width: fit-content; }

/* Produktformulär i admin: ett tydligt arbetsflöde med små, avgränsade steg. */
.admin-product-form {
    display: grid;
    gap: 1rem;
    max-width: 76rem;
}

.admin-product-form-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
}

.admin-product-form-intro h2 { margin: 0; }
.admin-form-kicker { margin: 0 0 0.2rem; color: #0a4ca8; font-family: var(--font-text); font-size: 0.82rem; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase; }
.admin-form-help { max-width: 38rem; margin: 0.35rem 0 0; font-family: var(--font-text); line-height: 1.45; }

.admin-form-step {
    padding: 1rem;
    border: 1px solid rgba(10, 76, 168, 0.24);
    border-radius: 0.6rem;
    background: rgba(240, 248, 255, 0.48);
}

.admin-form-step-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.admin-form-step-heading > span {
    display: grid;
    flex: 0 0 1.7rem;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border-radius: 50%;
    background: #0a4ca8;
    color: white;
}

.admin-form-step-heading h3 { margin: 0; }
.admin-form-step-heading p { margin: 0.2rem 0 0; font-family: var(--font-text); line-height: 1.4; }

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.85rem;
    align-items: start;
}

.admin-form-field {
    display: grid;
    min-width: 0;
    gap: 0.35rem;
}

.admin-form-field--wide { grid-column: 1 / -1; }
.admin-form-field label,
.admin-radio-group legend,
.admin-form-subsection legend { font-family: var(--font-text); font-weight: bold; }
.admin-form-field small { color: #444; font-family: var(--font-text); font-size: 0.84rem; line-height: 1.35; }

.admin-product-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
.admin-product-form select,
.admin-product-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(10, 76, 168, 0.4);
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.86);
    font-family: var(--font-text);
    font-size: 1rem;
}

.admin-product-form textarea { min-height: 7rem; resize: vertical; }
.admin-product-form input:focus,
.admin-product-form select:focus,
.admin-product-form textarea:focus { outline: 3px solid rgba(10, 76, 168, 0.2); border-color: #0a4ca8; }

.admin-radio-group {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    margin: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(10, 76, 168, 0.28);
    border-radius: 0.45rem;
    background: rgba(163, 196, 233, 0.13);
}

.admin-radio-group label,
.admin-product-form .builder-options > label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-text);
}

.admin-image-picker {
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(10, 76, 168, 0.22);
    border-radius: 0.45rem;
    background: rgba(163, 196, 233, 0.13);
}

.admin-image-picker > summary { cursor: pointer; font-size: 1rem; }
.admin-image-picker > p { margin: 0.5rem 0 0.7rem; font-family: var(--font-text); }
.admin-product-form .admin-image-gallery { max-height: 15rem; padding-right: 0.25rem; }
.admin-product-form .admin-image-choice img { width: 6rem; height: 4.5rem; border-radius: 0.3rem; }
.admin-extra-image-picker { margin-top: 0.85rem; padding: 0.75rem 0.85rem; border: 1px solid rgba(10, 76, 168, 0.22); border-radius: 0.45rem; background: rgba(163, 196, 233, 0.13); }
.admin-extra-image-picker > summary { cursor: pointer; font-size: 1rem; }
.admin-extra-image-picker > p { margin: 0.5rem 0 0.7rem; font-family: var(--font-text); line-height: 1.4; }
.admin-extra-image-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.55rem; max-height: 18rem; overflow-y: auto; padding: 0.2rem; }
.admin-extra-image-choice { position: relative; display: grid; gap: 0.3rem; min-width: 0; padding: 0.35rem; border: 2px solid transparent; border-radius: 0.4rem; background: rgba(240, 248, 255, 0.72); cursor: pointer; }
.admin-extra-image-choice:hover { border-color: rgba(10, 76, 168, 0.45); }
.admin-extra-image-choice.is-selected { border-color: #0a4ca8; background: rgba(163, 196, 233, 0.36); }
.admin-extra-image-choice input { position: absolute; opacity: 0; }
.admin-extra-image-choice:has(input:focus-visible) { outline: 3px solid rgba(10, 76, 168, 0.3); }
.admin-extra-image-choice img { width: 100%; height: 4.8rem; object-fit: cover; border-radius: 0.25rem; }
.admin-extra-image-choice span { overflow: hidden; color: #333; font-family: var(--font-text); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-extra-image-upload { max-width: 28rem; margin-top: 0.85rem; }

.admin-form-configuration {
    display: grid;
    grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.5fr);
    gap: 0.85rem;
}

.admin-product-form .admin-form-subsection {
    min-width: 0;
    margin: 0;
    padding: 0.85rem;
    border: 1px solid rgba(10, 76, 168, 0.22);
    border-radius: 0.45rem;
    background: rgba(163, 196, 233, 0.13);
}

.admin-product-form .admin-form-subsection h3 { margin: 0 0 0.75rem; }
.admin-product-form .admin-form-subsection p { margin: 0 0 0.7rem; font-family: var(--font-text); line-height: 1.4; }
.admin-product-form .builder-options { display: grid; gap: 0.6rem; width: auto; }
.admin-product-form .builder-options .admin-form-field { margin-top: 0.2rem; }
.admin-specification-grid { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

.admin-product-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.6rem;
    background: rgba(10, 76, 168, 0.1);
}

.admin-product-form-actions strong,
.admin-product-form-actions small { display: block; }
.admin-product-form-actions small { margin-top: 0.25rem; font-family: var(--font-text); }
.admin-product-form-actions > div:last-child { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.admin-product-form-actions input { min-width: 9rem; padding: 0.55rem 0.85rem; cursor: pointer; }
.admin-product-form-actions input[type="submit"] { border-color: #0a4ca8; background: #0a4ca8; color: white; }

@media (max-width: 48rem) {
    .admin-product-form-intro,
    .admin-product-form-actions { flex-direction: column; align-items: stretch; }
    .admin-form-configuration { grid-template-columns: 1fr; }
    .admin-product-form-actions > div:last-child { width: 100%; }
    .admin-product-form-actions input { flex: 1 1 10rem; }
}

.builder-option-row { display: flex; align-items: center; gap: 2rem; margin: 0.5rem 0; }
.builder-option-row > label:first-child { min-width: 20rem; }
.stainless-option { color: #555; }
.builder-option-thumbnail { width: 5rem; height: 4rem; object-fit: cover; border-radius: 0.35rem; }
.builder-info-wrap { position: relative; display: inline-block; z-index: 2; }
.builder-info-wrap > summary { list-style: none; }
.builder-info-wrap > summary::-webkit-details-marker { display: none; }
.builder-info-wrap > summary::marker { content: ''; }
.builder-info-wrap > .builder-info { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; padding: 0; border: 0; border-radius: 50%; background: #0a4ca8; color: white; cursor: pointer; font-family: var(--font-text); font-size: 0.9rem; font-weight: 700; line-height: 1; }
.builder-info-wrap > .builder-info:hover,
.builder-info-wrap > .builder-info:focus-visible { background: #063675; outline: 3px solid rgba(10, 76, 168, 0.22); }
.builder-tooltip { display: none; position: absolute; top: 50%; right: calc(100% + 0.7rem); width: min(18rem, calc(100vw - 2rem)); padding: 0.7rem 0.8rem; transform: translateY(-50%); border: 1px solid rgba(10, 76, 168, 0.45); border-radius: 0.45rem; background: #fff; color: #1d2f40; box-shadow: 0 0.45rem 1.1rem rgba(3, 25, 45, 0.2); cursor: pointer; font-family: var(--font-text); font-size: 0.9rem; line-height: 1.4; }
.builder-info-wrap[open] .builder-tooltip { display: block; }
.builder-guide { margin: 1rem 0; padding: 0.75rem 1rem; background: rgba(163, 196, 233, 0.35); border-radius: 0.5rem; }
.builder-guide summary { cursor: pointer; font-size: 1.1rem; }
.builder-guide ol { margin-bottom: 0; }
.color-offer-notice {
    box-sizing: border-box;
    margin: 1rem 0;
    padding: 0.8rem 1rem;
    border-left: 0.35rem solid #0a4ca8;
    border-radius: 0.45rem;
    background: rgba(163, 196, 233, 0.28);
    color: #1d2f40;
}
.color-offer-notice strong { display: block; margin-bottom: 0.25rem; font-family: var(--font-display); }
.color-offer-notice p { margin: 0; font-family: var(--font-text); font-size: 1rem; line-height: 1.45; }
.welcomeInfo .color-offer-notice { max-width: 48rem; }
.order-admin-layout { display: grid; grid-template-columns: minmax(16rem, 1fr) 2fr; gap: 2rem; }
#orderDetails { scroll-margin-top: 1rem; }
.order-admin-link { display: block; padding: 0.75rem; margin: 0.5rem 0; background: rgba(163, 196, 233, 0.35); border-radius: 0.5rem; color: inherit; text-decoration: none; }
.order-admin-link:hover { background: rgba(163, 196, 233, 0.7); }
.order-admin-link.order-completed { background: rgba(133, 205, 139, 0.45); }
.order-tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.65rem 0 1rem; }
.order-tab { padding: 0.45rem 0.65rem; border: 1px solid #0a4ca8; border-radius: 0.35rem; background: transparent; color: inherit; cursor: pointer; text-decoration: none; }
.order-tab.active { background: #0a4ca8; color: white; }
.order-tab-empty { color: #555; }
/* Explicitly enforce the HTML hidden state. The normal card rule uses
   display:block, which otherwise can make a filtered order remain visible. */
.order-admin-link[hidden],
.order-tab-empty[hidden] { display: none !important; }
.order-status-actions, .order-product-row, .order-build-item-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.order-status-actions { margin: 0.75rem 0 1.5rem; }
.order-price-summary { margin: 1rem 0; padding: 1rem 1.25rem; border: 1px solid rgba(10, 76, 168, 0.35); border-radius: 0.65rem; background: rgba(240, 248, 255, 0.65); }
.order-price-summary h3 { margin-top: 0; }
.order-price-table-wrap { overflow-x: auto; }
.order-price-table { width: 100%; min-width: 36rem; border-collapse: collapse; font-family: var(--font-text); }
.order-price-table th, .order-price-table td { padding: 0.55rem 0.65rem; border-bottom: 1px solid rgba(10, 76, 168, 0.2); text-align: right; white-space: nowrap; }
.order-price-table th:first-child, .order-price-table td:first-child { text-align: left; white-space: normal; }
.order-price-table tfoot th, .order-price-table tfoot td { font-weight: 700; }
.order-price-table .order-price-total th, .order-price-table .order-price-total td { color: #073b84; font-size: 1.05em; }
.order-price-table .order-price-build-item td { color: #48566b; font-size: 0.92em; background: rgba(163, 196, 233, 0.13); }
.order-price-table .order-price-build-item td:first-child { padding-left: 1.4rem; }
.order-status-actions form, .order-product-row form { margin: 0; }
.order-pick-list, .order-build-items { display: grid; gap: 0.75rem; padding-left: 1.25rem; }
.order-picking-section { margin: 1rem 0; padding: 1rem 1.25rem; background: rgba(163, 196, 233, 0.28); border-radius: 0.65rem; }
.order-picking-section > h3 { margin-top: 0; }
.order-picking-section .order-pick-list { margin-bottom: 0; }
.order-build-items { margin-top: 0.65rem; }
.order-build-item-row { padding: 0.45rem 0.6rem; background: rgba(163, 196, 233, 0.22); border-radius: 0.4rem; }
.order-special-build { margin: 0.85rem 0; padding: 0.9rem 1rem 1rem; border: 1px solid rgba(10, 76, 168, 0.45); border-radius: 0.55rem; background: rgba(240, 248, 255, 0.45); }
.order-special-build .sledge-identifier-form { margin-top: 0; background: transparent; padding: 0; }
.order-build-unit { display: flex; flex-direction: column; margin: 0.75rem 0; padding: 0.4rem 0 0; border: 0; border-top: 1px solid rgba(10, 76, 168, 0.22); border-radius: 0; }
.order-build-unit legend { order: 0; padding: 0 0.35rem; font-weight: bold; }
.order-build-unit .order-unit-control { order: 1; margin-top: 0; }
.order-build-unit .order-build-items { order: 2; }
.order-registration-info { margin: 0.65rem 0 0; padding: 0.55rem 0.7rem; border-top: 1px solid rgba(10, 76, 168, 0.2); color: #4a4a4a; font-family: sans-serif; font-size: 0.85rem; }
.saved-sledge-identifier { color: #0a4ca8; font-family: sans-serif; font-size: 0.92em; font-weight: 700; }
.order-unit-list { margin: 0.85rem 0; padding: 0.85rem 1rem; border: 1px solid rgba(10, 76, 168, 0.45); border-radius: 0.55rem; background: rgba(240, 248, 255, 0.45); }
.order-unit-list h4 { margin: 0 0 0.7rem; }
.order-unit-control { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; padding: 0.65rem 0; border-top: 1px solid rgba(10, 76, 168, 0.2); }
.order-unit-control:first-of-type { border-top: 0; }
.order-unit-control form { margin: 0; }
.order-unit-id-form { display: flex; align-items: center; gap: 0.4rem; }
.order-unit-id-form label { margin: 0; }
.order-unit-id-form input { width: 11rem; padding: 0.35rem 0.5rem; }
.order-status-warning { margin: 0.75rem 0; padding: 0.75rem 1rem; background: #fff1c9; border-left: 0.35rem solid #b16d00; border-radius: 0.35rem; }
.order-status-warning ul { margin: 0.65rem 0 0; padding-left: 1.5rem; list-style: disc; }
.order-status-warning li { display: list-item; margin: 0.35rem 0; padding-left: 0.2rem; font-family: sans-serif; }
.order-status-warning li::marker { color: #b16d00; font-size: 1.15em; }
.sledge-identifier-form { display: flex; align-items: end; flex-wrap: wrap; gap: 0.65rem; margin: 0.85rem 0 0.25rem; padding: 0.65rem; background: rgba(240, 248, 255, 0.7); border-radius: 0.4rem; }
.sledge-identifier-form label { display: grid; gap: 0.3rem; margin: 0; }
.sledge-identifier-form input { min-width: 15rem; padding: 0.35rem 0.5rem; }
.order-payment { margin: 1rem 0 1.5rem; padding: 0.85rem 1rem; background: rgba(163, 196, 233, 0.25); border-radius: 0.5rem; }
.order-payment h3 { margin: 0 0 0.65rem; }
.order-payment-form { display: flex; align-items: end; flex-wrap: wrap; gap: 0.75rem; }
.order-payment-form label { display: grid; gap: 0.3rem; margin: 0; }
.order-payment-form label:first-of-type { display: flex; align-items: center; gap: 0.35rem; padding-bottom: 0.45rem; }
.order-payment-form input[type="text"] { min-width: 14rem; padding: 0.35rem 0.5rem; }
.order-customer-note { margin: 1rem 0; padding: 0.75rem 1rem; background: #fff8df; border-left: 0.35rem solid #b16d00; border-radius: 0.35rem; }
.order-customer-note h3, .order-customer-note p { margin: 0; }
.order-customer-note p { margin-top: 0.45rem; font-family: sans-serif; white-space: pre-wrap; }
.reservation-notice { margin: 1rem 2rem; padding: 0.8rem 1rem; background: #fff1c9; border-left: 0.35rem solid #b16d00; border-radius: 0.35rem; }
.cart-notice { margin: 1rem 2rem; padding: 0.8rem 1rem; background: #e2f4e4; border-left: 0.35rem solid #287a31; border-radius: 0.35rem; }
.site-toast { position: fixed; top: 1rem; left: 50%; z-index: 10000; box-sizing: border-box; width: min(42rem, calc(100vw - 2rem)); margin: 0; padding: 1rem 1.25rem; transform: translateX(-50%); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.22); font-family: sans-serif; transition: opacity 0.35s ease, transform 0.35s ease; }
.site-toast.is-hidden { opacity: 0; transform: translate(-50%, -1rem); pointer-events: none; }
.cookie-notice { position: fixed; right: 1rem; bottom: 1rem; z-index: 10000; box-sizing: border-box; width: min(28rem, calc(100vw - 2rem)); padding: 1rem; border-radius: 0.6rem; background: #102b4b; color: white; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.25); }
.cookie-notice p { margin: 0 0 .7rem; font-family: sans-serif; line-height: 1.45; }.cookie-notice a { color: white; }.cookie-notice button { padding: .4rem .8rem; cursor: pointer; }

.admin-image-gallery { display: flex; flex-wrap: wrap; gap: 0.5rem; max-height: 22rem; overflow-y: auto; }
.admin-image-choice { padding: 0.2rem; border: 2px solid transparent; background: transparent; cursor: pointer; }
.admin-image-choice img { width: 7rem; height: 5rem; object-fit: cover; display: block; }
.admin-image-choice.selected { border-color: rgb(10, 76, 168); }

.registrerdProdukts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;
}

/* Product cards in the public shop should remain centred, including a
   partially filled final row. The admin list uses the same base class but
   deliberately keeps its own left-aligned, full-width layout. */
.storefront-product-grid {
  justify-content: center;
  box-sizing: border-box;
  padding-inline: 1rem;
}
.storefront-product-grid > .info-box-new { margin-left: 0; }
.storefront-product-grid > br { display: none; }
.storefront-product-grid > .info-box-new[data-product-card][hidden] { display: none !important; }

/* Offentliga produktkort ska fungera på en vanlig laptops skärm: en bild får
   aldrig dra upp ett helt kort till sin ursprungliga höjd. */
.storefront-product-grid > .info-box-new {
  box-sizing: border-box;
  flex: 0 1 16.5rem;
  width: min(16.5rem, 100%);
  padding: 0.75rem;
  font-size: 90%;
}
.storefront-product-grid > .info-box-new > img {
  width: 100%;
  height: 12rem;
  margin: 0 auto;
  object-fit: contain;
  background: rgba(10, 76, 168, 0.08);
}
.storefront-product-grid > .info-box-new h2,
.storefront-product-grid > .info-box-new h3 { margin: 0.35rem 0; }
.storefront-product-grid > .info-box-new .product-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.product-filter-panel {
  box-sizing: border-box;
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto 1rem;
  border: 1px solid rgba(10, 76, 168, 0.42);
  border-radius: 0.65rem;
  background: rgba(240, 248, 255, 0.8);
  overflow: hidden;
}
.product-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.1rem;
  padding: 0.7rem 1.1rem;
  color: #123c75;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  list-style: none;
}
.product-filter-summary::-webkit-details-marker { display: none; }
.product-filter-summary::marker { content: ''; }
.product-filter-summary::after { content: '+'; font-family: var(--font-text); font-size: 1.55rem; font-weight: 700; }
.product-filter-panel[open] .product-filter-summary { border-bottom: 1px solid rgba(10, 76, 168, 0.25); }
.product-filter-panel[open] .product-filter-summary::after { content: '−'; }
.product-filter-summary:focus-visible { outline: 3px solid rgba(10, 76, 168, 0.6); outline-offset: -3px; }
.product-filter-form { padding: 0.9rem 1.1rem 1rem; }
.product-filter-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
  gap: 0.7rem;
}
.product-filter-control {
  display: grid;
  min-width: 0;
  gap: 0.3rem;
  color: #263746;
  font-family: var(--font-text);
  font-size: 0.9rem;
  font-weight: 700;
}
.product-filter-control > span { font-family: var(--font-text); }
.product-filter-control input,
.product-filter-control select {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.45rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgba(10, 76, 168, 0.5);
  border-radius: 0.35rem;
  background: white;
  color: #1d2f40;
  font-family: var(--font-text);
  font-size: 1rem;
}
.product-filter-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.product-filter-checkbox {
  display: flex;
  align-items: center;
  min-height: 2.45rem;
  gap: 0.45rem;
  padding: 0.2rem 0;
  color: #263746;
  font-family: var(--font-text);
  font-size: 0.92rem;
  font-weight: 700;
}
.product-filter-checkbox input { width: 1.1rem; height: 1.1rem; accent-color: rgb(10, 76, 168); }
.product-filter-reset {
  align-self: end;
  min-height: 2.45rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgb(10, 76, 168);
  border-radius: 0.35rem;
  background: rgba(240, 248, 255, 0.9);
  color: #123c75;
  cursor: pointer;
}
.product-filter-reset:hover:not(:disabled) { background: rgb(10, 76, 168); color: white; }
.product-filter-reset:disabled { cursor: default; opacity: 0.5; }
.product-filter-results { margin: 0.75rem 0 0; color: #425564; font-family: var(--font-text); font-size: 0.92rem; }
.product-filter-empty {
  box-sizing: border-box;
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto 1rem;
  padding: 0.8rem 1rem;
  border-left: 0.35rem solid rgb(10, 76, 168);
  border-radius: 0.4rem;
  background: rgba(240, 248, 255, 0.8);
  color: #263746;
  font-family: var(--font-text);
}

.registrerdProdukts .welcomeInfo {
  width: 100%;
}

.admin-product-card-hint {
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-left: 0.3rem solid rgb(10, 76, 168);
  border-radius: 0.35rem;
  background: rgba(163, 196, 233, 0.2);
  font-family: var(--font-text);
}

.admin-product-row {
  width: 100%;
  border: 1px solid rgba(10, 76, 168, 0.35);
  border-radius: 0.6rem;
  background: rgba(240, 248, 255, 0.55);
}
.admin-product-row > summary {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.9rem 1.25rem;
    cursor: pointer;
}
.admin-product-row > summary img { width: 4.5rem; height: 3.4rem; object-fit: cover; border-radius: 0.35rem; }
.admin-product-row > summary > span:not(.admin-product-quick-actions) { display: grid; gap: 0.45rem; line-height: 1.25; }
.admin-product-row > summary > span.admin-sort-handle { display: inline-flex; gap: 0; line-height: 1; }
.admin-product-row > summary strong { font-size: 1.15rem; }
.admin-product-row > summary small { font-family: var(--font-text); color: #444; font-size: 0.92rem; line-height: 1.4; }
.admin-product-row > .info-box-new-adminpage { width: auto; margin: 0 1rem 1rem; padding: 1rem; }
.admin-product-detail-layout { display: grid; grid-template-columns: minmax(12rem, 17rem) repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.85rem; align-items: start; text-align: left; }
.admin-product-image-preview { display: grid; min-width: 0; gap: 0.55rem; }
.admin-product-detail-image { width: 100%; height: 12.5rem; object-fit: cover; border-radius: 0.45rem; }
.admin-product-extra-images { padding: 0.45rem; border: 1px solid rgba(10, 76, 168, 0.2); border-radius: 0.4rem; background: rgba(163, 196, 233, 0.13); }
.admin-product-extra-images > span { display: block; margin-bottom: 0.4rem; color: #333; font-family: var(--font-text); font-size: 0.78rem; font-weight: bold; }
.admin-product-extra-images > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; }
.admin-product-extra-images img { display: block; width: 100%; height: 3rem; object-fit: cover; border-radius: 0.22rem; }
.admin-detail-card { min-width: 0; padding: 0.85rem; border: 1px solid rgba(10, 76, 168, 0.2); border-radius: 0.45rem; background: rgba(240, 248, 255, 0.55); }
.admin-detail-card h2, .admin-detail-card h3 { margin: 0 0 0.55rem; }
.admin-detail-card p { margin: 0.45rem 0; font-family: var(--font-text); line-height: 1.45; overflow-wrap: anywhere; }
.admin-material-list ul { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.admin-material-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.5rem; border-radius: 0.35rem; background: rgba(10, 76, 168, 0.08); font-family: var(--font-text); line-height: 1.3; }
.admin-material-list li strong { color: #0a4ca8; }
.admin-material-list-empty { color: #596674; font-style: italic; }
.admin-material-list-name { min-width: 0; }
.admin-material-detail { flex: 1 1 15rem; min-width: 0; }
.admin-material-detail summary { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; list-style: none; }
.admin-material-detail summary::-webkit-details-marker { display: none; }
.admin-material-detail summary::after { content: '+'; flex: 0 0 auto; color: #0a4ca8; font-size: 1.15rem; font-weight: 700; }
.admin-material-detail[open] summary::after { content: '−'; }
.admin-material-thumb { flex: 0 0 auto; display: block; width: 3rem; height: 3rem; object-fit: contain; border: 1px solid rgba(10, 76, 168, 0.2); border-radius: 0.3rem; background: #fff; }
.admin-material-detail .admin-material-list-name { flex: 1 1 10rem; }
.admin-material-popover { display: grid; grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr); gap: 0.6rem; margin: 0.6rem 0 0 3.55rem; padding: 0.65rem; border: 1px solid rgba(10, 76, 168, 0.2); border-radius: 0.4rem; background: rgba(255,255,255,0.75); font-family: var(--font-text); }
.admin-material-popover img { width: 100%; height: 5.5rem; object-fit: contain; border-radius: 0.25rem; background: #fff; }
.admin-material-popover p { grid-column: 1 / -1; margin: 0; font-size: 0.86rem; }
.admin-material-stock-form { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
.admin-material-stock-form label { display: flex; align-items: center; gap: 0.25rem; font-size: 0.86rem; }
.admin-material-stock-form input { width: 4.6rem; min-height: 2rem; padding: 0.2rem 0.35rem; }
.admin-material-stock-form button { min-height: 2rem; padding: 0.25rem 0.55rem; font-size: 0.84rem; }
.admin-product-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.admin-product-detail-actions form { margin: 0; }
.admin-product-detail-actions .edit-product-button { padding: 0.5rem 0.8rem; border: 1px solid rgb(10, 76, 168); border-radius: 0.35rem; background: rgba(240, 248, 255, 0.85); cursor: pointer; }
.admin-product-delete-form { margin-left: auto !important; }
.admin-product-delete-form input[type="submit"] { padding: 0.5rem 0.8rem; border: 1px solid #a12626; border-radius: 0.35rem; background: #fff5f5; color: #8b1f1f; cursor: pointer; }
.admin-product-delete-form input[type="submit"]:hover { background: #a12626; color: white; }
.admin-product-quick-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.admin-product-quick-actions form { margin: 0; }
.admin-product-quick-actions button { padding: 0.4rem 0.65rem; border: 1px solid rgb(10, 76, 168); border-radius: 0.35rem; background: rgba(240, 248, 255, 0.85); cursor: pointer; }
.admin-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.5rem; margin: 0.55rem 0 0; text-align: left; }
.admin-info-grid--specification { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.admin-info-grid--metadata { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.admin-info-grid div { min-width: 0; padding: 0.45rem 0.55rem; border-radius: 0.35rem; background: rgba(163, 196, 233, 0.22); }
.admin-info-grid dt { font-family: var(--font-text); font-size: 0.82rem; color: #444; }
.admin-info-grid dd { margin: 0.16rem 0 0; line-height: 1.25; overflow-wrap: anywhere; }

.info-box-new-adminpage {
  border: 1px solid rgba(10, 76, 168, 0.28);
  border-radius: 0.5rem;
  background-color: rgba(240, 248, 255, 0.782);
}

.info-box-new-adminpage .admin-product-detail-image {
    width: 100%;
    height: 12.5rem;
    border-radius: 0.45rem;
}

/* Konto- och användarhantering i admin. */
.admin-users-page .admin-users-panel { max-width: 76rem; }
.admin-users-page .admin-users-panel > h2 { margin-top: 0; }
.admin-user-feedback {
    margin: 1rem 0;
    padding: 0.75rem 0.9rem;
    border-left: 0.3rem solid;
    border-radius: 0.4rem;
    font-family: var(--font-text);
    line-height: 1.45;
}
.admin-user-feedback--success { border-color: #287a31; background: rgba(226, 244, 228, 0.9); }
.admin-user-feedback--error { border-color: #a12626; background: rgba(255, 235, 235, 0.9); }
.admin-user-feedback--warning { border-color: #a96700; background: rgba(255, 241, 201, 0.9); }

.admin-user-current-account {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.65rem;
    margin: 0.8rem 0 1rem;
}
.admin-user-current-account > div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0.45rem;
    background: rgba(163, 196, 233, 0.2);
}
.admin-user-current-account span,
.admin-user-meta dt { color: #495563; font-family: var(--font-text); font-size: 0.8rem; }
.admin-user-current-account strong { overflow-wrap: anywhere; font-family: var(--font-text); font-size: 1rem; }
.admin-section-intro,
.admin-user-form-help { font-family: var(--font-text); line-height: 1.45; }
.admin-section-intro { margin: 0 0 0.9rem; }
.admin-user-form-help { margin: 0; color: #4b5660; font-size: 0.86rem; }

.admin-own-password { margin-top: 0.85rem; }
.admin-user-password-form,
.admin-user-create-form,
.admin-user-edit-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    align-items: end;
    gap: 0.75rem;
}
.admin-user-password-form { margin-top: 0.75rem; }
.admin-user-password-form--reset { padding-top: 0.8rem; border-top: 1px solid rgba(10, 76, 168, 0.2); }
.admin-user-password-form label,
.admin-user-create-form label,
.admin-user-edit-form label {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    font-family: var(--font-text);
    font-weight: 700;
}
.admin-user-password-form input,
.admin-user-create-form input,
.admin-user-edit-form input[type="text"],
.admin-user-create-form textarea,
.admin-user-edit-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.4rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(10, 76, 168, 0.4);
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.9);
    color: #172532;
    font-family: var(--font-text);
    font-size: 1rem;
}
.admin-user-create-form textarea,
.admin-user-edit-form textarea { min-height: 4.8rem; resize: vertical; }
.admin-user-password-form button,
.admin-user-create-form button,
.admin-user-edit-form button {
    justify-self: start;
    min-height: 2.4rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid #0a4ca8;
    border-radius: 0.35rem;
    background: #0a4ca8;
    color: white;
    cursor: pointer;
    font-family: var(--font-text);
    font-weight: 700;
}
.admin-user-password-form button:hover,
.admin-user-create-form button:hover,
.admin-user-edit-form button:hover { background: #063675; }
.admin-user-delete-button { border-color: #8b1f1f !important; background: #8b1f1f !important; }
.admin-user-delete-button:hover { background: #651616 !important; }
.admin-user-password-form .admin-user-form-help,
.admin-user-create-form .admin-user-form-help { grid-column: 1 / -1; }

.admin-user-create-details {
    margin: 0.8rem 0;
    padding: 0.75rem;
    border: 1px solid rgba(10, 76, 168, 0.24);
    border-radius: 0.5rem;
    background: rgba(163, 196, 233, 0.12);
}
.admin-user-create-details > summary { cursor: pointer; font-size: 1rem; }
.admin-user-create-details[open] > summary { margin-bottom: 0.8rem; }

.admin-user-list { display: grid; gap: 0.55rem; margin-top: 1rem; }
.admin-user-row {
    border: 1px solid rgba(10, 76, 168, 0.28);
    border-radius: 0.5rem;
    background: rgba(240, 248, 255, 0.52);
}
.admin-user-row > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    cursor: pointer;
}
.admin-user-identity { display: grid; min-width: 0; gap: 0.15rem; }
.admin-user-identity strong { overflow: hidden; font-family: var(--font-text); text-overflow: ellipsis; white-space: nowrap; }
.admin-user-identity small { overflow: hidden; color: #4b5660; font-family: var(--font-text); text-overflow: ellipsis; white-space: nowrap; }
.admin-user-role,
.admin-user-status {
    padding: 0.25rem 0.45rem;
    border-radius: 999px;
    font-family: var(--font-text);
    font-size: 0.78rem;
    white-space: nowrap;
}
.admin-user-role { background: rgba(10, 76, 168, 0.12); color: #063675; }
.admin-user-status.is-active { background: rgba(40, 122, 49, 0.15); color: #1f6827; }
.admin-user-status.is-inactive { background: rgba(161, 38, 38, 0.12); color: #8b1f1f; }
.admin-user-row-content { display: grid; gap: 0.85rem; padding: 0 0.8rem 0.85rem; border-top: 1px solid rgba(10, 76, 168, 0.18); }
.admin-user-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.45rem; margin: 0; padding-top: 0.75rem; }
.admin-user-meta div { padding: 0.45rem 0.55rem; border-radius: 0.35rem; background: rgba(163, 196, 233, 0.16); }
.admin-user-meta dd { margin: 0.15rem 0 0; overflow-wrap: anywhere; font-family: var(--font-text); }
.admin-user-active-toggle { display: flex !important; align-items: center; gap: 0.45rem; min-height: 2.4rem; font-weight: 400 !important; }
.admin-user-create-form select,
.admin-user-edit-form select {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.4rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(10, 76, 168, 0.4);
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.9);
    color: #172532;
    font-family: var(--font-text);
    font-size: 1rem;
}
.admin-user-permissions {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 0.8rem;
    border: 1px solid rgba(10, 76, 168, 0.3);
    border-radius: 0.5rem;
    background: rgba(163, 196, 233, 0.12);
}
.admin-user-permissions > legend {
    padding: 0 0.35rem;
    color: #172532;
    font-family: var(--font-text);
    font-weight: 700;
}
.admin-user-permissions > .admin-user-form-help { margin: 0 0 0.7rem; }
.admin-user-permission-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.65rem;
}
.admin-user-permission-group {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid rgba(10, 76, 168, 0.18);
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.5);
}
.admin-user-permission-group h3 {
    margin: 0 0 0.5rem;
    color: #172532;
    font-family: var(--font-text);
    font-size: 0.92rem;
}
.admin-user-permission-options { display: grid; gap: 0.45rem; }
.admin-user-permission-option {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem;
    border-radius: 0.35rem;
    background: rgba(163, 196, 233, 0.15);
    cursor: pointer;
    font-weight: 400 !important;
}
.admin-user-permission-option input[type="checkbox"] {
    width: 1.05rem !important;
    min-height: 1.05rem !important;
    margin: 0.15rem 0 0;
    padding: 0 !important;
    accent-color: #0a4ca8;
}
.admin-user-permission-option span { display: grid; gap: 0.12rem; min-width: 0; }
.admin-user-permission-option strong,
.admin-user-permission-option small { font-family: var(--font-text); }
.admin-user-permission-option strong { color: #172532; font-size: 0.9rem; }
.admin-user-permission-option small { color: #4b5660; font-size: 0.78rem; line-height: 1.3; }
.admin-user-permission-option.is-readonly { cursor: not-allowed; opacity: 0.64; }
.admin-user-reviewer-note {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.7rem;
    border-left: 0.3rem solid #536b86;
    border-radius: 0.3rem;
    background: rgba(83, 107, 134, 0.1);
    color: #31475f;
    font-family: var(--font-text);
    font-size: 0.88rem;
    line-height: 1.4;
}

@media (max-width: 48rem) {
    .admin-user-row > summary { grid-template-columns: minmax(0, 1fr) auto; }
    .admin-user-status { grid-column: 1 / -1; justify-self: start; }
    .admin-user-password-form,
    .admin-user-create-form,
    .admin-user-edit-form { grid-template-columns: 1fr; }
    .admin-user-password-form button,
    .admin-user-create-form button,
    .admin-user-edit-form button { width: 100%; }
}

@media (max-width: 48rem) {
    .admin-page { padding: 0.75rem; }
    .admin-overview { align-items: flex-start; flex-direction: column; }
    .admin-quick-nav { justify-content: flex-start; }
    .admin-page .admin-panel { padding: 1rem; }
    .admin-product-row > summary { align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; }
    .admin-product-quick-actions { width: 100%; margin-left: 0; }
    .admin-product-detail-layout { grid-template-columns: 1fr; }
    .admin-product-image-preview { width: min(17rem, 100%); }
    .admin-product-delete-form { margin-left: 0 !important; }
    .info-box-new-adminpage .admin-product-detail-image { width: min(17rem, 100%); }
}

#sledDesk {
    width: 20rem;
    height: auto;
}


/* --- Header --- */
.site-navigation,
.site-navigation-links {
    display: contents;
}

.site-navigation-toggle {
    display: none;
}

@media (min-width: 48.0625rem) {
    .site-navigation {
        display: flex;
        align-items: center;
        margin-left: 4%;
    }

    .site-navigation-links {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    /* Håll produktmenyn som en fristående, förankrad dropdown på dator.
       Den ska inte ärva länkmarginalerna från huvudmenyn. */
    .site-navigation .addonDropd {
        position: relative;
        flex: 0 0 auto;
        margin-left: 0;
    }

    .site-navigation .addonDropd > .ourOffer {
        display: flex;
        align-items: center;
        margin: 0;
    }

    .site-navigation .addonDropd > .dropdown {
        top: 100%;
        left: 0;
    }

    .site-navigation .addonDropd > .dropdown a {
        display: block;
        margin-left: 0;
    }
}

.addonDropd {
    position: relative;
    margin-left: 4%;
}

.addonDropd > .ourOffer {
    cursor: pointer;
    list-style: none;
}

.addonDropd > .ourOffer::-webkit-details-marker { display: none; }
.addonDropd > .ourOffer::marker { content: ''; }

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: rgb(3, 25, 45);
    border: 1px solid #ccc;
    z-index: 1000;
}

.dropdown a {
    display: block;
    padding: 0.6rem 0.8rem;
    color: ivory;
    text-decoration: none;
}

.dropdown a:hover {
    color: bisque;
    background-color: rgba(255, 255, 255, 0.08);
}

.addonDropd[open] .dropdown {
    display: block;
}

/* Hover ska bara öppna menyn på enheter som faktiskt har hover. På touch
   öppnas den i stället med ett tryck på "Vårt utbud". */
@media (hover: hover) {
    .addonDropd:hover .dropdown {
        display: block;
    }
}

.dropBtn{
    border-style: none;
    background-color: transparent;
    font-size: 2rem;
    margin-left: 1rem;
    
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.dropBtn img {
    color: black;
    size: 1rem;
}

.headernav {
    margin: 3rem;
    font-size: 2rem;
    width: auto;
    height: auto;
    background-color: rgb(3, 25, 45);
    display: flex;
    align-items: center;
    overflow: visible;
    padding: 2rem;
    border-radius: 2rem;
}

.headernav a,
.headernav label
{
    color: ivory;
    margin-left: 1rem;
    display: flex;
    align-items: center;
}

.ourOffer {
    display: flex;
    align-items: center;
}

.dropIcon,
.dropBtn {
    fill: ivory;
    color: ivory;
}

.ourOffer:hover p,
.ourOffer:hover .dropIcon{
    color: bisque;
    fill: bisque;
}

.comapnyLogoImg:hover{
    opacity: 0.85;
}

/* --- Beställningssida --- */

.totaltOrderdItems{
    background-color: rgb(46, 71, 130);
    color: ivory;
    border-radius: 4rem;
    align-content: center;
    font-size: 70%;
    margin-top: auto;
    margin-right: -1rem;
    padding: 0.2rem;
    z-index: 1;
}

.shoppC{
    margin-left: auto;
    display: flex;
    align-items: center;
}

#shoppC {
    background-color: rgba(255, 255, 255, 0.63);
    border-radius: 5rem;
    display: inline-block;
    margin-left: auto;
}

#shoppC img {
    width: 2rem;
    height: 2rem;
    padding: 1rem;
}

#shoppC:hover {
    background-color: white;
    cursor: pointer;
}

.companyLogo img {
    width: 10rem;
    height: auto;
}

.welcomeInfo {
    border-style: outset;
    border-radius: 1rem;
    margin: 2rem;
    padding: 1rem;
    font-size: 1rem;
    background-color: rgb(163, 196, 233);
}

footer {
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.92);
  margin-top: 5rem;
}

.site-footer h2, 
.site-footer p,
.loginFormDiv label {
    color: ivory;
}

footer nav {
  width: 100%;
}

footer img {
    height: auto;
    width: 200px;
    flex: 0 0 auto
}

footer nav > div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

.companyLogo {
  justify-self: start;
}

.contactInfo {
  justify-self: center;
  margin-left: -10rem;         
}

.adminPage {
  justify-self: end;
  white-space: nowrap; 
  margin: 0;
}

/* Diskret administratörsinloggning i sidfoten. */
.admin-login,
.admin-login * {
    font-family: var(--font-text);
}

.admin-login {
    width: min(17rem, 100%);
    color: ivory;
    font-size: 0.85rem;
    text-align: right;
    white-space: normal;
}

.admin-login-details { text-align: left; }
.admin-login-details > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0;
    color: rgba(255, 255, 240, 0.72);
    cursor: pointer;
    font-size: 0.8rem;
    list-style: none;
}

.admin-login-details > summary::-webkit-details-marker { display: none; }
.admin-login-details > summary::marker { content: ''; }
.admin-login-details > summary::before { content: '›'; font-size: 1.1rem; line-height: 0.8; }
.admin-login-details[open] > summary { color: ivory; }
.admin-login-details[open] > summary::before { transform: rotate(90deg); }

.admin-login-form {
    display: grid;
    gap: 0.55rem;
    width: min(17rem, calc(100vw - 3rem));
    margin-top: 0.45rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
}

.admin-login-form label { display: grid; gap: 0.25rem; color: ivory; font-size: 0.78rem; }
.admin-login-form input:not([type="hidden"]) {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 0.3rem;
    background: rgba(255, 255, 255, 0.94);
    color: #102b4b;
}

.admin-login-form button,
.admin-logout-form button {
    min-height: 2.25rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0.35rem;
    background: transparent;
    color: ivory;
    cursor: pointer;
    font-size: 0.82rem;
}

.admin-login-form button:hover,
.admin-logout-form button:hover { background: rgba(255, 255, 255, 0.12); }
.admin-login-message { margin: 0; padding: 0.45rem 0.55rem; border-radius: 0.3rem; background: rgba(180, 37, 37, 0.3); color: ivory; line-height: 1.35; }
.admin-readonly-note { margin: 0.75rem 0; padding: 0.65rem 0.8rem; border-left: 0.25rem solid #6a8bb3; border-radius: 0.35rem; background: rgba(163, 196, 233, 0.24); color: #243d58; font-family: var(--font-text); }

.admin-session { display: grid; justify-items: end; gap: 0.35rem; text-align: right; }
.admin-session-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; margin: 0; color: rgba(255, 255, 240, 0.72); font-size: 0.78rem; }
.admin-session-status strong { color: ivory; font-weight: 700; }
.admin-session-password-notice { color: #ffe49b; font-size: 0.76rem; }
.admin-session-actions { display: flex; justify-content: flex-end; align-items: center; }
.admin-session-actions a { color: ivory; font-size: 0.82rem; }
.admin-logout-form { margin: 0; }

.labInfo {
    border-style: outset;
    border-radius: 1rem;
    margin: 2rem;
    padding: 2rem;
    font-size: 1.5rem;
    background-color: aqua;
}

/*--- OrderConfirmation --- */


.orderThumbnail {
    width: 20%;
    height: auto;
    margin-left: 10%;
    margin-left: 20%;
}

.reviewOrderdItems {
    background-color: rgba(240, 248, 255, 0.821);
    border-style: outset;
    border-radius: 1rem;
    margin-top: 1rem;
    margin-right: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 2rem;
    gap: 2rem;
}

/* Orderbekräftelse: visa orderns innehåll först och ett tydligt radpris sist. */
.reviewOrderdItems > p:not(.totalCost) { display: none; }
.reviewOrderdItems > .custom-build-summary { order: 2; flex-basis: 100%; }
.reviewOrderdItems > .orderThumbnail { order: 3; }
.reviewOrderdItems > .totalCost { order: 4; flex-basis: 100%; margin: 0; font-size: 1.25rem; }
.reviewOrderdItems > .totalCost::before { content: "Pris: "; }

/* Den nya, sammanhållna layouten för varje rad i orderbekräftelsen. */
.reviewOrderdItems {
    display: block;
    padding: 1.5rem;
    font-size: 0;
}
.reviewOrderdItems > br,
.reviewOrderdItems > .custom-build-summary,
.reviewOrderdItems > .orderThumbnail,
.reviewOrderdItems > p:not(.totalCost),
.reviewOrderdItems > .totalCost ~ .totalCost {
    display: none;
}
.confirmation-item-heading {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-size: 1.15rem;
}
.confirmation-item-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem);
    align-items: center;
    gap: 1.5rem;
    margin: 1rem 0;
    font-size: 1rem;
}
.confirmation-item-content .custom-build-summary { margin: 0; }
.confirmation-item-content .orderThumbnail { width: 100%; max-width: 20rem; margin: 0; justify-self: end; }
.reviewOrderdItems > .totalCost {
    display: block;
    margin: 0;
    font-size: 1.2rem;
}
@media (max-width: 650px) {
    .confirmation-item-content { grid-template-columns: 1fr; }
    .confirmation-item-content .orderThumbnail { justify-self: start; }
}

.finalCostRev{
    background-color: rgb(240, 248, 255, 0.821);
}

.finalCostRev {
    border-style: outset;
    border-radius: 1rem;
    margin: 2rem;
    padding: 2rem;
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    display: flex;
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.finalCostRev p {
    margin: 0;
}

.finalCostRev label { white-space: nowrap; }



/* -- Mer information -- */ 

.moreInfo {
    border-style: outset;
    border-radius: 1rem;
    margin: 2rem;
    padding: 2rem;  
}

.moreInfo h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

.moreInfo p {
    font-size: clamp(0.75rem, 4vw, 1.4rem);
}

.moreInfo img {
    width: 50%;
    height: auto;
    border-radius: 5%;  
}

.moreInfoImgDesc {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding-bottom: 2rem;
}

/* Produktdetaljen hålls samlad och överblickbar även på vanliga laptops. */
.moreInfo {
    box-sizing: border-box;
    width: min(72rem, calc(100% - 2rem));
    margin: 1.25rem auto;
    padding: 1.25rem;
}
.moreInfo h1 { font-size: clamp(1.4rem, 2.6vw, 2.25rem); }
.moreInfo p { font-size: clamp(0.95rem, 1.4vw, 1.15rem); }
.moreInfo .product-image-gallery { flex-basis: 26rem; width: min(100%, 26rem); }
.moreInfo .product-gallery-viewer { aspect-ratio: 4 / 3; }
.moreInfo .product-gallery-main { object-fit: contain; }
.moreInfo table,
.moreInfo table th,
.moreInfo table td { font-size: clamp(0.9rem, 1.2vw, 1.1rem); }

.descMoreInfo { flex: 1 1 18rem; margin: 0; }
.product-image-gallery { flex: 0 1 32rem; width: min(100%, 32rem); min-width: 0; }
.product-gallery-viewer { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; border-radius: 0.6rem; background: rgba(163, 196, 233, 0.24); }
.moreInfo .product-gallery-main { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0.6rem; }
.product-gallery-control { position: absolute; top: 50%; z-index: 1; width: 2.5rem; height: 2.5rem; padding: 0; transform: translateY(-50%); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 50%; background: rgba(3, 25, 45, 0.72); color: white; cursor: pointer; font-family: var(--font-text); font-size: 2rem; line-height: 1; }
.product-gallery-control:hover { background: rgb(10, 76, 168); }
.product-gallery-previous { left: 0.7rem; }
.product-gallery-next { right: 0.7rem; }
.product-gallery-counter { position: absolute; right: 0.65rem; bottom: 0.65rem; padding: 0.25rem 0.45rem; border-radius: 999px; background: rgba(3, 25, 45, 0.72); color: white; font-family: var(--font-text); font-size: 0.82rem; }
.product-gallery-thumbnails { display: flex; gap: 0.5rem; overflow-x: auto; margin-top: 0.65rem; padding: 0.15rem; }
.product-gallery-thumbnail { flex: 0 0 4.9rem; padding: 0.15rem; border: 2px solid transparent; border-radius: 0.4rem; background: transparent; cursor: pointer; }
.product-gallery-thumbnail:hover,
.product-gallery-thumbnail.is-active { border-color: #0a4ca8; background: rgba(163, 196, 233, 0.35); }
.product-gallery-thumbnail:focus-visible { outline: 3px solid rgba(10, 76, 168, 0.32); }
.moreInfo .product-gallery-thumbnail img { display: block; width: 100%; height: 3.5rem; object-fit: cover; border-radius: 0.25rem; }

@media (max-width: 48rem) {
    .moreInfo { margin: 1rem; padding: 1rem; }
    .moreInfoImgDesc { flex-direction: column; gap: 1rem; padding-bottom: 1rem; }
    .product-image-gallery { width: 100%; max-width: none; }
}


.moreInfoFC {
    font-size: clamp(0.1rem, 4vw, 1.5rem);
    gap: 2rem;
    display: flex;
    align-items: center;
    flex-direction:row;
}

.hidden {
    display: none !important;
}

/* Måste ligga sist: enhetlig typografi i rabatt- och villkorsblock. */
body .discount-summary,
body .discount-summary *,
body .discount-code-field,
body .discount-code-field *,
body .order-terms-acceptance,
body .order-terms-acceptance * {
    font-family: var(--font-display);
}

/* Admin: försäljningsöversikt */
.sales-dashboard {
    margin: 1rem 0 2rem;
    padding: 1.25rem;
    border: 1px solid rgba(10, 76, 168, 0.35);
    border-radius: 0.8rem;
    background: rgba(240, 248, 255, 0.72);
}

.sales-dashboard-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.sales-dashboard-summary::-webkit-details-marker { display: none; }
.sales-dashboard-summary::marker { content: ''; }

.sales-dashboard-summary > span:first-child {
    display: grid;
    gap: 0.18rem;
}

.sales-dashboard-summary strong { font-size: 1.35rem; }
.sales-dashboard-summary small { color: #4a5866; font-family: var(--font-text); }

.sales-dashboard-summary::after {
    content: 'Visa statistik';
    flex: 0 0 auto;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    background: rgba(10, 76, 168, 0.1);
    color: #174979;
    font-family: var(--font-text);
    font-size: 0.85rem;
    font-weight: 700;
}

.sales-dashboard[open] .sales-dashboard-summary::after { content: 'Dölj statistik'; }
.sales-dashboard-content { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(10, 76, 168, 0.2); }

.sales-dashboard-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sales-dashboard-heading h2,
.sales-stat-panel h3 { margin: 0; }

.sales-dashboard-heading p,
.sales-dashboard-period,
.sales-stat-card small,
.sales-panel-caption,
.sales-empty,
.sales-dashboard-note,
.sales-ranking small,
.sales-payment-list small,
.sales-trend small {
    font-family: var(--font-text);
}

.sales-dashboard-heading > div > p {
    margin: 0.35rem 0 0;
    color: #334a61;
}

.sales-dashboard-period {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    background: rgba(10, 76, 168, 0.1);
    color: #274a6d;
    font-size: 0.82rem;
}

.sales-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.sales-stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 7.4rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(10, 76, 168, 0.25);
    border-radius: 0.6rem;
    background: rgba(163, 196, 233, 0.22);
}

.sales-stat-card > span {
    color: #31516f;
    font-family: var(--font-text);
    font-size: 0.9rem;
    font-weight: 700;
}

.sales-stat-card > strong {
    margin-top: auto;
    color: #062d61;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.05;
}

.sales-stat-card > strong small {
    color: inherit;
    font-size: 0.82rem;
}

.sales-stat-card > small { color: #4a5866; }
.sales-stat-card-inventory { background: rgba(113, 171, 218, 0.22); }
.sales-stat-card-paid-value { background: rgba(134, 204, 142, 0.25); }
.sales-stat-card-unpaid-value { background: rgba(255, 223, 154, 0.38); }
.sales-stat-card-payment { background: rgba(134, 204, 142, 0.2); }
.sales-stat-card-complete { background: rgba(132, 205, 172, 0.22); }
.sales-stat-card-discount { background: rgba(255, 237, 176, 0.35); }
.sales-stat-card-inventory > strong,
.sales-stat-card-paid-value > strong,
.sales-stat-card-unpaid-value > strong { font-size: clamp(1.25rem, 2vw, 1.8rem); letter-spacing: -0.02em; }

.sales-dashboard-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.sales-stat-panel {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(10, 76, 168, 0.22);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.52);
}

.sales-stat-panel h3 { font-size: 1.2rem; }
.sales-panel-caption { margin: 0.25rem 0 0.7rem; color: #4a5866; font-size: 0.88rem; }
.sales-empty { margin: 0; color: #4a5866; }

.sales-ranking,
.sales-payment-list,
.sales-trend {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sales-ranking { counter-reset: sales-rank; }

.sales-ranking li,
.sales-payment-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-top: 1px solid rgba(10, 76, 168, 0.16);
}

.sales-ranking li { counter-increment: sales-rank; }
.sales-ranking li::before { content: counter(sales-rank) "."; color: #31516f; font-family: var(--font-text); font-weight: 700; }
.sales-ranking li { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.sales-ranking li > span,
.sales-payment-list li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-text); }
.sales-ranking strong,
.sales-payment-list strong { color: #062d61; white-space: nowrap; }
.sales-ranking small,
.sales-payment-list small { color: #596674; white-space: nowrap; font-size: 0.78rem; }

.sales-trend { gap: 0.5rem; }
.sales-trend li { display: grid; grid-template-columns: 4.6rem minmax(3rem, 1fr) 1.5rem 4.5rem; align-items: center; gap: 0.55rem; }
.sales-trend li > span:first-child { font-family: var(--font-text); font-size: 0.86rem; }
.sales-trend-bar { display: block; height: 0.65rem; overflow: hidden; border-radius: 999px; background: rgba(10, 76, 168, 0.13); }
.sales-trend-bar i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: #0a4ca8; }
.sales-trend strong { color: #062d61; }
.sales-trend small { color: #596674; font-size: 0.78rem; white-space: nowrap; }

.sales-dashboard-note {
    margin: 1rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(10, 76, 168, 0.18);
    color: #4a5866;
    font-size: 0.84rem;
    line-height: 1.45;
}

@media (max-width: 48rem) {
    .sales-dashboard { padding: 1rem; }
    .sales-dashboard-heading { flex-direction: column; }
    .sales-dashboard-details { grid-template-columns: 1fr; }
}

@media (max-width: 32rem) {
    .sales-stat-grid { grid-template-columns: 1fr; }
    .sales-stat-card { min-height: 6.8rem; padding: 0.7rem; }
    .sales-stat-card > strong { font-size: 1.4rem; }
    .sales-ranking li,
    .sales-payment-list li { gap: 0.4rem; }
    .sales-ranking small,
    .sales-payment-list small { display: none; }
    .sales-trend li { grid-template-columns: 4rem minmax(2rem, 1fr) 1.3rem; }
    .sales-trend small { display: none; }
}

/* Telefonlayout: admin och orderhantering */
@media (max-width: 48rem) {
    .headernav {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0.45rem;
        margin: 0.75rem;
        padding: 0.75rem;
        border-radius: 0.85rem;
        font-size: 1rem;
    }

    .headernav a,
    .headernav label { margin-left: 0; }

    .headernav > .companyLogo { grid-column: 2; grid-row: 1; justify-self: center; }
    .companyLogo img { width: 6.5rem; }

    .site-navigation {
        display: block;
        position: relative;
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
    }

    .site-navigation-toggle {
        display: inline-flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        min-height: 2.7rem;
        padding: 0.55rem 0.7rem;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 0.55rem;
        color: ivory;
        cursor: pointer;
        width: 100%;
        font-family: var(--font-text);
        font-weight: 700;
        list-style: none;
    }

    .site-navigation-toggle::-webkit-details-marker { display: none; }
    .site-navigation-toggle::marker { content: ''; }
    .site-navigation-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
    .site-navigation[open] .site-navigation-toggle { background: rgba(255, 255, 255, 0.13); }

    .site-navigation-links {
        display: none;
        position: static;
        width: auto;
        margin-top: 0.45rem;
        padding: 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 0.7rem;
        background: rgb(3, 25, 45);
        box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.28);
    }

    .site-navigation[open] .site-navigation-links { display: grid; gap: 0.25rem; }
    .site-navigation-links > a,
    .site-navigation-links > .addonDropd > .ourOffer {
        box-sizing: border-box;
        width: 100%;
        min-height: 2.8rem;
        margin: 0;
        padding: 0.65rem 0.7rem;
        border-radius: 0.45rem;
        color: ivory;
    }

    .site-navigation-links > a:hover,
    .site-navigation-links > .addonDropd > .ourOffer:hover { background: rgba(255, 255, 255, 0.1); }
    .site-navigation-links .addonDropd { width: 100%; margin-left: 0; }
    .site-navigation-links .dropBtn { margin-left: 0; font-size: 1rem; }
    .site-navigation-links .dropIcon { width: 1.35rem; height: 1.35rem; margin-left: auto; }
    .site-navigation-links .dropdown {
        position: static;
        width: auto;
        min-width: 0;
        margin: 0.2rem 0 0;
        border-color: rgba(255, 255, 255, 0.18);
        border-radius: 0.45rem;
    }
    .site-navigation-links .addonDropd:not([open]):hover .dropdown { display: none; }
    .site-navigation-links .addonDropd[open] .dropdown { display: grid; }
    .site-navigation-links .dropdown a { min-height: 2.65rem; padding: 0.6rem 0.7rem; }

    .shoppC {
        position: relative;
        display: block;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        margin-left: 0;
    }
    #shoppC { display: grid; place-items: center; margin: 0; line-height: 0; }
    #shoppC img { width: 1.4rem; height: 1.4rem; padding: 0.65rem; }
    .totaltOrderdItems {
        position: absolute;
        top: -0.25rem;
        right: -0.25rem;
        display: grid;
        place-items: center;
        min-width: 1.35rem;
        min-height: 1.35rem;
        margin: 0;
        padding: 0.1rem 0.25rem;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
        box-sizing: border-box;
    }

    .adminForm {
        margin: 0.75rem;
        padding: 1rem;
        border-radius: 0.75rem;
    }

    .adminForm h1 { font-size: clamp(1.7rem, 9vw, 2.35rem); }
    .order-admin-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .order-admin-layout > section { min-width: 0; }

    .order-tabs { gap: 0.4rem; }
    .order-tab { flex: 1 1 calc(50% - 0.4rem); text-align: center; }
    .order-admin-link { margin: 0.4rem 0; padding: 0.7rem; overflow-wrap: anywhere; }

    .order-status-actions { display: grid; grid-template-columns: 1fr; gap: 0.55rem; }
    .order-status-actions form { width: 100%; }
    .order-status-actions button { width: 100%; min-height: 2.65rem; }

    .order-payment,
    .order-picking-section,
    .order-special-build,
    .order-unit-list { padding: 0.85rem; }

    .order-pick-list,
    .order-build-items { padding-left: 1rem; }

    .order-payment-form,
    .sledge-identifier-form,
    .order-unit-id-form { align-items: stretch; }

    .order-payment-form label:not(:first-of-type),
    .sledge-identifier-form label { width: 100%; }

    .order-payment-form input[type="text"],
    .sledge-identifier-form input { box-sizing: border-box; width: 100%; min-width: 0; }

    .order-unit-control { align-items: stretch; }
    .order-unit-id-form { width: 100%; flex-wrap: wrap; }
    .order-unit-id-form label {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        width: 100%;
        gap: 0.5rem;
    }
    .order-unit-id-form input { box-sizing: border-box; width: 100%; min-width: 0; }

    .order-product-row,
    .order-build-item-row { align-items: flex-start; }
    .order-product-row button,
    .order-build-item-row button,
    .order-unit-control button,
    .order-payment-form button,
    .sledge-identifier-form button { min-height: 2.5rem; }

    .sales-dashboard { margin: 0.75rem 0 1.25rem; padding: 0.9rem; }
    .sales-dashboard-summary { flex-wrap: wrap; align-items: flex-start; }
    .sales-dashboard-summary::after { margin-left: auto; }
    .sales-dashboard-summary strong { font-size: 1.2rem; }
    .sales-dashboard-summary small { line-height: 1.35; }

    .welcomeInfo,
    .welcomeInfoIndex { margin: 0.75rem; }

    .registrerdProdukts {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0 0.75rem;
    }

    .product-filter-panel,
    .product-filter-empty { width: calc(100% - 1.5rem); }
    .product-filter-summary { min-height: 2.8rem; padding: 0.65rem 0.85rem; }
    .product-filter-form { padding: 0.75rem 0.85rem 0.85rem; }
    .product-filter-controls { grid-template-columns: minmax(0, 1fr); }

    .info-box-new { box-sizing: border-box; width: min(100%, 32rem); margin: 0 auto; min-width: 0; font-size: 100%; }
    .info-box-new > div { padding-bottom: 8.6rem; }
    .info-box-new > div > form,
    .info-box-new > form { width: 82%; }
    .info-box-new h1 { overflow-wrap: anywhere; font-size: clamp(1.1rem, 5.6vw, 1.65rem); }
    .info-box-new h2 { font-size: clamp(1rem, 4.8vw, 1.4rem); }
    .buy-details-button { font-size: clamp(1.25rem, 7vw, 1.9rem); }

    .orderList > h1 { margin-left: 0.75rem; }
    .orderdItems {
        box-sizing: border-box;
        margin: 0.75rem;
        padding: 1rem;
        gap: 0.85rem;
    }

    .orderList > ul { margin: 0; padding: 0; list-style: none; }
    .orderdItems .imgOfOrderdAmount { flex: 0 0 min(100%, 14rem); width: min(100%, 14rem); margin: 0 auto; }
    .orderdItems .priceRow,
    .orderdItems .totalPriceRow { flex-wrap: wrap; margin: 0; }
    .orderdItems .cart-actions { flex-wrap: wrap; gap: 0.5rem; }
    .orderdItems .cart-actions form { flex: 1 1 9rem; }
    .orderdItems .cart-actions .editBtnSC,
    .orderdItems .cart-actions .deleteBtnSC { width: 100%; min-height: 2.6rem; }
    .orderdItems .amountBtns { display: flex; align-items: center; gap: 0.35rem; }
    .orderdItems .amountBtns form { margin: 0; }
    .orderdItems .amountBtns .btnAmount { width: 2.75rem; height: 2.75rem; margin: 0; object-fit: contain; }

    .finalCost,
    .customerDetails,
    .discount-code-field { box-sizing: border-box; width: auto; margin: 0.75rem; }

    .finalCost { padding: 1rem; gap: 0.65rem; }
    .finalCost p { font-size: clamp(1rem, 5vw, 1.35rem); white-space: normal; }
    .finalCostLabel { font-size: clamp(1.35rem, 7vw, 1.85rem); }

    .discount-code-field { padding: 1rem; }
    .discount-code-field label,
    .discount-code-field input,
    .discount-code-field button { box-sizing: border-box; width: 100%; }
    .discount-code-field button { min-height: 2.65rem; margin-top: 0.55rem; }

    .customerDetails { padding: 0; }
    .custInfo { padding: 1rem; }
    .customerDetailsForm .field { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; }
    .customerDetailsForm .field label { min-width: 0; margin: 0.45rem 0 0; }
    .customerDetailsForm .field.delivery-choice { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; }
    .customerDetailsForm .field.delivery-choice label { margin: 0; }
    .customerDetailsForm .field.delivery-choice input[type="radio"] { width: auto; min-height: 0; }
    .customerDetailsForm .field input,
    .customerDetailsForm .field textarea,
    .customerDetailsForm .field select { box-sizing: border-box; width: 100%; min-height: 2.55rem; }
    .customerDetails .actionBtn { box-sizing: border-box; width: calc(100% - 2rem); min-height: 2.8rem; margin: 1.25rem 1rem; font-size: 1.15rem; }

    .builder-option-row {
        display: grid;
        grid-template-columns: 4rem minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.65rem;
    }
    .builder-option-row > label:first-child { min-width: 0; }
    .builder-option-thumbnail { width: 4rem; height: 3.2rem; }
    .builder-option-row .stainless-option { grid-column: 2 / -1; }
    /* Håll informationsrutan i samma höjd som i-knappen utan att täcka förhandsbilden. */
    .builder-tooltip {
        top: 50%;
        right: calc(100% + 0.45rem);
        width: min(13rem, calc(100vw - 8rem));
        max-width: calc(100vw - 8rem);
        transform: translateY(-50%);
    }

    .moreInfoFC { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
    .moreInfo table { table-layout: fixed; }
    .moreInfo th,
    .moreInfo td { overflow-wrap: anywhere; }

    .reviewOrderdItems,
    .finalCostRev { box-sizing: border-box; margin: 0.75rem; padding: 1rem; }
    .confirmation-item-heading { flex-wrap: wrap; gap: 0.35rem 0.75rem; }

    footer { padding: 1.25rem 1rem; }
    footer nav > div { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
    footer img { width: min(12rem, 70vw); }
    .companyLogo,
    .contactInfo,
    .adminPage { justify-self: center; margin-left: 0; }
}

@media (max-width: 25rem) {
    .sales-stat-grid { grid-template-columns: 1fr; }
    .order-tab { flex-basis: 100%; }
    .adminForm { margin: 0.5rem; padding: 0.8rem; }
    .registrerdProdukts { grid-template-columns: 1fr; }
}

/* Gemensam navigering med huvudsidan: kompakt och synlig under scroll. */
.shop-site-header {
    position: sticky;
    top: 0.5rem;
    z-index: 9000;
    margin: 0 1rem;
    padding: 0;
    background: transparent;
    border: 0;
    backdrop-filter: none;
}

.headernav {
    width: 100%;
    max-width: 1380px;
    min-height: 0;
    margin: 0 auto;
    padding: 1rem 1.4rem;
    border-radius: 2rem;
    box-shadow: 0 0.7rem 1.8rem rgba(3, 25, 45, 0.22);
    font-size: 1.05rem;
}

.headernav a,
.headernav label { margin-left: 0.8rem; }
.headernav .companyLogo { margin-left: 0; margin-right: auto; }
.headernav .companyLogo img { display: block; width: 160px; max-height: 66px; object-fit: contain; }
.headernav .site-navigation { margin-left: 0; }
.headernav .site-navigation-links { gap: 1.25rem; }
.headernav .main-site-link { font-family: var(--font-display); font-weight: 400; }
.site-footer .admin-access-link { color: rgba(255, 255, 255, .72); font-family: Arial, Helvetica, sans-serif; font-size: .82rem; font-weight: 400; text-decoration: none; }
.site-footer .admin-access-link:hover, .site-footer .admin-access-link:focus-visible { color: ivory; text-decoration: underline; }
.terms-page .terms-admin-access { margin-top: 2.5rem; font-family: Arial, Helvetica, sans-serif; font-size: .78rem; opacity: .55; }
.terms-page .terms-admin-access a { color: inherit; text-decoration: none; }
.terms-page .terms-admin-access a:hover, .terms-page .terms-admin-access a:focus-visible { text-decoration: underline; opacity: 1; }
.headernav .dropBtn,
.headernav .ourOffer,
.headernav a { font-size: 1.05rem; }
.headernav a,
.headernav .ourOffer {
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.headernav a:hover,
.headernav a:focus-visible,
.headernav .ourOffer:hover,
.headernav .addonDropd[open] > .ourOffer {
    color: bisque;
    border-bottom-color: bisque;
}
.headernav .dropIcon { width: 1.45rem; height: 1.45rem; }
#shoppC { display: grid; width: 2.375rem; height: 2.375rem; padding: 0; place-items: center; line-height: 0; }
#shoppC img { width: 1.25rem; height: 1.25rem; padding: 0; }

@media (max-width: 48rem) {
    .shop-site-header { top: 0; padding: 0; }
    .headernav { width: auto; min-height: 0; margin: 0.75rem; padding: 0.75rem; font-size: 1rem; }
    .headernav a,
    .headernav label { margin-left: 0; }
    .headernav .companyLogo img { width: 8rem; max-height: 52px; }
    #shoppC { width: 2.8rem; height: 2.8rem; }
}