@import 'typography.css';
@import 'menu.css';
@import 'colors-vars.css';
@import 'hero.css';
@import 'payments.css';
@import 'phocastuff.css';
@import 'footer.css';

:root {
    --table-active-bg: unset !important;
    --table-hover-color: unset !important;
    --table-bg-state:  unset !important;
}

body {
    overflow-x: hidden;
    font-family: "Manrope", sans-serif;
    font-size: var(--fs-size-1);
    background: var(--white-1);

    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        margin-block: 1em;
        text-wrap: balance;
        font-weight: 400;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Inter', sans-serif !important;
        font-weight: 400;
    }

    h1 {
        font-size: var(--fs-size-4);
    }

    .h1 {
        font-size: var(--fs-size-4);
        margin-block: 1em;
    }

    h2 {
        font-size: var(--fs-size-3);
    }

    .h2 {
        font-size: var(--fs-size-3);
        margin-block: 1em;
    }

    h3 {
        font-size: var(--fs-size-2);

    }

    .h3 {
        font-size: var(--fs-size-2);
        margin-block: 1em;
    }

    h4 {
        font-size: var(--fs-size-1);
    }

    .h4 {
        font-size: var(--fs-size-1);
        margin-block: 1em;
    }

    h5 {
        font-size: var(--fs-size-1);
    }


    .fs-0 {
        font-size: var(--fs-size-0) !important
    }

    .fs-1 {
        font-size: var(--fs-size-1) !important
    }

    .fs-2 {
        font-size: var(--fs-size-2) !important
    }

    .fs-3 {
        font-size: var(--fs-size-3) !important
    }

    .fs-4 {
        font-size: var(--fs-size-4) !important
    }

    .fs-5 {
        font-size: var(--fs-size-5) !important
    }

    .fs-6 {
        font-size: var(--fs-size-6) !important
    }
}
.no-case {
    text-transform:none !important;
}
ol, ul {
    padding-left: 23px;
    li {
        margin-bottom:5px;
    }
}

h1, h2, h3, h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.btn.btn-primary {
    background-color: #ff3600;
    color: #fff;
    padding: 0 30px;
    border: 2px solid transparent;
    background-image: linear-gradient(51deg, #fe3966 50%, #ff4538 70%, #ff8a42 100%);
    box-shadow: -5px -5px 15px rgba(255, 255, 255, .9), 5px 5px 15px rgba(163, 39, 0, .3);
    background-origin: border-box;
    background-size: 200%;
    background-position-x: 100%;
    transition: .2s ease-in-out;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow;
    height: 50px;
    border-radius: 100vh;
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap:10px;

    &:hover, &:active, &:focus {
        background-color: #ff3600;
        color: #fff;
        border: 2px solid transparent;
        background-image: linear-gradient(51deg, #fe3966 50%, #ff4538 70%, #ff8a42 100%);
        box-shadow: -2px -2px 5px rgba(255, 255, 255, .9), 2px 2px 5px rgba(163, 39, 0, .7);
        background-position-x: 0;
    }

    &.btn-large {
        font-size: var(--fs-size-2);
    }
}
.btn.btn-danger {
    background-color:var(--blue-2);
    color: #fff;
    padding: 0 30px;
    border: 2px solid transparent;

    box-shadow: -5px -5px 15px rgba(255, 255, 255, .9), 5px 5px 15px rgba(163, 39, 0, .3);
    background-origin: border-box;
    background-size: 200%;
    background-position-x: 100%;
    transition: .2s ease-in-out;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow;
    height: 50px;
    border-radius: 100vh;
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap:10px;

    &:hover, &:active, &:focus {
        background-color: #ff3600;
        color: #fff;
        border: 2px solid transparent;
        background-image: linear-gradient(51deg, #fe3966 50%, #ff4538 70%, #ff8a42 100%);
        box-shadow: -2px -2px 5px rgba(255, 255, 255, .9), 2px 2px 5px rgba(163, 39, 0, .7);
        background-position-x: 0;
    }
}

.centered {
    margin-inline: auto;
}

.footer {
    background: var(--text-1);
    color: var(--white-1);
    font-size: var(--fs-size-0);

    .mod-copyright {
        a {
            font-family: 'Manrope', sans-serif;
            font-weight: 400;
            text-transform: lowercase;
            color: var(--white-1);
            position: relative;
            transition: all .2s ease-in-out;

            &::after {
                position: absolute;
                border: solid 1px var(--red-1);
                opacity: 0;
                inset: 0 -3px 0 -3px;
                transition: all .2s ease-in-out;
            }

            &:hover {
                color: var(--red-1);

                &::after {
                    position: absolute;
                    border: solid 1px var(--red-1);
                    opacity: 1;
                    content: '';
                }
            }
        }
    }


}

.no-content {
    .container-component {
        display: none;
    }
}

.balanced {
    text-wrap: balance;
}

.pretty {
    text-wrap: pretty;
}

.checked {
    ul li {
        list-style-image: url('/images/elements/check.svg');
        margin-bottom: 10px;
    }
}

.homepage {
    .container-top-b {
        .moduletable {
            h3 {
                position: relative;
                padding-left: 30px;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0px;
                    width: 20px;
                    height: 20px;

                }

                &.trophy-icon {
                    &::before {
                        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5q0 .807-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33 33 0 0 1 2.5.5m.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935m10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935M3.504 1q.01.775.056 1.469c.13 2.028.457 3.546.87 4.667C5.294 9.48 6.484 10 7 10a.5.5 0 0 1 .5.5v2.61a1 1 0 0 1-.757.97l-1.426.356a.5.5 0 0 0-.179.085L4.5 15h7l-.638-.479a.5.5 0 0 0-.18-.085l-1.425-.356a1 1 0 0 1-.757-.97V10.5A.5.5 0 0 1 9 10c.516 0 1.706-.52 2.57-2.864c.413-1.12.74-2.64.87-4.667q.045-.694.056-1.469z'/%3E%3C/svg%3E");
                    }
                }

                &.key-icon {
                    &::before {
                        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8m4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647l.646-.647a.5.5 0 0 1 .708 0l.646.647l.646-.647a.5.5 0 0 1 .708 0l.646.647l.793-.793l-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5'/%3E%3Cpath d='M4 8a1 1 0 1 1-2 0a1 1 0 0 1 2 0'/%3E%3C/g%3E%3C/svg%3E");
                        transform: rotate(-45deg);
                        width: 24px;
                        height: 24px;
                        margin-top: 2.5px;
                    }
                }
            }
        }

    }
}
.mod-imagegallery .image-item {
    & .image-caption {
        .caption-title, .caption-text {
            color: var(--caption-color);
            font-size: var(--fs-size-1);
        }
    }
}
.mod-imagegallery .image-item {
    & a {
        .expand-image {
            position: absolute;
            z-index: 5;
            top: 20px;
            left: 20px;
            /* inset: calc(50% - 20px); */
        }
    }
}
.margin-0 {
    margin: 0;
}

.grid-child {
    padding-block: 3rem;
}

.grid-child:has(.moduletable.full-width) {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100vw;
    width: 100vw;
    padding-inline: 3rem;

    .moduletable {
        max-width: 1800px;
        margin-inline: auto;
    }
}

.grid-child:has(.moduletable.blue-bg) {
    background: var(--blue-2);
    color: var(--white-1);

    table {
        tr {
            td:first-child {
                padding-left: 0;
            }

            td:last-child {
                padding-right: 0;
            }
        }

        thead {
            tr {
                th:first-child {
                    padding-left: 0;
                }

                th:last-child {
                    padding-right: 0;
                }

            }
        }

    }

    thead {
        th {
            color: var(--white-1);
        }

        border-bottom: 1px solid var(--white-1-rgba);
    }
}

.grid-child:has(.padding-top-0) {
    padding-top: 0;
}

.site-grid {
    max-width: 1600px;
    margin-inline: auto;
    width: 100%;
}
.grid-child.container-messages {
    grid-area: mess;
}
.container-top-c {
    grid-area: top-c;

    .moduletable {
        width: 100%;
    }
}

.container-top-d {
    grid-area: top-d;

    .moduletable {
        width: 100%;
    }
}

.container-top-e {
    grid-area: top-e;

    .moduletable {
        width: 100%;
    }
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0 0;

    thead {
        border-bottom: 1px solid var(--text-1);
    }

    .btn.btn-primary {
        box-shadow: -5px -5px 15px rgba(0, 0, 0, .9), 5px 5px 15px rgba(0, 0, 0, .3);
        margin-top: 2.5rem;
        &:hover {
            box-shadow: -5px -5px 15px rgba(0, 0, 0, .9), 5px 5px 15px rgba(0, 0, 0, .8);
        }
    }
}

.no-border {
    border: none !important;
}

.comparison-table th {

    color: var(--text-1);
    padding: 1rem;
    text-align: left;
}

.comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--white-1-rgba);
}

