/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
}

/* BODY */

body{

    width:100%;

    min-height:100vh;

    font-family:Arial, Helvetica, sans-serif;

    background:white;

    overflow-x:hidden;
}

img{

    max-width:100%;
}

button{

    font-family:inherit;
}

/* HEADER */

.header{

    width:100%;

    min-height:140px;

    background:linear-gradient(
        to bottom,
        #7ec8ff,
        #ccecff,
        #ffffff
    );

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 30px;

    box-shadow:0px 3px 10px rgba(0,0,0,0.1);
}

/* LEFT HEADER */

.left-header{

    display:flex;

    align-items:center;
}

/* LOGO */

.logo-container{

    width:160px;

    height:120px;

    background:white;

    border-radius:18px;

    padding:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0px 4px 12px rgba(0,0,0,0.15);
}

.logo-container[data-href]{

    cursor:pointer;
}

.logo{

    width:100%;

    height:100%;

    object-fit:contain;
}

/* RIGHT HEADER */

.right-header{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    justify-content:flex-end;
}

/* HEADER BUTTONS */

.header-btn{

    background:white;

    border:none;

    padding:14px 22px;

    border-radius:14px;

    display:flex;

    align-items:center;

    gap:12px;

    font-size:17px;

    font-weight:bold;

    color:#003c5f;

    cursor:pointer;

    transition:0.3s;

    box-shadow:0px 4px 10px rgba(0,0,0,0.12);

    min-height:52px;

    white-space:normal;

    text-align:center;
}

.header-btn i{

    font-size:22px;
}

.header-btn:hover{

    transform:translateY(-3px);

    background:#eef8ff;
}

.account-menu-wrapper{

    position:relative;

    display:flex;
}

.account-menu{

    position:absolute;

    top:calc(100% + 10px);

    right:0;

    z-index:50;

    min-width:180px;

    border:1px solid #d7efff;

    border-radius:12px;

    background:white;

    padding:8px;

    box-shadow:0px 12px 24px rgba(0,0,0,0.16);

    opacity:0;

    visibility:hidden;

    transform:translateY(-6px);

    transition:0.2s;
}

.account-menu-open .account-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

.account-menu-btn{

    width:100%;

    border:none;

    border-radius:10px;

    background:#f5fbff;

    color:#a33333;

    padding:12px 14px;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    transition:0.25s;
}

.account-menu-btn:hover{

    background:#ffecec;
}

/* ADVERTISEMENT SECTION */

.ad-slider-section{

    width:100%;

    padding:20px;

    background:white;
}

.ad-slider{

    width:100%;

    overflow:hidden;

    border-radius:22px;

    position:relative;

    box-shadow:0px 5px 15px rgba(0,0,0,0.12);
}

.ad-slider-track{

    display:flex;

    width:100%;

    transition:transform 1s ease-in-out;
}

.ad-banner{

    min-width:100%;

    height:420px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e9f7ff;
}

.ad-banner-image{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

.ad-placeholder{

    width:95%;

    height:85%;

    border:4px dashed #7ec8ff;

    border-radius:20px;

    background:white;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:20px;
}

.ad-placeholder h2{

    font-size:42px;

    color:#0077c8;

    margin-bottom:20px;
}

.ad-placeholder p{

    font-size:20px;

    color:#555;
}

/* DOTS */

.slider-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:18px;
}

.dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#a8d6ef;

    transition:0.4s;
}

.active-dot{

    width:42px;

    border-radius:20px;

    background:#0077c8;
}

/* WHY CHOOSE */

.why-choose-section{

    width:100%;

    padding:40px 20px;

    background:linear-gradient(
        to bottom,
        #dff3ff 0%,
        #eef8ff 45%,
        #ffffff 100%
    );
}

.why-choose-container{

    width:90%;

    max-width:1200px;

    margin:auto;

    background:rgba(255,255,255,0.92);

    padding:45px;

    border-radius:24px;

    box-shadow:0px 4px 14px rgba(0,0,0,0.08);

    border:2px solid #d7eefc;
}

.why-choose-container h2{

    font-size:42px;

    color:#005b8f;

    margin-bottom:25px;

    text-align:center;
}

.why-choose-container p{

    font-size:20px;

    color:#444;

    line-height:1.9;

    text-align:center;
}

/* CORE SERVICES */

.core-services-section{

    width:100%;

    padding:50px 20px;

    background:white;
}

.core-services-container{

    width:90%;

    max-width:1300px;

    margin:auto;

    text-align:center;
}

.core-services-container h2{

    font-size:42px;

    color:#005b8f;

    margin-bottom:35px;

    line-height:1.5;
}

.core-services-image-box{

    width:100%;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0px 6px 18px rgba(0,0,0,0.12);
}

.core-services-image{

    width:100%;

    display:block;

    object-fit:cover;
}

/* PRODUCTS SECTION */

.products-section{

    width:100%;

    padding:60px 20px;

    background:linear-gradient(
        to bottom,
        #f5fbff,
        #ffffff
    );
}

.products-container{

    width:95%;

    max-width:1400px;

    margin:auto;
}

.products-container h2{

    text-align:center;

    font-size:42px;

    color:#005b8f;

    margin-bottom:40px;
}

/* SLIDER */

.products-slider{

    width:100%;

    display:flex;

    align-items:center;

    gap:20px;

    min-width:0;
}

/* BUTTON */

.slide-btn{

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#0077c8;

    color:white;

    font-size:20px;

    cursor:pointer;

    flex-shrink:0;

    transition:0.3s;
}

.slide-btn:hover{

    transform:scale(1.08);
}

/* PRODUCTS WRAPPER */