.featuregrid {
    --icon-space: 135px;
    display: grid;
    grid-template-columns: var(--icon-space) 1fr;
    gap: 50px;
    align-items: center;

    .featureicon {
        width: var(--icon-space);
        height: var(--icon-space);


        svg {
            width: var(--icon-space);
            height: var(--icon-space);

            path:first-child {
                animation: smokey 3s linear infinite;
            }
        }
    }

    .featuretext {
        max-width: 60ch;

        h3 {
            margin-top: 0;
        }

        p {
            margin-bottom: 0;
        }
    }
}
body.view-profile {
#member-profile {
    fieldset:nth-child(2) {
        display: none;
    }
}
    .com-users-profile__edit-submit {
        .controls {
            display:flex;
            gap:1rem;
            align-items: center;
        }
    }
}
@keyframes smokey {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(0.75px);
    }
    100% {
        transform: translateY(0px);
    }
}

#moneybuddy {
    .paypal-product-info {
        max-width: 750px;
    }

    @media (width >= 576px) {
        .modal-dialog {
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
    }
}

.modal.fade.show {
    .modal-header {
        padding: 0 15px;
        height: 50px;
        border-bottom:none;
    }
    .modals-box {
        height: auto !important;
        width: 100% !important;
    }
}
#login-modal {
.mod-login__options {
    a {
        text-decoration:none;
        font-size:var(--fs-size-0);
    }
}
    .plg_system_webauthn_login_button {
        display:none;
    }
}

.back-to-top-link {
    inset-inline-end: 1rem;
    z-index: 10000;
    color: var(--white-1);
    pointer-events: all;
    background-color: var(--blue-2);
    border: none;
    opacity: 0;
    border-radius: 100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width:48px;
    height:48px;
    transition: opacity .2s ease-in;
    position: fixed;
    bottom: 1rem;
    text-decoration: none;
    &:hover,&:active, &:focus {
        backround-color: var(--blue-3);
    }
    svg {
        margin-top:-6px;
    }
}
.back-to-top-link:hover, .back-to-top-link:focus {

    background-color: rgba(8,8,33,0.8);
    border-color: var(--white, #fff);
    border:none;
}
body.view-contact {
    .page-header, h2 {
        display:none;
    }
    main {
        display:flex;
        gap: 2rem;
        .com-contact__miscinfo, .com-contact {
            width:calc(50% - 1rem);
        }
    }
    @media screen and ( width < 900px ) {
        main {
           display:unset;
            .com-contact__miscinfo, .com-contact {
                width:unset;
            }
        }
    }
}

#contact-form {
    max-width:620px;

    .control-group {
       margin-top: 0rem;
    }
    .control-group.field-spacer {
        visibility: hidden;
        height:0;
        width:0;
    }
    .m-0 {
        .control-group:nth-child(2) {
            width:calc(50% - 1rem);
            display: inline-block;
            float: left;
            margin-right: 2rem;
        }
        .control-group:nth-child(3) {
            width:calc(50% - 1rem);
            display: inline-block;
        }
    }
    @media screen and ( width < 500px ) {
        .m-0 {
            .control-group:nth-child(2) {
                width:unset;
                display: inline-block;
                float: none;
                margin-right:0;
            }
            .control-group:nth-child(3) {
                width:unset;
                display: inline-block;
                float: none;
                margin-right:0;
            }
            input {

            }
        }
    }
}
.form-control {
    width: 100%;
    color: var(--body-color);
    appearance: none;
    background-color: var(--body-bg);
    border: var(--border-width) solid rgba(8,8,33,0.2);
    border-radius: var(--border-radius);
    background-clip: padding-box;
    padding: .6rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    display: block;
}
body.com_hikashop.view-order.layout-show.task-show {
    .hikashop_order_main_table {
        #htmlfieldset_billing {
            display:none;
            thead {
                display:none !important;
            }
        }
        #htmlfieldset_products {
            thead {
                display:none !important;
            }
            td.hikashop_order_item_price_value, td.hikashop_order_item_quantity_value {
                display:none;
            }
            tr:has(.hikashop_order_subtotal_title.key), tr:has(.hikashop_order_total_title) {
                display:none;
            }
        }
    }
}

.hikashop_product_page {
    &.hikashop_product_show_modern {
        max-width: 840px;
        margin-inline:auto;
        button.hikacart {
            margin-left:0;
        }
        #hikashop_product_top_part {
            text-align:left;
            width:fit-content;
        }
        .hikashop_small_image_div {
            display:none;
        }
        .hikashop_modern_bottom {
            margin-top: 50px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
        }
    }
    #hikashop_social {
        a {
            display:flex;
            align-items:center;
        }
.hikasocial_icon { height:30px;
width:30px;display:grid;
place-content:center;
    padding: 0;}
        .hikasocial_name {
            height:30px;
            padding: 0;
            display: grid;
            place-content: center;
            font-size:1rem;
            font-weight:400;
        }
    }
    .hikashop_modern_row .hikashop_modern_images {
         flex: unset;
         max-width: unset;
    }
    .hikashop_modern_row {
        display: grid;
        flex-wrap: unset;
        gap: 40px;
        grid-template-columns: 400px 400px;

        & > div {
            padding: 0;
        }

        & > * {
            grid-column: auto;
        }
        #hikashop_product_right_part {
            display:grid;
            align-items:center;
            .right-part-wrapper {
                box-sizing: border-box;
                width: 100%/*min(340px, 100%)*/;
                display: flex;
                flex-direction: column;
                gap: 13px;
                padding: 26px 24px;
                background: #ffffff;
                border: 1px solid #f4ddd4;
                border-radius: 20px;
                box-shadow: 0 20px 45px -22px rgba(254, 57, 102, 0.28);
                font-family: 'Inter', sans-serif;
                color: #2b2b3a;
                #hikashop_product_quantity_main {
                    margin-block:0;
                }
                #hikashop_product_contact_main, .hikashop_product_tags, #hikashop_product_id_main, .hikashop_product_price_with_options_main, #hikashop_product_quantity_field_1_buttons {
                    display:none;
                }
            }
        }
        .hikashop_product_price_per_unit {
            display:none;
        }
        @media screen and ( width < 982px ) {
            grid-template-columns:1fr;
        }
    }
}
.hikashop_modern_description_section {
    #hikashop_product_description_main {
        &.hikashop_product_description_main.hikashop_modern_description_text {
            column-count:unset;
        }
    }
    h1,h2 {
        display:none;
    }
}