.products-wrapper{

    overflow:hidden;

    width:100%;

    min-width:0;
}

/* TRACKS */

.products-track,
.top-deals-track,
.best-deals-track,
.recommended-track{

    display:flex;

    gap:25px;

    transition:transform 0.7s ease;
}

/* PRODUCT CARD */

.product-card{

    flex:0 0 calc((100% - 50px) / 3);

    width:calc((100% - 50px) / 3);

    min-width:0;

    background:white;

    border-radius:24px;

    padding:22px;

    box-shadow:0px 4px 15px rgba(0,0,0,0.08);

    text-align:center;

    border:2px solid #e3f3ff;

    display:flex;

    flex-direction:column;

    text-decoration:none;

    cursor:pointer;

    transition:0.35s ease;

    overflow:hidden;
}

.product-card:hover{

    transform:translateY(-8px);

    box-shadow:0px 10px 22px rgba(0,0,0,0.14);

    border-color:#7ec8ff;
}

/* PRODUCT IMAGE */

.product-image{

    width:100%;

    height:230px;

    background:#eef8ff;

    border:2px solid #d7efff;

    border-radius:18px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#6b6b6b;

    font-size:24px;

    margin-bottom:20px;
}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

/* PRODUCT NAME */

.product-card h3{

    font-size:24px;

    color:#005b8f;

    margin-bottom:12px;

    overflow-wrap:anywhere;
}

/* PRODUCT DESCRIPTION */

.product-card p{

    font-size:16px;

    color:#666;

    margin-bottom:18px;

    line-height:1.6;

    overflow-wrap:anywhere;

    flex:1;
}

/* PRODUCT PRICE */

.product-price{

    font-size:24px;

    font-weight:bold;

    color:#00a651;

    overflow-wrap:anywhere;
}

.product-discount{

    color:#00753b;

    font-size:16px;

    font-weight:bold;

    margin-top:8px;

    overflow-wrap:anywhere;
}

.product-card-actions{

    width:100%;

    margin-top:18px;
}

.product-cart-btn{

    width:100%;

    min-height:46px;

    border:none;

    border-radius:14px;

    background:#0077c8;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;
}

.product-cart-btn:hover,
.product-cart-btn.cart-added{

    background:#00a651;

    transform:translateY(-2px);
}

/* PRODUCT DETAIL PAGE */

.product-detail-section{

    width:100%;

    padding:45px 20px 70px;

    background:linear-gradient(
        to bottom,
        #ffffff,
        #f5fbff
    );
}

.product-detail-container{

    width:92%;

    max-width:980px;

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;
}

.product-detail-image{

    width:min(100%, 560px);

    aspect-ratio:4 / 3;

    background:#eef8ff;

    border:2px solid #d7efff;

    border-radius:24px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0px 8px 22px rgba(0,0,0,0.12);

    margin-bottom:28px;
}

.product-detail-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

.product-detail-container h1{

    font-size:42px;

    color:#005b8f;

    margin-bottom:16px;

    overflow-wrap:anywhere;
}

.product-review-rating{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:8px;

    color:#415766;

    font-size:18px;

    font-weight:bold;

    margin-bottom:20px;
}

.rating-stars{

    display:flex;

    align-items:center;

    gap:3px;

    color:#f7a600;
}

.product-detail-price{

    font-size:34px;

    color:#00a651;

    font-weight:bold;

    margin-bottom:20px;

    overflow-wrap:anywhere;
}

.product-detail-discount{

    color:#00753b;

    font-size:18px;

    font-weight:bold;

    margin-bottom:18px;
}

.product-detail-description{

    max-width:760px;

    font-size:20px;

    line-height:1.7;

    color:#53616a;

    margin-bottom:30px;

    overflow-wrap:anywhere;
}

.product-purchase-row{

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;
}

.quantity-field{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:8px;

    color:#005b8f;

    font-size:16px;

    font-weight:bold;
}

.quantity-select{

    min-width:120px;

    min-height:52px;

    border:2px solid #d7efff;

    border-radius:12px;

    background:white;

    color:#003c5f;

    font-size:18px;

    font-weight:bold;

    padding:0 16px;
}

.add-cart-btn{

    min-height:52px;

    border:none;

    border-radius:14px;

    background:#0077c8;

    color:white;

    padding:14px 24px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

    box-shadow:0px 4px 12px rgba(0,0,0,0.14);
}

.add-cart-btn:hover,
.add-cart-btn.cart-added{

    transform:translateY(-3px);

    background:#00a651;
}

.cart-feedback{

    min-height:24px;

    margin-top:16px;

    color:#00753b;

    font-size:16px;

    font-weight:bold;
}

/* CART PAGE */

.cart-page-section{

    width:100%;

    padding:55px 20px 70px;

    background:linear-gradient(
        to bottom,
        #ffffff,
        #f5fbff
    );
}

.cart-page-container{

    width:95%;

    max-width:1180px;

    margin:auto;
}

.cart-page-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    flex-wrap:wrap;

    margin-bottom:32px;
}

.cart-page-title h1{

    font-size:42px;

    color:#005b8f;
}

.cart-page-title span{

    color:#004f7a;

    font-size:18px;

    font-weight:bold;
}

.cart-layout{

    display:grid;

    grid-template-columns:minmax(0, 1fr) 360px;

    gap:28px;

    align-items:start;
}

.cart-items{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.cart-empty{

    background:white;

    border:2px solid #e3f3ff;

    border-radius:18px;

    padding:32px;

    color:#004f7a;

    font-size:20px;

    font-weight:bold;

    text-align:center;

    box-shadow:0px 4px 15px rgba(0,0,0,0.08);
}

.cart-item{

    background:white;

    border:2px solid #e3f3ff;

    border-radius:18px;

    padding:18px;

    display:grid;

    grid-template-columns:150px minmax(0, 1fr) auto;

    gap:18px;

    align-items:center;

    box-shadow:0px 4px 15px rgba(0,0,0,0.08);
}

.cart-item-image{

    width:150px;

    aspect-ratio:1 / 1;

    border-radius:14px;

    overflow:hidden;

    background:#eef8ff;

    border:2px solid #d7efff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#6b6b6b;

    text-decoration:none;
}

.cart-item-image img{

    width:100%;

    height:100%;

    object-fit:cover;
}

.cart-item-details h2{

    color:#005b8f;

    font-size:24px;

    margin-bottom:10px;

    overflow-wrap:anywhere;
}

.cart-item-details p{

    color:#5b6972;

    font-size:16px;

    line-height:1.5;

    margin-bottom:14px;

    overflow-wrap:anywhere;
}

.cart-item-meta{

    display:flex;

    gap:12px;

    flex-wrap:wrap;
}

.cart-item-meta span{

    background:#eef8ff;

    color:#004f7a;

    border-radius:12px;

    padding:9px 12px;

    font-size:15px;

    font-weight:bold;
}

.cart-item-actions{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:14px;
}

.cart-item-actions strong{

    color:#00a651;

    font-size:24px;
}

.remove-cart-btn{

    border:none;

    border-radius:12px;

    background:#ffecec;

    color:#a33333;

    padding:12px 16px;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;
}

.remove-cart-btn:hover{

    background:#ffd5d5;

    transform:translateY(-2px);
}

.cart-summary{

    background:white;

    border:2px solid #e3f3ff;

    border-radius:18px;

    padding:24px;

    box-shadow:0px 4px 15px rgba(0,0,0,0.08);

    position:sticky;

    top:18px;
}

.cart-summary h2{

    color:#005b8f;

    font-size:28px;

    margin-bottom:20px;
}

.cart-summary-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    color:#45545f;

    font-size:17px;

    padding:13px 0;

    border-bottom:1px solid #e3f3ff;
}

.cart-summary-row strong,
.cart-total-row strong{

    color:#003c5f;
}

.cart-discount-value{

    color:#00a651;

    font-weight:bold;
}

.cart-total-row{

    border-bottom:none;

    color:#005b8f;

    font-size:22px;

    font-weight:bold;

    padding-top:18px;
}

.place-order-btn{

    width:100%;

    border:none;

    border-radius:14px;

    background:#0077c8;

    color:white;

    min-height:54px;

    margin-top:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

    box-shadow:0px 4px 12px rgba(0,0,0,0.14);
}

.place-order-btn:hover{

    background:#00a651;

    transform:translateY(-3px);
}

.cart-page-message{

    min-height:24px;

    margin-top:16px;

    color:#00753b;

    font-size:16px;

    font-weight:bold;

    text-align:center;
}

/* CHECKOUT PAGE */

.checkout-section{

    width:100%;

    padding:55px 20px 70px;

    background:linear-gradient(
        to bottom,
        #ffffff,
        #f5fbff
    );
}

.checkout-container{

    width:95%;

    max-width:980px;

    margin:auto;
}

.checkout-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    flex-wrap:wrap;

    margin-bottom:28px;
}

.checkout-title h1{

    font-size:42px;

    color:#005b8f;
}

.checkout-title span{

    color:#004f7a;

    font-size:18px;

    font-weight:bold;
}

.billing-panel,
.checkout-summary-panel,
.payment-panel{

    background:white;

    border:2px solid #e3f3ff;

    border-radius:18px;

    padding:24px;

    margin-bottom:24px;

    box-shadow:0px 4px 15px rgba(0,0,0,0.08);
}

.billing-panel h2,
.checkout-summary-panel h2,
.payment-panel h2{

    color:#005b8f;

    font-size:28px;

    margin-bottom:20px;
}

.billing-form{

    width:100%;
}

.billing-grid{

    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:18px;
}

.billing-field{

    display:flex;

    flex-direction:column;

    gap:9px;

    color:#004f7a;

    font-size:16px;

    font-weight:bold;
}

.billing-field-wide{

    grid-column:1 / -1;
}

.billing-field input,
.billing-field select{

    width:100%;

    min-height:52px;

    border:2px solid #bfe7ff;

    border-radius:14px;

    background:white;

    padding:14px 16px;

    color:#004f7a;

    font-size:16px;

    outline:none;

    box-shadow:0px 3px 10px rgba(0,0,0,0.06);
}

.billing-field input:focus,
.billing-field select:focus{

    border-color:#0077c8;
}

.save-billing-btn{

    width:100%;

    border:none;

    border-radius:14px;

    background:#0077c8;

    color:white;

    min-height:54px;

    margin-top:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

    box-shadow:0px 4px 12px rgba(0,0,0,0.14);
}

.save-billing-btn:hover{

    background:#005b8f;

    transform:translateY(-3px);
}

.checkout-summary-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    color:#45545f;

    font-size:17px;

    padding:13px 0;

    border-bottom:1px solid #e3f3ff;
}

.checkout-summary-row strong{

    color:#003c5f;

    text-align:right;
}

.checkout-discount-value{

    color:#00a651;

    font-weight:bold;
}

.checkout-final-row{

    border-bottom:none;

    color:#005b8f;

    font-size:22px;

    font-weight:bold;

    padding-top:18px;
}