#hikashop_checkout_registration {
    .hkform-group {
        margin-bottom: 5px;
        margin-top: 0;
        &.hikashop_registration_required_info_line {
            margin-block:1rem;
        }
    }
}
#hikashop_checkout {
    .hikashop_checkout_page.hikashop_checkout_page_step1 {

    }
    #hikashop_checkout_payment_1_3, #hikashop_checkout_status_1_7 {
        display:none;
    }
    #hikashop_checkout_registration {
        @media (min-width: 768px) {
            .hkc-sm-4 {
                grid-column: span 3;
                --hk-span: 3;
            }
        }
    }
}
.hikashop_checkout_cart {
    table {
        width:fit-content;
        &:hover, &:active, &:focus {
            background-color:unset !important;
            box-shadow:none !important;
        }
    }
    thead {
        display:none;
    }
    tr {
        display:flex;
        gap:20px;
        &:hover, &:active, &:focus {
            background-color:unset !important;
        }
    }

    td {
        padding:0;
        display: inline-block;
        background:none !important;
        border-bottom:none;
        &.hikashop_cart_product_name_value, &.hikashop_cart_product_total_value {
            display:none;
        }
    }

}
.hikashop_checkout_buttons {
    & > div.buttons_left, & > div.buttons_right {
        float:none;
    }
}
.hikashop_product_quantity_input_div_default_main {
    display:flex !important;
    gap:5px;
}
.table-striped>tbody>tr:nth-of-type(odd)>*, .table-striped-columns>:not(caption)>tr>:nth-child(2n) {
    --table-color-type: unset !important;
    --table-bg-type:unset !important;
}
#hikashop_checkout_form {
    .hikashop_checkout_address {
        display:none;
    }
    .hikashop_checkout_cart {
        table {
            margin-inline:auto;
        }
        .hikashop_cart_product_price_value {
            display:grid;
            place-content:center;
        }
    }
}
@media screen and ( width < 715px ) {
    .hikashop_product_page {
        .hikashop_modern_row {
            display: grid;
            flex-wrap: unset;
            gap: 40px;
            grid-template-columns: 1fr;
        }
    }
    .hikashop_product_page {
        &.hikashop_product_show_modern {
            max-width: fit-content;
        }
    }
}
@media screen and ( width >= 1090px ) {
    .visible-phone {
        display:none;
    }
}
@media screen and ( width < 1090px ) {
    .hidden-phone {
        display:none !important;
    }
}
@media screen and ( width < 481px ) {
  .grid-child.container-nav {
      & > div {
          width:100%;
      }
      .container-search {
          justify-content: center;
      }
      .logoBox {
          text-align:center;
      }
  }
}
@media screen and ( width < 400px ) {
    body .grid-child.container-top-e {
        .mod-imagegallery.image-grid.image-grid {
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
        }
    }

}
@supports (display:grid) {
    .site-grid {
        grid-gap: 0 1em;
        grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
        grid-template-areas:
        ".banner banner banner banner."
        ".mess mess mess mess."
        ".top-a top-a top-a top-a."
        ".top-b top-b top-b top-b."
        ".top-c top-c top-c top-c."
        ".top-d top-d top-d top-d."
        ".top-e top-e top-e top-e."
        ".comp comp comp comp."
        ".side-r side-r side-r side-r."
        ".side-l side-l side-l side-l."
        ".bot-a bot-a bot-a bot-a."
        ".bot-b bot-b bot-b bot-b.";
        display: grid;
    }
}

@supports (display:grid) {
    @media (width >= 992px) {
        .site-grid {
            grid-template-areas:
        ".banner banner banner banner."
        ".mess mess mess mess."
        ".top-a top-a top-a top-a."
        ".top-b top-b top-b top-b."
        ".top-c top-c top-c top-c."
        ".top-d top-d top-d top-d."
        ".top-e top-e top-e top-e."
        ".side-l comp comp side-r."
        ".bot-a bot-a bot-a bot-a."
        ".bot-b bot-b bot-b bot-b.";
        }
    }
}

@media screen and ( width < 980px ) {
    /*.grid-child {
        padding-top: 0rem;
    }
    .grid-child.container-top-a {
        padding-top:3rem;
    }*/
}

@media screen and ( width < 501px ) {
    .featuregrid {
        --icon-space: 135px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 50px;
        align-items: center;

        .featureicon {
            width: var(--icon-space);
            height: var(--icon-space);
            margin-inline: auto;
        }
    }
}

/* Checkout: hide the original bottom Next/Finish block — it's now rendered inside the cart buy-box, under the total */
#hikashop_checkout > .hikashop_checkout_buttons { display: none !important; }

/* ===== Checkout buy-box card =============================================
   Wraps the coupon / price / quantity / total / Finish stack into one
   focused purchase panel in the site's coral→orange identity.
   Signature: the Total figure rendered in the brand gradient. */
.spf-buybox {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 26px 24px;
    background: #ffffff;
    border: 1px solid #f4ddd4;
    border-radius: 20px;
    box-shadow: 0 20px 45px -22px rgba(254, 57, 102, 0.28);
    font-family: 'Inter', sans-serif;
    color: #2b2b3a;
    height:fit-content;
    .hikashop_checkout_coupon_field, .hikabtn_checkout_coupon_add {
        height:42px;
    }
    #hikashop_checkout_coupon_1_5 {
        .input-group {
            gap:0;
        }
    }
}
#hikashop_checkout_cart_1_6 {
    margin-top:4rem;
    .hikashop_cart_product_image_value {
        text-align:center;
    }
}
.hikashop_main_image_div {
    text-align:center;
}
.spf-buybox * { box-sizing: border-box; }

/* coupon (input + Add) */
.spf-buybox .hikashop_checkout_coupon { margin: 0; padding: 0; }
.spf-buybox .hikashop_checkout_loading_elem,
.spf-buybox .hikashop_checkout_loading_spinner { display: none; }
.spf-buybox .input-group { display: flex; gap: 8px; align-items: center; }
.spf-buybox .hikashop_checkout_coupon_field {
    flex: 1 1 auto; min-width: 0;
    border: 1px solid #e7e2e0; border-radius: 100vh;
    padding: 9px 16px; font-size: .9rem;
}

/* unit price */
.spf-buybox .hikashop_product_price_full {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem; font-weight: 400; color: #8a8a99;
}