.payment-option{

    width:100%;

    min-height:64px;

    border:2px solid #bfe7ff;

    border-radius:16px;

    background:#f5fbff;

    padding:14px 16px;

    display:flex;

    align-items:center;

    gap:14px;

    color:#004f7a;

    font-size:18px;

    font-weight:bold;
}

.payment-option input{

    accent-color:#0077c8;

    width:18px;

    height:18px;
}

.payment-option-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#00a651;

    box-shadow:0px 3px 10px rgba(0,0,0,0.08);
}

.checkout-place-order-btn{

    max-width:420px;

    margin:0 auto;
}

.checkout-message{

    min-height:24px;

    margin-top:16px;

    color:#00753b;

    font-size:16px;

    font-weight:bold;

    text-align:center;

    line-height:1.5;
}

.checkout-message-error{

    color:#a33333;
}

.checkout-message-success{

    color:#00753b;
}

.save-billing-btn:disabled,
.checkout-place-order-btn:disabled,
.billing-field input:disabled,
.billing-field select:disabled,
.payment-option input:disabled{

    opacity:0.65;

    cursor:not-allowed;
}

.order-success-popup{

    position:fixed;

    left:50%;

    top:32px;

    z-index:9999;

    transform:translateX(-50%);

    width:min(92%, 460px);

    border-radius:18px;

    background:#00a651;

    color:white;

    padding:18px 20px;

    display:flex;

    align-items:center;

    gap:14px;

    box-shadow:0px 18px 36px rgba(0,0,0,0.22);

    animation:orderSuccessPopupIn 0.32s ease-out;
}

.order-success-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    border:3px solid white;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:24px;
}

.order-success-popup strong,
.order-success-popup span{

    display:block;
}

.order-success-popup strong{

    font-size:20px;

    margin-bottom:5px;
}

.order-success-popup span{

    font-size:14px;

    line-height:1.4;
}

@keyframes orderSuccessPopupIn{

    from{

        opacity:0;

        transform:translate(-50%, -16px);
    }

    to{

        opacity:1;

        transform:translate(-50%, 0);
    }
}

/* ORDERS PAGE */

.orders-section{

    width:100%;

    padding:55px 20px 70px;

    background:linear-gradient(
        to bottom,
        #ffffff,
        #f5fbff
    );
}

.orders-container{

    width:95%;

    max-width:1180px;

    margin:auto;
}

.orders-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    flex-wrap:wrap;

    margin-bottom:28px;
}

.orders-title h1{

    color:#005b8f;

    font-size:42px;
}

.orders-title span{

    color:#004f7a;

    font-size:18px;

    font-weight:bold;
}

.orders-list{

    display:flex;

    flex-direction:column;

    gap:22px;
}

.orders-empty{

    background:white;

    border:2px solid #e3f3ff;

    border-radius:18px;

    padding:32px;

    color:#004f7a;

    font-size:20px;

    font-weight:bold;

    text-align:center;

    box-shadow:0px 4px 15px rgba(0,0,0,0.08);
}

.order-card{

    background:white;

    border:2px solid #e3f3ff;

    border-radius:18px;

    padding:24px;

    box-shadow:0px 4px 15px rgba(0,0,0,0.08);
}

.order-card-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:16px;

    flex-wrap:wrap;

    margin-bottom:20px;
}

.order-card-header h2{

    color:#005b8f;

    font-size:28px;

    margin-bottom:8px;

    overflow-wrap:anywhere;
}

.order-card-header p{

    color:#5b6972;

    font-size:16px;
}

.order-status-pill{

    border-radius:999px;

    background:#e9f8f0;

    color:#00753b;

    padding:10px 14px;

    font-size:15px;

    font-weight:bold;
}

.order-info-grid{

    display:grid;

    grid-template-columns:repeat(4, minmax(0, 1fr));

    gap:14px;

    margin-bottom:24px;
}

.order-info-item{

    background:#f5fbff;

    border:1px solid #d7efff;

    border-radius:14px;

    padding:14px;

    min-height:82px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:7px;
}

.order-info-item span{

    color:#5b6972;

    font-size:14px;

    font-weight:bold;
}

.order-info-item strong{

    color:#003c5f;

    font-size:17px;

    overflow-wrap:anywhere;
}

.order-timeline{

    display:grid;

    grid-template-columns:repeat(4, minmax(0, 1fr));

    gap:12px;

    margin-bottom:24px;
}

.order-timeline-step{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    text-align:center;

    color:#7d8c96;

    font-size:15px;

    font-weight:bold;
}

.order-timeline-step::before{

    content:"";

    position:absolute;

    top:20px;

    left:calc(-50% + 21px);

    right:calc(50% + 21px);

    height:3px;

    background:#d7efff;
}

.order-timeline-step:first-child::before{

    display:none;
}

.order-timeline-marker{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#eef8ff;

    border:2px solid #bfe7ff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#7d8c96;

    position:relative;

    z-index:1;
}

.order-timeline-active{

    color:#005b8f;
}

.order-timeline-active::before{

    background:#00a651;
}

.order-timeline-active .order-timeline-marker{

    background:#e9f8f0;

    border-color:#00a651;

    color:#00a651;
}

.order-timeline-current .order-timeline-marker{

    box-shadow:0px 0px 0px 5px rgba(0,166,81,0.12);
}

.order-details-grid{

    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:16px;

    margin-bottom:22px;
}

.order-address-box,
.order-products{

    background:#f5fbff;

    border:1px solid #d7efff;

    border-radius:14px;

    padding:16px;
}

.order-address-box h3,
.order-products h3{

    color:#005b8f;

    font-size:20px;

    margin-bottom:12px;
}

.order-address-box p{

    color:#45545f;

    font-size:16px;

    line-height:1.6;

    white-space:pre-line;
}