/* quantity stepper */
.spf-buybox .hikashop_product_quantity_input_div_default_main,
.spf-buybox .hikashop_product_quantity_input_div_default {
    display: flex; align-items: center; gap: 8px;
}
.spf-buybox .hikashop_product_quantity_field {
    width: 44px; text-align: center;
    border: 1px solid #e7e2e0; border-radius: 8px; padding: 4px;
}
.spf-buybox .hikashop_product_quantity_field_change {
    font-size: 1.15rem; color: #fe3966; text-decoration: none;
    font-weight: 700; line-height: 1; padding: 0 4px;
}

/* redundant refresh hidden (quantity auto-submits); delete → subtle "Remove" */
.spf-buybox .hikashop_cart_product_quantity_refresh { display: none; }
.spf-buybox .hikashop_cart_product_quantity_delete { margin-top: -2px; }
.spf-buybox .hikashop_cart_product_quantity_delete a {
    color: #bdb9c4; font-size: .9rem; text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
}
.spf-buybox .hikashop_cart_product_quantity_delete a:hover { color: #fe3966; }
.spf-buybox .hikashop_cart_product_quantity_delete a::after {
    content: 'Remove'; font-family: 'Inter', sans-serif;
}

/* total — the signature figure, in the brand gradient */
.spf-buybox .hikashop_cart_total_row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding-top: 16px; border-top: 1px solid #f0e7e3;
}
.spf-buybox .hikashop_cart_total_title {
    font-weight: 600; font-size: .95rem; color: #4a4a58;
}
.spf-buybox .hikashop_cart_total_value,
.spf-buybox .hikashop_checkout_cart_final_total {
    font-family: 'Manrope', sans-serif;
    font-size: 1.7rem; font-weight: 800; line-height: 1;
    color: #fe3966; /* fallback where background-clip:text is unsupported */
    background: linear-gradient(51deg, #fe3966 40%, #ff4538 70%, #ff8a42 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Finish CTA — full-width pill */
.spf-buybox .hikashop_buybox_buttons { margin-top: 2px; }
.spf-buybox .hikashop_buybox_buttons .hikabtn_checkout_next {
    display: block; width: 100%; text-align: center;
    padding: 13px 22px; font-size: 1rem; font-weight: 700;
}

/* Buy-box responsive: let the card drop below the product image when the
   row can't fit side by side, and keep the product image fluid. */
.hikashop_checkout_cart tr { flex-wrap: wrap; }
.hikashop_checkout_cart img { max-width: 100%; height: auto; }

/* Phone / tablet: stack the row cleanly and let the card fill the width. */
@media screen and (max-width: 1090px) {
    .hikashop_checkout_cart table { width: 100%; }
    .hikashop_checkout_cart tr { flex-direction: column; align-items: stretch; gap: 24px; }
    .spf-buybox { width: 100%; max-width: 420px; margin-inline: auto; }

    /* strip Hikashop's responsive table chrome: cell/row borders, the
       data-title labels, and the 30% left padding — the card stands alone.
       (#hikashop_checkout prefix outranks Hikashop's !important padding rule.) */
    #hikashop_checkout .hikashop_checkout_cart table tr,
    #hikashop_checkout .hikashop_checkout_cart table td { border: none !important; }
    #hikashop_checkout .hikashop_checkout_cart table td { padding-left: 0 !important; }
    #hikashop_checkout .hikashop_checkout_cart table td::before { content: none !important; display: none !important; }
}

/* Cart: remove the row-hover background (Bootstrap 5.3 paints it on the cells
   via --bs-table-bg-state, so unsetting tr:hover alone wasn't enough). */
.hikashop_checkout_cart tbody tr:hover,
.hikashop_checkout_cart tbody tr:hover > * {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --table-bg-state: transparent !important;
}

/* ===== Orders page (/my-downloads) ======================================
   Restyles the Hikashop order-listing cards to share the checkout buy-box
   identity: coral-bordered white cards, the order total in the brand
   gradient (the signature figure), soft status pills, and the Download
   CTA as the card's primary action. Scoped to #hikashop_order_listing. */
#hikashop_order_listing {
    max-width: 860px;
    margin-inline: auto;
    font-family: 'Inter', sans-serif;
}

/* filter bar: the search column is hidden; the sort column (order counter +
   period/status selects) spans the full grid width and lays its controls in a
   single row. (.hk-row-fluid is a CSS grid, so the visible column needs an
   explicit grid-column:1/-1 to reclaim the hidden search column's track.) */
#hikashop_order_listing .hkc-md-6:has(.hikashop_search_block) { display: none; }
#hikashop_order_listing .hkc-md-6:has(.hikashop_order_sort) { grid-column: 1 / -1; display: flex; flex-direction: row; }
#hikashop_order_listing .hikashop_order_sort {
    display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px;
    select {
        margin-bottom:0 !important;
    }
}
#hikashop_order_listing .hikashop_order_sort br { display: none; }
#hikashop_order_listing .hikashop_order_sort select {
    width: auto; min-width: 200px;
    border: 1px solid #e7e2e0;
    border-radius: 12px;
    padding: 9px 40px 9px 16px;
    font-size: .9rem;
    background: #fff;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a8a99' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
}

/* order card — the buy-box card treatment */
#hikashop_order_listing .hk-card-order {
    background: #fff;
    border: 1px solid #f4ddd4;
    border-radius: 20px;
    box-shadow: 0 20px 45px -22px rgba(254, 57, 102, .28);
    padding: 6px 24px 20px;
    margin-bottom: 22px;
    /* no overflow:hidden — it clipped the Actions dropdown. The only child with
       a background (the expanded product row) sits inside the padding with its
       own radius, so nothing bleeds into the card's rounded corners. */
}

/* header: muted date left, gradient total right */
#hikashop_order_listing .hk-card-order .hk-card-header {
    background: transparent !important;
    border: none !important;
    padding: 16px 0 12px;
}
#hikashop_order_listing .hk-card-header a { text-decoration: none !important; align-items: baseline; }
#hikashop_order_listing .hika_cpanel_date {
    display: flex; align-items: center; gap: 7px;
    font-family: 'Manrope', sans-serif; font-size: .92rem; font-weight: 500;
    color: #8a8a99 !important;
}
#hikashop_order_listing .hika_cpanel_date i { color: #c9b8bf; }
#hikashop_order_listing .hika_cpanel_price {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
    text-align: right;
    font-family: 'Manrope', sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1;
    color: #fe3966; /* fallback where background-clip:text is unsupported */
    background: linear-gradient(51deg, #fe3966 40%, #ff4538 70%, #ff8a42 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
#hikashop_order_listing .hika_cpanel_price i { display: none; }

/* body: order/invoice number, status, actions */
#hikashop_order_listing .hk-card-body { padding: 14px 0 4px; border-top: 1px solid #f0e7e3; }
#hikashop_order_listing .hk-card-body .hk-row-fluid { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
#hikashop_order_listing .hika_order_left_div { flex: 1 1 200px; }
#hikashop_order_listing .hika_order_number { text-decoration: none; color: #2b2b3a; font-size: .95rem; }
#hikashop_order_listing .hika_order_number_title,
#hikashop_order_listing .hika_invoice_number_title { color: #8a8a99; }
#hikashop_order_listing .hika_order_number_value,
#hikashop_order_listing .hika_invoice_number_value { font-weight: 700; color: #2b2b3a; }

/* status pills — semantic, softened */
#hikashop_order_listing .order-label {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 100vh;
    font-size: .76rem; font-weight: 600; letter-spacing: .02em; text-transform: capitalize;
}
#hikashop_order_listing .order-label-created { background: #f1eff3; color: #8a8a99; }
#hikashop_order_listing .order-label-confirmed { background: #e7f6ee; color: #1f9d57; }

/* actions + download column */
#hikashop_order_listing .hika_order_action { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#hikashop_order_listing .hika_order_action .hikabtn {
    border: 1px solid #e7e2e0; background: #fff; color: #4a4a58;
    border-radius: 100vh; padding: 7px 16px; font-size: .85rem; font-weight: 600;
}
#hikashop_order_listing .hika_order_download_btn { height: auto; padding: 9px 20px !important; font-size: .9rem; }
#hikashop_order_listing .hika_order_download_btn i { margin-right: 2px; }

/* expand-products chevron */
#hikashop_order_listing .hika_order_more .hikabtn-default {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid #e7e2e0; background: #fff; color: #8a8a99; border-radius: 10px;
}

/* expanded product list */
#hikashop_order_listing .hika_order_products { border: none; margin-top: 8px; }
#hikashop_order_listing .hika_order_product {
    display: flex; align-items: center; gap: 14px;
    border: none; background: #faf7f6; border-radius: 14px; padding: 12px 16px;
}
#hikashop_order_listing .hika_order_product a { text-decoration: none; color: #2b2b3a; font-weight: 600; }
#hikashop_order_listing .hika_order_product_price { margin: 0; color: #8a8a99; font-family: 'Manrope', sans-serif; }

/* footer / pagination */
#hikashop_order_listing .hikashop_orders_footer { color: #8a8a99; }

/* phone: tighten card padding */
@media screen and (max-width: 600px) {
    #hikashop_order_listing .hk-card-order { padding: 4px 16px 16px; }
    #hikashop_order_listing .hika_cpanel_price { font-size: 1.3rem; }
    #hikashop_order_listing .hikashop_order_sort { align-items: stretch; }
    #hikashop_order_listing .hikashop_order_sort select { min-width: 0; width: 100%; }
}

/* ===== Downloads page (/account/my-downloads) ===========================
   Hikashop renders this view as a data table; here it's card-ified in pure
   CSS (every cell already carries a data-title) to match the orders cards:
   product name as the header, purchase date as muted meta, the download-limit
   as a green status pill, and the file link relabelled to a coral Download
   pill. Cells are reordered with flex `order`, not moved in markup. */
#hikashop_download_listing { max-width: 860px; margin-inline: auto; font-family: 'Inter', sans-serif; }

/* filter bar — same treatment as the orders page (search hidden, filters in a row) */
#hikashop_download_listing .hkc-md-6:has(.hikashop_search_block) { display: none; }
#hikashop_download_listing .hkc-md-6:has(.hikashop_filters_block) { grid-column: 1 / -1; display: flex; flex-direction: row; }
#hikashop_download_listing .hikashop_filters_block { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; }
#hikashop_download_listing .hikashop_filters_block select {
    width: auto; min-width: 200px;
    border: 1px solid #e7e2e0; border-radius: 12px;
    padding: 9px 40px 9px 16px; font-size: .9rem; background: #fff;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a8a99' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
}

/* mute the Display#/Results block (it renders above the table on this view) */
#hikashop_download_listing .pagination { color: #8a8a99; font-size: .88rem; }
#hikashop_download_listing .pagination .hikashop_results_counter { color: #8a8a99; }