.order-product-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    color:#45545f;

    font-size:16px;

    padding:12px 0;

    border-top:1px solid #d7efff;
}

.order-product-row strong{

    color:#003c5f;
}

.order-products-empty{

    color:#5b6972;

    font-size:16px;
}

/* TOP DEALS */

.top-deals-section{

    background:linear-gradient(
        to bottom,
        #eef8ff,
        #ffffff
    );
}

.top-deals-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;
}

.top-deals-title i{

    color:#0077c8;

    font-size:40px;
}

/* BEST DEALS */

.best-deals-section{

    background:linear-gradient(
        to bottom,
        #f3fbff,
        #ffffff
    );
}

.best-deals-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;
}

.best-deals-title i{

    color:#0077c8;

    font-size:40px;
}

/* RECOMMENDED */

.recommended-section{

    background:linear-gradient(
        to bottom,
        #eef8ff,
        #ffffff
    );
}

.recommended-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;
}

.recommended-title i{

    color:#0077c8;

    font-size:40px;
}

/* HOME SECTION */

.home-section{

    width:100%;

    padding:40px 20px;
}

.welcome-box{

    width:90%;

    max-width:900px;

    margin:auto;

    background:#f5fbff;

    padding:40px;

    border-radius:20px;

    text-align:center;

    box-shadow:0px 4px 12px rgba(0,0,0,0.08);
}

.welcome-box h1{

    font-size:40px;

    color:#004f7a;

    margin-bottom:20px;
}

.welcome-box p{

    font-size:20px;

    color:#444;

    line-height:1.6;
}

/* LOGIN AND REGISTER PAGE */

.login-section,
.register-section{

    width:100%;

    min-height:520px;

    padding:70px 20px;

    background:linear-gradient(
        to bottom,
        #dff3ff 0%,
        #eef8ff 50%,
        #ffffff 100%
    );

    display:flex;

    align-items:flex-start;

    justify-content:center;
}

.login-box,
.register-box{

    width:100%;

    max-width:520px;

    display:flex;

    flex-direction:column;

    align-items:center;
}

.login-box h1,
.register-box h1{

    font-size:44px;

    color:#005b8f;

    font-weight:bold;

    text-align:center;

    margin-bottom:35px;
}

.login-input,
.register-input{

    width:100%;

    padding:18px 20px;

    border:2px solid #bfe7ff;

    border-radius:16px;

    background:white;

    font-size:18px;

    color:#004f7a;

    outline:none;

    margin-bottom:22px;

    box-shadow:0px 4px 12px rgba(0,0,0,0.08);
}

.login-input:focus,
.register-input:focus{

    border-color:#0077c8;
}

.register-row,
.login-row{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin-top:5px;

    margin-bottom:22px;
}

.register-row span,
.login-row span{

    font-size:18px;

    color:#004f7a;

    font-weight:600;
}

.register-btn,
.login-btn{

    border:none;

    background:#0077c8;

    color:white;

    padding:13px 20px;

    border-radius:14px;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

    box-shadow:0px 4px 12px rgba(0,0,0,0.12);
}

.register-btn:hover,
.login-btn:hover{

    transform:translateY(-3px);

    background:#005b8f;
}

.register-main-btn{

    width:100%;

    padding:16px 20px;

    border:none;

    border-radius:16px;

    background:#0077c8;

    color:white;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

    box-shadow:0px 4px 12px rgba(0,0,0,0.12);
}

.register-main-btn:hover{

    transform:translateY(-3px);

    background:#005b8f;
}

.login-box button:disabled,
.register-box button:disabled,
.login-box input:disabled,
.register-box input:disabled{

    opacity:0.65;

    cursor:not-allowed;
}

.auth-message{

    width:100%;

    min-height:24px;

    margin-top:16px;

    font-size:16px;

    font-weight:bold;

    text-align:center;

    line-height:1.5;
}

.auth-message-error{

    color:#a33333;
}

.auth-message-success{

    color:#00753b;
}

/* FOOTER SECTION */

.footer-section{

    width:100%;

    padding:70px 20px;

    background:linear-gradient(
        to top,
        #7ec8ff 0%,
        #bfe7ff 45%,
        #ffffff 100%
    );
}

.footer-container{

    width:90%;

    max-width:1100px;

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;
}

/* FOOTER LOGO */

.footer-logo-box{

    width:220px;

    height:170px;

    background:white;

    border-radius:24px;

    padding:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0px 5px 16px rgba(0,0,0,0.14);

    margin-bottom:30px;
}

.footer-logo{

    width:100%;

    height:100%;

    object-fit:contain;
}

/* FOOTER TEXT */

.footer-text{

    max-width:900px;

    font-size:22px;

    line-height:1.8;

    color:#004f7a;

    margin-bottom:45px;

    font-weight:500;
}

/* FOOTER TITLE */

.footer-title{

    font-size:38px;

    color:#005b8f;

    margin-top:20px;

    margin-bottom:28px;
}

/* FOOTER LINKS */

.footer-links{

    display:flex;

    flex-direction:column;

    gap:18px;

    width:100%;

    max-width:450px;

    margin-bottom:30px;
}

/* FOOTER BUTTONS */

.footer-btn{

    width:100%;

    padding:18px 20px;

    border:none;

    border-radius:16px;

    background:white;

    color:#005b8f;

    font-size:19px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

    box-shadow:0px 4px 12px rgba(0,0,0,0.12);
}

.footer-btn:hover{

    transform:translateY(-4px);

    background:#eef8ff;
}

/* CONTACT DETAILS */

.contact-details{

    width:100%;

    max-width:700px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

    margin-bottom:40px;
}