/* card-ify the table: turn each row into an order-style card */
#hikashop_download_listing #hikashop_downloads,
#hikashop_download_listing #hikashop_downloads tbody { display: block; width: 100%; border: 0; }
#hikashop_download_listing #hikashop_downloads thead { display: none; }
#hikashop_download_listing #hikashop_downloads tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    background: #fff !important; border: 1px solid #f4ddd4; border-radius: 20px;
    box-shadow: 0 20px 45px -22px rgba(254, 57, 102, .28);
    padding: 20px 24px; margin-bottom: 22px;
}
#hikashop_download_listing #hikashop_downloads tbody tr:hover > * { background: transparent !important; --bs-table-bg-state: transparent !important; }
#hikashop_download_listing #hikashop_downloads td { display: block; border: 0 !important; padding: 0 !important; background: transparent !important; }
#hikashop_download_listing #hikashop_downloads td::before { content: none !important; } /* suppress the responsive data-title labels */

/* Product (1) = card header */
#hikashop_download_listing #hikashop_downloads td:nth-child(1) { order: 1; flex: 1 1 100%; padding-bottom: 14px !important; border-bottom: 1px solid #f0e7e3 !important; }
#hikashop_download_listing .hikashop_order_product_link { text-decoration: none; }
#hikashop_download_listing .hikashop_order_product_name { margin: 0; font-size: 1.15rem; font-weight: 700; color: #2b2b3a; }

/* Purchased dates (5) + download count (3) = muted meta, left */
#hikashop_download_listing #hikashop_downloads td:nth-child(5) { order: 2; color: #8a8a99; font-size: .88rem; font-family: 'Manrope', sans-serif; }
#hikashop_download_listing #hikashop_downloads td:nth-child(5) p { margin: 0; line-height: 1.4; }
#hikashop_download_listing #hikashop_downloads td:nth-child(3) { order: 3; color: #8a8a99; font-size: .88rem; font-family: 'Manrope', sans-serif; }
#hikashop_download_listing #hikashop_downloads td:nth-child(3)::after { content: ' downloads used'; }

/* Status / download-limit (4) = green pill, pushed to the right group */
#hikashop_download_listing #hikashop_downloads td:nth-child(4) {
    order: 4; margin-left: auto;
    display: inline-flex; align-items: center;
    padding: 5px 14px; border-radius: 100vh;
    background: #e7f6ee; color: #1f9d57; font-size: .76rem; font-weight: 600; letter-spacing: .02em;
}

/* Files (2) = coral Download pill (keeps Hikashop's own fa-download icon) */
#hikashop_download_listing #hikashop_downloads td:nth-child(2) { order: 5; }
#hikashop_download_listing #hikashop_downloads td:nth-child(2) a.btn-primary { height: auto; padding: 9px 18px !important; font-size: .9rem; gap: 8px; }
#hikashop_download_listing #hikashop_downloads td:nth-child(2) a.btn-primary .hikashop_file_name { display: none; } /* hide the raw filename */
#hikashop_download_listing #hikashop_downloads td:nth-child(2) a.btn-primary::after { content: 'Download'; color: #fff; font-weight: 700; }

/* phone: stack the card body, left-align the status pill */
@media screen and (max-width: 600px) {
    #hikashop_download_listing #hikashop_downloads tbody tr { padding: 16px; }
    #hikashop_download_listing #hikashop_downloads td:nth-child(4) { margin-left: 0; }
}

/* ============================================================
   Product page: Description / Features / Reviews tab box
   (Phoca Cart .ph-item-bottom-box). Scoped so it never touches
   other Bootstrap nav-tabs elsewhere on the site.
   Palette from colors-vars.css (with literal fallbacks in case
   that sheet isn't loaded on a given view).
   ============================================================ */