.contact-text{

    font-size:22px;

    color:#004f7a;

    line-height:1.8;

    font-weight:500;

    text-align:center;
}

/* COPYRIGHT */

.copyright-box{

    width:100%;

    border-top:2px solid rgba(0,91,143,0.2);

    padding-top:25px;

    margin-top:20px;
}

.copyright-box p{

    font-size:20px;

    color:#005b8f;

    font-weight:bold;

    text-align:center;
}

/* ADMIN PANEL */

.admin-body{

    background:#f6f8fb;

    color:#18202f;
}

.admin-header{

    min-height:120px;
}

.admin-nav-btn{

    background:#f7fbff;

    border:1px solid #cfd9e8;
}

.active-admin-nav-btn{

    background:#005b8f;

    color:white;
}

.active-admin-nav-btn:hover{

    background:#00466e;
}

.admin-shell{

    width:100%;

    max-width:1440px;

    margin:auto;

    padding:34px 22px 70px;
}

.admin-page-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:20px;
}

.admin-eyebrow{

    color:#607086;

    font-size:15px;

    font-weight:bold;

    margin-bottom:8px;
}

.admin-page-title h1{

    color:#152235;

    font-size:38px;

    line-height:1.2;
}

.admin-summary{

    min-width:150px;

    border:1px solid #d6deeb;

    border-radius:8px;

    background:white;

    padding:14px 18px;

    text-align:center;

    color:#1d5e8c;

    font-size:16px;

    font-weight:bold;
}

.admin-status{

    border:1px solid #d6deeb;

    border-radius:8px;

    background:white;

    color:#35445a;

    padding:12px 14px;

    margin-bottom:18px;

    font-size:15px;
}

.admin-status-success{

    border-color:#b8dfc1;

    background:#effaf2;

    color:#25713a;
}

.admin-status-error{

    border-color:#f0b8b8;

    background:#fff0f0;

    color:#a33333;
}

.admin-status-info{

    border-color:#bad8ef;

    background:#f0f8ff;

    color:#285c86;
}

.admin-tabs{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:26px;
}

.admin-tab{

    border:1px solid #cfd9e8;

    border-radius:8px;

    background:white;

    color:#314052;

    padding:11px 16px;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    transition:0.25s;
}

.admin-tab:hover,
.active-admin-tab{

    border-color:#0077c8;

    background:#e9f6ff;

    color:#005b8f;
}

.admin-section{

    margin-top:30px;
}

.admin-section-heading{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    border-bottom:1px solid #d9e1ee;

    padding-bottom:12px;

    margin-bottom:18px;
}

.admin-section-heading h2{

    color:#18202f;

    font-size:26px;
}

.admin-section-heading span{

    color:#637083;

    font-size:15px;

    font-weight:bold;
}

.admin-product-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));

    gap:18px;
}

.admin-ad-slide-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));

    gap:18px;
}

.admin-product-card{

    border:1px solid #d6deeb;

    border-radius:8px;

    background:white;

    overflow:hidden;

    box-shadow:0px 6px 18px rgba(18,32,50,0.07);

    min-width:0;
}

.admin-ad-slide-card{

    align-self:start;
}

.admin-image-preview{

    width:100%;

    aspect-ratio:16 / 9;

    background:#eef3f8;

    border-bottom:1px solid #d6deeb;

    display:flex;

    align-items:center;

    justify-content:center;
}

.admin-image-preview img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

.admin-ad-slide-preview{

    aspect-ratio:16 / 5;
}

.admin-ad-slide-empty{

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

    color:#607086;

    font-size:15px;

    font-weight:bold;
}

.admin-ad-slide-empty i{

    color:#8aa2bd;

    font-size:36px;
}

.admin-product-form{

    padding:18px;
}

.admin-product-meta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-bottom:14px;

    color:#607086;

    font-size:13px;

    font-weight:bold;
}

.admin-field{

    display:flex;

    flex-direction:column;

    gap:7px;

    margin-bottom:13px;

    color:#263446;

    font-size:14px;

    font-weight:bold;
}

.admin-field input,
.admin-field textarea{

    width:100%;

    min-width:0;

    border:1px solid #cfd9e8;

    border-radius:8px;

    background:#fbfdff;

    color:#1c293a;

    font:inherit;

    font-weight:normal;

    padding:11px 12px;

    outline:none;
}

.admin-field textarea{

    resize:vertical;

    min-height:96px;
}

.admin-field input:focus,
.admin-field textarea:focus{

    border-color:#0077c8;

    box-shadow:0px 0px 0px 3px rgba(0,119,200,0.13);
}

.admin-form-actions{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:16px;
}

.admin-upload-box{

    border:1px dashed #b8c8da;

    border-radius:8px;

    background:#f7fbff;

    padding:12px;

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:4px;

    margin-bottom:14px;
}

.admin-file-input{

    width:100%;

    min-width:0;

    color:#263446;

    font-size:14px;
}

.admin-upload-btn{

    border:none;

    border-radius:8px;

    background:#1b7f5a;

    color:white;

    padding:10px 14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;

    transition:0.25s;
}

.admin-upload-btn:hover{

    background:#146545;
}

.admin-upload-btn:disabled{

    cursor:not-allowed;

    opacity:0.65;
}

.admin-save-btn{

    border:none;

    border-radius:8px;

    background:#0077c8;

    color:white;

    padding:11px 16px;

    display:flex;

    align-items:center;

    gap:9px;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    transition:0.25s;
}

.admin-save-btn:hover{

    background:#005b8f;
}

.admin-save-btn:disabled{

    cursor:not-allowed;

    opacity:0.65;
}

.admin-form-message{

    color:#607086;

    font-size:14px;

    line-height:1.4;
}

.admin-form-message-success{

    color:#25713a;
}

.admin-form-message-error{

    color:#a33333;
}

.admin-order-board{

    display:grid;

    grid-template-columns:repeat(3, minmax(0, 1fr));

    gap:18px;

    align-items:start;
}

.admin-order-column{

    border:1px solid #d6deeb;

    border-radius:10px;

    background:#eef3f8;

    padding:14px;

    min-width:0;
}

.admin-order-column-heading{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:14px;

    padding-bottom:12px;

    border-bottom:1px solid #d6deeb;
}

.admin-order-column-heading h2{

    color:#18202f;

    font-size:22px;
}

.admin-order-column-heading span{

    color:#607086;

    font-size:14px;

    font-weight:bold;
}

.admin-order-list{

    display:flex;

    flex-direction:column;

    gap:14px;
}

.admin-order-card{

    background:white;

    border:1px solid #d6deeb;

    border-radius:8px;

    padding:16px;

    box-shadow:0px 6px 18px rgba(18,32,50,0.07);
}

.admin-order-card-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:12px;

    margin-bottom:14px;
}

.admin-order-card-header h3{

    color:#152235;

    font-size:20px;

    margin-bottom:6px;

    overflow-wrap:anywhere;
}

.admin-order-card-header p{

    color:#607086;

    font-size:13px;
}

.admin-order-status-pill,
.admin-order-delivered-label{

    border-radius:999px;

    background:#effaf2;

    color:#25713a;

    padding:8px 10px;

    font-size:13px;

    font-weight:bold;

    display:inline-flex;

    align-items:center;

    gap:6px;
}

.admin-order-info-grid,
.admin-order-product-meta{

    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:10px;

    margin-bottom:14px;
}

.admin-order-info-row{

    border:1px solid #d6deeb;

    border-radius:8px;

    background:#f7fbff;

    padding:10px;

    min-width:0;
}

.admin-order-info-row span{

    display:block;

    color:#607086;

    font-size:12px;

    font-weight:bold;

    margin-bottom:5px;
}

.admin-order-info-row strong{

    color:#152235;

    font-size:14px;

    overflow-wrap:anywhere;
}

.admin-order-address-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:10px;

    margin-bottom:14px;
}

.admin-order-address,
.admin-order-products{

    border:1px solid #d6deeb;

    border-radius:8px;

    background:#fbfdff;

    padding:12px;
}

.admin-order-address h3,
.admin-order-products h3{

    color:#005b8f;

    font-size:16px;

    margin-bottom:8px;
}

.admin-order-address p{

    color:#35445a;

    font-size:14px;

    line-height:1.5;

    white-space:pre-line;
}

.admin-order-product-row{

    border-top:1px solid #d6deeb;

    padding-top:12px;

    margin-top:12px;

    display:grid;

    grid-template-columns:92px minmax(0, 1fr);

    gap:12px;

    align-items:start;
}

.admin-order-product-image{

    width:92px;

    aspect-ratio:1 / 1;

    border:1px solid #d6deeb;

    border-radius:8px;

    background:#eef3f8;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#607086;

    font-size:24px;
}

.admin-order-product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

.admin-order-product-content{

    min-width:0;
}

.admin-order-product-details strong{

    display:block;

    color:#152235;

    font-size:15px;

    margin-bottom:5px;
}

.admin-order-product-details p{

    color:#607086;

    font-size:13px;

    line-height:1.4;
}

.admin-order-action-row{

    margin-top:14px;

    display:flex;

    justify-content:flex-end;
}

.admin-order-action-btn{

    border:none;

    border-radius:8px;

    background:#0077c8;

    color:white;

    padding:11px 14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;

    transition:0.25s;
}

.admin-order-action-btn:hover{

    background:#005b8f;
}

.admin-order-action-btn:disabled{

    opacity:0.65;

    cursor:not-allowed;
}

.admin-order-empty{

    border:1px dashed #b8c8da;

    border-radius:8px;

    background:white;

    color:#607086;

    padding:16px;

    font-size:14px;

    line-height:1.5;
}

/* MOBILE VIEW */