.ph-item-bottom-box {
    margin-top: 2.25rem;
    background: #ffffff;
    border: 1px solid var(--border-1, #E3E2FF);
    border-radius: 14px;
    box-shadow: 0 18px 40px -24px rgba(8, 8, 33, 0.28);
    overflow: hidden;
}

/* --- Tab bar --- */
.ph-item-bottom-box .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(1.1rem, 4vw, 2.4rem);
    margin: 0;
    padding: 0 clamp(1.25rem, 4vw, 2.25rem);
    border: 0;
    border-bottom: 1px solid var(--border-1, #E3E2FF);
    background: linear-gradient(180deg, #FBFBFF 0%, #F7F8FC 100%);
    /* Keep the three tabs on one row; scroll instead of wrapping on small screens */
    overflow-x: auto;
    scrollbar-width: none;
}
.ph-item-bottom-box .nav-tabs::-webkit-scrollbar { display: none; }

.ph-item-bottom-box .nav-tabs .nav-link { white-space: nowrap; }

/* Features tab removed as redundant — everything lives in the Description tab.
   Hide the whole tab item (so it leaves no gap) and its content pane. */
.ph-item-bottom-box .nav-tabs .nav-item:has(> a[href="#phfeatures"]) { display: none; }
.ph-item-bottom-box #phfeatures { display: none; }
/* Fallback for the rare browser without :has() — hides the label so no empty "Features" shows */
.ph-item-bottom-box #PcItemTab a[href="#phfeatures"] { display: none; }

.ph-item-bottom-box .nav-tabs .nav-item { margin: 0; }

.ph-item-bottom-box .nav-tabs .nav-link {
    position: relative;
    margin: 0;
    padding: 1.15rem 1rem 1.05rem 1rem;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: "Poppins", "Manrope", sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8a89a6;
    transition: color 0.2s ease;
}

.ph-item-bottom-box .nav-tabs .nav-link:hover,
.ph-item-bottom-box .nav-tabs .nav-link:focus-visible {
    color: #080821;
    border: 0;
    background: none;
}

.ph-item-bottom-box .nav-tabs .nav-link.active {
    color: #080821;
    background: none;
    border: 0;
}

/* Signature: animated brand-gradient underline under the active tab */
.ph-item-bottom-box .nav-tabs .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--button-1-bg, linear-gradient(51deg, #fe3966 50%, #ff4538 70%, #ff8a42 100%));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}

.ph-item-bottom-box .nav-tabs .nav-link.active::after {
    transform: scaleX(1);
    opacity: 1;
}

.ph-item-bottom-box .nav-tabs .nav-link:not(.active):hover::after {
    transform: scaleX(1);
    opacity: 0.3;
}

/* --- Content panes --- */
.ph-item-bottom-box .tab-content {
    padding: clamp(1.5rem, 4vw, 2.6rem);
}

.ph-item-bottom-box .ph-tab-pane {
    color: var(--text-1, #22262a);
    font-family: "Manrope", "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.72;
}

.ph-item-bottom-box .ph-tab-pane > *:first-child { margin-top: 0; }
.ph-item-bottom-box .ph-tab-pane > *:last-child { margin-bottom: 0; }

.ph-item-bottom-box .ph-tab-pane h2,
.ph-item-bottom-box .ph-tab-pane h3,
.ph-item-bottom-box .ph-tab-pane h4 {
    font-family: "Poppins", "Manrope", sans-serif;
    color: #080821;
    font-weight: 600;
    line-height: 1.25;
    margin: 1.75rem 0 0.65rem;
}
.ph-item-bottom-box .ph-tab-pane h2 { font-size: 1.4rem; }
.ph-item-bottom-box .ph-tab-pane h3 { font-size: 1.15rem; }
.ph-item-bottom-box .ph-tab-pane h4 { font-size: 1rem; }

.ph-item-bottom-box .ph-tab-pane p { margin: 0 0 1rem; }

.ph-item-bottom-box .ph-tab-pane a {
    color: var(--blue-1, #0401F0);
    text-underline-offset: 2px;
}

/* Feature/description lists get pink "prefetch node" markers (nods to the hero diagram) */
.ph-item-bottom-box .ph-tab-pane ul {
    list-style: none;
    margin: 0 0 1.15rem;
    padding-left: 0;
}
.ph-item-bottom-box .ph-tab-pane ul li {
    position: relative;
    padding-left: 1.7rem;
    margin-bottom: 0.55rem;
}
.ph-item-bottom-box .ph-tab-pane ul li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.62em;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--red-1, #fe3966);
    box-shadow: 0 0 0 4px rgba(254, 57, 102, 0.14);
}

/* "Only logged in users can review" notice */
.ph-item-bottom-box .ph-message {
    margin: 0;
    padding: 1rem 1.15rem;
    background: #F7F8FC;
    border: 1px solid var(--border-1, #E3E2FF);
    border-radius: 10px;
    color: #56566e;
    font-size: 0.95rem;
}

/* Small screens: tighten the tab row so all three labels fit without scrolling */
@media (max-width: 460px) {
    .ph-item-bottom-box .nav-tabs {
        gap: 1rem;
        padding: 0 1rem;
    }
    .ph-item-bottom-box .nav-tabs .nav-link {
        font-size: 0.72rem;
        letter-spacing: 0.05em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ph-item-bottom-box .nav-tabs .nav-link::after { transition: none; }
}

/* ===== Phoca Cart checkout: collapse the already-completed steps ========
   For a returning customer (has a saved address, PayPal auto-selected) the
   Address and Payment steps render in their completed state
   (…-status-finished), so hiding just that state yields a clean
   Cart → Login → Pay checkout. Crucially this is scoped to -finished ONLY:
   a first-time buyer with no saved address gets the address *form* instead,
   which carries …-status-pending, so it stays visible and they can still
   enter name/email — no dead-end. (Verified in getAddressDataOutput(): an
   empty saved billing address + any active billing field ⇒ filled=0 ⇒ the
   form renders, not the finished box.) Shipping is already gone entirely
   because the product type is Digital. */
.ph-checkout-box-address.ph-checkout-box-status-finished,
.ph-checkout-box-payment.ph-checkout-box-status-finished {
    display: none;
}

/* Logged-in buyer: hide the "1. Login / Register — You are logged in as X"
   confirmation box. Phoca only marks the login step `-status-finished` once
   the user is logged in, so this never touches the guest login/register form
   (that renders as `-status-pending`) — no JS/PHP login check needed. */
.ph-checkout-box-login.ph-checkout-box-status-finished {
    display: none;
}

/* Not-logged-in visitor: also hide the greyed-out Address & Payment step
   PLACEHOLDERS. When the buyer hasn't logged in yet, Phoca renders steps 2 & 3
   as inert grey headers (`ph-checkout-box-header-pas`, no form) — they must use
   step 1 (Login/Register) first. We key off that placeholder header, NOT the
   box status, on purpose: a real Address form or a multi-method Payment chooser
   uses `ph-checkout-box-header` and contains a <form>, so neither is ever
   matched here — re-enabling address collection later can't dead-end anyone. */
.ph-checkout-box-address:has(.ph-checkout-box-header-pas),
.ph-checkout-box-payment:has(.ph-checkout-box-header-pas),
.ph-checkout-box-shipping:has(.ph-checkout-box-header-pas){
    display: none;
}
.ph-checkout-box-login {
    .row.ph-checkout-box-row {
        display:none;
    }
}