@media(max-width:900px){

    .header{

        min-height:auto;

        padding:16px 14px 18px;

        gap:12px;

        flex-direction:column;
    }

    .logo-container{

        width:100px;

        height:78px;
    }

    .right-header{

        width:100%;

        display:grid;

        grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));

        gap:8px;

        justify-content:center;
    }

    .header-btn{

        width:100%;

        justify-content:center;

        gap:6px;

        padding:8px 6px;

        font-size:11px;

        min-height:42px;
    }

    .header-btn i{

        font-size:14px;
    }

    .account-menu-wrapper{

        width:100%;
    }

    .account-menu{

        left:0;

        right:0;

        min-width:0;
    }

    .ad-banner{

        height:220px;
    }

    .ad-placeholder h2{

        font-size:24px;
    }

    .ad-placeholder p{

        font-size:14px;
    }

    .why-choose-container{

        padding:28px 20px;
    }

    .why-choose-container h2{

        font-size:28px;
    }

    .why-choose-container p{

        font-size:16px;
    }

    .core-services-container h2{

        font-size:24px;
    }

    .products-container h2{

        font-size:28px;
    }

    .top-deals-title i,
    .best-deals-title i,
    .recommended-title i{

        font-size:24px;
    }

    .products-slider{

        flex-wrap:wrap;

        justify-content:center;

        gap:12px;
    }

    .products-wrapper{

        order:1;

        width:100%;
    }

    .slide-btn{

        width:42px;

        height:42px;

        font-size:15px;

        order:2;
    }

    .product-card{

        flex:0 0 100%;

        width:100%;
    }

    .product-image{

        height:200px;

        font-size:18px;
    }

    .product-card h3{

        font-size:20px;
    }

    .product-card p{

        font-size:14px;
    }

    .product-price{

        font-size:20px;
    }

    .product-card-actions{

        margin-top:14px;
    }

    .product-cart-btn{

        min-height:42px;

        font-size:14px;
    }

    .product-detail-section{

        padding:35px 14px 50px;
    }

    .product-detail-container{

        width:100%;
    }

    .product-detail-image{

        width:100%;

        border-radius:18px;

        margin-bottom:24px;
    }

    .product-detail-container h1{

        font-size:28px;
    }

    .product-review-rating{

        font-size:15px;
    }

    .product-detail-price{

        font-size:26px;
    }

    .product-detail-description{

        font-size:16px;

        line-height:1.6;
    }

    .product-purchase-row{

        width:100%;

        align-items:stretch;
    }

    .quantity-field,
    .add-cart-btn{

        width:100%;
    }

    .quantity-select{

        width:100%;
    }

    .cart-page-section{

        padding:38px 14px 52px;
    }

    .cart-page-container{

        width:100%;
    }

    .cart-page-title h1{

        font-size:30px;
    }

    .cart-layout{

        grid-template-columns:1fr;
    }

    .cart-item{

        grid-template-columns:95px minmax(0, 1fr);

        gap:12px;

        padding:14px;
    }

    .cart-item-image{

        width:95px;
    }

    .cart-item-actions{

        grid-column:1 / -1;

        width:100%;

        flex-direction:row;

        align-items:center;

        justify-content:space-between;
    }

    .cart-item-details h2{

        font-size:18px;
    }

    .cart-item-details p{

        font-size:14px;
    }

    .cart-item-actions strong{

        font-size:20px;
    }

    .cart-summary{

        position:static;
    }

    .checkout-section{

        padding:38px 14px 52px;
    }

    .checkout-container{

        width:100%;
    }

    .checkout-title h1{

        font-size:30px;
    }

    .billing-panel,
    .checkout-summary-panel,
    .payment-panel{

        border-radius:16px;

        padding:18px;
    }

    .billing-panel h2,
    .checkout-summary-panel h2,
    .payment-panel h2{

        font-size:24px;
    }

    .billing-grid{

        grid-template-columns:1fr;
    }

    .billing-field input,
    .billing-field select{

        min-height:48px;

        font-size:15px;
    }

    .checkout-summary-row{

        font-size:15px;
    }

    .checkout-final-row{

        font-size:18px;
    }

    .payment-option{

        font-size:16px;
    }

    .checkout-place-order-btn{

        max-width:none;
    }

    .orders-section{

        padding:38px 14px 52px;
    }

    .orders-container{

        width:100%;
    }

    .orders-title h1{

        font-size:30px;
    }

    .order-card{

        border-radius:16px;

        padding:18px;
    }

    .order-card-header h2{

        font-size:22px;
    }

    .order-info-grid,
    .order-details-grid{

        grid-template-columns:1fr;
    }

    .order-timeline{

        grid-template-columns:1fr;

        gap:14px;
    }

    .order-timeline-step{

        flex-direction:row;

        justify-content:flex-start;

        text-align:left;
    }

    .order-timeline-step::before{

        left:20px;

        right:auto;

        top:-14px;

        width:3px;

        height:16px;
    }

    .order-product-row{

        align-items:flex-start;

        flex-direction:column;

        gap:6px;
    }

    .welcome-box h1{

        font-size:28px;
    }

    .welcome-box p{

        font-size:16px;
    }

    .login-section,
    .register-section{

        min-height:430px;

        padding:45px 15px;
    }

    .login-box h1,
    .register-box h1{

        font-size:32px;

        margin-bottom:28px;
    }

    .login-input,
    .register-input{

        font-size:15px;

        padding:15px;
    }

    .register-row,
    .login-row{

        flex-direction:column;

        gap:12px;
    }

    .register-row span,
    .login-row span{

        font-size:15px;
    }

    .register-btn,
    .login-btn{

        font-size:15px;

        padding:12px 18px;
    }

    .register-main-btn{

        font-size:17px;

        padding:14px 18px;
    }

    .footer-section{

        padding:50px 15px;
    }

    .footer-logo-box{

        width:160px;

        height:120px;
    }

    .footer-text{

        font-size:16px;

        margin-bottom:35px;
    }

    .footer-title{

        font-size:28px;
    }

    .footer-btn{

        font-size:15px;

        padding:15px;
    }

    .contact-text{

        font-size:16px;

        line-height:1.7;
    }

    .copyright-box p{

        font-size:15px;
    }

    .admin-shell{

        padding:26px 15px 50px;
    }

    .admin-page-title{

        align-items:flex-start;

        flex-direction:column;
    }

    .admin-page-title h1{

        font-size:28px;
    }

    .admin-summary{

        width:100%;

        text-align:left;
    }

    .admin-section-heading{

        align-items:flex-start;

        flex-direction:column;
    }

    .admin-section-heading h2{

        font-size:22px;
    }

    .admin-product-grid{

        grid-template-columns:1fr;
    }

    .admin-order-board{

        grid-template-columns:1fr;
    }

    .admin-order-info-grid,
    .admin-order-product-meta{

        grid-template-columns:1fr;
    }

    .admin-product-form{

        padding:15px;
    }

    .admin-form-actions{

        align-items:flex-start;

        flex-direction:column;
    }
}