

========== CSS FILE: static/css/about.css ==========



.hero {
    width: 100%;
    height: 500px;

    position: relative;
    overflow: hidden;

    color: white;
}

.hero-slider {
    width: 100%;
    height: 100%;

    position: relative;
    overflow: hidden;
}

.hero-slide {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;

    padding-left: 90px;

    box-sizing: border-box;

    transform: translateX(100%);

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

.hero-slide.active {
    transform: translateX(0);
}

.hero-slide.previous {
    transform: translateX(-100%);
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    max-width: 650px;
}

.hero .small-heading {
    margin: 0 0 12px;

    color: #28a9ff;

    font-size: 14px;
    font-weight: bold;

    letter-spacing: 2px;
}

.hero h2 {
    margin: 10px 0 18px;

    color: white;

    font-size: 48px;
    line-height: 1.1;
    font-weight: 700;
}

.hero h2 span {
    color: #28a9ff;
}

.features {
    margin: 0 0 28px;

    color: white;

    font-size: 18px;
    line-height: 1.6;
}


/* =========================================================
   HERO BUTTON
========================================================= */

.shop-btn {
    display: inline-block;

    padding: 13px 28px;

    background: #28a9ff;
    color: white;

    text-decoration: none;

    border-radius: 5px;

    font-size: 15px;
    font-weight: bold;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.shop-btn:hover {
    background: #1683ff;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   ABOUT HERO BANNER
========================================================= */

.about-hero {
    width: 100%;

    padding: 75px 5%;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #172b4d,
            #23466f
        );

    text-align: center;

    color: white;
}

.about-hero-content {
    max-width: 850px;

    margin: 0 auto;
}

.about-hero .small-heading {
    margin: 0 0 12px;

    color: #28a9ff;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 2px;
}

.about-hero h1 {
    margin: 0;

    color: white;

    font-size: 42px;
    line-height: 1.2;
}

.about-hero h1 span {
    color: #28a9ff;
}

.about-hero p:last-child {
    max-width: 700px;

    margin: 18px auto 0;

    color: rgba(255, 255, 255, 0.85);

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section {
    width: 100%;

    padding: 80px 7%;

    box-sizing: border-box;

    background: white;

    display: grid;

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

    gap: 65px;

    align-items: center;
}


/* =========================================================
   ABOUT IMAGE
========================================================= */

.about-image {
    width: 100%;

    height: 500px;

    overflow: hidden;

    border-radius: 10px;

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

.about-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.about-image:hover img {
    transform: scale(1.04);
}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.about-content {
    max-width: 600px;
}

.about-content .small-heading {
    margin: 0 0 10px;

    color: #28a9ff;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 2px;
}

.about-content h2 {
    margin: 0 0 20px;

    color: #172b4d;

    font-size: 36px;
    line-height: 1.2;
}

.about-content h2 span {
    color: #28a9ff;
}

.about-content p {
    margin: 0 0 17px;

    color: #666;

    font-size: 15px;

    line-height: 1.8;
}

.about-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   MISSION SECTION
========================================================= */

.mission-section {
    width: 100%;

    padding: 80px 5%;

    box-sizing: border-box;

    background:
        linear-gradient(
            rgba(23, 43, 77, 0.95),
            rgba(23, 43, 77, 0.95)
        );

    text-align: center;

    color: white;
}

.mission-content {
    max-width: 800px;

    margin: 0 auto;
}

.mission-content .small-heading {
    margin: 0 0 12px;

    color: #28a9ff;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 2px;
}

.mission-content h2 {
    margin: 0 0 18px;

    color: white;

    font-size: 38px;
    line-height: 1.2;
}

.mission-content h2 span {
    color: #28a9ff;
}

.mission-content p:last-child {
    max-width: 700px;

    margin: 0 auto;

    color: rgba(255, 255, 255, 0.82);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.why-section {
    width: 100%;

    padding: 75px 5%;

    box-sizing: border-box;

    background: #f5f7fa;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.why-section .section-title {
    text-align: center;

    margin-bottom: 40px;
}

.why-section .section-title .small-heading {
    margin: 0 0 8px;

    color: #28a9ff;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 2px;
}

.why-section .section-title h2 {
    margin: 0;

    color: #172b4d;

    font-size: 34px;
    line-height: 1.2;
}

.why-section .section-title h2 span {
    color: #28a9ff;
}


/* =========================================================
   WHY CARDS
========================================================= */

.why-container {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

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

    gap: 22px;
}

.why-card {
    padding: 30px 22px;

    background: white;

    border: 1px solid #e6e6e6;

    border-radius: 8px;

    text-align: center;

    box-sizing: border-box;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.why-card:hover {
    transform: translateY(-7px);

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


/* =========================================================
   WHY ICON
========================================================= */

.why-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #eaf7ff;

    border-radius: 50%;

    font-size: 29px;
}

.why-card h3 {
    margin: 0 0 12px;

    color: #172b4d;

    font-size: 18px;
}

.why-card p {
    margin: 0;

    color: #777;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   CATEGORIES SECTION
========================================================= */

.categories-section {
    width: 100%;

    padding: 80px 5%;

    box-sizing: border-box;

    background: white;
}

.categories-section .section-title {
    text-align: center;

    margin-bottom: 40px;
}

.categories-section .section-title .small-heading {
    margin: 0 0 8px;

    color: #28a9ff;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 2px;
}

.categories-section .section-title h2 {
    margin: 0;

    color: #172b4d;

    font-size: 34px;
    line-height: 1.2;
}

.categories-section .section-title h2 span {
    color: #28a9ff;
}


/* =========================================================
   CATEGORY CONTAINER
========================================================= */

.category-container {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

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

    gap: 25px;
}


/* =========================================================
   CATEGORY CARD
========================================================= */

.category-card {
    position: relative;

    height: 390px;

    overflow: hidden;

    display: block;

    border-radius: 9px;

    text-decoration: none;

    background: #eeeeee;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.08);
}

.category-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 50%;

    background:
        linear-gradient(
            transparent,
            rgba(0, 0, 0, 0.72)
        );

    z-index: 1;
}

.category-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.category-card:hover img {
    transform: scale(1.06);
}

.category-card h3 {
    position: absolute;

    left: 25px;
    bottom: 20px;

    z-index: 2;

    margin: 0;

    color: white;

    font-size: 26px;

    font-weight: bold;
}

.category-card:hover h3 {
    color: #28a9ff;
}


/* =========================================================
   1200px
========================================================= */

@media (max-width: 1200px) {

    .why-container {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   1000px
========================================================= */

@media (max-width: 1000px) {

    .hero-slide {
        padding-left: 55px;
    }

    .hero h2 {
        font-size: 42px;
    }

    .about-section {
        padding: 65px 5%;

        gap: 40px;
    }

    .about-image {
        height: 430px;
    }

    .about-content h2 {
        font-size: 32px;
    }

    .category-container {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .category-card:last-child {
        grid-column: 1 / -1;

        max-width: 50%;

        width: 100%;

        margin: 0 auto;
    }

}


/* =========================================================
   700px
========================================================= */

@media (max-width: 700px) {

    /* Hero */

    .hero {
        height: 480px;
    }

    .hero-slide {
        padding: 30px;

        align-items: center;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero .small-heading {
        font-size: 12px;

        letter-spacing: 1.5px;
    }

    .hero h2 {
        font-size: 35px;
    }

    .features {
        font-size: 15px;
    }

    .shop-btn {
        padding: 11px 22px;
    }


    /* About Hero */

    .about-hero {
        padding: 60px 20px;
    }

    .about-hero h1 {
        font-size: 34px;
    }

    .about-hero p:last-child {
        font-size: 14px;
    }


    /* About Section */

    .about-section {
        padding: 55px 20px;

        grid-template-columns: 1fr;

        gap: 35px;
    }

    .about-image {
        height: 380px;
    }

    .about-content {
        max-width: 100%;
    }

    .about-content h2 {
        font-size: 30px;
    }


    /* Mission */

    .mission-section {
        padding: 60px 20px;
    }

    .mission-content h2 {
        font-size: 31px;
    }

    .mission-content p:last-child {
        font-size: 14px;
    }


    /* Why */

    .why-section {
        padding: 55px 20px;
    }

    .why-container {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .why-section .section-title h2 {
        font-size: 29px;
    }


    /* Categories */

    .categories-section {
        padding: 60px 20px;
    }

    .categories-section .section-title h2 {
        font-size: 29px;
    }

    .category-container {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .category-card {
        height: 350px;
    }

    .category-card:last-child {
        grid-column: auto;

        max-width: none;

        width: 100%;
    }

}


/* =========================================================
   450px
========================================================= */

@media (max-width: 450px) {

    /* Hero */

    .hero {
        height: 450px;
    }

    .hero-slide {
        padding: 25px;
    }

    .hero .small-heading {
        font-size: 11px;

        letter-spacing: 1.2px;
    }

    .hero h2 {
        font-size: 29px;
    }

    .features {
        font-size: 14px;
    }

    .shop-btn {
        padding: 10px 18px;

        font-size: 13px;
    }


    /* About Hero */

    .about-hero {
        padding: 50px 15px;
    }

    .about-hero .small-heading {
        font-size: 11px;
    }

    .about-hero h1 {
        font-size: 28px;
    }

    .about-hero p:last-child {
        font-size: 13px;

        line-height: 1.6;
    }


    /* About */

    .about-section {
        padding: 45px 15px;

        gap: 28px;
    }

    .about-image {
        height: 320px;

        border-radius: 7px;
    }

    .about-content .small-heading {
        font-size: 11px;
    }

    .about-content h2 {
        font-size: 27px;
    }

    .about-content p {
        font-size: 14px;

        line-height: 1.7;
    }


    /* Mission */

    .mission-section {
        padding: 50px 15px;
    }

    .mission-content .small-heading {
        font-size: 11px;
    }

    .mission-content h2 {
        font-size: 27px;
    }

    .mission-content p:last-child {
        font-size: 14px;

        line-height: 1.7;
    }


    /* Why */

    .why-section {
        padding: 45px 15px;
    }

    .why-section .section-title {
        margin-bottom: 30px;
    }

    .why-section .section-title h2 {
        font-size: 27px;
    }

    .why-card {
        padding: 25px 18px;
    }

    .why-icon {
        width: 58px;
        height: 58px;

        font-size: 25px;
    }

    .why-card h3 {
        font-size: 17px;
    }

    .why-card p {
        font-size: 13px;
    }


    /* Categories */

    .categories-section {
        padding: 45px 15px;
    }

    .categories-section .section-title {
        margin-bottom: 30px;
    }

    .categories-section .section-title h2 {
        font-size: 27px;
    }

    .category-card {
        height: 300px;

        border-radius: 7px;
    }

    .category-card h3 {
        left: 18px;
        bottom: 17px;

        font-size: 23px;
    }

}




========== CSS FILE: static/css/category.css ==========

.category-page {
    min-height: 60vh;
    padding: 52px 5% 70px;
    box-sizing: border-box;
}

.category-page .section-title {
    margin-bottom: 30px;
    text-align: center;
}

.category-page h1 {
    margin: 0;
    color: #172b4d;
    font-size: 34px;
}

.category-page .products {
    width: 100%;
    max-width: 1200px;
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.category-page .api-product-price {
    margin: 0 0 15px;
}

.category-error {
    padding: 16px;
    color: #a12622;
    text-align: center;
}

.category-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 5%;
}

.category-footer .footer-logo img {
    width: 100px;
    height: auto;
    display: block;
    object-fit: contain;
}

.category-footer .footer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.category-footer .footer-contact a {
    margin: 0;
}

@media (max-width: 1000px) {
    .category-page .products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .category-page {
        padding: 36px 16px 48px;
    }

    .category-page h1 {
        font-size: 28px;
    }

    .category-page .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .category-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 450px) {
    .category-page .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}



========== CSS FILE: static/css/checkout.css ==========

:root {
  color-scheme: light;
  font-family: Arial, sans-serif;
  color: #17212b;
  background: #f5f7f8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px max(24px, calc((100% - 1180px) / 2));
  background: #173b4b;
}

header a {
  color: #fff;
  text-decoration: none;
}

.brand {
  font-size: 20px;
  font-weight: 700;
}

.header-right {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
}

.account-user-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-right button,
.header-right span {
  color: #fff;
  font: inherit;
}

.header-right button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.checkout-page {
  width: min(1180px, calc(100% - 32px));
  margin: 36px auto 64px;
}

.back-link {
  color: #28677d;
  text-decoration: none;
}

h1 {
  margin: 18px 0 8px;
}

.page-intro,
.muted {
  color: #64717c;
  line-height: 1.5;
}

.checkout-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.checkout-progress li {
  padding: 8px 12px;
  border-radius: 20px;
  background: #e8edef;
  color: #52616c;
  font-size: 13px;
}

.checkout-progress li[aria-current="step"] {
  background: #173b4b;
  color: #fff;
}

.checkout-progress a {
  color: inherit;
  text-decoration: none;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  margin-top: 22px;
}

.checkout-step[hidden],
.payment-option[hidden] {
  display: none;
}

.checkout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.checkout-action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 10px 18px;
  border: 0;
  border-radius: 7px;
  background: #173b4b;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.checkout-action.secondary {
  background: #edf1f2;
  color: #173b4b;
}

.checkout-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.checkout-panel {
  min-width: 0;
  padding: 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 16px #17212b0b;
}

.checkout-panel h2 {
  margin: 0 0 18px;
  font-size: 21px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  min-width: 0;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
}

.field input,
.payment-methods select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #ccd5dc;
  border-radius: 7px;
  background: #fff;
  color: inherit;
  font: inherit;
}

.field input:focus,
.payment-methods select:focus {
  outline: 3px solid #d4e9ef;
  border-color: #28677d;
}

.payment-methods {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}

.payment-methods legend {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
}

.payment-methods .muted {
  margin: 0 0 4px;
  font-size: 13px;
}

.payment-option {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  border: 1px solid #dbe2e6;
  border-radius: 8px;
  cursor: pointer;
}

.payment-option:has(input:checked) {
  border-color: #28677d;
  background: #f3f9fb;
}

.payment-option:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.payment-option input {
  flex: 0 0 auto;
  margin: 3px 0 0;
  accent-color: #173b4b;
}

.payment-option span {
  display: grid;
  gap: 4px;
}

.payment-option small {
  color: #64717c;
  line-height: 1.4;
}

.upi-app-picker {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #dbe2e6;
  border-radius: 8px;
  background: #f8fafb;
}

.upi-app-picker[hidden],
.upi-app-options[hidden],
#upi-mobile-fallback[hidden],
#upi-desktop-option[hidden] {
  display: none;
}

.upi-app-picker h3,
.upi-app-picker p {
  margin: 0;
}

.upi-app-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.upi-app-button {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #ccd5dc;
  border-radius: 7px;
  background: #fff;
  color: #173b4b;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.upi-app-button:hover,
.upi-app-button:focus-visible {
  border-color: #28677d;
  outline: 3px solid #d4e9ef;
}

.delivery-review {
  margin-bottom: 20px;
  padding: 14px;
  border-radius: 8px;
  background: #f5f7f8;
  line-height: 1.5;
}

.delivery-review p {
  margin: 3px 0;
}

.security-note {
  margin: 2px 0 0;
  color: #52616c;
  font-size: 13px;
  line-height: 1.5;
}

#place-order-button {
  margin-top: 0;
}

#verify-payment-again[hidden] {
  display: none;
}

.status {
  min-height: 22px;
  line-height: 1.5;
}

.status[data-state="error"] {
  color: #a12622;
}

.status[data-state="success"] {
  color: #176b3a;
}

.checkout-items {
  display: grid;
  gap: 14px;
}

.summary-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.summary-item img {
  width: 64px;
  height: 70px;
  border-radius: 7px;
  object-fit: cover;
}

.summary-item h3 {
  margin: 0 0 5px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.summary-item p {
  margin: 0;
  color: #64717c;
  font-size: 13px;
}

.summary-item strong {
  white-space: nowrap;
  font-size: 14px;
}

.totals {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid #e2e7ea;
}

.totals div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.totals dt,
.totals dd {
  margin: 0;
}

.grand-total {
  padding-top: 12px;
  border-top: 1px solid #e2e7ea;
  font-size: 18px;
  font-weight: 700;
}

.orders-list {
  display: grid;
  gap: 16px;
}

.order-card {
  display: grid;
  gap: 14px;
}

.order-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.order-card-heading h2 {
  margin: 0;
}

.order-card-heading time,
.order-card-meta {
  color: #64717c;
}

.order-card-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
}

.order-card-meta p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.order-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.order-action,
.cancel-order-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  background: #173b4b;
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.order-action.secondary,
.cancel-order-button {
  background: #edf1f2;
  color: #a12622;
}

.order-action:disabled,
.cancel-order-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.order-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin-bottom: 24px;
}

.order-status-grid p {
  display: grid;
  gap: 4px;
  margin: 0;
}

.order-status-grid span {
  color: #52616c;
  overflow-wrap: anywhere;
}

.order-detail-card > h2 {
  margin-top: 26px;
}

.cancel-order-button {
  margin-top: 24px;
}

.cancel-order-button[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .checkout-progress {
    gap: 6px;
  }
}

@media (max-width: 520px) {
  header {
    padding: 16px;
  }

  .brand {
    max-width: 48%;
    font-size: 16px;
  }

  .header-right {
    gap: 9px;
    font-size: 14px;
  }

  .checkout-page {
    margin-top: 24px;
  }

  .checkout-panel {
    padding: 18px;
  }

  .checkout-actions > * {
    flex: 1 1 180px;
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  .order-card-meta,
  .order-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-card-actions > * {
    flex: 1 1 160px;
  }

  .cancel-order-button {
    width: 100%;
  }

  .field.full {
    grid-column: auto;
  }

  .summary-item {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .summary-item img {
    width: 54px;
    height: 60px;
  }

  .summary-item strong {
    grid-column: 2;
  }
}



/* =========================================
   PREMIUM MY ORDERS PRODUCT PREVIEW
========================================= */

.order-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 24px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(23, 43, 77, 0.06);
}

.order-card-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.order-card-heading h2 {
  margin: 0;
  color: #172b4d;
  font-size: 19px;
  font-weight: 800;
}

.order-card-heading time {
  color: #77849a;
  font-size: 12px;
}

.order-products-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
}

.order-product-thumbnail {
  display: flex;
  flex: 0 0 88px;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 100px;
  overflow: hidden;
  background: #f4f6f9;
  border: 1px solid #e9edf3;
  border-radius: 10px;
}

.order-product-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

.order-product-thumbnail.image-fallback {
  color: #7b8798;
  font-size: 30px;
}

.order-product-info {
  min-width: 0;
}

.order-product-name {
  margin: 0 0 8px;
  color: #172b4d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.order-product-quantity,
.order-more-items {
  margin: 5px 0 0;
  color: #758198;
  font-size: 12px;
}

.order-card-meta {
  min-width: 0;
  color: #58657a;
  font-size: 13px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.order-card-meta p {
  margin: 5px 0;
}

.order-card-meta strong {
  color: #263b59;
}

.order-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.order-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 20px;
  background: #edf1f7;
  color: #536174;
  font-size: 11px;
  font-weight: 700;
}

.order-status-badge.is-success {
  background: #e5f7ec;
  color: #187744;
}

.order-status-badge.is-pending {
  background: #fff3d7;
  color: #946200;
}

.order-status-badge.is-danger {
  background: #fde8e8;
  color: #b42318;
}

.order-card-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.order-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid #2874f0;
  border-radius: 7px;
  background: #2874f0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.order-action:hover {
  background: #1758c7;
  transform: translateY(-1px);
}

.order-action.secondary {
  background: #fff;
  color: #2874f0;
}

.order-action.secondary:hover {
  background: #edf4ff;
}

.order-action:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 850px) {
  .order-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
  }

  .order-card-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .order-card-actions .order-action {
    flex: 1 1 140px;
  }
}

@media (max-width: 520px) {
  .order-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
  }

  .order-card-actions {
    grid-column: auto;
    flex-direction: column;
  }

  .order-card-actions .order-action {
    width: 100%;
  }

  .order-product-thumbnail {
    flex-basis: 76px;
    width: 76px;
    height: 90px;
  }
}


/* =========================================
   PARTNER JEANS & PANTS
   PREMIUM ORDER TRACKING TIMELINE
========================================= */

.tracking-panel {
    margin: 28px 0;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e7ebf0;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(18, 38, 63, 0.06);
    box-sizing: border-box;
}

.tracking-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.tracking-eyebrow {
    margin: 0 0 8px;
    color: #a17a3d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.tracking-heading h2 {
    margin: 0 0 8px;
    color: #172b4d;
    font-size: 25px;
    font-weight: 750;
    line-height: 1.3;
}

.tracking-heading p:not(.tracking-eyebrow) {
    margin: 0;
    color: #697586;
    font-size: 14px;
    line-height: 1.6;
}

.tracking-badge {
    flex-shrink: 0;
    padding: 9px 15px;
    border-radius: 30px;
    background: #eef4ff;
    color: #2459a9;
    font-size: 12px;
    font-weight: 750;
    text-transform: capitalize;
}

/* TIMELINE CONTAINER */

.tracking-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tracking-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 17px;
    min-height: 83px;
    padding-bottom: 23px;
    box-sizing: border-box;
}

/* Last step has no extra space */

.tracking-step:last-child {
    min-height: auto;
    padding-bottom: 0;
}

/* STEP CIRCLE */

.tracking-marker {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 2px solid #d7dee8;
    border-radius: 50%;
    background: #ffffff;
    color: #8a94a3;
    font-size: 13px;
    font-weight: 800;
    box-sizing: border-box;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

/* VERTICAL CONNECTING LINE */

.tracking-step:not(:last-child)::after {
    position: absolute;
    top: 36px;
    bottom: 0;
    left: 17px;
    width: 2px;
    background: #e2e7ef;
    content: "";
    transition: background 0.25s ease;
}

/* STEP CONTENT */

.tracking-step h3 {
    margin: 4px 0 6px;
    color: #26364b;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.4;
}

.tracking-step p {
    margin: 0;
    color: #758195;
    font-size: 13px;
    line-height: 1.6;
}

/* COMPLETED STEPS */

.tracking-step.is-complete .tracking-marker {
    border-color: #16865c;
    background: #16865c;
    color: #ffffff;
}

.tracking-step.is-complete:not(:last-child)::after {
    background: #16865c;
}

.tracking-step.is-complete h3 {
    color: #16865c;
}

/* CURRENT STEP */

.tracking-step.is-current .tracking-marker {
    border-color: #172b4d;
    background: #172b4d;
    color: #ffffff;
    box-shadow: 0 0 0 5px #e9edf5;
}

.tracking-step.is-current h3 {
    color: #172b4d;
}

/* TRACKING INFORMATION */

.tracking-note {
    margin: 24px 0 0;
    padding-top: 17px;
    border-top: 1px solid #edf0f4;
    color: #758195;
    font-size: 12px;
    line-height: 1.7;
}

/* CANCELLED ORDER */

.tracking-panel.is-cancelled .tracking-badge {
    background: #fff0f0;
    color: #b42318;
}

.tracking-panel.is-cancelled .tracking-marker {
    border-color: #e1a6a2;
    background: #ffffff;
    color: #b42318;
    box-shadow: none;
}

.tracking-panel.is-cancelled .tracking-note {
    color: #b42318;
}

/* =========================================
   TABLET RESPONSIVE
========================================= */

@media (max-width: 768px) {
    .tracking-panel {
        padding: 22px;
    }

    .tracking-heading h2 {
        font-size: 23px;
    }

    .tracking-step {
        min-height: 80px;
    }
}

/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 480px) {
    .tracking-panel {
        margin: 20px 0;
        padding: 18px 15px;
        border-radius: 14px;
    }

    .tracking-heading {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 25px;
    }

    .tracking-heading h2 {
        font-size: 21px;
    }

    .tracking-heading p:not(.tracking-eyebrow) {
        font-size: 13px;
    }

    .tracking-badge {
        padding: 8px 12px;
        font-size: 11px;
    }

    .tracking-step {
        gap: 13px;
        min-height: 80px;
        padding-bottom: 21px;
    }

    .tracking-marker {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .tracking-step:not(:last-child)::after {
        top: 34px;
        left: 16px;
    }

    .tracking-step h3 {
        margin-top: 3px;
        font-size: 14px;
    }

    .tracking-step p {
        font-size: 12px;
    }

    .tracking-note {
        margin-top: 20px;
        padding-top: 14px;
        font-size: 11px;
    }
}

/* ==========================================
   PROFESSIONAL ORDER DETAILS SECTIONS
   Partner Jeans & Pants
========================================== */

/* Main order details card */
.order-detail-card {
    width: 100%;
    max-width: 1050px;
    margin: 24px auto;
    padding: 30px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e7ebf0;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(20, 35, 55, 0.07);
}

.order-detail-card > h1 {
    margin: 0 0 26px;
    color: #172b4d;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 750;
    letter-spacing: -0.7px;
}

/* Keep tracking visually separate from the sections below */
.order-detail-card > .tracking-panel {
    margin-bottom: 28px;
}

/* Order information */
.order-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 32px;
}

.order-status-grid > p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 92px;
    margin: 0;
    padding: 18px;
    box-sizing: border-box;
    background: #f7f9fc;
    border: 1px solid #e8edf3;
    border-radius: 12px;
}

.order-status-grid strong {
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.order-status-grid span {
    overflow-wrap: anywhere;
    color: #172b4d;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

/* Section headings */
.order-detail-card > h2,
.delivery-summary h2 {
    margin: 30px 0 16px;
    color: #172b4d;
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -0.3px;
}

/* Product list */
#detail-items.checkout-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 26px;
}

#detail-items .summary-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#detail-items .summary-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 5px 16px rgba(20, 35, 55, 0.05);
}

#detail-items .summary-item img {
    display: block;
    width: 88px;
    height: 100px;
    object-fit: contain;
    padding: 5px;
    box-sizing: border-box;
    background: #f5f7fa;
    border-radius: 10px;
}

#detail-items .summary-item h3 {
    margin: 0 0 9px;
    color: #172b4d;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

#detail-items .summary-item p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

#detail-items .summary-item > strong {
    color: #172b4d;
    font-size: 16px;
    font-weight: 750;
    white-space: nowrap;
}

/* Price summary */
.order-detail-card > dl.totals {
    width: 100%;
    max-width: 480px;
    margin: 0 0 30px auto;
    padding: 22px;
    box-sizing: border-box;
    background: #f7f9fc;
    border: 1px solid #e5eaf0;
    border-radius: 14px;
}

.order-detail-card > dl.totals > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e5eaf0;
}

.order-detail-card > dl.totals dt {
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}

.order-detail-card > dl.totals dd {
    margin: 0;
    color: #172b4d;
    font-size: 14px;
    font-weight: 650;
    text-align: right;
}

.order-detail-card > dl.totals .grand-total {
    margin-top: 6px;
    padding-top: 18px;
    border-bottom: 0;
    border-top: 1px dashed #cbd5e1;
}

.order-detail-card > dl.totals .grand-total dt,
.order-detail-card > dl.totals .grand-total dd {
    color: #172b4d;
    font-size: 19px;
    font-weight: 800;
}

/* Shipping address */
.order-detail-card > .delivery-summary {
    margin-top: 8px;
    padding: 22px 24px;
    background: #f7f9fc;
    border: 1px solid #e5eaf0;
    border-left: 4px solid #172b4d;
    border-radius: 12px;
}

.order-detail-card > .delivery-summary h2 {
    margin: 0 0 14px;
}

#detail-address p {
    margin: 7px 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

#detail-address p:first-child {
    color: #172b4d;
    font-size: 16px;
    font-weight: 750;
}

/* Cancel order button */
#cancel-order-button.cancel-order-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 24px;
    padding: 0 24px;
    color: #b42318;
    background: #ffffff;
    border: 1px solid #f0b7b2;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

#cancel-order-button.cancel-order-button:hover:not(:disabled) {
    background: #fff1f0;
    border-color: #d92d20;
}

#cancel-order-button.cancel-order-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

#cancel-order-button[hidden] {
    display: none !important;
}

/* Tablet */
@media (max-width: 850px) {
    .order-detail-card {
        padding: 22px;
    }

    .order-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #detail-items .summary-item {
        grid-template-columns: 76px minmax(0, 1fr) auto;
        gap: 13px;
        padding: 14px;
    }

    #detail-items .summary-item img {
        width: 76px;
        height: 88px;
    }
}

/* Mobile */
@media (max-width: 520px) {
    .order-detail-card {
        margin: 14px auto;
        padding: 16px;
        border-radius: 13px;
    }

    .order-detail-card > h1 {
        margin-bottom: 20px;
        font-size: 25px;
    }

    .order-status-grid {
        gap: 9px;
        margin-bottom: 25px;
    }

    .order-status-grid > p {
        min-height: 82px;
        padding: 12px;
        gap: 8px;
    }

    .order-status-grid strong {
        font-size: 10px;
        letter-spacing: 0.3px;
    }

    .order-status-grid span {
        font-size: 13px;
    }

    .order-detail-card > h2,
    .delivery-summary h2 {
        font-size: 19px;
    }

    #detail-items .summary-item {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    #detail-items .summary-item img {
        width: 64px;
        height: 78px;
    }

    #detail-items .summary-item h3 {
        font-size: 14px;
    }

    #detail-items .summary-item p {
        font-size: 12px;
    }

    #detail-items .summary-item > strong {
        grid-column: 2;
        justify-self: start;
        font-size: 15px;
    }

    .order-detail-card > dl.totals {
        max-width: none;
        padding: 16px;
    }

    .order-detail-card > .delivery-summary {
        padding: 17px;
    }

    #cancel-order-button.cancel-order-button {
        width: 100%;
    }
}


/* CHECKOUT VISIBILITY FIX */
body {
  color: #17212b;
  background: #f5f7f8;
}

.checkout-page,
.checkout-page h1,
.checkout-page h2,
.checkout-page h3,
.checkout-page p,
.checkout-page label,
.checkout-page legend,
.checkout-page dt,
.checkout-page dd,
.checkout-page strong,
.checkout-page span {
  color: #17212b;
}

.checkout-panel {
  background: #ffffff;
  color: #17212b;
}

.checkout-panel input,
.checkout-panel select,
.checkout-panel textarea {
  background: #ffffff;
  color: #17212b;
}

.checkout-panel label,
.checkout-panel .field label {
  color: #17212b;
}

.checkout-panel .muted,
.checkout-panel .page-intro,
.checkout-panel .summary-item p {
  color: #64717c;
}

.checkout-panel [hidden],
.checkout-step[hidden],
.payment-option[hidden] {
  display: none !important;
}

/* CHECKOUT TEXT CONTRAST FIX */
main.checkout-page {
    color: #172b4d !important;
}

main.checkout-page h1,
main.checkout-page h2,
main.checkout-page h3,
main.checkout-page p,
main.checkout-page label,
main.checkout-page legend,
main.checkout-page dt,
main.checkout-page dd,
main.checkout-page li,
main.checkout-page strong,
main.checkout-page span {
    color: #172b4d;
}

main.checkout-page .muted,
main.checkout-page .page-intro {
    color: #64748b;
}

main.checkout-page .checkout-panel {
    background-color: #ffffff;
    color: #172b4d;
}

main.checkout-page input,
main.checkout-page select,
main.checkout-page textarea {
    background-color: #ffffff;
    color: #172b4d;
    -webkit-text-fill-color: #172b4d;
}

main.checkout-page input::placeholder,
main.checkout-page textarea::placeholder {
    color: #64748b;
    opacity: 1;
}


/* PARTNER CHECKOUT COUPON STYLES */
.checkout-coupon {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid #dbe3ec;
  border-radius: 12px;
  background: #f8fafc;
}

.checkout-coupon h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: #172b4d;
}

.checkout-coupon-controls {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.checkout-coupon-controls input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: inherit;
  text-transform: uppercase;
}

.checkout-coupon-controls button {
  padding: 11px 18px;
  border: 1px solid #172b4d;
  border-radius: 8px;
  background: #172b4d;
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.checkout-coupon-controls button:hover {
  background: #243f68;
}

.checkout-coupon-controls button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.checkout-coupon-controls #checkout-coupon-remove {
  background: #ffffff;
  color: #172b4d;
}

#checkout-coupon-message {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: #475569;
}

#checkout-coupon-message[data-state="success"] {
  color: #167345;
}

#checkout-coupon-message[data-state="error"] {
  color: #b42318;
}

#checkout-coupon-discount {
  color: #167345;
  font-weight: 600;
}

.checkout-coupon [hidden] {
  display: none !important;
}

@media (max-width: 480px) {
  .checkout-coupon {
    padding: 14px;
  }

  .checkout-coupon-controls {
    gap: 8px;
  }

  .checkout-coupon-controls button {
    padding: 10px 12px;
  }
}


/* ==========================================================
   PARTNER JEANS & PANTS — CONSOLIDATED LUXURY CHECKOUT
   Palette: Midnight Navy / Champagne Gold / Warm Ivory
   Existing checkout and payment JavaScript IDs are preserved.
   ========================================================== */

:root {
  --pj-navy: #14263d;
  --pj-navy-deep: #0d1b2d;
  --pj-gold: #b89558;
  --pj-gold-light: #e4d2ae;
  --pj-ivory: #f8f6f1;
  --pj-paper: #ffffff;
  --pj-text: #263345;
  --pj-muted: #77808c;
  --pj-border: #e6e0d5;
  --pj-success: #276747;
  --pj-danger: #a33f3f;
  --pj-radius: 16px;
  --pj-shadow: 0 12px 36px rgba(20, 38, 61, .075);
}

html {
  scroll-behavior: smooth;
}

html body:has(main.checkout-page) {
  background: var(--pj-ivory);
  color: var(--pj-text);
  font-family: Arial, Helvetica, sans-serif;
}

html body main.checkout-page {
  width: min(1080px, calc(100% - 48px));
  max-width: 1080px;
  margin: 38px auto 76px;
  line-height: 1.55;
}

html body main.checkout-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pj-navy);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}

html body main.checkout-page .back-link:hover {
  color: var(--pj-gold);
}

html body main.checkout-page > h1 {
  margin: 22px 0 7px;
  color: var(--pj-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 600;
  letter-spacing: -.8px;
  line-height: 1.15;
}

html body main.checkout-page .page-intro {
  margin: 0 0 26px;
  color: var(--pj-muted);
  font-size: 15px;
}

/* Progress navigation */
html body main.checkout-page .checkout-progress {
  display: flex;
  align-items: stretch;
  gap: 9px;
  margin: 26px 0 24px;
  padding: 0 0 5px;
  list-style: none;
}

html body main.checkout-page .checkout-progress li {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 10px;
  border: 1px solid var(--pj-border);
  border-radius: 10px;
  background: var(--pj-paper);
  color: #667080;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  transition: background .2s ease, border-color .2s ease,
    color .2s ease;
}

html body main.checkout-page .checkout-progress li[aria-current="step"] {
  border-color: var(--pj-navy);
  background: var(--pj-navy);
  color: #fff;
  box-shadow: 0 5px 15px rgba(20, 38, 61, .14);
}

html body main.checkout-page .checkout-progress a {
  display: block;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

html body main.checkout-page .checkout-progress a:hover {
  color: var(--pj-gold-light);
  text-decoration: none;
}

/* Status messages */
html body main.checkout-page #checkout-status,
html body main.checkout-page #confirmation-status,
html body main.checkout-page #payment-success-status {
  padding: 13px 16px;
  border-radius: 10px;
  line-height: 1.6;
}

html body main.checkout-page #checkout-status:empty,
html body main.checkout-page #confirmation-status:empty,
html body main.checkout-page #payment-success-status:empty {
  display: none;
}

html body main.checkout-page [data-state="success"] {
  border: 1px solid #cfe5d5;
  background: #edf7f0;
  color: var(--pj-success);
}

html body main.checkout-page [data-state="error"] {
  border: 1px solid #efd2d2;
  background: #fff0f0;
  color: var(--pj-danger);
}

/* Step container: keep JavaScript-controlled hidden state intact */
html body main.checkout-page .checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  margin-top: 20px;
}

html body main.checkout-page .checkout-step[hidden],
html body main.checkout-page .payment-option[hidden] {
  display: none !important;
}

html body main.checkout-page .checkout-panel {
  min-width: 0;
  padding: clamp(22px, 3.5vw, 38px);
  border: 1px solid rgba(184, 149, 88, .2);
  border-radius: var(--pj-radius);
  background: var(--pj-paper);
  box-shadow: var(--pj-shadow);
}

html body main.checkout-page .checkout-panel h2 {
  margin: 0 0 25px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--pj-border);
  color: var(--pj-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(23px, 3vw, 29px);
  font-weight: 600;
  line-height: 1.3;
}

html body main.checkout-page .checkout-panel h3 {
  color: var(--pj-navy);
}

html body main.checkout-page .muted {
  color: var(--pj-muted);
  line-height: 1.65;
}

/* Delivery form */
html body main.checkout-page .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

html body main.checkout-page .field {
  min-width: 0;
}

html body main.checkout-page .field label {
  display: block;
  margin-bottom: 8px;
  color: var(--pj-navy);
  font-size: 13px;
  font-weight: 700;
}

html body main.checkout-page .field.full {
  grid-column: 1 / -1;
}

html body main.checkout-page input:not([type="radio"]):not([type="checkbox"]),
html body main.checkout-page select,
html body main.checkout-page textarea {
  width: 100%;
  min-width: 0;
  min-height: 49px;
  padding: 12px 14px;
  border: 1px solid #dedbd4;
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: var(--pj-text);
  font: inherit;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

html body main.checkout-page textarea {
  min-height: 100px;
  resize: vertical;
}

html body main.checkout-page input:not([type="radio"]):not([type="checkbox"]):focus,
html body main.checkout-page select:focus,
html body main.checkout-page textarea:focus {
  border-color: var(--pj-gold);
  box-shadow: 0 0 0 3px rgba(184, 149, 88, .14);
}

html body main.checkout-page input::placeholder,
html body main.checkout-page textarea::placeholder {
  color: #9a9fa7;
}

html body main.checkout-page input:disabled,
html body main.checkout-page select:disabled,
html body main.checkout-page textarea:disabled {
  cursor: not-allowed;
  background: #f3f2ef;
}

/* Delivery review and cart items */
html body main.checkout-page .delivery-review {
  margin-bottom: 20px;
  padding: 17px 19px;
  border: 1px solid var(--pj-border);
  border-radius: 11px;
  background: #fbfaf7;
  color: var(--pj-text);
  line-height: 1.7;
}

html body main.checkout-page .checkout-items,
html body main.checkout-page #confirmation-items {
  display: grid;
  gap: 0;
}

html body main.checkout-page .summary-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  padding: 18px 0;
  border-bottom: 1px solid var(--pj-border);
}

html body main.checkout-page .summary-item img {
  display: block;
  width: 82px;
  height: 96px;
  border-radius: 9px;
  background: var(--pj-ivory);
  object-fit: cover;
}

html body main.checkout-page .summary-item h3 {
  margin: 0 0 5px;
  color: var(--pj-navy);
  font-size: 15px;
  line-height: 1.45;
}

html body main.checkout-page .summary-item p {
  margin: 3px 0;
  color: var(--pj-muted);
  font-size: 12px;
  line-height: 1.5;
}

html body main.checkout-page .summary-item > strong {
  color: var(--pj-navy);
  font-size: 14px;
  white-space: nowrap;
}

/* Coupon */
html body main.checkout-page .checkout-coupon {
  margin: 25px 0;
  padding: 21px;
  border: 1px dashed #c8ad7d;
  border-radius: 12px;
  background: #fcfaf5;
}

html body main.checkout-page .checkout-coupon h3 {
  margin: 0 0 13px;
  font-size: 16px;
}

html body main.checkout-page .checkout-coupon-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
}

html body main.checkout-page .checkout-coupon-controls button {
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid var(--pj-gold);
  border-radius: 8px;
  background: var(--pj-navy);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

html body main.checkout-page .checkout-coupon-controls button:hover {
  background: #243d5b;
}

html body main.checkout-page .checkout-coupon-controls button[hidden] {
  display: none !important;
}

html body main.checkout-page #checkout-coupon-message {
  margin: 10px 0 0;
  color: var(--pj-muted);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Totals */
html body main.checkout-page .totals {
  margin: 23px 0 0;
  padding: 0;
}

html body main.checkout-page .totals > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid #efede8;
}

html body main.checkout-page .totals dt {
  color: #657080;
  font-size: 14px;
}

html body main.checkout-page .totals dd {
  margin: 0;
  color: var(--pj-navy);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

html body main.checkout-page .totals .grand-total {
  align-items: center;
  margin-top: 8px;
  padding: 18px 0 0;
  border-top: 1px solid var(--pj-gold);
  border-bottom: 0;
}

html body main.checkout-page .totals .grand-total dt {
  color: var(--pj-navy);
  font-size: 18px;
  font-weight: 800;
}

html body main.checkout-page .totals .grand-total dd {
  color: var(--pj-navy);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
}

/* Payment choices */
html body main.checkout-page .payment-methods {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

html body main.checkout-page .payment-methods legend {
  margin-bottom: 15px;
  color: var(--pj-navy);
  font-size: 15px;
  font-weight: 700;
}

html body main.checkout-page .payment-option {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0 0 12px;
  padding: 17px;
  border: 1px solid var(--pj-border);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease,
    box-shadow .2s ease;
}

html body main.checkout-page .payment-option:has(input:checked) {
  border-color: var(--pj-gold);
  background: #fcfaf5;
  box-shadow: 0 0 0 2px rgba(184, 149, 88, .1);
}

html body main.checkout-page .payment-option input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--pj-navy);
}

html body main.checkout-page .payment-option > span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

html body main.checkout-page .payment-option strong {
  color: var(--pj-navy);
  font-size: 14px;
}

html body main.checkout-page .payment-option small {
  color: var(--pj-muted);
  font-size: 12px;
  line-height: 1.6;
}

html body main.checkout-page .security-note,
html body main.checkout-page #gateway-note {
  color: var(--pj-muted);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* Buttons */
html body main.checkout-page .checkout-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

html body main.checkout-page .checkout-action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 49px;
  padding: 12px 22px;
  border: 1px solid var(--pj-navy);
  border-radius: 9px;
  background: var(--pj-navy);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease,
    box-shadow .2s ease, transform .2s ease;
}

html body main.checkout-page .checkout-action:hover:not(:disabled) {
  border-color: var(--pj-navy-deep);
  background: var(--pj-navy-deep);
  box-shadow: 0 5px 14px rgba(20, 38, 61, .14);
  transform: translateY(-1px);
}

html body main.checkout-page .checkout-action.secondary {
  border-color: var(--pj-border);
  background: #fff;
  color: var(--pj-navy);
}

html body main.checkout-page .checkout-action.secondary:hover:not(:disabled) {
  border-color: var(--pj-gold);
  background: #fcfaf5;
}

html body main.checkout-page .checkout-action:disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

html body main.checkout-page button:focus-visible,
html body main.checkout-page a:focus-visible {
  outline: 3px solid rgba(184, 149, 88, .6);
  outline-offset: 3px;
}

/* Confirmation and payment-success pages */
html body main.checkout-page .confirmation-card,
html body main.checkout-page .payment-success-card {
  width: 100%;
  max-width: 760px;
  margin: 30px auto;
}

html body main.checkout-page .confirmation-card > h1,
html body main.checkout-page .payment-success-card > h1 {
  margin: 0 0 18px;
  color: var(--pj-navy) !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(29px, 4vw, 40px);
  line-height: 1.2;
}

html body main.checkout-page .confirmation-state {
  padding: 16px 18px;
  border: 1px solid #d6e8da;
  border-radius: 10px;
  background: #eff7f0;
  color: var(--pj-success);
  line-height: 1.7;
}

html body main.checkout-page #order-reference,
html body main.checkout-page #payment-success-reference {
  display: inline-block;
  margin: 12px 0;
  padding: 9px 13px;
  border: 1px solid var(--pj-border);
  border-radius: 8px;
  background: #fbfaf7;
  color: var(--pj-navy);
  font-weight: 700;
  overflow-wrap: anywhere;
}

html body main.checkout-page .delivery-summary {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--pj-border);
  color: var(--pj-text);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

html body main.checkout-page .delivery-summary p {
  margin: 5px 0;
}

html body main.checkout-page .confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 25px;
}

html body main.checkout-page .confirmation-actions a {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border: 1px solid var(--pj-navy);
  border-radius: 9px;
  background: var(--pj-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease;
}

html body main.checkout-page .confirmation-actions a:hover {
  background: var(--pj-navy-deep);
}

html body main.checkout-page #confirm-order-link[hidden] {
  display: none !important;
}

/* Responsive: tablets */
@media (max-width: 800px) {
  html body main.checkout-page {
    width: calc(100% - 32px);
    margin-top: 27px;
  }

  html body main.checkout-page .checkout-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  html body main.checkout-page .checkout-progress li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 9px 6px;
  }

  html body main.checkout-page .checkout-panel {
    padding: 25px;
  }
}

/* Responsive: phones */
@media (max-width: 520px) {
  html body main.checkout-page {
    width: calc(100% - 24px);
    margin: 20px auto 42px;
  }

  html body main.checkout-page > h1 {
    margin-top: 17px;
    font-size: 32px;
  }

  html body main.checkout-page .page-intro {
    font-size: 14px;
  }

  html body main.checkout-page .checkout-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 20px 0;
  }

  html body main.checkout-page .checkout-progress li {
    min-height: 44px;
    font-size: 11px;
  }

  html body main.checkout-page .checkout-panel {
    padding: 19px 16px;
    border-radius: 13px;
  }

  html body main.checkout-page .checkout-panel h2 {
    margin-bottom: 20px;
    padding-bottom: 14px;
    font-size: 24px;
  }

  html body main.checkout-page .form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }

  html body main.checkout-page .field.full {
    grid-column: auto;
  }

  html body main.checkout-page .checkout-coupon {
    padding: 15px;
  }

  html body main.checkout-page .checkout-coupon-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  html body main.checkout-page .checkout-coupon-controls input {
    grid-column: 1 / -1;
  }

  html body main.checkout-page .checkout-coupon-controls button {
    padding: 10px 13px;
  }

  html body main.checkout-page .summary-item {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 0;
  }

  html body main.checkout-page .summary-item img {
    width: 62px;
    height: 76px;
  }

  html body main.checkout-page .summary-item > strong {
    grid-column: 2;
    justify-self: start;
  }

  html body main.checkout-page .totals dt,
  html body main.checkout-page .totals dd {
    font-size: 13px;
  }

  html body main.checkout-page .totals .grand-total dt {
    font-size: 16px;
  }

  html body main.checkout-page .totals .grand-total dd {
    font-size: 23px;
  }

  html body main.checkout-page .checkout-actions {
    flex-direction: column;
    align-items: stretch;
  }

  html body main.checkout-page .checkout-actions > *,
  html body main.checkout-page .confirmation-actions > * {
    width: 100%;
    max-width: none;
  }

  html body main.checkout-page .checkout-action {
    width: 100%;
    min-height: 49px;
  }

  html body main.checkout-page .confirmation-card,
  html body main.checkout-page .payment-success-card {
    margin: 18px auto;
  }

  html body main.checkout-page .confirmation-actions {
    flex-direction: column;
  }

  html body main.checkout-page .confirmation-actions a {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html body main.checkout-page *,
  html body main.checkout-page *::before,
  html body main.checkout-page *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ===== END CONSOLIDATED LUXURY CHECKOUT ===== */




========== CSS FILE: static/css/common.css ==========

/* =========================================================
   COMMON CSS
   Partner Jeans & Pants
========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #f5f7fa;
    color: #172b4d;
    overflow-x: hidden;
}

.api-products-status {
    margin: 0 0 16px;
    color: #52627a;
    font-size: 14px;
}

.api-products-status-error {
    color: #a12622;
}

.api-product-description {
    color: #52627a;
    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   HEADER
========================================================= */

header {
    min-height: 75px;
    width: 100%;
    background: white;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 45px;
    box-sizing: border-box;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    position: relative;
    z-index: 100;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    width: 120px;
    height: auto;
    display: block;
}


/* =========================================================
   NAVIGATION
========================================================= */

nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

nav a {
    color: #172b4d;
    text-decoration: none;

    font-size: 12px;
    font-weight: 500;

    padding: 8px 0;

    white-space: nowrap;

    transition: 0.3s;
}

nav a:hover {
    color: #1683ff;
    border-bottom: 3px solid #1683ff;
}


/* =========================================================
   HEADER RIGHT
========================================================= */

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}


/* =========================================================
   SEARCH
========================================================= */

.search {
    width: 200px;
    height: 40px;

    display: flex;
    align-items: center;

    padding: 0 12px;

    background: #fafafa;

    border: 1px solid #ddd;
    border-radius: 25px;

    box-sizing: border-box;
}

.search input {
    width: 100%;

    border: none;
    outline: none;

    background: transparent;

    font-size: 13px;
}

.search span {
    font-size: 15px;
    cursor: pointer;
}


/* =========================================================
   LOGIN / REGISTER
========================================================= */

.login,
.register {
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 14px;

    color: white;
    background: #1683ff;

    border: 1px solid #1683ff;
    border-radius: 7px;

    text-decoration: none;

    font-size: 13px;
    font-weight: bold;

    white-space: nowrap;

    transition: 0.3s;
}

.login:hover,
.register:hover {
    background: #006fe6;
    border-color: #006fe6;

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(22, 131, 255, 0.25);
}

.account-user-name {
    max-width: 180px;
    overflow: hidden;
    color: #172b4d;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-logout,
.cart-header-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid #172b4d;
    border-radius: 7px;
    background: #fff;
    color: #172b4d;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.account-logout:hover,
.cart-header-link:hover {
    background: #172b4d;
    color: #fff;
}


/* =========================================================
   FLOATING CART DOCK (cart count + my orders)
========================================================= */

.cart-dock {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;

    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-dock-link,
.my-orders-dock-link {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 18px;

    background: #1683ff;

    color: #fff;

    border: 0;
    border-radius: 24px;

    text-decoration: none;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;

    white-space: nowrap;

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

    transition: 0.3s;
}

.cart-dock-link:hover,
.my-orders-dock-link:hover {
    background: #006fe6;

    transform: translateY(-2px);

    box-shadow: 0 6px 18px rgba(22, 131, 255, 0.35);
}


/* =========================================================
   CART DOCK RESPONSIVE - 480px
========================================================= */

@media (max-width: 480px) {

    .cart-dock {
        right: 12px;
        bottom: 12px;
        gap: 6px;
    }

    .cart-dock-link,
    .my-orders-dock-link {
        padding: 9px 13px;
        font-size: 12px;
    }
}


/* =========================================================
   HEADER RESPONSIVE - 1200px
========================================================= */

@media (max-width: 1200px) {

    header {
        flex-wrap: nowrap;
        gap: 12px;
        padding: 0 20px;
    }

    nav {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 8px;
        scrollbar-width: none;
    }

    nav::-webkit-scrollbar {
        display: none;
    }

    nav a {
        flex: 0 0 auto;
        font-size: 12px;
    }

    .header-right {
        flex-wrap: nowrap;
        flex-shrink: 0;
        gap: 10px;
    }

    .search {
        width: 150px;
    }

    .account-user-name {
        max-width: 120px;
    }
}


/* =========================================================
   HEADER RESPONSIVE - 1100px
========================================================= */

@media (max-width: 1100px) {

    header {
        padding: 0 18px;
        gap: 10px;
    }

    nav {
        gap: 8px;
    }

    .search {
        width: 140px;
    }

    .account-user-name {
        max-width: 110px;
    }
}


/* =========================================================
   HEADER RESPONSIVE - 760px
========================================================= */

@media (max-width: 760px) {

    header {
        padding: 0 14px;
        gap: 10px;
    }

    .logo img {
        width: 96px;
    }

    nav {
        gap: 10px;
    }

    nav a {
        font-size: 12px;
        padding: 8px 0;
    }

    .header-right {
        gap: 8px;
    }

    .search {
        width: 118px;
        padding: 0 10px;
    }

    .login,
    .register {
        padding: 0 10px;
        font-size: 12px;
    }

    .account-user-name {
        max-width: 96px;
    }
}


/* =========================================================
   HEADER RESPONSIVE - 480px
========================================================= */

@media (max-width: 480px) {

    header {
        padding: 0 12px;
        gap: 8px;
    }

    .logo img {
        width: 72px;
    }

    nav {
        gap: 8px;
    }

    nav a {
        font-size: 11px;
    }

    .header-right {
        gap: 6px;
    }

    .search {
        width: 92px;
        padding: 0 8px;
    }

    .login,
    .register,
    .account-logout,
    .cart-header-link {
        padding: 0 9px;
        font-size: 12px;
    }

    .account-user-name {
        max-width: 72px;
    }
}


/* =========================================================
   COMMON SECTION TITLE
========================================================= */

.section-title {
    text-align: center;
    margin-bottom: 35px;
}

.section-title h2 {
    font-size: 32px;
    margin: 10px 0;
}

.section-title h2 span {
    color: #1683ff;
}

.section-title p {
    color: #718096;
    font-size: 15px;
    margin-top: 8px;
}

.blue-line {
    width: 40px;
    height: 3px;
    background: #1683ff;
    margin: 10px auto;
}


/* =========================================================
   COMMON PRODUCT GRID
========================================================= */

.products,
.products-grid {
    display: grid;

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

    gap: 22px;

    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

.product-card {
    width: 100%;

    background: white;

    border: 1px solid #e4e9ef;

    border-radius: 12px;

    overflow: hidden;

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

    transition: 0.3s;

    box-sizing: border-box;
}

.product-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.13);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image {
    width: 100%;
    height: 280px;

    position: relative;

    overflow: hidden;

    background: #f2f2f2;
}

.product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}


/* =========================================================
   BADGES
========================================================= */

.badge,
.new-badge,
.sale-badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 2;

    color: white;

    padding: 6px 10px;

    border-radius: 5px;

    font-size: 11px;
    font-weight: bold;
}

.badge {
    background: #1683ff;
}

.badge.best {
    background: #e67e22;
}

.badge.hot {
    background: #e74c3c;
}

.new-badge {
    background: #111;
}

.sale-badge {
    background: #c62828;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.product-info {
    padding: 16px;
}

.product-info h3 {
    margin: 0 0 8px;

    font-size: 17px;

    color: #222;
}

.product-category {
    margin: 0 0 10px;

    color: #888;

    font-size: 13px;
}

.product-color {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    color: #52627a;
    font-size: 13px;
}

.product-color-swatch {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    box-sizing: border-box;
}

.rating {
    margin: 8px 0 12px;

    color: #f59e0b;

    font-size: 14px;
}

.rating span,
.rating small {
    color: #777;

    margin-left: 5px;
}

.price {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 15px;
}

.price b,
.product-price {
    color: #172b4d;

    font-size: 19px;
    font-weight: bold;
}

.price del,
.old-price {
    color: #999;

    font-size: 13px;
}

.old-price {
    text-decoration: line-through;
}

.price span:not(.product-price):not(.sale-price) {
    color: #16a34a;

    font-size: 11px;
    font-weight: bold;
}

.sale-price {
    color: #c62828;

    font-size: 21px;
    font-weight: bold;
}


/* =========================================================
   CART BUTTON
========================================================= */

.product-info button,
.cart-btn {
    width: 100%;

    border: none;

    background: #12365b;

    color: white;

    padding: 11px;

    border-radius: 6px;

    cursor: pointer;

    font-size: 14px;

    transition: 0.3s;
}

.product-info button:hover,
.cart-btn:hover {
    background: #1683ff;
}


/* =========================================================
   LOGOUT
========================================================= */

.user-name {
    color: #172b4d;

    font-size: 15px;
    font-weight: 600;

    white-space: nowrap;
}

.logout {
    text-decoration: none;

    color: white;

    background: #172b4d;

    padding: 9px 18px;

    border-radius: 6px;

    font-weight: 600;
}

.logout:hover {
    background: #000;
}


/* =========================================================
   PREMIUM FOOTER
========================================================= */

.premium-footer {
    width: 100%;

    margin: 0;
    padding: 0;

    background: rgb(81, 81, 75);

    color: rgb(227, 223, 223);

    box-sizing: border-box;
}

.footer-container {
    width: 100%;

    margin: 0;

    padding: 65px 45px 50px;

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
        1.7fr
        1fr
        1.25fr
        1.15fr
        1.4fr;

    gap: 35px;

    align-items: start;
}

.footer-brand {
    min-width: 0;
}



.footer-logo {
    margin: 0 0 15px;
}

.footer-logo img {
    width: 100px;
    height: auto;
    display: block;
    object-fit: contain;
}

.footer-logo span {
    color: #28a9ff;
}

.footer-description {
    max-width: 330px;

    color: #aaa;

    font-size: 14px;

    line-height: 1.8;

    margin: 0 0 22px;
}

.footer-social {
    display: flex;
    align-items: center;

    gap: 10px;
}

.social-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #222;

    border: 1px solid #333;

    border-radius: 50%;

    color: white;

    text-decoration: none;

    font-size: 15px;

    transition: 0.3s;
}

.social-icon:hover {
    background: #1683ff;

    border-color: #1683ff;

    transform: translateY(-3px);
}

.footer-box {
    min-width: 0;

    display: flex;

    flex-direction: column;
}

.footer-box h3 {
    color: white;

    font-size: 17px;

    margin: 0 0 20px;

    position: relative;
}

.footer-box h3::after {
    content: "";

    display: block;

    width: 35px;
    height: 2px;

    background: #1683ff;

    margin-top: 8px;
}

.footer-box a {
    color: #aaa;

    text-decoration: none;

    font-size: 13px;

    margin-bottom: 12px;

    transition: 0.3s;
}

.footer-box a:hover {
    color: #28a9ff;

    padding-left: 4px;
}

.footer-contact a,
.footer-contact p {
    color: #aaa;

    font-size: 13px;

    line-height: 1.7;

    margin: 0 0 12px;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 8px;
}

.footer-contact a:hover {
    color: #28a9ff;
}


/* =========================================================
   FOOTER NEWSLETTER
========================================================= */

.footer-newsletter {
    width: calc(100% - 90px);

    margin: 0 45px;

    padding: 28px 0;

    border-top: 1px solid #2a2a2a;

    border-bottom: 1px solid #2a2a2a;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.newsletter-text {
    min-width: 0;
}

.newsletter-text h3 {
    margin: 0 0 6px;

    color: white;

    font-size: 19px;
}

.newsletter-text p {
    margin: 0;

    color: #888;

    font-size: 13px;
}

.newsletter-form {
    display: flex;

    width: 420px;

    max-width: 100%;
}

.newsletter-form input {
    flex: 1;

    min-width: 0;

    height: 42px;

    border: 1px solid #333;

    border-right: none;

    outline: none;

    padding: 0 15px;

    background: #1b1b1b;

    color: white;

    border-radius: 6px 0 0 6px;

    box-sizing: border-box;
}

.newsletter-form input::placeholder {
    color: #777;
}

.newsletter-form button {
    height: 42px;

    border: none;

    padding: 0 20px;

    background: #1683ff;

    color: white;

    font-weight: bold;

    cursor: pointer;

    border-radius: 0 6px 6px 0;

    transition: 0.3s;
}

.newsletter-form button:hover {
    background: #006fe6;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    width: 100%;

    padding: 20px 45px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}

.footer-bottom p {
    margin: 0;

    color: #777;

    font-size: 12px;
}

.footer-bottom-links {
    display: flex;

    align-items: center;

    gap: 20px;
}

.footer-bottom-links a {
    color: #777;

    text-decoration: none;

    font-size: 12px;

    transition: 0.3s;
}

.footer-bottom-links a:hover {
    color: #28a9ff;
}


/* =========================================================
   COMMON RESPONSIVE - 1200px
========================================================= */

@media (max-width: 1200px) {

    .products,
    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-container {
        grid-template-columns:
            1.5fr
            1fr
            1fr
            1fr
            1.3fr;

        gap: 20px;

        padding-left: 25px;
        padding-right: 25px;
    }

    .footer-newsletter {
        width: calc(100% - 50px);

        margin-left: 25px;
        margin-right: 25px;
    }

    .footer-bottom {
        padding-left: 25px;
        padding-right: 25px;
    }
}


/* =========================================================
   COMMON RESPONSIVE - 1000px
========================================================= */

@media (max-width: 1000px) {

    .footer-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: span 3;
    }
}


/* =========================================================
   COMMON RESPONSIVE - 700px
========================================================= */

@media (max-width: 700px) {

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

        gap: 15px;
    }

    .product-image {
        height: 230px;
    }

    .product-info {
        padding: 12px;
    }

    .product-info h3 {
        font-size: 15px;
    }

    .footer-container {
        grid-template-columns: 1fr;

        padding: 50px 25px 35px;

        gap: 35px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-description {
        max-width: 100%;
    }

    .footer-newsletter {
        width: calc(100% - 50px);

        margin-left: 25px;
        margin-right: 25px;

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }

    .newsletter-form {
        width: 100%;
    }

    .footer-bottom {
        padding: 20px 25px;

        flex-direction: column;

        text-align: center;
    }
}


/* =========================================================
   COMMON RESPONSIVE - 450px
========================================================= */

@media (max-width: 450px) {

    .products,
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .product-image {
        height: 200px;
    }

    .product-info {
        padding: 10px;
    }

    .product-info h3 {
        font-size: 14px;
    }

    .newsletter-form {
        flex-direction: column;

        gap: 10px;
    }

    .newsletter-form input {
        width: 100%;

        border-right: 1px solid #333;

        border-radius: 6px;
    }

    .newsletter-form button {
        width: 100%;

        border-radius: 6px;
    }
}


/* =========================================================
   HERO
========================================================= */

.hero {
    width: 100%;
    height: 500px;

    position: relative;

    overflow: hidden;

    color: white;
}

.hero-slider {
    width: 100%;
    height: 100%;

    position: relative;

    overflow: hidden;
}

.hero-slide {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;

    padding-left: 90px;

    box-sizing: border-box;

    transform: translateX(100%);

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


/* =========================================================
   HERO IMAGE
========================================================= */

.hero-slide img {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    z-index: 0;
}


/* =========================================================
   ACTIVE SLIDE
========================================================= */

.hero-slide.active {
    transform: translateX(0);
}

.hero-slide.previous {
    transform: translateX(-100%);
}

@media (max-width: 1220px) {
    body > section.hero:has(> .hero-slider img[src*="banner1.png"]),
    body > section.hero:has(> .hero-slider img[src*="banner2.png"]),
    body > section.hero:has(> .hero-slider img[src*="banner3.png"]) {
        height: auto;
        aspect-ratio: 3 / 1;
        min-height: 0;
    }

    body > section.hero:has(> .hero-slider img[src*="hom pag bannr.png"]) {
        height: auto;
        aspect-ratio: 1942 / 809;
        min-height: 0;
    }

    body > section.hero:has(> .hero-slider) .hero-slider,
    body > section.hero:has(> .hero-slider) .hero-slide {
        height: 100%;
    }

    body > section.hero:has(> .hero-slider) .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    max-width: 600px;

    position: relative;

    z-index: 2;
}


/* =========================================================
   SHOP BUTTON
========================================================= */

.shop-btn {
    display: inline-block;

    padding: 13px 28px;

    background: #28a9ff;

    color: white;

    text-decoration: none;

    border-radius: 5px;

    font-size: 15px;

    font-weight: bold;

    transition: 0.3s ease;
}

.shop-btn:hover {
    background: #1683ff;

    transform: translateY(-2px);
}



/* =========================================
   FLIPKART-STYLE CUSTOMER ACCOUNT DROPDOWN
   Partner Jeans & Pants
========================================= */

.customer-account-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-family: inherit;
}

/* Account trigger */

.customer-account-trigger {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 12px;
    background: #ffffff;
    color: #172b4d;
    border: 1px solid #e0e5ec;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.customer-account-trigger:hover,
.customer-account-trigger[aria-expanded="true"] {
    background: #f1f6ff;
    border-color: #1683ff;
}

/* Greeting */

.customer-account-greeting {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 135px;
}

.customer-account-greeting small {
    color: #64748b;
    font-size: 10px;
    line-height: 1.2;
}

.customer-account-greeting strong {
    display: block;
    max-width: 135px;
    overflow: hidden;
    color: #172b4d;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dropdown arrow */

.customer-account-arrow {
    color: #172b4d;
    font-size: 17px;
    transition: transform 0.2s ease;
}

.customer-account-trigger[aria-expanded="true"]
.customer-account-arrow {
    transform: rotate(180deg);
}

/* Dropdown panel */

.customer-account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1000;
    width: 280px;
    max-width: calc(100vw - 20px);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(15, 35, 60, 0.18);
    animation: customerDropdownAppear 0.18s ease-out;
}

.customer-account-dropdown[hidden] {
    display: none !important;
}

@keyframes customerDropdownAppear {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown heading */

.customer-account-heading {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px 16px;
    background: #f5f8ff;
    border-bottom: 1px solid #e5eaf1;
}

.customer-account-heading strong {
    color: #172b4d;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.customer-account-heading span {
    color: #64748b;
    font-size: 11px;
}

/* Account links */

.customer-account-item {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 48px;
    padding: 6px 17px;
    color: #26364b;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid #f0f2f6;
    transition: background 0.2s ease, color 0.2s ease;
}

.customer-account-item:hover,
.customer-account-item:focus-visible {
    color: #075bd8;
    background: #f8faff;
    outline: none;
}

.customer-account-item:focus-visible {
    box-shadow: inset 0 0 0 2px #1769e0;
}

/* Premium SVG icon containers */

.customer-account-item-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1769e0;
    background: #edf4ff;
    border-radius: 10px;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.customer-account-item-icon svg {
    display: block;
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.customer-account-item:hover .customer-account-item-icon,
.customer-account-item:focus-visible .customer-account-item-icon {
    color: #ffffff;
    background: #1769e0;
    transform: scale(1.06);
}

.customer-account-item:last-of-type {
    border-bottom: none;
}

/* Dropdown footer */

.customer-account-footer {
    padding: 12px 16px;
    background: #ffffff;
}

.customer-account-logout {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    background: #ffffff;
    color: #d12d35;
    border: 1px solid #f0c8cb;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.customer-account-logout:hover {
    background: #fff1f1;
    border-color: #e9a9ad;
}

.customer-account-logout:focus-visible {
    outline: 2px solid #d12d35;
    outline-offset: 2px;
}

.customer-account-logout:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Status and error messages */

.customer-account-status {
    margin: 8px 0 0;
    color: #c62828;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.customer-account-status:empty {
    display: none;
}

/* Hide Login/Register when JavaScript sets hidden */

.login[hidden],
.register[hidden] {
    display: none !important;
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */

@media (max-width: 760px) {
    .customer-account-trigger {
        min-height: 36px;
        gap: 6px;
        padding: 4px 8px;
    }

    .customer-account-greeting {
        max-width: 90px;
    }

    .customer-account-greeting strong {
        max-width: 90px;
        font-size: 12px;
    }

    .customer-account-dropdown {
        position: fixed;
        top: 75px;
        right: 10px;
        width: min(280px, calc(100vw - 20px));
        max-height: calc(100vh - 95px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 380px) {
    .customer-account-greeting {
        max-width: 68px;
    }

    .customer-account-greeting strong {
        max-width: 68px;
    }

    .customer-account-dropdown {
        right: 10px;
        width: calc(100vw - 20px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-account-dropdown {
        animation: none;
    }

    .customer-account-trigger,
    .customer-account-arrow,
    .customer-account-item,
    .customer-account-item-icon,
    .customer-account-logout {
        transition: none;
    }
}


/* =========================================
   WISHLIST HEART BUTTON
========================================= */

.api-product-card .product-image {
    position: relative;
}

.wishlist-heart {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #333333;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, color 0.2s ease;
}

.wishlist-heart:hover {
    transform: scale(1.1);
}

.wishlist-heart.is-saved {
    color: #e11d48;
}

.wishlist-heart:disabled {
    opacity: 0.6;
    cursor: wait;
}

.wishlist-message {
    margin: 10px 0;
    font-size: 14px;
}

.wishlist-page-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.wishlist-remove-btn {
    margin-top: 8px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e11d48;
    border-radius: 6px;
    background: white;
    color: #be123c;
    cursor: pointer;
}

.wishlist-remove-btn:hover {
    background: #fff1f2;
}

.wishlist-empty {
    padding: 50px 20px;
    text-align: center;
}

@media (max-width: 900px) {
    .wishlist-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .wishlist-page-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   PREMIUM HEADER — PARTNER JEANS & PANTS
========================================= */

header {
    min-height: 82px;
    padding: 12px 3%;
    gap: 22px;
    background: #ffffff;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.045);
    border-bottom: 1px solid #eeeeea;
}

.logo img {
    width: 125px;
    max-height: 62px;
    object-fit: contain;
}

header nav {
    gap: clamp(10px, 1.2vw, 20px);
}

header nav a {
    position: relative;
    color: #242424;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.45px;
    transition: color 0.25s ease;
}

header nav a:hover {
    color: #967343;
    border-bottom: none;
}

header nav a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #967343;
    transition: width 0.25s ease;
}

header nav a:hover::after {
    width: 100%;
}

.header-right {
    gap: 9px;
}

.search {
    border: 1px solid #e7e4de;
    border-radius: 3px;
    background: #faf9f6;
}

.search:focus-within {
    border-color: #967343;
    box-shadow: 0 0 0 2px rgba(150, 115, 67, 0.08);
}

.login,
.register {
    border: 1px solid #222222;
    border-radius: 2px;
    background: #222222;
    color: #ffffff;
    font-weight: 600;
    transition: background 0.25s ease, color 0.25s ease;
}

.login:hover,
.register:hover {
    background: #967343;
    border-color: #967343;
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

/* Header responsiveness */
@media (max-width: 1100px) {
    header {
        padding-left: 20px;
        padding-right: 20px;
        gap: 14px;
    }

    header nav {
        gap: 10px;
    }

    header nav a {
        font-size: 10px;
    }

    .search {
        width: 155px;
    }
}

@media (max-width: 760px) {
    header {
        min-height: auto;
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .logo img {
        width: 105px;
    }

    header nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding: 8px 0;
        gap: 20px;
        scrollbar-width: thin;
    }

    header nav a {
        flex-shrink: 0;
        font-size: 11px;
    }

    .header-right {
        margin-left: auto;
        gap: 7px;
    }

    .search {
        width: min(42vw, 190px);
    }

    .login,
    .register {
        padding: 0 10px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .logo img {
        width: 90px;
    }

    .header-right {
        gap: 5px;
    }

    .search {
        width: 125px;
    }

    .register {
        padding: 0 7px;
    }
}


/* Cart aur My Orders header text visibility fix */
header,
header a,
header .header-right a {
    color: #172b4d;
}

header a:hover,
header .header-right a:hover {
    color: #2874f0;
}
/* Premium account dropdown trigger */
.customer-account-menu {
    position: relative;
    flex-shrink: 0;
    overflow: visible;
}

.customer-account-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 10px !important;
    min-height: 44px !important;
    max-width: min(360px, 42vw) !important;
    padding: 8px 15px !important;
    border: 1px solid #315768 !important;
    border-radius: 12px !important;
    background: #173b4b !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(23, 59, 75, 0.16);
    cursor: pointer;
    white-space: normal !important;
    transition: background .2s ease, box-shadow .2s ease;
}

.customer-account-trigger:hover,
.customer-account-trigger[aria-expanded="true"] {
    background: #245568 !important;
    box-shadow: 0 5px 15px rgba(23, 59, 75, 0.24);
}

.customer-account-greeting {
    display: flex !important;
    align-items: center !important;
    gap: 5px;
    min-width: 0;
    color: #ffffff !important;
}

.customer-account-greeting small {
    flex-shrink: 0;
    color: #d9e7ed !important;
    font-size: 12px;
}

.customer-account-greeting strong {
    display: inline-block !important;
    max-width: 250px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.customer-account-arrow {
    display: inline-flex !important;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #ffffff !important;
    font-size: 17px;
    transition: transform .2s ease;
}

.customer-account-trigger[aria-expanded="true"]
.customer-account-arrow {
    transform: rotate(180deg);
}

@media (max-width: 600px) {
    .customer-account-trigger {
        max-width: 48vw !important;
        gap: 5px !important;
        padding: 7px 9px !important;
    }

    .customer-account-greeting strong {
        max-width: 27vw !important;
        font-size: 12px;
    }
}

/* Compact account dropdown button */
.customer-account-trigger {
    min-height: 34px !important;
    height: auto !important;
    padding: 5px 11px !important;
    gap: 7px !important;
    border-radius: 9px !important;
}

.customer-account-greeting small {
    font-size: 11px !important;
}

.customer-account-greeting strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
}

.customer-account-arrow {
    width: 19px !important;
    height: 19px !important;
    font-size: 14px !important;
}


/* PARTNER-JEANS-GLOBAL-PREMIUM-HEADER */

/* Shared premium search: homepage and inner pages */
header .search,
header .pj-search {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 3px 5px 3px 14px !important;
    border: 1px solid #d6e0e5 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(19,43,57,.07) !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}

header .search:focus-within,
header .pj-search:focus-within {
    border-color: #173b4b !important;
    box-shadow: 0 0 0 3px rgba(23,59,75,.11) !important;
}

header .search input,
header .pj-search input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 4px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #172b3a !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

header .search input::placeholder,
header .pj-search input::placeholder {
    color: #7a8792 !important;
    opacity: 1 !important;
}

header .search button,
header .pj-search button {
    display: inline-flex !important;
    flex: 0 0 29px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 29px !important;
    height: 29px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #173b4b !important;
    color: #fff !important;
    font-size: 17px !important;
    cursor: pointer !important;
}

/* Shared account trigger */
.customer-account-menu {
    position: relative !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

.customer-account-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    min-height: 34px !important;
    height: auto !important;
    max-width: min(360px, 42vw) !important;
    padding: 5px 11px !important;
    border: 1px solid #315768 !important;
    border-radius: 9px !important;
    background: #173b4b !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(23,59,75,.16) !important;
    cursor: pointer !important;
}

.customer-account-trigger:hover,
.customer-account-trigger[aria-expanded="true"] {
    background: #245568 !important;
    border-color: #315768 !important;
}

.customer-account-greeting {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    max-width: none !important;
    color: #fff !important;
}

.customer-account-greeting small {
    flex-shrink: 0 !important;
    color: #d9e7ed !important;
    font-size: 11px !important;
}

.customer-account-greeting strong {
    display: inline-block !important;
    max-width: 250px !important;
    overflow: visible !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.customer-account-arrow {
    display: inline-flex !important;
    flex: 0 0 19px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 19px !important;
    height: 19px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    font-size: 14px !important;
}

.customer-account-trigger[aria-expanded="true"] .customer-account-arrow {
    transform: rotate(180deg) !important;
}

/* Shared dropdown panel and readable menu items */
.customer-account-dropdown:not([hidden]) {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    width: 280px !important;
    max-width: min(88vw, 320px) !important;
    max-height: min(72vh, 520px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid #e1e7eb !important;
    border-radius: 13px !important;
    background: #fff !important;
    color: #182b3a !important;
    box-shadow: 0 16px 42px rgba(12,30,42,.18) !important;
}

.customer-account-dropdown[hidden] {
    display: none !important;
}

.customer-account-dropdown .customer-account-heading,
.customer-account-dropdown .customer-account-heading strong,
.customer-account-dropdown .customer-account-heading span {
    color: #182b3a !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-wrap: anywhere !important;
}

.customer-account-dropdown .customer-account-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    overflow: visible !important;
    color: #26364b !important;
    background: #fff !important;
    font-size: 13px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-decoration: none !important;
}

.customer-account-dropdown .customer-account-item:hover,
.customer-account-dropdown .customer-account-item:focus-visible {
    background: #f1f5f7 !important;
    color: #173b4b !important;
}

.customer-account-dropdown .customer-account-item span,
.customer-account-dropdown .customer-account-logout,
.customer-account-dropdown .customer-account-status {
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 760px) {
    header .search,
    header .pj-search {
        width: min(38vw, 260px) !important;
        min-width: 0 !important;
    }

    .customer-account-trigger {
        max-width: 48vw !important;
        padding: 5px 8px !important;
        gap: 5px !important;
    }

    .customer-account-greeting strong {
        max-width: 27vw !important;
        font-size: 12px !important;
    }

    .customer-account-dropdown:not([hidden]) {
        position: fixed !important;
        top: 72px !important;
        right: 10px !important;
        width: min(280px, calc(100vw - 20px)) !important;
        max-height: calc(100vh - 90px) !important;
    }
}


/* PJ-ORDER-PAGES-HOMEPAGE-NAVBAR-MATCH */
/* Match the homepage header proportions on order-flow pages */
body > header.pj-site-header {
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  box-shadow: 0 3px 20px rgba(0,0,0,.045) !important;
  border-bottom: 1px solid #eeeeea !important;
}

body > header.pj-site-header .pj-brand img {
  width: 125px !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-site-header .pj-main-nav {
  gap: clamp(10px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
}

body > header.pj-site-header .pj-main-nav a {
  position: relative !important;
  color: #242424 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .45px !important;
  white-space: nowrap !important;
}

body > header.pj-site-header .pj-main-nav a:hover {
  color: #967343 !important;
}

body > header.pj-site-header .pj-header-right {
  gap: 9px !important;
  flex-shrink: 0 !important;
}

body > header.pj-site-header .pj-search {
  width: clamp(180px, 18vw, 240px) !important;
  height: 40px !important;
  border-radius: 24px !important;
}

body > header.pj-site-header .pj-search input {
  font-size: 13px !important;
}

@media (max-width: 1279px) {
  body > header.pj-site-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-site-header .pj-brand img {
    width: 100px !important;
  }

  body > header.pj-site-header .pj-main-nav {
    gap: 9px !important;
  }

  body > header.pj-site-header .pj-main-nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-site-header .pj-search {
    width: 165px !important;
  }
}

/* Make order-page search bar narrower */
body > header.pj-site-header .pj-search {
  width: 150px !important;
  min-width: 150px !important;
}

@media (max-width: 760px) {
  body > header.pj-site-header .pj-search {
    width: 125px !important;
    min-width: 125px !important;
  }
}

/* Balance homepage and order-page navigation widths */

/* Homepage: slightly wider search */
body > header:not(.pj-site-header) .search {
  width: 220px !important;
  flex: 0 0 220px !important;
}

/* Order flow: narrower search to leave room for navigation */
body > header.pj-site-header .pj-search {
  width: 150px !important;
  min-width: 150px !important;
  flex: 0 0 150px !important;
}

/* Keep navigation links on one line */
body > header nav,
body > header.pj-site-header .pj-main-nav {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-site-header .pj-main-nav {
  gap: 8px !important;
}

body > header.pj-site-header .pj-main-nav a {
  font-size: 10px !important;
  letter-spacing: 0 !important;
}

@media (max-width: 760px) {
  body > header:not(.pj-site-header) .search {
    width: 175px !important;
    flex-basis: 175px !important;
  }

  body > header.pj-site-header .pj-search {
    width: 125px !important;
    min-width: 125px !important;
    flex-basis: 125px !important;
  }
}


/* CONSOLIDATED CUSTOMER ACCOUNT DROPDOWN */
body > header {
    position: relative;
    z-index: 10000;
    overflow: visible;
}

body > header .header-right {
    position: relative;
    overflow: visible;
}

body > header .customer-account-menu {
    position: relative;
    z-index: 10001;
    overflow: visible;
}

body > header .customer-account-trigger {
    color: #000 !important;
}

body > header .customer-account-trigger:hover {
    background: #ffe5e5 !important;
    color: #000 !important;
}

body > header .customer-account-trigger *,
body > header .customer-account-trigger:hover * {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

body > header .customer-account-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 10002 !important;
    min-width: 240px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
}

body > header .customer-account-dropdown[hidden] {
    display: none !important;
}

body > header .customer-account-dropdown:not([hidden]) {
    display: block !important;
    visibility: visible !important;
}

body > header .customer-account-dropdown a,
body > header .customer-account-dropdown button,
body > header .customer-account-dropdown .customer-account-item {
    color: #000 !important;
}

body > header .customer-account-dropdown .customer-account-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
    background: #fff !important;
    text-decoration: none;
}

body > header .customer-account-dropdown a:hover,
body > header .customer-account-dropdown button:hover,
body > header .customer-account-dropdown .customer-account-item:hover {
    background: #ffe5e5 !important;
    color: #000 !important;
}

body > header .search {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    flex: 0 0 150px !important;
    box-sizing: border-box !important;
}

body > header .search input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    body > header .search {
        width: 125px !important;
        min-width: 125px !important;
        max-width: 125px !important;
        flex-basis: 125px !important;
    }
}


/* FIX: HELLO NAME BUTTON ONLY */
.customer-account-menu .customer-account-trigger {
    background: #7f1023 !important;
    color: #ffffff !important;
    border: 1px solid #b88a4a !important;
    border-radius: 8px !important;
}

.customer-account-menu .customer-account-trigger *,
.customer-account-menu .customer-account-trigger svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.customer-account-menu .customer-account-trigger:hover {
    background: #5b0b19 !important;
    color: #ffffff !important;
}



/* =========================================
   PARTNER JEANS & PANTS
   UNIFIED ACCOUNT COLOR THEME
========================================= */

:root {
    --pj-primary: #7f1023;
    --pj-primary-hover: #5b0b19;
    --pj-text: #263238;
    --pj-muted: #64748b;
    --pj-background: #ffffff;
    --pj-hover-bg: #f8eeee;
    --pj-border: #e5d7d9;
}

/* LOGIN AND REGISTER */
header .login,
header .register {
    background: var(--pj-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--pj-primary) !important;
    border-radius: 8px !important;
}

header .login:hover,
header .register:hover {
    background: var(--pj-primary-hover) !important;
    color: #ffffff !important;
    border-color: var(--pj-primary-hover) !important;
}

/* ACCOUNT BUTTON */
header .customer-account-trigger {
    background: var(--pj-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--pj-primary) !important;
    border-radius: 8px !important;
}

header .customer-account-trigger *,
header .customer-account-trigger svg {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    stroke: currentColor;
}

header .customer-account-trigger:hover,
header .customer-account-trigger[aria-expanded="true"] {
    background: var(--pj-primary-hover) !important;
    color: #ffffff !important;
}

/* ACCOUNT DROPDOWN PANEL */
header .customer-account-dropdown {
    background: var(--pj-background) !important;
    color: var(--pj-text) !important;
    border: 1px solid var(--pj-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14) !important;
}

/* DROPDOWN HEADING */
header .customer-account-dropdown .customer-account-heading {
    background: var(--pj-hover-bg) !important;
    border-bottom: 1px solid var(--pj-border) !important;
}

header .customer-account-dropdown .customer-account-heading strong {
    color: var(--pj-text) !important;
    -webkit-text-fill-color: var(--pj-text) !important;
}

header .customer-account-dropdown .customer-account-heading span {
    color: var(--pj-muted) !important;
    -webkit-text-fill-color: var(--pj-muted) !important;
}

/* ALL DROPDOWN OPTIONS */
header .customer-account-dropdown .customer-account-item {
    background: var(--pj-background) !important;
    color: var(--pj-text) !important;
    border-bottom: 1px solid #f0e8e9 !important;
    text-decoration: none !important;
}

header .customer-account-dropdown .customer-account-item span {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

header .customer-account-dropdown .customer-account-item:hover,
header .customer-account-dropdown .customer-account-item:focus-visible {
    background: var(--pj-hover-bg) !important;
    color: var(--pj-primary) !important;
}

/* DROPDOWN ICONS */
header .customer-account-dropdown .customer-account-item-icon {
    background: var(--pj-hover-bg) !important;
    color: var(--pj-primary) !important;
}

header .customer-account-dropdown .customer-account-item-icon svg {
    stroke: currentColor !important;
}

/* LOGOUT BUTTON */
header .customer-account-dropdown .customer-account-logout {
    background: #ffffff !important;
    color: var(--pj-primary) !important;
    border: 1px solid var(--pj-border) !important;
}

header .customer-account-dropdown .customer-account-logout:hover {
    background: var(--pj-hover-bg) !important;
    color: var(--pj-primary-hover) !important;
}

/* KEEP HIDDEN DROPDOWN HIDDEN */
header .customer-account-dropdown[hidden] {
    display: none !important;
}


/* =========================================
   PARTNER JEANS & PANTS — RED CART DOCK
========================================= */

body .cart-dock .cart-dock-link,
body .cart-dock .my-orders-dock-link {
    background: #7f1023 !important;
    background-color: #7f1023 !important;
    color: #ffffff !important;
    border: 1px solid #7f1023 !important;
    text-decoration: none !important;
    font-weight: 600;
}

body .cart-dock .cart-dock-link:hover,
body .cart-dock .my-orders-dock-link:hover {
    background: #5b0b19 !important;
    background-color: #5b0b19 !important;
    color: #ffffff !important;
    border-color: #5b0b19 !important;
    box-shadow: 0 6px 18px rgba(127, 16, 35, 0.25) !important;
}


/* =========================================
   FIXED NAVBAR — PARTNER JEANS & PANTS
========================================= */

header {
    position: sticky !important;
    top: 0;
    z-index: 2000;
    width: 100%;
    background-color: #ffffff;
}

/* Navbar ke peeche content na aaye */
header {
    box-sizing: border-box;
}



/* HOMEPAGE VOICE SEARCH MICROPHONE */
header .search .search-mic-button {
    display: inline-flex !important;
    flex: 0 0 29px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #173b4b !important;
    color: #fff !important;
    font-size: 17px !important;
    cursor: pointer !important;
}

header .search .search-mic-button:hover {
    background: #967343 !important;
}

header .search .search-mic-button.is-listening {
    background: #b42318 !important;
    animation: mic-pulse 1s infinite;
}

header .search .search-mic-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

@keyframes mic-pulse {
    50% { box-shadow: 0 0 0 5px rgba(180, 35, 24, .18); }
}

/* PREMIUM CHAMPAGNE MIC BUTTON */
header .search .search-mic-button {
    background: linear-gradient(145deg, #f4e2b8, #c6a46a) !important;
    color: #173b4b !important;
    border: 1px solid #b8955c !important;
    box-shadow: 0 2px 7px rgba(150, 115, 67, .28) !important;
    font-size: 18px !important;
    transition: all .25s ease !important;
}

header .search .search-mic-button:hover {
    background: linear-gradient(145deg, #fff0ce, #d5b47c) !important;
    transform: scale(1.06);
    box-shadow: 0 3px 10px rgba(150, 115, 67, .38) !important;
}

header .search .search-mic-button.is-listening {
    background: linear-gradient(145deg, #d94b43, #a51f19) !important;
    border-color: #a51f19 !important;
    color: #fff !important;
}


/* PARTNER JEANS - WEBSITE STYLE MICROPHONE */
header .search .search-mic-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 5px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #173b4b !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

header .search .search-mic-button svg {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

header .search .search-mic-button:hover {
    background: #f1f4f5 !important;
}

header .search .search-mic-button.is-listening {
    color: #b42318 !important;
    background: #fff0ef !important;
}

header .search .search-mic-button:disabled {
    opacity: .45 !important;
}


/* =====================================================
   PARTNER JEANS - HOMEPAGE HEADER & FOOTER REDESIGN
===================================================== */

.mobile-menu-toggle { display:none; }

.pj-footer {
    background:#eeedf5;
    color:#171717;
    overflow:hidden;
    font-family:inherit;
}

.pj-footer-main {
    padding:55px 7%;
}

.pj-footer-brand { margin-bottom:35px; }

.pj-footer-logo img {
    display:block;
    width:190px;
    max-width:75%;
    height:auto;
    object-fit:contain;
}

.pj-footer-brand > p {
    font-size:20px;
    letter-spacing:1px;
    color:#555;
    margin:20px 0;
}

.pj-social {
    display:flex;
    gap:22px;
}

.pj-social span {
    display:grid;
    place-items:center;
    width:35px;
    height:35px;
    border:1px solid #777;
    border-radius:50%;
    font-size:19px;
    font-weight:bold;
}

.pj-footer-groups {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:45px;
}

.pj-footer-group {
    display:flex;
    flex-direction:column;
    gap:13px;
}

.pj-footer-group summary {
    cursor:pointer;
    list-style:none;
    font-size:20px;
    font-weight:800;
    margin-bottom:12px;
}

.pj-footer-group summary::-webkit-details-marker { display:none; }
.pj-footer-group summary::after {
    content:"−";
    float:right;
    font-size:23px;
}

.pj-footer-group:not([open]) summary::after { content:"+"; }

.pj-footer-group a,
.pj-footer-group p {
    color:#555;
    font-size:14px;
    text-decoration:none;
    margin:0;
    line-height:1.7;
}

.pj-footer-group a:hover { color:#9b4b24; }

.pj-payment {
    border-top:1px solid #d5d3df;
    padding:42px 20px;
    text-align:center;
}

.pj-payment h3 {
    font-size:23px;
    margin:0 0 28px;
    font-weight:800;
}

.pj-payment-methods {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.pj-payment-methods span {
    background:#fff;
    border:1px solid #dedde5;
    border-radius:5px;
    padding:11px 17px;
    font-size:15px;
    font-weight:800;
    color:#24365a;
}

.pj-footer-bottom {
    padding:25px 6%;
    text-align:center;
    border-top:1px solid #d5d3df;
}

.pj-footer-bottom p {
    color:#555;
    font-size:15px;
}

.pj-footer-bottom div {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
}

.pj-footer-bottom a {
    color:#555;
    font-size:14px;
    text-decoration:none;
}

.pj-footer-watermark {
    font-size:clamp(65px,15vw,210px);
    font-weight:950;
    letter-spacing:-8px;
    line-height:.9;
    white-space:nowrap;
    text-align:center;
    padding:10px 0 0;
    color:#080808;
    overflow:hidden;
}

.pj-back-top {
    position:fixed;
    right:22px;
    bottom:22px;
    width:48px;
    height:48px;
    border:0;
    border-radius:50%;
    background:#a94e20;
    color:white;
    font-size:27px;
    cursor:pointer;
    z-index:90;
    display:none;
}

.pj-back-top.visible { display:block; }

@media(max-width:1220px) {
    body > header:not(.pj-common-header) {
        min-height:68px;
        padding:10px 18px;
        flex-wrap:wrap;
        gap:12px;
    }

    body > header:not(.pj-common-header) .mobile-menu-toggle {
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        order:0;
        border:0;
        background:transparent;
        padding:8px;
        cursor:pointer;
    }

    body > header:not(.pj-common-header) .mobile-menu-toggle span {
        width:25px;
        height:2px;
        background:#172b4d;
    }

    body > header:not(.pj-common-header) .logo { order:1; }
    body > header:not(.pj-common-header) .logo img { width:125px; }

    body > header:not(.pj-common-header) .header-right {
        order:2;
        margin-left:auto;
    }

    body > header:not(.pj-common-header) nav {
        display:none;
        order:3;
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:8px 0;
    }

    body > header:not(.pj-common-header) nav.is-open { display:flex; }

    body > header:not(.pj-common-header) nav a {
        padding:13px 8px;
        border-bottom:1px solid #e9e6df;
        font-size:13px;
    }

}

@media(max-width:1279px) {
    html body > header.pj-common-header {
        flex-wrap:wrap !important;
    }

    html body > header.pj-common-header .mobile-menu-toggle {
        display:flex !important;
        order:0 !important;
    }

    html body > header.pj-common-header .logo {
        order:1 !important;
    }

    html body > header.pj-common-header .header-right {
        order:2 !important;
        margin-left:auto !important;
    }

    html body > header.pj-common-header #main-navigation {
        order:3 !important;
        flex:0 0 100% !important;
        width:100% !important;
        min-width:0 !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:0 !important;
        flex-wrap:nowrap !important;
        padding:8px 0 !important;
    }

    html body > header.pj-common-header #main-navigation:not(.is-open) {
        display:none !important;
    }

    html body > header.pj-common-header #main-navigation.is-open {
        display:flex !important;
    }

}

@media(max-width:900px) {
    .pj-footer-main { padding:38px 24px; }
    .pj-footer-groups { grid-template-columns:1fr; gap:0; }
    .pj-footer-group {
        border-bottom:1px solid #d5d3df;
        padding:19px 0;
    }

    .pj-footer-group summary { margin:0; }
    .pj-footer-group[open] summary { margin-bottom:17px; }
    .pj-payment h3 { font-size:19px; }
    .pj-footer-watermark { letter-spacing:-3px; }
}

@media(max-width:480px) {
    header .logo img { width:105px; }
    header .header-right { gap:5px; }
    header .search { width:125px; }
    body > header:not(.pj-common-header) {
        justify-content:flex-start;
        gap:8px;
    }
    body > header:not(.pj-common-header) .header-right {
        flex:1 1 100%;
        width:100%;
        min-width:0;
        margin-left:0;
        justify-content:space-between;
    }
    .pj-footer-bottom div { gap:12px; }
    .pj-footer-watermark { font-size:17vw; }
}


/* =====================================================
   PARTNER JEANS - COMPACT LUXURY FOOTER V2
===================================================== */

.pj-footer {
    background: #111d32 !important;
    color: #f7f1e7 !important;
}

.pj-footer-main {
    display: grid;
    grid-template-columns: 0.9fr 2.1fr;
    align-items: start;
    gap: 55px;
    padding: 38px 7% 30px !important;
}

.pj-footer-brand {
    margin: 0 !important;
}

.pj-footer-logo img {
    width: 145px !important;
    max-width: 100%;
    border-radius: 3px;
}

.pj-footer-brand > p {
    color: #d7c5a2 !important;
    font-size: 15px !important;
    letter-spacing: 1.2px;
    margin: 13px 0 17px !important;
}

.pj-social {
    gap: 10px !important;
}

.pj-social span {
    width: 31px !important;
    height: 31px !important;
    color: #e2c99e !important;
    border: 1px solid #786b55 !important;
    background: transparent;
    font-size: 16px !important;
}

.pj-social span:hover {
    background: #c5a777;
    color: #111d32 !important;
}

.pj-footer-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px !important;
}

.pj-footer-group {
    gap: 9px !important;
}

.pj-footer-group summary {
    color: #e3c99c !important;
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 9px !important;
}

.pj-footer-group summary::after {
    color: #e3c99c;
    font-size: 18px;
}

.pj-footer-group a,
.pj-footer-group p {
    color: #c5c9d1 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    transition: color .2s ease;
}

.pj-footer-group a:hover {
    color: #e3c99c !important;
}

.pj-payment {
    padding: 20px 15px !important;
    border-top: 1px solid #344056 !important;
}

.pj-payment h3 {
    color: #e3c99c !important;
    font-size: 15px !important;
    margin-bottom: 14px !important;
}

.pj-payment-methods {
    gap: 9px !important;
}

.pj-payment-methods span {
    padding: 7px 12px !important;
    font-size: 11px !important;
    border-radius: 4px;
    background: #f7f5f0 !important;
    border: 0 !important;
    color: #17233a !important;
}

.pj-footer-bottom {
    padding: 15px 6% !important;
    border-top: 1px solid #344056 !important;
}

.pj-footer-bottom p,
.pj-footer-bottom a {
    color: #aeb6c4 !important;
    font-size: 11px !important;
}

.pj-footer-bottom a:hover {
    color: #e3c99c !important;
}

.pj-footer-watermark {
    font-size: clamp(35px, 7vw, 100px) !important;
    letter-spacing: -3px !important;
    line-height: .9 !important;
    padding: 5px 0 12px !important;
    color: #26334a !important;
    font-weight: 900 !important;
}

/* Mobile compact footer */
@media(max-width:900px) {
    .pj-footer-main {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 27px 22px 15px !important;
    }

    .pj-footer-brand {
        text-align: center;
    }

    .pj-footer-logo img {
        width: 125px !important;
        margin: auto;
    }

    .pj-footer-brand > p {
        font-size: 13px !important;
    }

    .pj-social {
        justify-content: center;
    }

    .pj-footer-groups {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .pj-footer-group {
        padding: 13px 0 !important;
        border-bottom: 1px solid #344056 !important;
    }

    .pj-footer-group summary {
        font-size: 14px !important;
        margin: 0 !important;
    }

    .pj-footer-group[open] summary {
        margin-bottom: 10px !important;
    }

    .pj-footer-group a,
    .pj-footer-group p {
        font-size: 12px !important;
    }

    .pj-payment {
        padding: 17px 12px !important;
    }

    .pj-footer-bottom {
        padding: 14px 12px !important;
    }

    .pj-footer-bottom div {
        gap: 9px 15px !important;
    }

    .pj-footer-watermark {
        font-size: 11vw !important;
        letter-spacing: -2px !important;
    }
}

@media(max-width:480px) {
    .pj-payment-methods {
        gap: 7px !important;
    }

    .pj-payment-methods span {
        padding: 6px 9px !important;
        font-size: 10px !important;
    }

    .pj-footer-watermark {
        font-size: 10vw !important;
    }
}


/* PARTNER JEANS - PREMIUM CLICKABLE PAYMENT BRANDING */
.pj-payment .pj-payment-methods {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:13px !important;
}
.pj-payment .pj-pay-logo {
    min-width:88px;
    height:43px;
    padding:7px 13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    background:#fff !important;
    border:1px solid #e6e2d9 !important;
    border-radius:7px;
    color:#17233a !important;
    text-decoration:none !important;
    font-family:Arial,sans-serif;
    font-size:17px;
    font-weight:800;
    box-shadow:0 2px 7px rgba(0,0,0,.08);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
    cursor:pointer;
}
.pj-payment .pj-pay-logo:hover {
    transform:translateY(-3px);
    border-color:#d7bd8e !important;
    box-shadow:0 6px 15px rgba(0,0,0,.16);
}
.pj-payment .pj-visa { color:#173b78 !important;font-size:21px;font-style:italic; }
.pj-payment .pj-gpay { color:#333 !important; }
.pj-payment .gpay-g {
    font-size:23px;font-weight:900;
    background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 25% 48%,#fbbc05 48% 72%,#ea4335 72%);
    background-clip:text;-webkit-background-clip:text;color:transparent;
}
.pj-payment .pj-mastercard { flex-direction:column;gap:0; }
.pj-payment .mc-circles { display:flex;align-items:center;height:21px; }
.pj-payment .mc-circles i {
    display:block;width:20px;height:20px;border-radius:50%;background:#eb001b;
}
.pj-payment .mc-circles i+i { background:#f79e1b;margin-left:-8px;opacity:.95; }
.pj-payment .mc-label { font-size:9px;color:#252525; }
.pj-payment .pj-rupay { color:#174b91 !important;font-style:italic; }
.pj-payment .pj-rupay b { color:#ed8b24; }
.pj-payment .pj-paytm { color:#00a5e8 !important;font-size:19px; }
.pj-payment .pj-paytm b { color:#173b83; }
.pj-payment .pj-upi { color:#263c76 !important;font-style:italic;letter-spacing:1px; }
.pj-payment .pj-cod { color:#263b2d !important;font-size:15px; }
.pj-payment .cod-icon { color:#b18b4c;font-size:20px; }
.pj-payment .pj-payment-note {
    margin:13px 0 0;color:#b8c0cd;font-size:11px;letter-spacing:.3px;
}
@media(max-width:480px) {
    .pj-payment .pj-payment-methods { gap:8px !important; }
    .pj-payment .pj-pay-logo { min-width:76px;height:39px;padding:5px 9px;font-size:14px; }
    .pj-payment .pj-visa { font-size:18px; }
}


/* FOOTER EXPLORE LINKS - SINGLE VERTICAL COLUMN */
.pj-footer-groups > .pj-footer-group:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.pj-footer-groups > .pj-footer-group:first-child > summary {
    width: 100%;
    margin-bottom: 14px;
}

.pj-footer-groups > .pj-footer-group:first-child > a {
    display: block !important;
    width: 100%;
    margin: 0 0 11px !important;
    text-align: left;
}

@media(max-width: 900px) {
    .pj-footer-groups > .pj-footer-group:first-child {
        align-items: flex-start !important;
    }
}


/* PARTNER JEANS - CLEAR FOOTER BRAND WATERMARK */
.pj-footer-watermark {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-size: clamp(42px, 10.5vw, 150px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.045em !important;
    font-weight: 950 !important;
    color: #52617a !important;
    opacity: .72 !important;
    padding: 12px 8px 22px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

@media(max-width: 600px) {
    .pj-footer-watermark {
        font-size: 9.5vw !important;
        letter-spacing: -.04em !important;
        padding: 12px 4px 18px !important;
    }
}

/* FOOTER WATERMARK - PURE WHITE */
.pj-footer-watermark {
    color: #ffffff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Keep shared storefront layouts usable below desktop widths. */
img,
video,
iframe {
    max-width: 100%;
}

@media (max-width: 1050px) {
    html body > header.pj-common-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 16px !important;
    }

    html body > header.pj-common-header .mobile-menu-toggle {
        display: flex !important;
        flex: 0 0 36px !important;
        order: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        background: transparent !important;
        padding: 6px !important;
        cursor: pointer !important;
    }

    html body > header.pj-common-header .logo {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        order: 1 !important;
    }

    html body > header.pj-common-header .logo img {
        width: clamp(72px, 12vw, 112px) !important;
        max-height: 52px !important;
    }

    html body > header.pj-common-header .header-right {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        order: 2 !important;
        gap: 6px !important;
        margin-left: auto !important;
    }

    html body > header.pj-common-header .search {
        flex: 1 1 120px !important;
        width: clamp(100px, 20vw, 180px) !important;
        min-width: 0 !important;
        max-width: 180px !important;
    }

    html body > header.pj-common-header #main-navigation {
        flex: 0 0 100% !important;
        order: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 8px 0 !important;
    }

    html body > header.pj-common-header #main-navigation:not(.is-open) {
        display: none !important;
    }

    html body > header.pj-common-header #main-navigation.is-open {
        display: flex !important;
    }

    html body > header.pj-common-header #main-navigation a {
        padding: 12px 8px !important;
        white-space: normal !important;
    }
}

@media (min-width: 1280px) {
    html body > header.pj-common-header .mobile-menu-toggle {
        display: none !important;
    }

    html body > header.pj-common-header #main-navigation {
        display: flex !important;
    }
}

@media (max-width: 760px) {
    .pj-footer-bottom {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .pj-footer-bottom div {
        flex-wrap: wrap;
        justify-content: center;
    }

    .checkout-page,
    .detail-main,
    .wishlist-main,
    .address-page,
    .page-container {
        width: min(100% - 28px, 100%);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    html body > header.pj-common-header {
        gap: 5px !important;
        padding: 8px 10px !important;
    }

    html body > header.pj-common-header .mobile-menu-toggle {
        flex-basis: 30px !important;
        padding: 4px !important;
    }

    html body > header.pj-common-header .logo img {
        width: clamp(58px, 20vw, 84px) !important;
        max-height: 42px !important;
    }

    html body > header.pj-common-header .header-right {
        flex: 1 1 0 !important;
        gap: 4px !important;
    }

    html body > header.pj-common-header .search {
        flex: 1 1 76px !important;
        width: clamp(76px, 25vw, 112px) !important;
        max-width: 112px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 2px 4px 2px 8px !important;
    }

    html body > header.pj-common-header .search input {
        font-size: 11px !important;
    }

    html body > header.pj-common-header .search button,
    html body > header.pj-common-header .search .search-mic-button {
        flex-basis: 25px !important;
        width: 25px !important;
    }

    html body > header.pj-common-header .login,
    html body > header.pj-common-header .register,
    html body > header.pj-common-header .pj-header-cart,
    html body > header.pj-common-header .customer-account-trigger {
        min-height: 32px !important;
        padding: 0 7px !important;
        font-size: 10px !important;
    }

    html body > header.pj-common-header .register {
        display: none !important;
    }

    .checkout-page,
    .detail-main,
    .wishlist-main,
    .address-page,
    .page-container {
        width: min(100% - 20px, 100%);
    }
}



========== CSS FILE: static/css/gift-cards.css ==========

.gc-header{min-height:76px;padding:12px 5%;display:flex;align-items:center;justify-content:space-between;gap:22px;background:#fff;border-bottom:1px solid #e9e9e9;box-sizing:border-box}
.gc-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#172b4d;font-size:13px;font-weight:800;letter-spacing:1.2px}
.gc-brand img{width:52px;height:52px;object-fit:contain}
.gc-header nav{display:flex;align-items:center;gap:25px;flex-wrap:wrap}
.gc-header nav a,.gc-footer a{color:#172b4d;text-decoration:none;font-size:14px;font-weight:600}
.gc-page{color:#172b4d}
.gc-hero{padding:68px max(6%,calc((100% - 1200px)/2));background:#f2eee7;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:50px;overflow:hidden}
.gc-hero-copy{max-width:570px}
.gc-eyebrow{font-size:11px;font-weight:800;letter-spacing:2.2px;color:#8a6744;margin:0 0 15px}
.gc-hero h1{font-size:clamp(38px,5vw,66px);line-height:1.05;letter-spacing:-2px;margin:0 0 20px;color:#172b4d}
.gc-hero h1 span{color:#a66d3b;font-family:Georgia,serif;font-style:italic;font-weight:500}
.gc-hero-copy>p:not(.gc-eyebrow){font-size:16px;line-height:1.8;color:#5e6570;max-width:450px}
.gc-primary-link,.gc-submit{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:15px 23px;background:#172b4d;color:white;text-decoration:none;border:0;font-size:14px;font-weight:700;cursor:pointer}
.gc-perks{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;font-size:12px;color:#4f5b68}
.gc-hero-art{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.gc-gift-card{width:min(100%,410px);aspect-ratio:1.65;border-radius:15px;padding:26px;box-sizing:border-box;color:#f8e9cb;background:radial-gradient(circle at 80% 15%,#596b82 0,transparent 35%),linear-gradient(135deg,#172b4d,#0b1427 75%);box-shadow:0 26px 50px #172b4d35;position:relative;overflow:hidden}
.gc-gift-card:after{content:"";position:absolute;width:220px;height:220px;border:1px solid #ffffff22;border-radius:50%;right:-80px;bottom:-130px;box-shadow:0 0 0 22px #ffffff08,0 0 0 45px #ffffff06}
.gc-card-top,.gc-card-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;letter-spacing:1.7px;font-weight:800}
.gc-card-symbol{font-family:Georgia,serif;font-size:76px;line-height:1;margin:14px 0 10px;color:#e3c18a}
.gc-card-bottom{align-items:end;position:relative;z-index:1}
.gc-card-bottom div{display:grid;gap:5px}.gc-card-bottom small{font-size:8px;letter-spacing:1.5px}.gc-card-bottom strong{font-size:30px;letter-spacing:-1px}.gc-card-bottom>span{font-size:8px}
.gc-art-caption{font-family:Georgia,serif;font-style:italic;color:#6d604f}
.gc-create{max-width:1200px;margin:auto;padding:75px 24px}
.gc-section-heading{text-align:center;margin-bottom:42px}
.gc-section-heading h2{font-size:clamp(30px,4vw,42px);letter-spacing:-1.3px;margin:0 0 10px}
.gc-section-heading>p:last-child{color:#68717c;margin:0}
.gc-builder{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:54px;align-items:start}
.gc-builder>*{min-width:0}
.gc-form h3{font-size:16px;margin:0 0 17px}
.gc-type-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gc-type-option{display:flex;align-items:center;gap:12px;padding:17px 12px;border:1px solid #dce0e5;border-radius:8px;cursor:pointer;min-width:0}
.gc-type-option.selected{border-color:#172b4d;box-shadow:inset 0 0 0 1px #172b4d;background:#f7f8fa}
.gc-type-option input{accent-color:#172b4d}
.gc-option-icon{width:35px;height:35px;display:grid;place-items:center;background:#ece7dd;border-radius:50%;font-size:19px;flex-shrink:0}
.gc-type-option strong,.gc-type-option small{display:block}
.gc-type-option strong{font-size:12px}.gc-type-option small{font-size:11px;color:#7b8490;margin-top:5px}
.gc-subheading{margin-top:30px!important}
.gc-amounts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gc-amount{background:white;border:1px solid #d9dee5;padding:14px 8px;border-radius:6px;font-size:14px;font-weight:700;color:#172b4d;cursor:pointer}
.gc-amount.active{background:#172b4d;border-color:#172b4d;color:white}
.gc-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.gc-fields label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:700;color:#37445a}
.gc-fields input,.gc-fields textarea{box-sizing:border-box;width:100%;border:1px solid #d9dee5;border-radius:5px;padding:12px;font:inherit;font-size:13px;font-weight:400;color:#172b4d;background:#fff;outline-color:#8a9bb6}
.gc-fields input{min-height:43px}.gc-fields textarea{resize:vertical}
.gc-fields label span{font-weight:400;color:#8b929c}
.gc-message-field{grid-column:1/-1}
.gc-shipping-fields[hidden]{display:none}
.gc-order-total{display:flex;align-items:center;justify-content:space-between;padding:20px 0;margin-top:25px;border-top:1px solid #e3e6ea;font-size:13px;color:#626d7a}
.gc-order-total strong{font-size:24px;color:#172b4d}
.gc-submit{width:100%;min-height:50px;border-radius:4px}
.gc-form-note,.gc-preview-disclaimer{font-size:11px;line-height:1.6;color:#818995}
.gc-message{font-size:13px;line-height:1.6;margin-top:12px;color:#9a4c26}
.gc-preview-panel{padding:25px;background:#f7f5f1;border-radius:10px;position:sticky;top:20px}
.gc-preview-card{aspect-ratio:1.55;min-height:200px;padding:22px;box-sizing:border-box;border-radius:10px;background:radial-gradient(circle at 90% 0,#52647b 0,transparent 36%),linear-gradient(135deg,#172b4d,#0c1628);color:#f4e4c6;box-shadow:0 15px 35px #172b4d25;display:flex;flex-direction:column}
.gc-preview-brand{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:1.7px;font-weight:800}
.gc-preview-brand span{font-size:9px}
.gc-preview-monogram{font-family:Georgia,serif;font-size:52px;line-height:1;color:#d9b77d;margin-top:14px}
.gc-preview-label{font-size:8px;letter-spacing:2px;margin:10px 0 4px}
.gc-preview-amount{font-size:clamp(27px,3vw,38px);font-weight:800;letter-spacing:-1px}
.gc-preview-footer{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid #ffffff30;font-size:8px;letter-spacing:1px}
.gc-preview-details{margin-top:23px;display:grid;gap:14px}
.gc-preview-details div{display:flex;justify-content:space-between;align-items:start;gap:16px;font-size:12px}
.gc-preview-details span{color:#747d87;flex-shrink:0}.gc-preview-details strong{font-weight:700;text-align:right;overflow-wrap:anywhere}
.gc-preview-disclaimer{margin-bottom:0}
.gc-steps{padding:40px max(6%,calc((100% - 1200px)/2));background:#f7f8fa;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.gc-steps>div{padding:10px}
.gc-steps>div>span{color:#a66d3b;font-size:12px;font-weight:800;letter-spacing:1px}
.gc-steps h3{font-size:17px;margin:13px 0 7px}.gc-steps p{font-size:13px;line-height:1.7;color:#6e7782;margin:0}
.gc-footer{padding:25px 5%;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;border-top:1px solid #e8e8e8;font-size:12px;color:#7a828d}
@media(max-width:800px){.gc-hero{grid-template-columns:1fr;padding:48px 7%;gap:30px}.gc-hero-art{min-height:230px}.gc-builder{grid-template-columns:minmax(0,1fr);gap:30px}.gc-preview-panel{position:static}.gc-steps{padding:35px 7%;gap:12px}.gc-steps>div{padding:4px}}
@media(max-width:520px){.gc-header{padding:10px 4%;align-items:flex-start}.gc-brand{font-size:10px;letter-spacing:.5px}.gc-brand img{width:40px;height:40px}.gc-header nav{gap:10px;justify-content:flex-end}.gc-header nav a{font-size:11px}.gc-hero{padding:40px 6%}.gc-hero h1{letter-spacing:-1.2px}.gc-perks{gap:9px}.gc-perks span{font-size:10px}.gc-create{padding:50px 17px}.gc-type-options{grid-template-columns:1fr}.gc-fields{grid-template-columns:1fr}.gc-message-field{grid-column:auto}.gc-amounts{gap:7px}.gc-amount{font-size:12px;padding:13px 4px}.gc-preview-panel{padding:16px}.gc-preview-card{width:100%;min-height:0;padding:14px}.gc-preview-monogram{font-size:clamp(36px,12vw,48px);margin-top:8px}.gc-preview-label{margin:6px 0 2px}.gc-preview-footer{padding-top:8px}.gc-steps{grid-template-columns:1fr;padding:28px 6%}.gc-steps>div{padding:8px 0}.gc-footer{padding:20px 5%}}



========== CSS FILE: static/css/home.css ==========

/* =========================================================
   PARTNER JEANS & PANTS
   HOME PAGE CSS
========================================================= */


/* =========================================================
   SECTION TITLE
========================================================= */

.section-title {
    width: 100%;
    text-align: center;
    margin-bottom: 35px;
}

.section-title h2 {
    margin: 0;
    font-size: 36px;
    font-weight: 800;
    color: #172b4d;
}

.section-title h2 span {
    color: #28a9ff;
}

.blue-line {
    width: 60px;
    height: 4px;
    margin: 10px auto;
    background: #28a9ff;
    border-radius: 5px;
}

.section-title p {
    margin: 8px 0 0;
    color: #777;
    font-size: 15px;
}


/* =========================================================
   HERO SLIDER
========================================================= */

.hero {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
    color: white;
}

.hero-slider {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.hero-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hero-content {
    position: absolute;
    left: 7%;
    bottom: 12%;
    z-index: 3;
}

.shop-btn {
    display: inline-block;
    padding: 13px 30px;
    background: #172b4d;
    color: white;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    border-radius: 4px;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.shop-btn:hover {
    background: #28a9ff;
    transform: translateY(-2px);
}

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

.search button {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.home-search-results {
    position: absolute;
    top: 88px;
    right: 5%;
    z-index: 20;
    width: min(420px, 90vw);
    max-height: 65vh;
    overflow-y: auto;
    padding: 16px;
    background: #fff;
    box-shadow: 0 4px 18px #0002;
}

.home-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.home-search-result p {
    margin: 4px 0 0;
}

.home-api-status {
    margin: 0;
    padding: 8px 5%;
    color: #a12622;
    background: #fff4f2;
}


/* =========================================================
   SHOP BY CATEGORY
========================================================= */

.categories-section {
    width: 100%;
    padding: 60px 5% 25px;
    box-sizing: border-box;
    background: #f5f7fa;
}


/* =========================================================
   8 JEANS IMAGE CARDS
========================================================= */

.jeans-section {
    width: 100%;
    padding: 20px 0;
    background: #ffffff;
}

.jeans-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}

.jeans-card {
    width: 100%;
    height: 400px;
    overflow: hidden;
    background: #f5f5f5;
    border-radius: 10px;
}

.jeans-card a {
    display: block;
    width: 100%;
    height: 100%;
}

.jeans-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.jeans-card:hover img {
    transform: scale(1.05);
}

.home-products-section {
    padding: 60px 5%;
    background: #f5f7fa;
}

.home-products-section .section-title {
    margin-bottom: 24px;
}

.home-products-status {
    min-height: 20px;
    margin: 0 0 16px;
    color: #52627a;
    text-align: center;
    font-size: 14px;
}

.home-products-status-error {
    color: #a12622;
}

.home-product-card .product-image {
    height: 300px;
}

.home-product-card .product-info h3 {
    min-height: 40px;
}

@media (max-width: 700px) {
    .home-products-section {
        padding: 40px 5%;
    }

    .home-products-section .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .home-product-card .product-image {
        height: 220px;
    }
}


/* =========================================================
   FEATURED JEANS
========================================================= */

.products-section.jeans-section {
    width: 100%;
    padding: 50px 0 0;
    background: #ffffff;
}

.products-section.jeans-section .section-title {
    padding: 0 5%;
    box-sizing: border-box;
}

.full-jeans-image {
    display: block;
    width: 100%;
    height: 500px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.full-jeans-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.full-jeans-image:hover img {
    transform: scale(1.03);
}


/* =========================================================
   FEATURE INFORMATION BOXES
========================================================= */

.jeans-features {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #ffffff;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.feature-box {
    min-height: 150px;
    padding: 30px 20px;
    box-sizing: border-box;
    text-align: center;
    border-right: 1px solid #e5e5e5;
}

.feature-box:last-child {
    border-right: none;
}

.feature-box h3 {
    margin: 0 0 8px;
    color: #172b4d;
    font-size: 20px;
    font-weight: 800;
}

.feature-box p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   FIND YOUR NEXT PAIR
========================================================= */

.find-next-pair {
    width: 100%;
    padding: 70px 5px;
    box-sizing: border-box;
    background: #f5f7fa;
}

.find-next-title {
    width: 100%;
    text-align: center;
    margin-bottom: 35px;
}

.find-next-title h2 {
    margin: 0;
    font-size: 36px;
    font-weight: 800;
    color: #172b4d;
}

.find-next-title h2 span {
    color: #28a9ff;
}

.find-next-line {
    width: 60px;
    height: 4px;
    margin: 10px auto;
    background: #28a9ff;
    border-radius: 5px;
}

.find-next-title p {
    margin: 8px 0 0;
    color: #777;
    font-size: 15px;
}


/* =========================================================
   FIND NEXT GRID
========================================================= */

.find-next-grid {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}


/* =========================================================
   FIND NEXT CARD
========================================================= */

.find-next-card {
    position: relative;
    height: 430px;
    overflow: hidden;
    display: block;
    background: #ddd;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.10);
}

.find-next-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.find-next-card:hover img {
    transform: scale(1.06);
}


/* =========================================================
   FIND NEXT CONTENT
========================================================= */

.find-next-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 70px 20px 25px;
    text-align: center;
    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, 0.85)
    );
    color: white;
}

.find-next-content h3 {
    margin: 0 0 7px;
    font-size: 23px;
    font-weight: 800;
}

.find-next-content p {
    margin: 0;
    font-size: 14px;
    color: #eeeeee;
}


/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.find-next-button {
    width: 100%;
    text-align: center;
    margin-top: 35px;
}

.find-next-button a {
    display: inline-block;
    padding: 13px 38px;
    background: #172b4d;
    color: white;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    border-radius: 4px;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.find-next-button a:hover {
    background: #28a9ff;
    transform: translateY(-2px);
}


/* =========================================================
   SPECIAL OFFER
========================================================= */

.special-offer {
    width: 100%;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    padding: 60px 5%;

    background:
        linear-gradient(
            rgba(15, 35, 55, 0.78),
            rgba(15, 35, 55, 0.78)
        ),
        url("https://images.unsplash.com/photo-1542272604-787c3835535d?auto=format&fit=crop&w=1600&q=85");

    background-size: cover;
    background-position: center;

    text-align: center;
    color: white;
}

.offer-content {
    max-width: 750px;
}

.offer-small {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.offer-content h2 {
    margin: 0 0 15px;
    font-size: 42px;
    font-weight: 800;
}

.offer-content > p:not(.offer-small) {
    margin: 0 0 25px;
    font-size: 18px;
    line-height: 1.6;
}

.offer-content strong {
    color: #28a9ff;
    font-weight: 800;
}


/* =========================================================
   JEANS VIDEO COLLECTION
========================================================= */

.jeans-video-section {
    width: 100%;
    padding: 60px 5%;
    box-sizing: border-box;
    background: #ffffff;
}

.jeans-video-grid {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.jeans-video-card {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
    background: #111111;
    border-radius: 5px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.jeans-video-card video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.jeans-video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   WHY CHOOSE PARTNER JEANS
========================================================= */

.why-section {
    width: 100%;
    padding: 70px 5%;
    box-sizing: border-box;
    background: #ffffff;
}

.why-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.why-card {
    width: 100%;
    min-width: 0;
    min-height: 230px;
    padding: 30px 20px;
    box-sizing: border-box;
    text-align: center;
    background: #f8fafc;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
}

.why-icon {
    font-size: 38px;
    margin-bottom: 15px;
}

.why-card h3 {
    margin: 0 0 12px;
    color: #172b4d;
    font-size: 20px;
    font-weight: 800;
}

.why-card p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   CUSTOMER REVIEWS
========================================================= */

.reviews-section {
    width: 100%;
    padding: 70px 5%;
    box-sizing: border-box;
    background: #f5f7fa;
}

.reviews-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.review-card {
    padding: 35px 25px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
}

.review-stars {
    margin-bottom: 15px;
    font-size: 18px;
}

.review-text {
    margin: 0 0 20px;
    color: #555;
    font-size: 15px;
    line-height: 1.7;
}

.review-card h3 {
    margin: 0 0 5px;
    color: #172b4d;
    font-size: 17px;
    font-weight: 800;
}

.review-card span {
    color: #28a9ff;
    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   HOME NEWSLETTER
========================================================= */

.home-newsletter {
    width: 100%;
    padding: 70px 5%;
    box-sizing: border-box;
    background: #172b4d;
    color: white;
    text-align: center;
}

.newsletter-content {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

.newsletter-small {
    margin: 0 0 10px;
    color: #28a9ff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.newsletter-content h2 {
    margin: 0 0 15px;
    font-size: 34px;
    font-weight: 800;
}

.newsletter-content > p:not(.newsletter-small) {
    margin: 0 auto 25px;
    max-width: 650px;
    color: #dce5ef;
    font-size: 15px;
    line-height: 1.6;
}

.home-newsletter-form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
}

.home-newsletter-form input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    outline: none;
    font-size: 14px;
}

.home-newsletter-form button {
    height: 48px;
    padding: 0 25px;
    border: none;
    border-radius: 4px;
    background: #28a9ff;
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease;
}

.home-newsletter-form button:hover {
    background: #168bd6;
}


/* =========================================================
   RESPONSIVE - 1200px
========================================================= */

@media (max-width: 1200px) {

    .jeans-video-card {
        height: 460px;
    }

    .find-next-card {
        height: 400px;
    }

    .why-card {
        min-height: 220px;
        padding: 25px 15px;
    }

}


/* =========================================================
   RESPONSIVE - 1000px
========================================================= */

@media (max-width: 1000px) {

    .hero {
        height: 480px;
    }

    .jeans-card {
        height: auto;
        aspect-ratio: 3 / 4;
    }

    .jeans-card img {
        object-fit: contain;
    }

    .find-next-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .find-next-card {
        height: 420px;
    }

    .jeans-video-card {
        height: 430px;
    }

    .reviews-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .review-card {
        padding: 30px 15px;
    }

}


/* =========================================================
   RESPONSIVE - 700px
========================================================= */

@media (max-width: 700px) {

    .section-title h2 {
        font-size: 30px;
    }

    .categories-section {
        padding: 50px 10px 20px;
    }

    .jeans-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .jeans-card {
        height: auto;
        aspect-ratio: 3 / 4;
    }

    .products-section.jeans-section {
        padding-top: 40px;
    }

    .full-jeans-image {
        height: 450px;
    }

    .jeans-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
    }

    .feature-box {
        min-width: 0;
        min-height: 105px;
        padding: 16px 4px;
        border-bottom: 1px solid #e5e5e5;
    }

    .feature-box:nth-child(2n) {
        border-right: none;
    }

    .feature-box:nth-last-child(-n + 2) {
        border-bottom: none;
    }

    .find-next-pair {
        padding: 50px 10px;
    }

    .find-next-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .find-next-card {
        height: auto;
        align-self: start;
    }

    .find-next-card img {
        height: auto;
        object-fit: contain;
    }

    .find-next-content {
        padding: 60px 12px 20px;
    }

    .find-next-content h3 {
        font-size: 19px;
    }

    .find-next-content p {
        font-size: 12px;
    }

    .special-offer {
        min-height: 350px;
        padding: 50px 20px;
    }

    .offer-content h2 {
        font-size: 34px;
    }

    .offer-content > p:not(.offer-small) {
        font-size: 16px;
    }

    .jeans-video-section {
        padding: 50px 10px;
    }

    .jeans-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .jeans-video-card {
        height: auto;
        align-self: start;
    }

    .jeans-video-card video {
        height: auto;
        object-fit: contain;
    }

    .why-section {
        padding: 55px 10px;
    }

    .why-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .why-card {
        min-height: 190px;
        padding: 20px 12px;
    }

    .why-icon {
        font-size: 30px;
    }

    .why-card h3 {
        font-size: 16px;
    }

    .why-card p {
        font-size: 13px;
        line-height: 1.5;
    }

    .reviews-section {
        padding: 55px 10px;
    }

    .reviews-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .review-card {
        padding: 30px 20px;
    }

    .home-newsletter {
        padding: 55px 15px;
    }

    .newsletter-content h2 {
        font-size: 28px;
    }

    .home-newsletter-form {
        flex-direction: column;
    }

    .home-newsletter-form input,
    .home-newsletter-form button {
        width: 100%;
    }

}


/* =========================================================
   RESPONSIVE - 450px
========================================================= */

@media (max-width: 450px) {
    .jeans-features {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }


    .hero {
        height: 450px;
    }

    .hero-content {
        left: 5%;
        bottom: 8%;
    }

    .shop-btn {
        padding: 11px 23px;
        font-size: 14px;
    }

    .section-title h2 {
        font-size: 27px;
    }

    .jeans-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jeans-card {
        height: auto;
        aspect-ratio: 3 / 4;
    }

    .full-jeans-image {
        height: 400px;
    }

    .feature-box {
        min-height: 95px;
        padding: 14px 2px;
    }

    .feature-box h3 {
        font-size: clamp(11px, 3.2vw, 14px);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .feature-box p {
        font-size: clamp(9px, 2.7vw, 11px);
        line-height: 1.35;
    }

    .find-next-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .find-next-card {
        height: auto;
        aspect-ratio: 0.82 / 1;
        border-radius: 4px;
    }

    .find-next-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .find-next-content {
        padding: 18px 2px 4px;
    }

    .find-next-content h3 {
        margin-bottom: 2px;
        font-size: clamp(12px, 3.4vw, 16px);
        line-height: 1.15;
    }

    .find-next-content p {
        font-size: clamp(9px, 2.7vw, 12px);
        line-height: 1.15;
    }

    .offer-content h2 {
        font-size: 29px;
    }

    .jeans-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .jeans-video-card {
        min-width: 0;
        height: auto;
        aspect-ratio: 9 / 16;
    }

    .jeans-video-card video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .why-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .why-card {
        min-height: 190px;
        padding: 15px 10px;
    }

    .why-icon {
        font-size: 26px;
        margin-bottom: 8px;
    }

    .why-card h3 {
        font-size: 14px;
        margin-bottom: 7px;
    }

    .why-card p {
        font-size: 12px;
        line-height: 1.35;
    }

    .newsletter-content h2 {
        font-size: 25px;
    }

}

@media (max-width: 450px) {
    .home-page .pj-footer-main {
        padding: 24px 12px 14px !important;
    }

    .home-page .pj-footer-groups {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .home-page .pj-footer-group {
        min-width: 0;
    }

    .home-page .pj-footer-group summary {
        font-size: 11px !important;
        letter-spacing: 0;
    }

    .home-page .pj-footer-group a,
    .home-page .pj-footer-group p {
        font-size: 9px !important;
        overflow-wrap: anywhere;
    }

    .home-page .pj-payment .pj-payment-methods {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0 2px 6px;
        -webkit-overflow-scrolling: touch;
    }

    .home-page .pj-payment .pj-pay-logo {
        flex: 0 0 auto;
    }

    .home-page .pj-footer-bottom div {
        flex-wrap: nowrap;
        gap: 8px !important;
        white-space: nowrap;
    }

    .home-page .pj-footer-bottom a {
        font-size: 8px !important;
    }
}

@media (max-width: 600px) {
    html:has(body.home-page) {
        overflow-x: clip;
        overscroll-behavior-x: none;
    }

    body.home-page {
        overflow-x: clip;
        overscroll-behavior-x: none;
    }

    .home-page .hero-slide {
        transform: none !important;
        transition: opacity 0.8s ease;
    }

    .home-page > header:not(.pj-common-header) {
        min-height: 54px !important;
        flex-wrap: wrap !important;
        justify-content: space-between;
        gap: 4px;
        padding: 5px 8px !important;
    }

    .home-page > header:not(.pj-common-header) .mobile-menu-toggle {
        flex: 0 0 28px;
        padding: 4px;
    }

    .home-page > header:not(.pj-common-header) .mobile-menu-toggle span {
        width: 20px;
    }

    .home-page > header:not(.pj-common-header) .logo {
        flex: 0 0 auto;
    }

    .home-page > header:not(.pj-common-header) .logo img {
        width: clamp(58px, 19vw, 90px) !important;
        max-height: 38px;
    }

    .home-page > header:not(.pj-common-header) .header-right {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
    }

    .home-page > header:not(.pj-common-header) .search {
        flex: 1 1 50px !important;
        width: auto !important;
        min-width: 50px !important;
        max-width: 120px !important;
        height: 34px;
        padding: 0 5px;
    }

    .home-page > header:not(.pj-common-header) .search input {
        min-width: 0;
        font-size: 10px;
    }

    .home-page > header:not(.pj-common-header) .login,
    .home-page > header:not(.pj-common-header) .register {
        flex: 0 1 auto;
        height: 32px;
        padding: 0 4px;
        font-size: clamp(8px, 2.7vw, 10px);
    }
}

/* HOMEPAGE LIVE PRODUCT SEARCH */
.home-search-results {
    position: absolute;
    top: 88px;
    right: 5%;
    z-index: 200;
    width: min(420px, 90vw);
    max-height: 65vh;
    overflow-y: auto;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #e8e3da;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
}

.home-search-result {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    padding: 12px 4px;
    color: #172b4d;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    transition: background 0.2s ease;
}

.home-search-result:last-child {
    border-bottom: 0;
}

.home-search-result:hover {
    background: #f8f6f1;
}

.home-search-result img {
    width: 58px;
    height: 64px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 5px;
    background: #f3f3f3;
}

.home-search-result-info {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.home-search-result-info strong {
    font-size: 14px;
    line-height: 1.4;
}

.home-search-result-info p {
    margin: 0;
    color: #777;
    font-size: 12px;
}

.home-search-result-info span {
    color: #172b4d;
    font-size: 13px;
    font-weight: 700;
}

.home-search-result-arrow {
    color: #a18a60;
    font-size: 25px;
}

.home-search-message {
    margin: 0;
    padding: 14px 4px;
    color: #52627a;
    font-size: 14px;
}

/* =====================================================
   PARTNER JEANS - HOMEPAGE RED & CHAMPAGNE THEME
   Header + Footer only
===================================================== */

:root {
    --pj-brand-red: #7f1023;
    --pj-brand-red-dark: #5b0b19;
    --pj-brand-champagne: #d8bd91;
    --pj-brand-cream: #fbf8f3;
}

/* HEADER */
body > header {
    background: #ffffff !important;
    border-bottom: 2px solid var(--pj-brand-champagne) !important;
    box-shadow: 0 3px 16px rgba(75, 10, 25, 0.08) !important;
}

body > header nav a {
    color: var(--pj-brand-red-dark) !important;
    font-weight: 650 !important;
    transition: color .2s ease, background .2s ease !important;
}

body > header nav a:hover,
body > header nav a:focus-visible {
    color: var(--pj-brand-red) !important;
    background: var(--pj-brand-cream) !important;
}

body > header .search {
    border-color: #e5d7d9 !important;
}

body > header .search input {
    color: #34252a !important;
}

body > header .search-mic-button {
    color: var(--pj-brand-red) !important;
}

body > header .login,
body > header .register {
    background: var(--pj-brand-red) !important;
    border-color: var(--pj-brand-red) !important;
    color: #ffffff !important;
    transition: background .2s ease, border-color .2s ease !important;
}

body > header .login:hover,
body > header .register:hover {
    background: var(--pj-brand-red-dark) !important;
    border-color: var(--pj-brand-red-dark) !important;
    color: #ffffff !important;
}

body > header .mobile-menu-toggle span {
    background: var(--pj-brand-red) !important;
}

/* FOOTER */
body > footer.premium-footer.pj-footer {
    background: linear-gradient(145deg, #350812 0%, #570d20 55%, #3d0916 100%) !important;
    color: #ffffff !important;
    border-top: 3px solid var(--pj-brand-champagne) !important;
}

.pj-footer .pj-footer-brand p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a {
    color: #f8f2ed !important;
}

.pj-footer .pj-footer-group summary {
    color: var(--pj-brand-champagne) !important;
}

.pj-footer .pj-footer-group a:hover,
.pj-footer .pj-footer-bottom a:hover {
    color: var(--pj-brand-champagne) !important;
}

.pj-footer .pj-social span {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(216, 189, 145, .55) !important;
    color: #ffffff !important;
}

.pj-footer .pj-social span:hover {
    background: var(--pj-brand-champagne) !important;
    color: var(--pj-brand-red-dark) !important;
}

.pj-footer .pj-payment {
    background: rgba(255, 255, 255, .07) !important;
    border-top: 1px solid rgba(216, 189, 145, .35) !important;
    border-bottom: 1px solid rgba(216, 189, 145, .35) !important;
}

.pj-footer .pj-payment h3 {
    color: var(--pj-brand-champagne) !important;
}

.pj-footer .pj-payment-note {
    color: #f8f2ed !important;
}

.pj-footer .pj-footer-bottom {
    border-top: 1px solid rgba(216, 189, 145, .35) !important;
}

.pj-footer .pj-footer-watermark {
    color: #ffffff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #ffffff !important;
}

.pj-footer .pj-back-top {
    background: var(--pj-brand-champagne) !important;
    color: var(--pj-brand-red-dark) !important;
    border: 1px solid var(--pj-brand-champagne) !important;
}

.pj-footer .pj-back-top:hover {
    background: #ffffff !important;
    color: var(--pj-brand-red) !important;
}


/* HEADER: HELLO NAME + LOGIN + REGISTER - SAME LOGO RED */

body > header .login,
body > header .register,
body > header .customer-account-trigger {
    background: #7f1023 !important;
    color: #ffffff !important;
    border: 1px solid #7f1023 !important;
}

body > header .login *,
body > header .register *,
body > header .customer-account-trigger *,
body > header .customer-account-trigger svg {
    color: #ffffff !important;
    fill: currentColor;
}

body > header .login:hover,
body > header .register:hover,
body > header .customer-account-trigger:hover,
body > header .customer-account-trigger[aria-expanded="true"] {
    background: #5b0b19 !important;
    color: #ffffff !important;
    border-color: #5b0b19 !important;
}


/* FINAL HOMEPAGE HEADER COLOR FIX */

body > header .header-right > .login,
body > header .header-right > .register,
body > header .header-right .customer-account-menu > .customer-account-trigger {
    background-color: #7f1023 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #7f1023 !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}

body > header .header-right .customer-account-trigger .customer-account-greeting,
body > header .header-right .customer-account-trigger .customer-account-greeting small,
body > header .header-right .customer-account-trigger .customer-account-greeting strong,
body > header .header-right .customer-account-trigger .customer-account-arrow,
body > header .header-right .customer-account-trigger svg {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

body > header .header-right > .login:hover,
body > header .header-right > .register:hover,
body > header .header-right .customer-account-menu > .customer-account-trigger:hover,
body > header .header-right .customer-account-menu > .customer-account-trigger[aria-expanded="true"] {
    background-color: #5b0b19 !important;
    color: #ffffff !important;
    border-color: #5b0b19 !important;
}



/* PJ RESPONSIVE IMAGE SYSTEM - 2026 */

/* Preserve the source aspect ratios for banners and portrait category artwork. */
@media (max-width: 1220px) {
    .full-jeans-image {
        height: auto;
        aspect-ratio: auto;
    }

    .full-jeans-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    /* Portrait category images */
    .jeans-card {
        height: auto;
        aspect-ratio: 0.71 / 1;
    }

    .jeans-card a,
    .jeans-card img {
        width: 100%;
        height: 100%;
    }
}

/* Mobile and small tablets */
@media (max-width: 700px) {
    .find-next-card {
        height: auto;
        aspect-ratio: auto;
        align-self: start;
    }

    .find-next-card img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    .home-product-card .product-image {
        height: auto;
        aspect-ratio: 3 / 4;
        overflow: hidden;
    }

    .home-product-card .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* Small phones */
@media (max-width: 450px) {
    .reviews-section .section-title h2 {
        font-size: clamp(16px, 5vw, 22px);
        white-space: nowrap;
    }

    .reviews-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .review-card {
        min-width: 0;
        padding: 14px 6px;
    }

    .review-stars {
        margin-bottom: 7px;
        font-size: clamp(10px, 3vw, 13px);
        white-space: nowrap;
    }

    .review-text {
        margin-bottom: 10px;
        font-size: clamp(9px, 2.7vw, 12px);
        line-height: 1.4;
    }

    .review-card h3 {
        font-size: clamp(9px, 2.8vw, 12px);
        overflow-wrap: anywhere;
    }

    .review-card span {
        font-size: clamp(8px, 2.4vw, 10px);
    }

    .why-section .section-title h2 {
        font-size: clamp(16px, 5vw, 22px);
        white-space: nowrap;
    }

    .why-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .why-card {
        min-height: 0;
        padding: 14px 3px;
        overflow-wrap: anywhere;
    }

    .why-icon {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .why-card h3 {
        font-size: clamp(7px, 2.4vw, 10px);
        line-height: 1.2;
        margin-bottom: 5px;
        white-space: nowrap;
    }

    .why-card p {
        font-size: clamp(8px, 2.5vw, 10px);
        line-height: 1.25;
    }

    .find-next-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .find-next-card {
        height: auto;
        aspect-ratio: 0.72 / 1;
    }

    .find-next-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .hero-content {
        left: 4%;
        bottom: 5%;
    }

    .shop-btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    .categories-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .jeans-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .jeans-card {
        border-radius: 6px;
    }

    .full-jeans-image {
        width: 100%;
    }

    .find-next-grid {
        gap: 4px;
    }
}



========== CSS FILE: static/css/kids.css ==========



.hero {
    width: 100%;
    height: 500px;

    position: relative;

    overflow: hidden;

    color: white;
}


.hero-slider {
    width: 100%;
    height: 100%;

    position: relative;

    overflow: hidden;
}


.hero-slide {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;

    padding-left: 90px;

    box-sizing: border-box;

    transform: translateX(100%);

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


.hero-slide.active {
    transform: translateX(0);
}


.hero-slide.previous {
    transform: translateX(-100%);
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    max-width: 620px;
}


.small-heading {
    margin: 0 0 12px;

    color: white;

    font-size: 14px;
    font-weight: bold;

    letter-spacing: 2px;
}


.hero h2 {
    margin: 10px 0 18px;

    color: white;

    font-size: 48px;

    line-height: 1.1;
}


.hero h2 span {
    color: #28a9ff;
}


.features {
    margin: 0 0 28px;

    color: white;

    font-size: 18px;
}


.shop-btn {
    display: inline-block;

    padding: 13px 28px;

    background: #28a9ff;

    color: white;

    text-decoration: none;

    border-radius: 5px;

    font-size: 15px;
    font-weight: bold;

    transition: 0.3s ease;
}


.shop-btn:hover {
    background: #1683ff;

    transform: translateY(-2px);
}


/* =========================================================
   KIDS PRODUCTS SECTION
========================================================= */

.products-section {
    width: 100%;

    padding: 60px 5%;

    box-sizing: border-box;

    background: #f5f7fa;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.products-section .section-title {
    text-align: center;

    margin-bottom: 5px;
}


.products-section .section-title .small-heading {
    margin: 0 0 8px;

    color: #28a9ff;

    font-size: 13px;

    letter-spacing: 2px;
}


.products-section .section-title h2 {
    margin: 0;

    color: #172b4d;

    font-size: 34px;

    line-height: 1.2;
}


.products-section .section-title h2 span {
    color: #28a9ff;
}


.products-section .section-title > p:last-child {
    margin: 12px auto 0;

    max-width: 650px;

    color: #777;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   BLUE LINE
========================================================= */

.products-section .blue-line {
    width: 55px;
    height: 3px;

    margin: 12px auto 0;

    background: #28a9ff;

    border-radius: 3px;
}


/* =========================================================
   PRODUCTS GRID
========================================================= */

.products-grid {
    max-width: 1200px;

    margin: 35px auto 0;

    display: grid;

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

    gap: 22px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
    width: 100%;

    overflow: hidden;

    background: white;

    border: 1px solid #e6e6e6;

    border-radius: 8px;

    box-sizing: border-box;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.product-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.13);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image {
    position: relative;

    width: 100%;
    height: 310px;

    overflow: hidden;

    background: #eeeeee;
}


.product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.45s ease;
}


.product-card:hover .product-image img {
    transform: scale(1.06);
}


/* =========================================================
   NEW BADGE
========================================================= */

.new-badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 5;

    padding: 6px 11px;

    border-radius: 4px;

    background: #28a9ff;

    color: white;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 0.5px;
}


/* =========================================================
   PRODUCT BADGE
========================================================= */

.product-badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 5;

    padding: 6px 11px;

    border-radius: 4px;

    background: #172b4d;

    color: white;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 0.5px;
}


/* =========================================================
   DIFFERENT BADGE COLORS
========================================================= */

/* BEST SELLER */

.product-card:nth-child(3) .product-badge {
    background: #172b4d;
}


/* HOT */

.product-card:nth-child(5) .product-badge {
    background: #e53935;
}


/* TRENDING */

.product-card:nth-child(7) .product-badge {
    background: #7b61ff;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.product-info {
    padding: 18px;
}


.product-info h3 {
    margin: 0 0 7px;

    color: #172b4d;

    font-size: 18px;

    line-height: 1.35;

    min-height: 48px;
}


/* =========================================================
   PRODUCT CATEGORY
========================================================= */

.product-category {
    margin: 0 0 12px;

    color: #777;

    font-size: 13px;
}


/* =========================================================
   RATING
========================================================= */

.rating {
    margin-bottom: 14px;

    color: #f5a623;

    font-size: 14px;
}


.rating span {
    color: #777;

    font-size: 12px;

    margin-left: 5px;
}


/* =========================================================
   PRICE
========================================================= */

.price {
    margin-bottom: 16px;
}


.product-price {
    color: #172b4d;

    font-size: 20px;

    font-weight: bold;
}


/* =========================================================
   ADD TO CART BUTTON
========================================================= */

.cart-btn {
    width: 100%;

    padding: 11px 15px;

    border: none;

    border-radius: 5px;

    background: #172b4d;

    color: white;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.cart-btn:hover {
    background: #28a9ff;

    transform: translateY(-2px);
}


/* =========================================================
   1200px
========================================================= */

@media (max-width: 1200px) {

    .products-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   1000px
========================================================= */

@media (max-width: 1000px) {

    .hero-slide {
        padding-left: 55px;
    }


    .hero h2 {
        font-size: 42px;
    }


    .products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   700px
========================================================= */

@media (max-width: 700px) {

    .hero {
        height: 480px;
    }


    .hero-slide {
        padding: 30px;

        align-items: center;
    }


    .hero-content {
        max-width: 100%;
    }


    .small-heading {
        font-size: 12px;
    }


    .hero h2 {
        font-size: 35px;
    }


    .features {
        font-size: 15px;
    }


    .shop-btn {
        padding: 11px 22px;
    }


    /* Products */

    .products-section {
        padding: 45px 15px;
    }


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

        gap: 14px;

        margin-top: 20px;
    }


    .product-image {
        height: 220px;
    }


    /* Section Title */

    .products-section .section-title h2 {
        font-size: 29px;
    }


    .products-section .section-title > p:last-child {
        font-size: 14px;
    }

}


/* =========================================================
   450px
========================================================= */

@media (max-width: 450px) {

    .hero {
        height: 450px;
    }


    .hero-slide {
        padding: 25px;
    }


    .small-heading {
        font-size: 11px;

        letter-spacing: 1.5px;
    }


    .hero h2 {
        font-size: 29px;
    }


    .features {
        font-size: 14px;
    }


    .shop-btn {
        padding: 10px 18px;

        font-size: 13px;
    }


    .products-section {
        padding: 40px 12px;
    }


    .products-grid {
        gap: 12px;
    }

    .product-image {
        height: 190px;
    }

    .product-info {
        padding: 10px;
    }

    .product-info h3 {
        font-size: 14px;
    }


    .product-category {
        font-size: 12px;
    }


    .product-price {
        font-size: 18px;
    }


    .rating {
        font-size: 13px;
    }


    .cart-btn {
        padding: 10px;
    }

}



========== CSS FILE: static/css/login.css ==========



body {
    margin: 0;
    padding: 0;

    font-family: Arial, sans-serif;

    background: #f5f7fa;
    color: #172b4d;

    min-height: 100vh;
}


/* =========================
   AUTH CONTAINER
========================= */

.auth-container {
    min-height: 100vh;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 40px 20px;

    box-sizing: border-box;
}


/* =========================
   AUTH BOX
========================= */

.auth-box {
    width: 100%;
    max-width: 430px;

    background: #ffffff;

    padding: 38px 40px;

    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(23, 43, 77, 0.12);

    text-align: center;

    box-sizing: border-box;
}


/* =========================
   LOGO
========================= */

.auth-logo {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 18px;
}


.auth-logo img {
    width: 150px;
    height: 90px;

    object-fit: contain;

    display: block;

    border-radius: 10px;
}


/* =========================
   WELCOME TEXT
========================= */

.auth-subtitle {
    margin: 0 0 28px;

    font-size: 24px;
    font-weight: 700;

    color: #172b4d;
}


/* =========================
   FORM
========================= */

#loginForm {
    width: 100%;

    text-align: left;
}

.auth-status {
    color: #b42318;
    font-size: 14px;
    line-height: 1.4;
}

.auth-status:empty {
    display: none;
}


/* =========================
   LABEL
========================= */

#loginForm label {
    display: block;

    margin: 0 0 8px;

    font-size: 14px;
    font-weight: 600;

    color: #172b4d;
}


/* =========================
   INPUT
========================= */

#loginForm input {
    width: 100%;

    height: 48px;

    padding: 0 15px;

    margin: 0 0 20px;

    border: 1px solid #d9e0e8;

    border-radius: 9px;

    background: #ffffff;

    color: #172b4d;

    font-size: 15px;

    outline: none;

    box-sizing: border-box;

    transition: 0.3s ease;
}


#loginForm input::placeholder {
    color: #9aa5b1;
}


#loginForm input:focus {
    border-color: #28a9ff;

    box-shadow:
        0 0 0 3px rgba(40, 169, 255, 0.12);
}


/* =========================
   FORGOT PASSWORD
========================= */

.forgot {
    width: 100%;

    text-align: right;

    margin-top: -8px;

    margin-bottom: 22px;
}


.forgot a {
    color: #1683ff;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: 0.3s ease;
}


.forgot a:hover {
    color: #172b4d;

    text-decoration: underline;
}


/* =========================
   LOGIN BUTTON
========================= */

.auth-btn {
    width: 100%;

    height: 50px;

    border: none;

    border-radius: 9px;

    background: #172b4d;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.3s ease;
}


.auth-btn:hover {
    background: #1683ff;

    transform: translateY(-1px);

    box-shadow:
        0 8px 18px rgba(22, 131, 255, 0.22);
}


.auth-btn:active {
    transform: translateY(0);
}


/* =========================
   REGISTER TEXT
========================= */

.account-text {
    margin: 24px 0 16px;

    font-size: 14px;

    color: #667085;
}


.account-text a {
    color: #1683ff;

    font-weight: 700;

    text-decoration: none;

    margin-left: 4px;

    transition: 0.3s ease;
}


.account-text a:hover {
    color: #172b4d;

    text-decoration: underline;
}


/* =========================
   BACK HOME
========================= */

.back-home {
    display: inline-block;

    margin-top: 5px;

    color: #172b4d;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: 0.3s ease;
}


.back-home:hover {
    color: #1683ff;

    transform: translateX(-2px);
}


/* =========================
   RESPONSIVE - 700px
========================= */

@media (max-width: 700px) {

    .auth-container {
        padding: 30px 18px;
    }


    .auth-box {
        max-width: 420px;

        padding: 34px 30px;

        border-radius: 16px;
    }


    .auth-logo img {
        width: 140px;
        height: 85px;
    }


    .auth-subtitle {
        font-size: 22px;

        margin-bottom: 25px;
    }

}


/* =========================
   RESPONSIVE - 450px
========================= */

@media (max-width: 450px) {

    .auth-container {
        padding: 20px 12px;
    }


    .auth-box {
        padding: 28px 20px;

        border-radius: 14px;
    }


    .auth-logo img {
        width: 125px;
        height: 75px;
    }


    .auth-subtitle {
        font-size: 20px;

        margin-bottom: 22px;
    }


    #loginForm input {
        height: 46px;

        font-size: 14px;
    }


    .auth-btn {
        height: 48px;

        font-size: 15px;
    }


    .account-text,
    .back-home,
    .forgot a {
        font-size: 13px;
    }

}


/* GOOGLE_OAUTH_STYLE_V1 */
.google-auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 16px;
    color: #858585;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.google-auth-divider::before,
.google-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dedbd5;
}

.google-auth-btn {
    min-height: 49px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    border: 1px solid #d8d5ce;
    border-radius: 7px;
    background: #fff;
    color: #202b3b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.google-auth-btn:hover {
    background: #f8f6f1;
    border-color: #b9a477;
    box-shadow: 0 4px 14px rgba(24, 35, 52, .08);
}

.google-auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid #e2e2e2;
    border-radius: 50%;
    color: #4285f4;
    background: #fff;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
}


/* PASSWORD_RESET_STYLE_V1 */
[hidden] {
    display: none !important;
}

.password-reset-panel {
    width: 100%;
    margin-top: 8px;
    box-sizing: border-box;
}

.password-reset-panel h2 {
    margin: 0 0 8px;
    color: #172b4d;
    font-size: 23px;
    font-weight: 700;
}

.reset-description {
    margin: 0 0 22px;
    color: #777;
    font-size: 13px;
    line-height: 1.6;
}

.password-reset-panel label {
    display: block;
    margin: 15px 0 8px;
    color: #263449;
    font-size: 13px;
    font-weight: 600;
}

.password-reset-panel input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #d9dce2;
    border-radius: 7px;
    background: #fff;
    color: #172b4d;
    font-size: 14px;
    outline: none;
}

.password-reset-panel input:focus {
    border-color: #b9a477;
    box-shadow: 0 0 0 3px rgba(185, 164, 119, .13);
}

.password-reset-panel .auth-btn {
    width: 100%;
    margin-top: 20px;
    cursor: pointer;
}

.reset-status {
    min-height: 0;
    margin: 10px 0;
    color: #23764b;
    font-size: 13px;
    line-height: 1.5;
}

.reset-status-error {
    color: #b42318;
}

.reset-status-success {
    color: #23764b;
}

.reset-secondary-btn {
    display: block;
    width: 100%;
    margin-top: 15px;
    padding: 11px;
    border: 1px solid #d8d5ce;
    border-radius: 7px;
    background: #fff;
    color: #263449;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.reset-secondary-btn:hover {
    border-color: #b9a477;
    background: #f8f6f1;
}
/* PASSWORD_RESET_STYLE_END_V1 */


/* CLOUDFLARE TURNSTILE CAPTCHA */
.turnstile-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin: 18px 0;
  min-height: 65px;
  overflow: visible;
}

#turnstileWidget {
  max-width: 100%;
}

@media (max-width: 420px) {
  .turnstile-wrap {
    transform-origin: left center;
    overflow-x: auto;
  }
}



========== CSS FILE: static/css/men.css ==========

/* =========================================================
   MEN PAGE CSS
   Partner Jeans & Pants
========================================================= */


/* =========================================================
   MEN HERO
========================================================= */

.hero {
    width: 100%;
    height: 500px;

    position: relative;

    overflow: hidden;

    color: white;
}

.hero-slider {
    width: 100%;
    height: 100%;

    position: relative;

    overflow: hidden;
}

.hero-slide {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;

    padding-left: 90px;

    box-sizing: border-box;

    transform: translateX(100%);

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

.hero-slide.active {
    transform: translateX(0);
}

.hero-slide.previous {
    transform: translateX(-100%);
}

.hero-content {
    max-width: 600px;
}

.small-heading {
    margin: 0 0 12px;

    color: white;

    font-size: 14px;
    font-weight: bold;

    letter-spacing: 2px;
}

.hero h2 {
    margin: 10px 0 18px;

    color: white;

    font-size: 48px;

    line-height: 1.1;
}

.hero h2 span {
    color: #28a9ff;
}

.features {
    margin: 0 0 28px;

    color: white;

    font-size: 18px;
}

.shop-btn {
    display: inline-block;

    padding: 13px 28px;

    background: #28a9ff;

    color: white;

    text-decoration: none;

    border-radius: 5px;

    font-size: 15px;
    font-weight: bold;

    transition: 0.3s ease;
}

.shop-btn:hover {
    background: #1683ff;

    transform: translateY(-2px);
}


/* =========================================================
   MEN PRODUCTS SECTION
========================================================= */

.products-section {
    width: 100%;

    padding: 60px 5%;

    box-sizing: border-box;

    background: #f5f7fa;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.products {
    max-width: 1200px;

    margin: 35px auto 0;

    display: grid;

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

    gap: 22px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
    width: 100%;

    overflow: hidden;

    background: white;

    border: 1px solid #e6e6e6;

    border-radius: 8px;

    box-sizing: border-box;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);

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


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image {
    position: relative;

    width: 100%;
    height: 310px;

    overflow: hidden;

    background: #eeeeee;
}

.product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.45s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}


/* =========================================================
   PRODUCT BADGE
========================================================= */

.badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 5;

    padding: 6px 11px;

    border-radius: 4px;

    background: #28a9ff;

    color: white;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 0.4px;
}


/* Different badge colors */

.product-card:nth-child(2) .badge {
    background: #172b4d;
}

.product-card:nth-child(3) .badge {
    background: #e53935;
}

.product-card:nth-child(5) .badge {
    background: #e53935;
}

.product-card:nth-child(7) .badge {
    background: #7b61ff;
}

.product-card:nth-child(10) .badge {
    background: #e53935;
}

.product-card:nth-child(11) .badge {
    background: #7b61ff;
}

.product-card:nth-child(14) .badge {
    background: #e53935;
}

.product-card:nth-child(15) .badge {
    background: #e53935;
}

.product-card:nth-child(16) .badge {
    background: #7b61ff;
}

.product-card:nth-child(18) .badge {
    background: #172b4d;
}

.product-card:nth-child(19) .badge {
    background: #e53935;
}

.product-card:nth-child(20) .badge {
    background: #e53935;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.product-info {
    padding: 18px;
}

.product-info h3 {
    margin: 0 0 15px;

    color: #172b4d;

    font-size: 17px;

    line-height: 1.35;
}


/* =========================================================
   PRICE
========================================================= */

.price {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 12px;
}

.price b {
    color: #172b4d;

    font-size: 19px;
}

.price del {
    color: #999;

    font-size: 13px;
}

.price span {
    color: #159957;

    font-size: 11px;
    font-weight: bold;
}


/* =========================================================
   RATING
========================================================= */

.rating {
    margin-bottom: 16px;

    color: #f5a623;

    font-size: 14px;
}

.rating small {
    color: #777;

    font-size: 12px;

    margin-left: 4px;
}


/* =========================================================
   ADD TO CART BUTTON
========================================================= */

.product-info button {
    width: 100%;

    padding: 11px 15px;

    border: none;

    border-radius: 5px;

    background: #172b4d;

    color: white;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;

    transition: 0.3s ease;
}

.product-info button:hover {
    background: #28a9ff;

    transform: translateY(-1px);
}


/* =========================================================
   SECTION TITLE
========================================================= */

.products-section .section-title {
    text-align: center;

    margin-bottom: 5px;
}

.products-section .section-title h2 {
    margin: 0;

    color: #172b4d;

    font-size: 32px;
}

.products-section .section-title p {
    margin: 12px 0 0;

    color: #777;

    font-size: 15px;
}


/* =========================================================
   RESPONSIVE - 1200px
========================================================= */

@media (max-width: 1200px) {

    .products {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   RESPONSIVE - 1000px
========================================================= */

@media (max-width: 1000px) {

    .hero-slide {
        padding-left: 55px;
    }

    .hero h2 {
        font-size: 42px;
    }

    .products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   RESPONSIVE - 700px
========================================================= */

@media (max-width: 700px) {

    .hero {
        height: 480px;
    }

    .hero-slide {
        padding: 30px;

        align-items: center;
    }

    .hero-content {
        max-width: 100%;
    }

    .small-heading {
        font-size: 12px;
    }

    .hero h2 {
        font-size: 35px;
    }

    .features {
        font-size: 15px;
    }

    .shop-btn {
        padding: 11px 22px;
    }


    /* Products */

    .products-section {
        padding: 45px 15px;
    }

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

        gap: 14px;

        margin-top: 20px;
    }

    .product-image {
        height: 220px;
    }


    /* Section title */

    .products-section .section-title h2 {
        font-size: 28px;
    }

}


/* =========================================================
   RESPONSIVE - 450px
========================================================= */

@media (max-width: 450px) {

    .hero {
        height: 450px;
    }

    .hero-slide {
        padding: 25px;
    }

    .small-heading {
        font-size: 11px;

        letter-spacing: 1.5px;
    }

    .hero h2 {
        font-size: 29px;
    }

    .features {
        font-size: 14px;
    }

    .shop-btn {
        padding: 10px 18px;

        font-size: 13px;
    }


    .products-section {
        padding: 40px 12px;
    }

    .products {
        gap: 12px;
    }

    .product-image {
        height: 190px;
    }

    .product-info {
        padding: 10px;
    }

    .product-info h3 {
        font-size: 14px;
    }

    .price b {
        font-size: 18px;
    }

}


========== CSS FILE: static/css/new-arrivals.css ==========



.hero {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
    color: white;
}

.hero-slider {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;

    padding-left: 90px;
    box-sizing: border-box;

    transform: translateX(100%);
    transition: transform 0.8s ease-in-out;
}

.hero-slide.active {
    transform: translateX(0);
}

.hero-slide.previous {
    transform: translateX(-100%);
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    max-width: 650px;
}

.hero .small-heading {
    margin: 0 0 12px;

    color: #28a9ff;

    font-size: 14px;
    font-weight: bold;

    letter-spacing: 2px;
}

.hero h2 {
    margin: 10px 0 18px;

    color: white;

    font-size: 48px;
    line-height: 1.1;
    font-weight: 700;
}

.hero h2 span {
    color: #28a9ff;
}

.features {
    margin: 0 0 28px;

    color: white;

    font-size: 18px;
    line-height: 1.6;
}


/* =========================================================
   SHOP BUTTON
========================================================= */

.shop-btn {
    display: inline-block;

    padding: 13px 28px;

    background: #28a9ff;
    color: white;

    text-decoration: none;

    border-radius: 5px;

    font-size: 15px;
    font-weight: bold;

    transition: 0.3s ease;
}

.shop-btn:hover {
    background: #1683ff;

    transform: translateY(-2px);

    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   PRODUCTS SECTION
========================================================= */

.products-section {
    width: 100%;

    padding: 65px 5%;

    box-sizing: border-box;

    background: #f5f7fa;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.products-section .section-title {
    text-align: center;

    margin-bottom: 5px;
}

.products-section .section-title .small-heading {
    margin: 0 0 8px;

    color: #28a9ff;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 2px;
}

.products-section .section-title h2 {
    margin: 0;

    color: #172b4d;

    font-size: 34px;
    line-height: 1.2;
}

.products-section .section-title h2 span {
    color: #28a9ff;
}

.products-section .section-title > p:last-child {
    max-width: 650px;

    margin: 12px auto 0;

    color: #777;

    font-size: 15px;
    line-height: 1.6;
}


/* =========================================================
   PRODUCTS GRID
========================================================= */

.products-grid {
    max-width: 1200px;

    margin: 38px auto 0;

    display: grid;

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

    gap: 22px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
    width: 100%;

    overflow: hidden;

    background: white;

    border: 1px solid #e6e6e6;

    border-radius: 8px;

    box-sizing: border-box;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.13);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image {
    position: relative;

    width: 100%;
    height: 310px;

    overflow: hidden;

    background: #eeeeee;
}

.product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.45s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.06);
}


/* =========================================================
   NEW BADGE
========================================================= */

.new-badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 5;

    padding: 6px 11px;

    border-radius: 4px;

    background: #28a9ff;
    color: white;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 0.6px;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.product-info {
    padding: 18px;
}

.product-info h3 {
    margin: 0 0 7px;

    color: #172b4d;

    font-size: 18px;
    line-height: 1.35;

    min-height: 48px;
}


/* =========================================================
   PRODUCT CATEGORY
========================================================= */

.product-category {
    margin: 0 0 12px;

    color: #777;

    font-size: 13px;
}


/* =========================================================
   RATING
========================================================= */

.rating {
    margin-bottom: 14px;

    color: #f5a623;

    font-size: 14px;
    letter-spacing: 0.5px;
}

.rating span {
    color: #777;

    font-size: 12px;

    margin-left: 5px;

    letter-spacing: 0;
}


/* =========================================================
   PRICE
========================================================= */

.price {
    margin-bottom: 16px;
}

.product-price {
    color: #172b4d;

    font-size: 20px;
    font-weight: bold;
}


/* =========================================================
   ADD TO CART BUTTON
========================================================= */

.cart-btn {
    width: 100%;

    padding: 11px 15px;

    border: none;

    border-radius: 5px;

    background: #172b4d;
    color: white;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.cart-btn:hover {
    background: #28a9ff;

    transform: translateY(-2px);

    box-shadow:
        0 6px 14px rgba(40, 169, 255, 0.25);
}


/* =========================================================
   1200px
========================================================= */

@media (max-width: 1200px) {

    .products-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   1000px
========================================================= */

@media (max-width: 1000px) {

    .hero-slide {
        padding-left: 55px;
    }

    .hero h2 {
        font-size: 42px;
    }

    .products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   700px
========================================================= */

@media (max-width: 700px) {

    .hero {
        height: 480px;
    }

    .hero-slide {
        padding: 30px;

        align-items: center;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero .small-heading {
        font-size: 12px;

        letter-spacing: 1.5px;
    }

    .hero h2 {
        font-size: 35px;
    }

    .features {
        font-size: 15px;

        line-height: 1.5;
    }

    .shop-btn {
        padding: 11px 22px;
    }


    /* Products */

    .products-section {
        padding: 50px 15px;
    }

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

        gap: 14px;

        margin-top: 20px;
    }


    .product-image {
        height: 220px;
    }

    .products-section .section-title h2 {
        font-size: 29px;
    }

    .products-section .section-title > p:last-child {
        font-size: 14px;
    }

}


/* =========================================================
   450px
========================================================= */

@media (max-width: 450px) {

    .hero {
        height: 450px;
    }

    .hero-slide {
        padding: 25px;
    }

    .hero .small-heading {
        font-size: 11px;

        letter-spacing: 1.3px;
    }

    .hero h2 {
        font-size: 29px;
    }

    .features {
        font-size: 14px;
    }

    .shop-btn {
        padding: 10px 18px;

        font-size: 13px;
    }


    /* Products */

    .products-section {
        padding: 40px 12px;
    }

    .products-grid {
        gap: 12px;
    }


    .product-image {
        height: 190px;
    }


    .product-info {
        padding: 10px;
    }


    .product-info h3 {
        font-size: 14px;
    }

    .product-category {
        font-size: 12px;
    }

    .product-price {
        font-size: 18px;
    }

    .rating {
        font-size: 13px;
    }

    .cart-btn {
        padding: 10px;
    }

}



========== CSS FILE: static/css/product-detail.css ==========


:root {
  --pd-ink: #172b3a;
  --pd-muted: #697681;
  --pd-border: #e7e9eb;
  --pd-accent: #c49a58;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--pd-ink);
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.detail-header {
  min-height: 82px;
  padding: 12px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border-bottom: 1px solid var(--pd-border);
}

.detail-logo img {
  width: 125px;
  height: 54px;
  object-fit: contain;
}

.detail-header nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.detail-header a,
.detail-footer a {
  color: var(--pd-ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.detail-header nav a {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.header-cart {
  border: 1px solid var(--pd-border);
  border-radius: 3px;
  padding: 12px 16px;
}

#cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 50%;
  background: var(--pd-ink);
  color: white;
}

.detail-main {
  width: min(1180px, 90%);
  margin: 0 auto;
  padding: 25px 0 75px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 25px;
  color: var(--pd-muted);
  font-size: 12px;
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(35px, 6vw, 85px);
  align-items: start;
}

.detail-image-frame {
  position: relative;
  min-height: 490px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #f5f5f2;
  overflow: hidden;
}

.detail-image-frame img {
  display: block;
  width: 100%;
  max-height: 650px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.detail-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 9px 13px;
  color: white;
  background: var(--pd-ink);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.detail-information { padding-top: 8px; }

.brand-label {
  margin: 0 0 17px;
  color: var(--pd-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
}

.detail-category {
  margin: 0 0 8px;
  color: var(--pd-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.detail-information h1 {
  margin: 0 0 15px;
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.8px;
}

.detail-rating {
  margin-bottom: 22px;
  color: #92703b;
  font-size: 13px;
}

.detail-price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

#detail-price {
  font-size: 29px;
  font-weight: 700;
}

#detail-old-price {
  color: #879099;
  font-size: 17px;
}

#detail-discount {
  padding: 6px 9px;
  color: #246b4b;
  background: #eaf5ee;
  font-size: 11px;
  font-weight: 700;
}

.tax-note {
  margin: 9px 0 20px;
  color: var(--pd-muted);
  font-size: 12px;
}

.detail-divider {
  height: 1px;
  margin: 22px 0;
  background: var(--pd-border);
}

.stock-label {
  margin: 0 0 22px;
  color: #247348;
  font-size: 13px;
  font-weight: 700;
}

.stock-label.out-of-stock { color: #b42318; }

.quantity-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 25px;
}

.quantity-row label {
  font-size: 13px;
  font-weight: 700;
}

.quantity-control {
  height: 42px;
  display: flex;
  align-items: center;
  border: 1px solid #d9dde0;
}

.quantity-control button {
  width: 40px;
  height: 40px;
  border: 0;
  background: #fff;
  cursor: pointer;
  font-size: 20px;
}

.quantity-control input {
  width: 45px;
  height: 40px;
  padding: 0;
  border: 0;
  outline: none;
  text-align: center;
  font-size: 14px;
}

.quantity-control input::-webkit-inner-spin-button,
.quantity-control input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.detail-actions button {
  min-height: 53px;
  padding: 13px;
  border: 1px solid var(--pd-ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  transition: .2s ease;
}

.add-cart-button {
  color: white;
  background: var(--pd-ink);
}

.buy-now-button {
  color: var(--pd-ink);
  background: white;
}

.detail-actions button:hover:not(:disabled) {
  border-color: var(--pd-accent);
  background: var(--pd-accent);
  color: white;
}

.detail-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.detail-message {
  min-height: 20px;
  margin: 13px 0;
  color: #247348;
  font-size: 13px;
}

.service-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--pd-border);
  border-bottom: 1px solid var(--pd-border);
}

.service-points > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.service-points > div > span {
  color: var(--pd-accent);
  font-size: 21px;
}

.service-points p {
  margin: 0;
  color: var(--pd-muted);
  font-size: 11px;
  line-height: 1.8;
}

.service-points strong { color: var(--pd-ink); }

.description-block { padding-top: 18px; }

.description-block h2 {
  margin: 0 0 12px;
  font-size: 17px;
}

.description-block p {
  color: #66727b;
  font-size: 14px;
  line-height: 1.9;
  white-space: pre-line;
}

.detail-status {
  padding: 35px 0;
  color: var(--pd-muted);
  font-size: 14px;
}

.detail-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 28px 5%;
  background: #111b23;
  color: white;
}

.detail-footer p {
  margin: 0;
  font-size: 11px;
  letter-spacing: 2px;
}

.detail-footer a { color: white; }

@media (max-width: 760px) {
  .detail-header { min-height: 68px; padding: 10px 4%; gap: 12px; }
  .detail-logo img { width: 90px; height: 42px; }
  .detail-header nav { gap: 12px; }
  .detail-header nav a { font-size: 10px; letter-spacing: 0; }
  .header-cart { padding: 9px; font-size: 11px !important; }
  .detail-main { width: 92%; padding-top: 18px; }
  .product-detail { grid-template-columns: 1fr; gap: 27px; }
  .detail-image-frame { min-height: 300px; max-height: 460px; }
  .detail-image-frame img { max-height: 420px; }
  .detail-information { padding-top: 0; }
  .detail-information h1 { font-size: 29px; }
  .detail-actions button { min-height: 49px; font-size: 10px; }
}

@media (max-width: 390px) {
  .detail-header nav { gap: 8px; }
  .detail-header nav a { font-size: 9px; }
  .detail-logo img { width: 68px; }
  .service-points { grid-template-columns: 1fr; }
}


/* NUMBER SIZE BUTTON FIX */
.size-selection {
  display: block;
  position: relative;
  z-index: 2;
  margin: 22px 0;
  width: 100%;
}

.size-heading {
  margin: 0 0 12px;
  color: #172b4d;
  font-size: 14px;
  font-weight: 700;
}

.size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 3;
}

.size-options .size-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 46px;
  padding: 0;
  margin: 0;
  border: 1px solid #d5d9df;
  border-radius: 5px;
  background: #fff;
  color: #172b4d;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.size-options .size-option:hover {
  border-color: #172b4d;
}

.size-options .size-option.selected,
.size-options .size-option[aria-pressed="true"] {
  background: #172b4d;
  border-color: #172b4d;
  color: #fff;
}

.size-options .size-option:focus-visible {
  outline: 2px solid #64748b;
  outline-offset: 3px;
}

.size-message {
  min-height: 18px;
  margin: 8px 0 0;
  color: #c62828;
  font-size: 13px;
}

@media (max-width: 480px) {
  .size-options { gap: 8px; }
  .size-options .size-option {
    width: 46px;
    height: 42px;
  }
}


/* HOMEPAGE NAVBAR STYLE */
.detail-header {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 82px;
  padding: 12px 28px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.detail-header .detail-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.detail-header .detail-logo img {
  display: block;
  width: 112px;
  height: auto;
  max-height: 60px;
  object-fit: contain;
}

.detail-header .detail-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  flex-wrap: wrap;
  gap: 18px;
}

.detail-header .detail-navigation a {
  color: #172b4d;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .35px;
  white-space: nowrap;
  transition: color .2s ease;
}

.detail-header .detail-navigation a:hover {
  color: #a56b36;
}

.detail-header .detail-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.detail-header .detail-header-actions a {
  text-decoration: none;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}

.detail-header .detail-login {
  color: #172b4d;
}

.detail-header .detail-register {
  color: #fff;
  background: #172b4d;
  padding: 10px 12px;
  border-radius: 3px;
}

.detail-header .header-cart {
  color: #172b4d;
}

#cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50%;
  background: #172b4d;
  color: white;
  font-size: 11px;
}

@media (max-width: 1100px) {
  .detail-header {
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 20px;
  }

  .detail-header .detail-navigation {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .detail-header {
    padding: 12px;
    gap: 10px;
  }

  .detail-header .detail-logo img {
    width: 82px;
  }

  .detail-header .detail-header-actions {
    gap: 9px;
  }

  .detail-header .detail-header-actions a {
    font-size: 11px;
  }

  .detail-header .detail-register {
    padding: 8px;
  }

  .detail-header .detail-navigation {
    gap: 12px;
  }

  .detail-header .detail-navigation a {
    font-size: 10px;
  }
}


/* COLOR BUTTON CLICK FIX */
.color-selection,
.color-options {
  position: relative;
  pointer-events: auto;
}

.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  z-index: 1;
}

.color-options .color-option {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.color-options .color-option.selected,
.color-options .color-option[aria-pressed="true"] {
  outline: 2px solid #172b4d;
  outline-offset: 3px;
  border-color: #172b4d;
  font-weight: 700;
}

.color-options .color-option:focus-visible {
  outline: 2px solid #172b4d;
  outline-offset: 3px;
}


/* ACTUAL COLOR BUTTON STYLES */
.color-options .color-option {
  min-width: 78px;
  min-height: 38px;
  padding: 9px 14px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.color-options .color-option[data-color="Blue"] {
  background: #1769d2;
  color: #ffffff;
}

.color-options .color-option[data-color="Black"] {
  background: #111111;
  color: #ffffff;
}

.color-options .color-option[data-color="Light Blue"] {
  background: #add8e6;
  color: #172b4d;
}

.color-options .color-option[data-color="Grey"] {
  background: #808080;
  color: #ffffff;
}

.color-options .color-option[data-color="Dark Blue"] {
  background: #082b63;
  color: #ffffff;
}

.color-options .color-option[data-color="White"] {
  background: #ffffff;
  color: #222222;
  border-color: #cbd5e1;
}

.color-options .color-option[data-color="Beige"] {
  background: #d8c3a5;
  color: #30271c;
}

.color-options .color-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.16);
}

.color-options .color-option.selected,
.color-options .color-option[aria-pressed="true"] {
  outline: 3px solid #e0a526;
  outline-offset: 2px;
  border-color: #e0a526;
  box-shadow: 0 0 0 2px #ffffff inset;
}

.color-options .color-option:focus-visible {
  outline: 3px solid #e0a526;
  outline-offset: 3px;
}



========== CSS FILE: static/css/register.css ==========


body {
    margin: 0;
    padding: 0;

    font-family: Arial, sans-serif;

    background: #f5f7fa;
    color: #172b4d;

    min-height: 100vh;
}


/* =========================
   AUTH CONTAINER
========================= */

.auth-container {
    min-height: 100vh;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 40px 20px;

    box-sizing: border-box;
}


/* =========================
   AUTH BOX
========================= */

.auth-box {
    width: 100%;
    max-width: 430px;

    background: #ffffff;

    padding: 38px 40px;

    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(23, 43, 77, 0.12);

    text-align: center;

    box-sizing: border-box;
}


/* =========================
   LOGO
========================= */

.auth-logo {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 18px;
}


.auth-logo img {
    width: 150px;
    height: 90px;

    object-fit: contain;

    display: block;

    border-radius: 10px;
}


/* =========================
   SUBTITLE
========================= */

.auth-subtitle {
    margin: 0 0 28px;

    font-size: 24px;
    font-weight: 700;

    color: #172b4d;
}


/* =========================
   REGISTER FORM
========================= */

#registerForm {
    width: 100%;

    text-align: left;
}

.auth-status {
    color: #b42318;
    font-size: 14px;
    line-height: 1.4;
}

.auth-status:empty {
    display: none;
}


/* =========================
   LABEL
========================= */

#registerForm label {
    display: block;

    margin: 0 0 8px;

    font-size: 14px;
    font-weight: 600;

    color: #172b4d;
}


/* =========================
   INPUT
========================= */

#registerForm input {
    width: 100%;

    height: 48px;

    padding: 0 15px;

    margin: 0 0 18px;

    border: 1px solid #d9e0e8;

    border-radius: 9px;

    background: #ffffff;

    color: #172b4d;

    font-size: 15px;

    outline: none;

    box-sizing: border-box;

    transition: 0.3s ease;
}


/* Placeholder */

#registerForm input::placeholder {
    color: #9aa5b1;
}


/* Focus */

#registerForm input:focus {
    border-color: #28a9ff;

    box-shadow:
        0 0 0 3px rgba(40, 169, 255, 0.12);
}


/* =========================
   CREATE ACCOUNT BUTTON
========================= */

.auth-btn {
    width: 100%;

    height: 50px;

    margin-top: 5px;

    border: none;

    border-radius: 9px;

    background: #172b4d;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.3s ease;
}


.auth-btn:hover {
    background: #1683ff;

    transform: translateY(-1px);

    box-shadow:
        0 8px 18px rgba(22, 131, 255, 0.22);
}


.auth-btn:active {
    transform: translateY(0);
}


/* =========================
   LOGIN TEXT
========================= */

.account-text {
    margin: 24px 0 16px;

    font-size: 14px;

    color: #667085;
}


.account-text a {
    color: #1683ff;

    font-weight: 700;

    text-decoration: none;

    margin-left: 4px;

    transition: 0.3s ease;
}


.account-text a:hover {
    color: #172b4d;

    text-decoration: underline;
}


/* =========================
   BACK HOME
========================= */

.back-home {
    display: inline-block;

    margin-top: 5px;

    color: #172b4d;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: 0.3s ease;
}


.back-home:hover {
    color: #1683ff;

    transform: translateX(-2px);
}


/* =========================
   RESPONSIVE - 700px
========================= */

@media (max-width: 700px) {

    .auth-container {
        padding: 30px 18px;
    }


    .auth-box {
        max-width: 420px;

        padding: 34px 30px;

        border-radius: 16px;
    }


    .auth-logo img {
        width: 140px;
        height: 85px;
    }


    .auth-subtitle {
        font-size: 22px;

        margin-bottom: 25px;
    }

}


/* =========================
   RESPONSIVE - 450px
========================= */

@media (max-width: 450px) {

    .auth-container {
        padding: 20px 12px;
    }


    .auth-box {
        padding: 28px 20px;

        border-radius: 14px;
    }


    .auth-logo img {
        width: 125px;
        height: 75px;
    }


    .auth-subtitle {
        font-size: 20px;

        margin-bottom: 22px;
    }


    #registerForm input {
        height: 46px;

        font-size: 14px;
    }


    .auth-btn {
        height: 48px;

        font-size: 15px;
    }


    .account-text,
    .back-home {
        font-size: 13px;
    }

}



========== CSS FILE: static/css/sale.css ==========



.hero {
    width: 100%;
    height: 500px;

    position: relative;
    overflow: hidden;

    color: white;
}

.hero-slider {
    width: 100%;
    height: 100%;

    position: relative;
    overflow: hidden;
}

.hero-slide {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;

    padding-left: 90px;

    box-sizing: border-box;

    transform: translateX(100%);

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

.hero-slide.active {
    transform: translateX(0);
}

.hero-slide.previous {
    transform: translateX(-100%);
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    max-width: 650px;
}

.hero .small-heading {
    margin: 0 0 12px;

    color: #28a9ff;

    font-size: 14px;
    font-weight: bold;

    letter-spacing: 2px;
}

.hero h2 {
    margin: 10px 0 18px;

    color: white;

    font-size: 48px;
    line-height: 1.1;
    font-weight: 700;
}

.hero h2 span {
    color: #28a9ff;
}

.features {
    margin: 0 0 28px;

    color: white;

    font-size: 18px;
    line-height: 1.6;
}


/* =========================================================
   SHOP SALE BUTTON
========================================================= */

.shop-btn {
    display: inline-block;

    padding: 13px 28px;

    background: #28a9ff;
    color: white;

    text-decoration: none;

    border-radius: 5px;

    font-size: 15px;
    font-weight: bold;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.shop-btn:hover {
    background: #1683ff;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   SALE PRODUCTS SECTION
========================================================= */

.products-section {
    width: 100%;

    padding: 65px 5%;

    box-sizing: border-box;

    background: #f5f7fa;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.products-section .section-title {
    text-align: center;

    margin-bottom: 5px;
}

.products-section .section-title .small-heading {
    margin: 0 0 8px;

    color: #28a9ff;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 2px;
}

.products-section .section-title h2 {
    margin: 0;

    color: #172b4d;

    font-size: 34px;
    line-height: 1.2;
}

.products-section .section-title h2 span {
    color: #28a9ff;
}

.products-section .section-title > p:last-child {
    max-width: 650px;

    margin: 12px auto 0;

    color: #777;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   PRODUCTS GRID
========================================================= */

.products-grid {
    max-width: 1200px;

    margin: 38px auto 0;

    display: grid;

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

    gap: 22px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
    width: 100%;

    overflow: hidden;

    background: white;

    border: 1px solid #e6e6e6;

    border-radius: 8px;

    box-sizing: border-box;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.13);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image {
    position: relative;

    width: 100%;
    height: 310px;

    overflow: hidden;

    background: #eeeeee;
}

.product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.06);
}


/* =========================================================
   SALE BADGE
========================================================= */

.sale-badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 5;

    padding: 7px 12px;

    background: #e53935;
    color: white;

    border-radius: 4px;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 0.5px;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   DIFFERENT SALE BADGE COLORS
========================================================= */

.product-card:nth-child(2) .sale-badge {
    background: #f57c00;
}

.product-card:nth-child(3) .sale-badge {
    background: #e53935;
}

.product-card:nth-child(4) .sale-badge {
    background: #c62828;
}

.product-card:nth-child(5) .sale-badge {
    background: #172b4d;
}

.product-card:nth-child(6) .sale-badge {
    background: #e53935;
}

.product-card:nth-child(7) .sale-badge {
    background: #7b61ff;
}

.product-card:nth-child(8) .sale-badge {
    background: #c62828;
}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.product-info {
    padding: 18px;
}

.product-info h3 {
    margin: 0 0 7px;

    color: #172b4d;

    font-size: 18px;

    line-height: 1.35;

    min-height: 48px;
}


/* =========================================================
   PRODUCT CATEGORY
========================================================= */

.product-category {
    margin: 0 0 12px;

    color: #777;

    font-size: 13px;
}


/* =========================================================
   RATING
========================================================= */

.rating {
    margin-bottom: 14px;

    color: #f5a623;

    font-size: 14px;

    letter-spacing: 0.5px;
}

.rating span {
    margin-left: 5px;

    color: #777;

    font-size: 12px;

    letter-spacing: 0;
}


/* =========================================================
   PRICE
========================================================= */

.price {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;
}

.old-price {
    color: #999;

    font-size: 14px;

    text-decoration: line-through;
}

.sale-price {
    color: #e53935;

    font-size: 20px;

    font-weight: bold;
}


/* =========================================================
   ADD TO CART BUTTON
========================================================= */

.cart-btn {
    width: 100%;

    padding: 11px 15px;

    border: none;

    border-radius: 5px;

    background: #172b4d;
    color: white;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.cart-btn:hover {
    background: #e53935;

    transform: translateY(-2px);

    box-shadow:
        0 6px 14px rgba(229, 57, 53, 0.25);
}


/* =========================================================
   1200px
========================================================= */

@media (max-width: 1200px) {

    .products-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   1000px
========================================================= */

@media (max-width: 1000px) {

    .hero-slide {
        padding-left: 55px;
    }

    .hero h2 {
        font-size: 42px;
    }

    .products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   700px
========================================================= */

@media (max-width: 700px) {

    .hero {
        height: 480px;
    }

    .hero-slide {
        padding: 30px;

        align-items: center;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero .small-heading {
        font-size: 12px;

        letter-spacing: 1.5px;
    }

    .hero h2 {
        font-size: 35px;
    }

    .features {
        font-size: 15px;

        line-height: 1.5;
    }

    .shop-btn {
        padding: 11px 22px;
    }


    /* Products */

    .products-section {
        padding: 50px 15px;
    }

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

        gap: 14px;

        margin-top: 20px;
    }

    .product-image {
        height: 220px;
    }

    .products-section .section-title h2 {
        font-size: 29px;
    }

    .products-section .section-title > p:last-child {
        font-size: 14px;
    }

}


/* =========================================================
   450px
========================================================= */

@media (max-width: 450px) {

    .hero {
        height: 450px;
    }

    .hero-slide {
        padding: 25px;
    }

    .hero .small-heading {
        font-size: 11px;

        letter-spacing: 1.3px;
    }

    .hero h2 {
        font-size: 29px;
    }

    .features {
        font-size: 14px;
    }

    .shop-btn {
        padding: 10px 18px;

        font-size: 13px;
    }


    /* Products */

    .products-section {
        padding: 40px 12px;
    }

    .products-grid {
        gap: 12px;
    }

    .product-image {
        height: 190px;
    }

    .product-info {
        padding: 10px;
    }

    .product-info h3 {
        font-size: 14px;
    }

    .product-category {
        font-size: 12px;
    }

    .old-price {
        font-size: 13px;
    }

    .sale-price {
        font-size: 18px;
    }

    .rating {
        font-size: 13px;
    }

    .cart-btn {
        padding: 10px;
    }

}



========== CSS FILE: static/css/wishlist.css ==========

:root {
  --wl-navy: #101b2d;
  --wl-gold: #c6a66b;
  --wl-red: #bd334b;
  --wl-text: #263246;
  --wl-muted: #788292;
  --wl-border: #e9e3d8;
}

body[data-wishlist-page="true"] {
  margin: 0;
  color: var(--wl-text);
  background: #f7f6f2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wishlist-header {
  min-height: 76px;
  box-sizing: border-box;
  padding: 15px clamp(16px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background: #fff;
  border-bottom: 1px solid #e6dcc8;
  box-shadow: 0 5px 22px rgba(16, 27, 45, .05);
}

.wishlist-brand {
  color: var(--wl-navy);
  text-decoration: none;
  font-size: clamp(17px, 2vw, 23px);
  font-weight: 850;
  letter-spacing: -.6px;
}

.wishlist-brand:hover {
  color: #96733c;
}

.wishlist-header nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2.5vw, 32px);
}

.wishlist-header nav a {
  position: relative;
  padding: 10px 0;
  color: #596477;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  transition: color .2s ease;
}

.wishlist-header nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
  background: var(--wl-gold);
  transform: scaleX(0);
  transition: transform .2s ease;
}

.wishlist-header nav a:hover,
.wishlist-header nav a[aria-current="page"] {
  color: var(--wl-navy);
}

.wishlist-header nav a:hover::after,
.wishlist-header nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.wishlist-main {
  width: 100%;
  max-width: 1320px;
  min-height: 68vh;
  box-sizing: border-box;
  margin: 0 auto;
  padding: clamp(38px, 6vw, 76px) clamp(14px, 4vw, 40px) 85px;
}

.wishlist-heading {
  margin: 0 auto 42px;
  text-align: center;
}

.wishlist-eyebrow {
  margin-bottom: 15px;
  color: #9a7841;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 3px;
}

.wishlist-heading h1 {
  margin: 0;
  color: var(--wl-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 5.5vw, 58px);
  font-weight: 500;
  letter-spacing: -1.5px;
}

.wishlist-heading h1 span {
  color: var(--wl-red);
  transition: transform .2s ease;
  display: inline-block;
}

.wishlist-heading h1:hover span {
  transform: scale(1.12);
}

.wishlist-heading > p:last-child {
  margin-top: 17px;
  color: var(--wl-muted);
  font-size: 14px;
  line-height: 1.8;
}

.wishlist-message {
  margin: 24px 0 30px;
  color: #606b7b;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
}

.wishlist-shop-link {
  display: inline-block;
  margin-left: 8px;
  color: #98733b;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid var(--wl-gold);
}

.wishlist-page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px 20px;
}

.wishlist-page-grid .api-product-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--wl-border);
  border-radius: 5px;
  box-shadow: 0 5px 18px rgba(16, 27, 45, .04);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.wishlist-page-grid .api-product-card:hover {
  transform: translateY(-5px);
  border-color: #d3bd91;
  box-shadow: 0 17px 35px rgba(16, 27, 45, .11);
}

.wishlist-page-grid .product-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.5;
  overflow: hidden;
  background: #f0eee9;
}

.wishlist-page-grid .product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .5s ease;
}

.wishlist-page-grid .api-product-card:hover .product-image img {
  transform: scale(1.045);
}

.wishlist-page-grid .wishlist-heart {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee8de;
  border-radius: 50%;
  background: #fff;
  color: var(--wl-red);
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 27, 45, .1);
  transition: transform .2s ease, color .2s ease;
}

.wishlist-page-grid .wishlist-heart:hover {
  transform: scale(1.1);
}

.wishlist-page-grid .wishlist-heart.is-saved {
  color: var(--wl-red);
}

.wishlist-page-grid .wishlist-heart:disabled,
.wishlist-page-grid .wishlist-remove-btn:disabled {
  opacity: .55;
  cursor: wait;
}

.wishlist-page-grid .product-info,
.wishlist-page-grid .product-details,
.wishlist-page-grid .product-content {
  padding: 16px 16px 18px;
}

.wishlist-page-grid .api-product-card h2,
.wishlist-page-grid .api-product-card h3,
.wishlist-page-grid .api-product-card .product-name {
  margin: 0 0 10px;
  color: var(--wl-navy);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.5;
}

.wishlist-page-grid .api-product-card p {
  color: var(--wl-muted);
  font-size: 12px;
  line-height: 1.7;
}

.wishlist-page-grid .api-product-card .price,
.wishlist-page-grid .api-product-card .product-price {
  color: var(--wl-navy);
  font-size: 18px;
  font-weight: 850;
}

.wishlist-page-grid .wishlist-remove-btn {
  width: calc(100% - 30px);
  min-height: 43px;
  margin: auto 15px 16px;
  padding: 11px 12px;
  border: 1px solid #d8cfc0;
  border-radius: 3px;
  background: #fff;
  color: #65414a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.wishlist-page-grid .wishlist-remove-btn:hover {
  border-color: var(--wl-navy);
  background: var(--wl-navy);
  color: #fff;
}

.wishlist-footer {
  padding: 29px 20px;
  background: var(--wl-navy);
  color: #eee7da;
  border-top: 2px solid var(--wl-gold);
  text-align: center;
  font-size: 12px;
  letter-spacing: .5px;
  line-height: 1.8;
}

.wishlist-header a:focus-visible,
.wishlist-page-grid button:focus-visible,
.wishlist-shop-link:focus-visible {
  outline: 3px solid var(--wl-gold);
  outline-offset: 4px;
}

@media (max-width: 1050px) {
  .wishlist-page-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .wishlist-header {
    padding-right: 20px;
    padding-left: 20px;
  }

  .wishlist-header nav {
    gap: 15px;
  }

  .wishlist-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 13px;
  }
}

@media (max-width: 480px) {
  .wishlist-header {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 14px 16px;
  }

  .wishlist-brand {
    font-size: 17px;
  }

  .wishlist-header nav {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .wishlist-header nav a {
    font-size: 12px;
  }

  .wishlist-main {
    padding: 35px 12px 52px;
  }

  .wishlist-heading h1 {
    font-size: 37px;
  }

  .wishlist-eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .wishlist-page-grid {
    gap: 14px 10px;
  }

  .wishlist-page-grid .product-info,
  .wishlist-page-grid .product-details,
  .wishlist-page-grid .product-content {
    padding: 12px 10px 14px;
  }

  .wishlist-page-grid .api-product-card h2,
  .wishlist-page-grid .api-product-card h3,
  .wishlist-page-grid .api-product-card .product-name {
    font-size: 13px;
  }

  .wishlist-page-grid .wishlist-heart {
    top: 8px;
    right: 8px;
    width: 35px;
    height: 35px;
    font-size: 20px;
  }

  .wishlist-page-grid .wishlist-remove-btn {
    width: calc(100% - 20px);
    min-height: 39px;
    margin-right: 10px;
    margin-left: 10px;
    padding: 9px 5px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wishlist-page-grid *,
  .wishlist-header *,
  .wishlist-heading * {
    transition: none !important;
  }
}

/* LUXURY WISHLIST - RESPONSIVE FIX */

@media (max-width: 360px) {
  .wishlist-page-grid {
    gap: 13px 8px;
  }

  .wishlist-page-grid .product-info {
    padding-right: 9px;
    padding-left: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wishlist-page-grid *,
  .wishlist-header *,
  .wishlist-heading * {
    transition: none !important;
  }
}

/* PREMIUM BOUTIQUE THEME V2 */

body[data-wishlist-page="true"] {
  background: #f3f0e9;
  color: #172235;
}

.wishlist-header {
  background: linear-gradient(115deg, #0a1423, #17283d 60%, #0b1626);
  border-bottom: 2px solid #c9aa70;
  box-shadow: 0 8px 28px rgba(12, 24, 40, 0.16);
}

.wishlist-brand {
  color: #e8d3a5;
  letter-spacing: 0.2px;
}

.wishlist-header nav a {
  color: #e2e5e9;
  letter-spacing: 1.3px;
}

.wishlist-header nav a:hover,
.wishlist-header nav a[aria-current="page"] {
  color: #e6c88f;
}

.wishlist-main {
  max-width: 1540px;
  padding-top: clamp(50px, 7vw, 88px);
}

.wishlist-heading {
  margin-bottom: 58px;
}

.wishlist-eyebrow {
  color: #9b7946;
  letter-spacing: 4.5px;
}

.wishlist-heading h1 {
  color: #111d30;
  letter-spacing: -1.8px;
}

.wishlist-heading h1 span {
  color: #96394b;
}

.wishlist-heading > p:last-child {
  color: #737b85;
}

/* Product card luxury finish */

.wishlist-page-grid {
  gap: 30px 24px;
}

.wishlist-page-grid .api-product-card {
  background: #fffefa;
  border: 1px solid #e5ddce;
  border-radius: 5px;
  box-shadow: 0 7px 24px rgba(24, 34, 50, 0.055);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.wishlist-page-grid .api-product-card:hover {
  transform: translateY(-6px);
  border-color: #c7a66b;
  box-shadow: 0 19px 40px rgba(18, 30, 47, 0.13);
}

.wishlist-page-grid .product-image {
  aspect-ratio: 4 / 4.8;
  background: linear-gradient(145deg, #f7f4ed, #eae5da);
}

.wishlist-page-grid .product-image img {
  padding: 8px;
  box-sizing: border-box;
  object-fit: contain;
}

.wishlist-page-grid .wishlist-heart {
  width: 42px;
  height: 42px;
  background: #fffefa;
  border: 1px solid #e5d7c0;
  color: #96394b;
  box-shadow: 0 5px 16px rgba(18, 30, 47, 0.1);
}

.wishlist-page-grid .wishlist-heart:hover {
  background: #f9eee9;
}

.wishlist-page-grid .product-info {
  padding: 22px 20px 15px;
}

.wishlist-page-grid .product-info h3 {
  color: #172338;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
}

.wishlist-page-grid .product-category {
  color: #98794a;
  letter-spacing: 1.5px;
}

.wishlist-page-grid .price {
  color: #132139;
  font-size: 21px;
  font-weight: 800;
}

/* Champagne-gold primary button */

.wishlist-page-grid .cart-btn {
  min-height: 48px;
  background: #142238;
  border: 1px solid #142238;
  border-radius: 3px;
  color: #f0d9a7;
  letter-spacing: 1.4px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.wishlist-page-grid .cart-btn:hover:not(:disabled) {
  background: #c7a66b;
  border-color: #c7a66b;
  color: #111d30;
}

.wishlist-page-grid .wishlist-remove-btn {
  background: #fffefa;
  border-color: #e5ddce;
  color: #78545a;
  border-radius: 3px;
}

.wishlist-page-grid .wishlist-remove-btn:hover {
  background: #fbf0ef;
  border-color: #96394b;
  color: #96394b;
}

.wishlist-message {
  color: #667181;
}

.wishlist-shop-link {
  color: #98723a;
  border-color: #c7a66b;
}

.wishlist-footer {
  background: linear-gradient(115deg, #0a1423, #17283d, #0a1423);
  border-top: 2px solid #c7a66b;
  color: #e7d8b9;
  padding: 36px 20px;
  letter-spacing: 1px;
}

.wishlist-header a:focus-visible,
.wishlist-page-grid button:focus-visible,
.wishlist-shop-link:focus-visible {
  outline: 2px solid #c7a66b;
  outline-offset: 4px;
}

/* Tablet and mobile refinement */

@media (max-width: 1050px) {
  .wishlist-page-grid {
    gap: 24px 16px;
  }
}

@media (max-width: 700px) {
  .wishlist-header {
    padding: 16px 18px;
  }

  .wishlist-brand {
    font-size: 18px;
  }

  .wishlist-main {
    padding: 44px 14px 58px;
  }

  .wishlist-heading {
    margin-bottom: 36px;
  }

  .wishlist-heading h1 {
    font-size: clamp(38px, 10vw, 48px);
  }

  .wishlist-eyebrow {
    font-size: 9px;
    letter-spacing: 3px;
  }

  .wishlist-page-grid {
    gap: 18px 11px;
  }

  .wishlist-page-grid .product-image {
    aspect-ratio: 4 / 4.6;
  }

  .wishlist-page-grid .product-info {
    padding: 15px 12px 11px;
  }

  .wishlist-page-grid .product-info h3 {
    font-size: 15px;
  }

  .wishlist-page-grid .price {
    font-size: 18px;
  }

  .wishlist-page-grid .cart-btn {
    min-height: 43px;
  }
}

/* NAVBAR RESTORE — LIGHT PREMIUM THEME */

.wishlist-header {
  background: #ffffff;
  border-bottom: 1px solid #e8dfd0;
  box-shadow: 0 4px 18px rgba(23, 34, 53, 0.06);
}

.wishlist-brand {
  color: #172b4d;
}

.wishlist-header nav a {
  color: #172b4d;
}

.wishlist-header nav a:hover,
.wishlist-header nav a[aria-current="page"] {
  color: #a47d3c;
}

.wishlist-header nav a[aria-current="page"]::after {
  background: #c5a66d;
}

/* COMPACT PRODUCT CARDS */

.wishlist-page-grid {
  gap: 22px 20px;
}

.wishlist-page-grid .product-image {
  aspect-ratio: 4 / 3.8;
}

.wishlist-page-grid .product-info {
  padding: 14px 16px 10px;
}

.wishlist-page-grid .product-info h3 {
  margin-bottom: 5px;
  line-height: 1.35;
}

.wishlist-page-grid .product-category {
  margin-bottom: 7px;
}

.wishlist-page-grid .price {
  font-size: 18px;
}

.wishlist-page-grid .cart-btn {
  min-height: 40px;
  margin-top: 5px;
  margin-bottom: 7px;
  padding: 9px 12px;
}

.wishlist-page-grid .wishlist-remove-btn {
  min-height: 33px;
  margin-bottom: 12px;
  padding: 7px 10px;
}

@media (max-width: 700px) {
  .wishlist-page-grid {
    gap: 15px 10px;
  }

  .wishlist-page-grid .product-image {
    aspect-ratio: 4 / 4.1;
  }

  .wishlist-page-grid .product-info {
    padding: 11px 10px 8px;
  }

  .wishlist-page-grid .cart-btn {
    min-height: 37px;
  }
}

/* REDUCE GAP BETWEEN WISHLIST HEADING AND PRODUCTS */

.wishlist-heading {
  margin-bottom: 18px;
}

.wishlist-message {
  margin-top: 8px;
  margin-bottom: 16px;
}

.wishlist-page-grid {
  margin-top: 0;
}

@media (max-width: 700px) {
  .wishlist-heading {
    margin-bottom: 14px;
  }

  .wishlist-message {
    margin-top: 6px;
    margin-bottom: 12px;
  }
}

/* EXTRA COMPACT WISHLIST PRODUCT CARDS */

.wishlist-page-grid .product-image {
  aspect-ratio: 1 / 1;
}

.wishlist-page-grid .product-info {
  padding: 10px 13px 7px;
}

.wishlist-page-grid .product-info h3 {
  margin-bottom: 3px;
  line-height: 1.25;
}

.wishlist-page-grid .product-category {
  min-height: 0;
  margin-bottom: 4px;
  line-height: 1.3;
}

.wishlist-page-grid .price {
  padding-top: 0;
  font-size: 17px;
  line-height: 1.3;
}

.wishlist-page-grid .cart-btn {
  min-height: 34px;
  margin-top: 3px;
  margin-bottom: 5px;
  padding: 7px 10px;
  font-size: 9px;
}

.wishlist-page-grid .wishlist-remove-btn {
  min-height: 29px;
  margin-bottom: 9px;
  padding: 5px 8px;
  font-size: 9px;
}

@media (max-width: 700px) {
  .wishlist-page-grid .product-image {
    aspect-ratio: 1 / 1.05;
  }

  .wishlist-page-grid .product-info {
    padding: 9px 9px 6px;
  }

  .wishlist-page-grid .price {
    font-size: 16px;
  }

  .wishlist-page-grid .cart-btn {
    min-height: 32px;
  }

  .wishlist-page-grid .wishlist-remove-btn {
    min-height: 28px;
    margin-bottom: 7px;
  }
}



========== CSS FILE: static/css/women.css ==========



.hero {
    width: 100%;
    height: 500px;

    position: relative;

    overflow: hidden;

    color: white;
}


.hero-slider {
    width: 100%;
    height: 100%;

    position: relative;

    overflow: hidden;
}


.hero-slide {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;

    padding-left: 90px;

    box-sizing: border-box;

    transform: translateX(100%);

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


.hero-slide.active {
    transform: translateX(0);
}


.hero-slide.previous {
    transform: translateX(-100%);
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    max-width: 620px;
}


.small-heading {
    margin: 0 0 12px;

    color: white;

    font-size: 14px;
    font-weight: bold;

    letter-spacing: 2px;
}


.hero h2 {
    margin: 10px 0 18px;

    color: white;

    font-size: 48px;

    line-height: 1.1;
}


.hero h2 span {
    color: #28a9ff;
}


.features {
    margin: 0 0 28px;

    color: white;

    font-size: 18px;
}


.shop-btn {
    display: inline-block;

    padding: 13px 28px;

    background: #28a9ff;

    color: white;

    text-decoration: none;

    border-radius: 5px;

    font-size: 15px;
    font-weight: bold;

    transition: 0.3s ease;
}


.shop-btn:hover {
    background: #1683ff;

    transform: translateY(-2px);
}


/* =========================================================
   WOMEN PRODUCTS SECTION
========================================================= */

.products-section {
    width: 100%;

    padding: 60px 5%;

    box-sizing: border-box;

    background: #f5f7fa;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.products-section .section-title {
    text-align: center;

    margin-bottom: 5px;
}


.products-section .section-title h2 {
    margin: 0;

    color: #172b4d;

    font-size: 32px;

    line-height: 1.2;
}


.products-section .section-title p {
    margin: 12px 0 0;

    color: #777;

    font-size: 15px;
}


/* =========================================================
   BLUE LINE
========================================================= */

.products-section .blue-line {
    width: 55px;
    height: 3px;

    margin: 12px auto 0;

    background: #28a9ff;

    border-radius: 3px;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.products {
    max-width: 1200px;

    margin: 35px auto 0;

    display: grid;

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

    gap: 22px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
    width: 100%;

    overflow: hidden;

    background: white;

    border: 1px solid #e6e6e6;

    border-radius: 8px;

    box-sizing: border-box;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.product-card:hover {
    transform: translateY(-5px);

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


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image {
    position: relative;

    width: 100%;
    height: 310px;

    overflow: hidden;

    background: #eeeeee;
}


.product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.45s ease;
}


.product-card:hover .product-image img {
    transform: scale(1.05);
}


/* =========================================================
   PRODUCT BADGE
========================================================= */

.badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 5;

    padding: 6px 11px;

    border-radius: 4px;

    background: #28a9ff;

    color: white;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 0.4px;
}


/* =========================================================
   DIFFERENT BADGE COLORS
========================================================= */

/* Best Seller */

.product-card:nth-child(2) .badge,
.product-card:nth-child(9) .badge,
.product-card:nth-child(15) .badge,
.product-card:nth-child(21) .badge,
.product-card:nth-child(27) .badge {
    background: #172b4d;
}


/* Trending */

.product-card:nth-child(3) .badge,
.product-card:nth-child(8) .badge,
.product-card:nth-child(14) .badge,
.product-card:nth-child(20) .badge,
.product-card:nth-child(25) .badge {
    background: #7b61ff;
}


/* Hot */

.product-card:nth-child(5) .badge,
.product-card:nth-child(11) .badge,
.product-card:nth-child(17) .badge,
.product-card:nth-child(23) .badge,
.product-card:nth-child(28) .badge {
    background: #e53935;
}


/* Sale */

.product-card:nth-child(6) .badge,
.product-card:nth-child(12) .badge,
.product-card:nth-child(18) .badge,
.product-card:nth-child(24) .badge,
.product-card:nth-child(29) .badge {
    background: #e53935;
}


/* Premium */

.product-card:nth-child(30) .badge {
    background: #172b4d;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.product-info {
    padding: 18px;
}


.product-info h3 {
    margin: 0 0 15px;

    color: #172b4d;

    font-size: 17px;

    line-height: 1.35;

    min-height: 46px;
}


/* =========================================================
   PRICE
========================================================= */

.price {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 12px;
}


.price b {
    color: #172b4d;

    font-size: 19px;
}


.price del {
    color: #999;

    font-size: 13px;
}


.price span {
    color: #159957;

    font-size: 11px;
    font-weight: bold;
}


/* =========================================================
   RATING
========================================================= */

.rating {
    margin-bottom: 16px;

    color: #f5a623;

    font-size: 14px;
}


.rating small {
    color: #777;

    font-size: 12px;

    margin-left: 4px;
}


/* =========================================================
   ADD TO CART BUTTON
========================================================= */

.product-info button {
    width: 100%;

    padding: 11px 15px;

    border: none;

    border-radius: 5px;

    background: #172b4d;

    color: white;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;

    transition: 0.3s ease;
}


.product-info button:hover {
    background: #28a9ff;

    transform: translateY(-1px);
}


/* =========================================================
   1200px
========================================================= */

@media (max-width: 1200px) {

    .products {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   1000px
========================================================= */

@media (max-width: 1000px) {

    .hero-slide {
        padding-left: 55px;
    }


    .hero h2 {
        font-size: 42px;
    }


    .products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   700px
========================================================= */

@media (max-width: 700px) {

    .hero {
        height: 480px;
    }


    .hero-slide {
        padding: 30px;

        align-items: center;
    }


    .hero-content {
        max-width: 100%;
    }


    .small-heading {
        font-size: 12px;
    }


    .hero h2 {
        font-size: 35px;
    }


    .features {
        font-size: 15px;
    }


    .shop-btn {
        padding: 11px 22px;
    }


    /* Products */

    .products-section {
        padding: 45px 15px;
    }


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

        gap: 14px;

        margin-top: 20px;
    }


    .product-image {
        height: 220px;
    }


    /* Section Title */

    .products-section .section-title h2 {
        font-size: 28px;
    }

}


/* =========================================================
   450px
========================================================= */

@media (max-width: 450px) {

    .hero {
        height: 450px;
    }


    .hero-slide {
        padding: 25px;
    }


    .small-heading {
        font-size: 11px;

        letter-spacing: 1.5px;
    }


    .hero h2 {
        font-size: 29px;
    }


    .features {
        font-size: 14px;
    }


    .shop-btn {
        padding: 10px 18px;

        font-size: 13px;
    }


    .products-section {
        padding: 40px 12px;
    }


    .products {
        gap: 12px;
    }


    .product-image {
        height: 190px;
    }


    .product-info {
        padding: 10px;
    }


    .product-info h3 {
        font-size: 14px;
    }


    .price b {
        font-size: 18px;
    }


    .rating {
        font-size: 13px;
    }


    .product-info button {
        padding: 10px;
    }

}



========== INLINE CSS: templates/about.html ==========


--- STYLE BLOCK 1 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 2 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 3 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/admin-login.html ==========


--- STYLE BLOCK 1 ---


        .admin-badge {
            display: inline-block;
            margin: 0 0 14px;
            padding: 6px 14px;
            border-radius: 20px;
            background: #172b4d;
            color: #fff;
            font-size: 11px;
            font-weight: bold;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .auth-box {
            max-width: 440px;
        }

        .auth-logo img {
            width: 150px;
            height: auto;
        }

        .auth-title {
            margin: 0 0 6px;
            color: #172b4d;
            font-size: 26px;
            font-weight: 800;
            letter-spacing: -0.02em;
        }

        .auth-subtitle {
            margin: 0 0 26px;
            color: #64717c;
            font-size: 14px;
            line-height: 1.6;
        }

        #adminLoginForm {
            text-align: left;
        }

        .auth-status {
            min-height: 20px;
            margin: 0 0 14px;
            color: #23764b;
            font-size: 13px;
            line-height: 1.5;
        }

        .auth-status.error {
            color: #b42318;
        }

        label {
            display: block;
            margin-bottom: 7px;
            color: #263541;
            font-size: 13px;
            font-weight: bold;
        }

        input {
            width: 100%;
            min-height: 48px;
            margin-bottom: 18px;
            padding: 12px 14px;
            border: 1px solid #d7dfe4;
            border-radius: 8px;
            outline: none;
            background: #fff;
            color: #17212b;
            font: inherit;
            font-size: 14px;
            box-sizing: border-box;
            transition: border-color 150ms ease, box-shadow 150ms ease;
        }

        input:focus {
            border-color: #3c7188;
            box-shadow: 0 0 0 3px rgba(60, 113, 136, 0.13);
        }

        .auth-btn {
            width: 100%;
            min-height: 48px;
            border: 0;
            border-radius: 8px;
            background: #1683ff;
            color: #fff;
            cursor: pointer;
            font: inherit;
            font-size: 15px;
            font-weight: bold;
            transition: background 150ms ease, transform 150ms ease;
        }

        .auth-btn:hover:not(:disabled) {
            background: #006fe6;
            transform: translateY(-1px);
        }

        .auth-btn:disabled {
            cursor: wait;
            opacity: 0.7;
        }

        .back-home {
            display: inline-block;
            margin-top: 22px;
            color: #1683ff;
            font-size: 13px;
            text-decoration: none;
        }

        .back-home:hover {
            text-decoration: underline;
        }

        .security-note {
            margin: 18px 0 0;
            padding-top: 16px;
            border-top: 1px solid #edf0f2;
            color: #84909a;
            font-size: 12px;
            line-height: 1.6;
            text-align: left;
        }

    


========== INLINE CSS: templates/cart.html ==========


--- STYLE BLOCK 1 ---

    :root { color-scheme: light; font-family: Arial, sans-serif; color: #17212b; }
    * { box-sizing: border-box; }
    body { margin: 0; background: #f5f7f8; }
    header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px max(24px, calc((100% - 1000px) / 2)); background: #173b4b; }
    header a { color: #fff; text-decoration: none; }
    header > a { font-size: 20px; font-weight: 700; }
    .header-right { display: flex; align-items: center; flex-wrap: nowrap; gap: 14px; }
    .header-right a, .header-right button, .account-user-name { color: #fff; font: inherit; }
    .account-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .header-right button { border: 0; background: transparent; cursor: pointer; }
    main { width: min(1000px, calc(100% - 32px)); margin: 44px auto; }
    h1 { margin-top: 0; }
    #cart-items { display: grid; gap: 14px; }
    .cart-item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px; border-radius: 12px; background: #fff; }
    .cart-item img { width: 84px; height: 92px; object-fit: cover; border-radius: 8px; }
    .cart-item h2 { margin: 0 0 6px; font-size: 17px; }
    .cart-item p { margin: 0 0 8px; color: #64717c; }
    .cart-item-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .cart-item-actions input { width: 56px; min-width: 0; padding: 8px; }
    .cart-item button, #clear-cart { min-height: 36px; padding: 8px 12px; border: 0; border-radius: 6px; cursor: pointer; }
    .cart-item button { background: #edf1f2; }
    .cart-item .remove { color: #a12622; }
    .cart-item-actions .quantity-change { min-width: 34px; padding: 0; font-size: 18px; }
    .cart-item-actions button:disabled { cursor: not-allowed; opacity: .5; }
    .cart-item-total { margin-top: 8px !important; font-weight: 700; }
    .cart-item-stock { font-size: 12px; }
    .cart-item-stock:empty { display: none; }
    .cart-summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; padding: 18px; background: #fff; border-radius: 12px; }
    #checkout-link, #clear-cart { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 7px; background: #173b4b; color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
    #checkout-link.is-disabled { pointer-events: none; opacity: .55; }
    #clear-cart { background: #edf1f2; color: #17212b; }
    #cart-status { min-height: 24px; }
    .api-products-status-error { color: #a12622; }
    @media (max-width: 560px) {
      main { margin-top: 28px; }
      header { padding: 16px; }
      .header-right { gap: 9px; font-size: 14px; }
      .cart-item { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
      .cart-item img { width: 64px; height: 76px; }
      .cart-item-actions { grid-column: 2; }
      .cart-item-actions { gap: 6px; }
      .cart-summary { align-items: stretch; flex-direction: column; }
      #checkout-link, #clear-cart { width: 100%; }
    }
  
    /* Fix account greeting and dropdown text visibility */
    .customer-account-greeting,
    .customer-account-greeting small,
    .customer-account-greeting strong,
    .customer-account-trigger,
    .account-user-name {
      color: #172b4d !important;
    }

    .customer-account-dropdown,
    .customer-account-dropdown a,
    .customer-account-item,
    .customer-account-heading,
    .customer-account-heading strong,
    .customer-account-heading span {
      color: #172b4d !important;
    }
  


/* Account dropdown: white background, black text */
.customer-account-trigger {
  background: #ffffff !important;
  color: #000000 !important;
}

.customer-account-greeting,
.customer-account-greeting small,
.customer-account-greeting strong,
.customer-account-arrow,
.account-user-name {
  color: #000000 !important;
}

.customer-account-dropdown {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.customer-account-dropdown a,
.customer-account-item,
.customer-account-heading,
.customer-account-heading strong,
.customer-account-heading span,
.customer-account-logout {
  color: #000000 !important;
}

.customer-account-item:hover,
.customer-account-logout:hover {
  background: #f3f4f6 !important;
  color: #000000 !important;
}



--- STYLE BLOCK 2 ---

.checkout-progress a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.checkout-progress a:hover {
  text-decoration: underline;
}


--- STYLE BLOCK 3 ---


    /* CART PAGE: USE SHARED HOMEPAGE NAVBAR */
    body > header {
      min-height: 82px !important;
      width: 100% !important;
      padding: 12px 3% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 22px !important;
      box-sizing: border-box !important;
      background: #fff !important;
      color: #172b4d !important;
      box-shadow: 0 3px 20px rgba(0,0,0,.045) !important;
      border-bottom: 1px solid #eeeeea !important;
    }

    body > header a {
      color: #172b4d !important;
    }

    body > header .pj-brand img,
    body > header .logo img {
      width: 125px !important;
      max-height: 62px !important;
      height: auto !important;
      object-fit: contain !important;
    }

    body > header nav {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: clamp(8px, 1.2vw, 20px) !important;
      flex-wrap: nowrap !important;
      white-space: nowrap !important;
    }

    body > header nav a {
      color: #242424 !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      letter-spacing: .3px !important;
      white-space: nowrap !important;
    }

    body > header .header-right {
      display: flex !important;
      align-items: center !important;
      flex-wrap: nowrap !important;
      gap: 9px !important;
    }

    body > header .search,
    body > header .pj-search {
      width: 180px !important;
      min-width: 0 !important;
      flex: 0 1 180px !important;
    }

    body > header .customer-account-trigger {
      background: #173b4b !important;
      color: #fff !important;
    }

    body > header .customer-account-trigger * {
      color: #fff !important;
    }

    @media (max-width: 1050px) {
      body > header {
        gap: 10px !important;
        padding-left: 2% !important;
        padding-right: 2% !important;
      }

      body > header nav {
        gap: 8px !important;
      }

      body > header nav a {
        font-size: 10px !important;
      }

      body > header .search,
      body > header .pj-search {
        width: 145px !important;
        flex-basis: 145px !important;
      }
    }
  


--- STYLE BLOCK 4 ---

:root {
  --luxury-ink: #132744;
  --luxury-navy: #0b192c;
  --luxury-gold: #b9975b;
  --luxury-muted: #737d8c;
  --luxury-line: #e6e9ef;
}

body {
  background:
    radial-gradient(ellipse at 8% 0%, #e8edf5 0, transparent 38%),
    #f4f5f8 !important;
  color: #202938 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

header {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid #e5e8ee !important;
  box-shadow: 0 5px 28px #1327440b !important;
  backdrop-filter: blur(12px);
}

main {
  width: min(1180px, calc(100% - 40px)) !important;
  margin: 42px auto 70px !important;
  padding: 38px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #e9ebf0 !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 75px #1327440c, 0 2px 8px #13274405 !important;
  position: relative;
  overflow: hidden;
}

main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #132744, #b9975b, #e3d1a9, #132744);
}

main h1 {
  color: var(--luxury-ink) !important;
  font-size: clamp(30px, 4vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  line-height: 1.15 !important;
  margin: 0 0 12px !important;
}

#cart-status {
  color: var(--luxury-muted);
  font-size: 14px;
  margin: 12px 0 20px;
}

#cart-items {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.cart-item {
  display: grid !important;
  grid-template-columns: 158px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 26px !important;
  padding: 23px !important;
  background: linear-gradient(135deg, #fff 0%, #fdfdfe 100%) !important;
  border: 1px solid var(--luxury-line) !important;
  border-radius: 17px !important;
  box-shadow: 0 5px 18px #13274406 !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

.cart-item:hover {
  border-color: #d5c19c !important;
  box-shadow: 0 16px 35px #13274412 !important;
  transform: translateY(-3px);
}

.cart-item > img {
  width: 158px !important;
  height: 175px !important;
  object-fit: contain !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  background: linear-gradient(145deg, #f7f7f8, #eef0f4) !important;
  border: 1px solid #f0f1f4 !important;
  border-radius: 13px !important;
}

.cart-item h2 {
  color: var(--luxury-ink) !important;
  font-size: 20px !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
  letter-spacing: -.3px;
  margin: 0 0 9px !important;
}

.cart-item p {
  color: var(--luxury-muted);
  font-size: 13px;
  line-height: 1.65;
  margin: 5px 0;
}

.cart-item strong {
  display: inline-block;
  margin-top: 9px;
  color: var(--luxury-ink) !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  letter-spacing: -.4px;
}

.cart-item .cart-item-total {
  color: #344762 !important;
  font-size: 14px !important;
  font-weight: 650;
}

.cart-item .cart-item-stock {
  color: #238052 !important;
  font-size: 12px !important;
}

.cart-item-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 17px !important;
}

.cart-item-actions button,
.cart-variant-editor button {
  min-height: 41px;
  padding: 10px 16px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, background .2s ease, box-shadow .2s ease;
}

.cart-item-actions button:hover:not(:disabled),
.cart-variant-editor button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.cart-item-actions .quantity-change {
  min-width: 41px;
  padding: 8px 12px;
  background: #f1f3f7;
  color: var(--luxury-ink);
  border: 1px solid #e0e5ed;
  font-size: 19px;
}

.cart-item-actions .quantity-change:hover:not(:disabled) {
  background: var(--luxury-ink);
  color: #fff;
}

.cart-item-actions input[type="number"] {
  width: 58px;
  min-height: 41px;
  padding: 7px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid #dfe3eb;
  border-radius: 8px;
  background: #fff;
  color: var(--luxury-ink);
  font-weight: 700;
}

.cart-item-actions .edit-variant {
  background: var(--luxury-ink) !important;
  color: #fff !important;
  border: 1px solid var(--luxury-ink) !important;
  box-shadow: 0 4px 10px #13274415;
}

.cart-item-actions .edit-variant:hover {
  background: #29466f !important;
  box-shadow: 0 6px 15px #13274420;
}

.cart-item-actions .remove {
  background: #fff !important;
  color: #a33c42 !important;
  border: 1px solid #ecd7d9 !important;
}

.cart-item-actions .remove:hover {
  background: #fff1f1 !important;
}

.cart-variant-editor {
  background: #f8f9fc !important;
  border: 1px solid #e4e7ee !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px 2px #13274404;
}

.cart-variant-editor select {
  min-height: 41px;
  max-width: 100%;
  padding: 9px 12px !important;
  background: #fff;
  color: var(--luxury-ink);
  border: 1px solid #dce1e9;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
}

.cart-variant-editor button:first-of-type {
  background: #19734b !important;
  color: #fff !important;
  border: 1px solid #19734b !important;
}

.cart-variant-editor button:first-of-type:hover {
  background: #125b3b !important;
}

.cart-variant-editor button:last-of-type {
  background: #fff !important;
  color: #344054 !important;
  border: 1px solid #d5dae3 !important;
}

.cart-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-top: 30px !important;
  padding: 27px !important;
  background: linear-gradient(120deg, #f7f8fb, #eef1f7) !important;
  border: 1px solid #e0e5ed !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px #13274406;
}

#cart-total {
  color: var(--luxury-ink) !important;
  font-size: clamp(22px, 3vw, 29px) !important;
  font-weight: 800 !important;
  letter-spacing: -.6px;
}

#checkout-link,
#clear-cart {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 49px !important;
  padding: 13px 23px !important;
  border-radius: 9px !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}

#checkout-link {
  background: linear-gradient(135deg, #172e50, #0b192c) !important;
  color: #fff !important;
  border: 1px solid #132744 !important;
  box-shadow: 0 6px 15px #13274420;
}

#checkout-link:hover:not(.is-disabled) {
  background: linear-gradient(135deg, #29466f, #172e50) !important;
  box-shadow: 0 9px 22px #13274430;
  transform: translateY(-2px);
}

#checkout-link.is-disabled {
  opacity: .45;
  pointer-events: none;
  box-shadow: none;
}

#clear-cart {
  background: #fff !important;
  color: var(--luxury-ink) !important;
  border: 1px solid #d5dce6 !important;
}

#clear-cart:hover {
  background: #edf0f5 !important;
  transform: translateY(-1px);
}

button:disabled {
  opacity: .45;
  cursor: not-allowed !important;
}

#cart-link,
#my-orders-dock-link {
  border-radius: 8px !important;
  font-weight: 650 !important;
}

@media (max-width: 700px) {
  main {
    width: calc(100% - 20px) !important;
    margin: 18px auto 32px !important;
    padding: 22px 13px !important;
    border-radius: 15px !important;
  }

  main h1 {
    font-size: 29px !important;
    letter-spacing: -.7px !important;
  }

  .cart-item {
    grid-template-columns: 95px minmax(0, 1fr) !important;
    gap: 13px !important;
    padding: 13px !important;
    border-radius: 13px !important;
  }

  .cart-item > img {
    width: 95px !important;
    height: 122px !important;
  }

  .cart-item h2 {
    font-size: 15px !important;
  }

  .cart-item strong {
    font-size: 19px !important;
  }

  .cart-item-actions {
    grid-column: 1 / -1;
    gap: 7px !important;
    margin-top: 13px !important;
  }

  .cart-item-actions button,
  .cart-variant-editor button {
    min-height: 38px;
    padding: 9px 11px;
    font-size: 12px;
  }

  .cart-variant-editor {
    width: 100%;
    box-sizing: border-box;
  }

  .cart-variant-editor select {
    flex: 1 1 125px;
  }

  .cart-summary {
    align-items: stretch !important;
    flex-direction: column !important;
    padding: 18px !important;
    gap: 12px !important;
  }

  #checkout-link,
  #clear-cart {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-item,
  .cart-item-actions button,
  #checkout-link,
  #clear-cart {
    transition: none !important;
  }
}


--- STYLE BLOCK 5 ---

/* Bigger product images in cart */
.cart-item img,
.cart-item-image,
.cart-product-image {
  width: 150px !important;
  height: 170px !important;
  min-width: 150px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 12px !important;
  background: #f7f7f5 !important;
}

.cart-item {
  grid-template-columns: 170px minmax(0, 1fr) !important;
  align-items: center !important;
}

@media (max-width: 600px) {
  .cart-item img,
  .cart-item-image,
  .cart-product-image {
    width: 110px !important;
    height: 130px !important;
    min-width: 110px !important;
  }

  .cart-item {
    grid-template-columns: 120px minmax(0, 1fr) !important;
  }
}


--- STYLE BLOCK 6 ---

/* Final cart product image size override */
#cart-items .cart-item {
  grid-template-columns: 210px minmax(0, 1fr) auto !important;
  gap: 22px !important;
}

#cart-items .cart-item img {
  display: block !important;
  width: 200px !important;
  height: 220px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  max-height: 220px !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  background: #f7f5f0 !important;
  border-radius: 12px !important;
}

@media (max-width: 700px) {
  #cart-items .cart-item {
    grid-template-columns: 125px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #cart-items .cart-item img {
    width: 120px !important;
    height: 150px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    max-height: 150px !important;
  }
}


--- STYLE BLOCK 7 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 8 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 9 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/category.html ==========


--- STYLE BLOCK 1 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 2 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 3 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/checkout.html ==========


--- STYLE BLOCK 1 ---

.checkout-progress a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.checkout-progress a:hover {
  text-decoration: underline;
}


--- STYLE BLOCK 2 ---

.checkout-progress a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.checkout-progress a:hover {
  text-decoration: underline;
}


--- STYLE BLOCK 3 ---


/* Shared customer dropdown visibility fix */
/* Fix account greeting and dropdown text visibility */
    .customer-account-greeting,
    .customer-account-greeting small,
    .customer-account-greeting strong,
    .customer-account-trigger,
    .account-user-name {
      color: #172b4d !important;
    }

    .customer-account-dropdown,
    .customer-account-dropdown a,
    .customer-account-item,
    .customer-account-heading,
    .customer-account-heading strong,
    .customer-account-heading span {
      color: #172b4d !important;
    }
  


/* Account dropdown: white background, black text */
.customer-account-trigger {
  background: #ffffff !important;
  color: #000000 !important;
}

.customer-account-greeting,
.customer-account-greeting small,
.customer-account-greeting strong,
.customer-account-arrow,
.account-user-name {
  color: #000000 !important;
}

.customer-account-dropdown {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.customer-account-dropdown a,
.customer-account-item,
.customer-account-heading,
.customer-account-heading strong,
.customer-account-heading span,
.customer-account-logout {
  color: #000000 !important;
}

.customer-account-item:hover,
.customer-account-logout:hover {
  background: #f3f4f6 !important;
  color: #000000 !important;
}

/* Keep account menu above checkout content */
body > header {
  position: relative;
  z-index: 10000;
  overflow: visible;
}

body > header .header-right,
body > header .customer-account-menu {
  position: relative;
  overflow: visible;
  z-index: 10001;
}

body > header .customer-account-dropdown:not([hidden]) {
  display: block;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10002;
  min-width: 240px;
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  color: #000;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

body > header .customer-account-dropdown[hidden] {
  display: none !important;
}

body > header .customer-account-dropdown .customer-account-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  color: #000 !important;
  background: #fff;
}

body > header .customer-account-dropdown .customer-account-item:hover {
  background: #ffe5e5 !important;
  color: #000 !important;
}



--- STYLE BLOCK 4 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 5 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* MOBILE NAVIGATION FIX - 2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 6 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/gift-cards.html ==========


--- STYLE BLOCK 1 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 2 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 3 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/kids.html ==========


--- STYLE BLOCK 1 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 2 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* MOBILE NAVIGATION FIX - 2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 3 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/men.html ==========


--- STYLE BLOCK 1 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 2 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* MOBILE NAVIGATION FIX - 2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 3 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/my-coupons.html ==========


--- STYLE BLOCK 1 ---

    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: #f5f7fa;
      color: #172b4d;
      font-family: Arial, Helvetica, sans-serif;
    }
    header {
      background: #fff;
      padding: 18px 6%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      box-shadow: 0 2px 10px #172b4d12;
    }
    .brand { font-size: 20px; font-weight: 800; color: #172b4d; }
    header a { color: #172b4d; text-decoration: none; font-weight: 600; }
    .container { max-width: 1100px; margin: 35px auto; padding: 0 18px; }
    .breadcrumb { color: #738096; font-size: 14px; margin-bottom: 22px; }
    .breadcrumb a { color: #52647e; text-decoration: none; }
    .page-heading { margin-bottom: 24px; }
    h1 { margin: 0 0 8px; font-size: 30px; }
    .subtitle { color: #718096; margin: 0; line-height: 1.6; }
    .hero {
      padding: 28px;
      border-radius: 16px;
      background: linear-gradient(120deg, #172b4d, #294f79);
      color: white;
      margin-bottom: 28px;
    }
    .hero strong { display: block; font-size: 23px; margin-bottom: 8px; }
    .hero p { margin: 0; color: #e4ebf5; line-height: 1.6; }
    .toolbar {
      display: flex; justify-content: space-between; align-items: center;
      gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
    }
    .toolbar h2 { font-size: 21px; margin: 0; }
    .refresh {
      background: #fff; color: #172b4d; border: 1px solid #dce3ec;
      padding: 10px 15px; border-radius: 8px; cursor: pointer;
    }
    .coupon-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }
    .coupon {
      display: grid; grid-template-columns: 105px 1fr;
      background: white; border: 1px solid #e4e9f0;
      border-radius: 14px; overflow: hidden; min-width: 0;
      box-shadow: 0 4px 16px #172b4d08;
    }
    .discount {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; text-align: center;
      background: #eaf1fa; color: #173b66; padding: 14px 8px;
      border-right: 1px dashed #b8c8dd;
    }
    .discount strong { font-size: 24px; line-height: 1.2; }
    .discount span { font-size: 12px; margin-top: 6px; }
    .coupon-body { padding: 18px; min-width: 0; }
    .coupon-body h3 { margin: 0 0 8px; font-size: 17px; overflow-wrap: anywhere; }
    .coupon-body p { color: #718096; font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
    .coupon-meta { font-size: 12px; color: #718096; margin-bottom: 14px; }
    .coupon-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
    .code {
      background: #f7f9fc; border: 1px dashed #aab9cc;
      padding: 9px 10px; font-size: 13px; font-weight: 800;
      letter-spacing: .6px; border-radius: 6px; overflow-wrap: anywhere;
    }
    .copy {
      background: #172b4d; color: white; border: 0;
      border-radius: 6px; padding: 10px 13px; cursor: pointer;
      font-weight: 700;
    }
    .copy:hover { background: #294f79; }
    .state {
      background: white; border-radius: 12px; padding: 30px 18px;
      text-align: center; color: #718096; line-height: 1.6;
      border: 1px solid #e4e9f0;
    }
    .state strong { display: block; color: #172b4d; margin-bottom: 6px; }
    footer { text-align: center; padding: 25px 15px; color: #7a8799; font-size: 13px; }
    @media (max-width: 650px) {
      header { padding: 16px; }
      .brand { font-size: 16px; }
      .container { margin: 24px auto; }
      h1 { font-size: 25px; }
      .coupon-grid { grid-template-columns: 1fr; }
      .coupon { grid-template-columns: 90px 1fr; }
      .coupon-body { padding: 14px; }
      .discount strong { font-size: 21px; }
      .hero { padding: 22px; }
    }
  

/* PARTNER PREMIUM COUPONS */
body {
  background: #f5f2eb;
  color: #172b4d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
header {
  min-height: 76px;
  background: #fff;
  padding: 18px 5.5%;
  border-bottom: 1px solid #e7dece;
  box-shadow: 0 5px 20px rgba(23,43,77,.045);
}
.brand {
  font-size: 21px;
  letter-spacing: -.4px;
}
header a { transition: color .2s ease; }
header a:hover { color: #a27c40; }
.container {
  max-width: 1240px;
  margin: 32px auto 55px;
  padding: 0 26px;
}
.breadcrumb {
  color: #8a8e96;
  font-size: 12px;
  letter-spacing: .2px;
}
.breadcrumb a { color: #987743; }
.page-heading { margin-bottom: 25px; }
h1 {
  color: #14243b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 4vw, 43px);
  font-weight: 500;
  letter-spacing: -1px;
}
.subtitle { color: #747b85; font-size: 14px; }
.hero {
  position: relative;
  overflow: hidden;
  padding: 32px 36px;
  border: 1px solid #e4d5b7;
  border-radius: 7px;
  background: linear-gradient(115deg, #fffdf8, #f0e7d5);
  color: #172b4d;
  box-shadow: 0 10px 28px rgba(23,43,77,.045);
}
.hero::after {
  content: "✦";
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  color: #c5a66d;
  font-size: 66px;
  opacity: .55;
  pointer-events: none;
}
.hero strong {
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(23px, 3vw, 31px);
  font-weight: 500;
}
.hero p {
  position: relative;
  z-index: 1;
  max-width: 560px;
  color: #686f7a;
  font-size: 13px;
}
.toolbar { margin: 30px 0 18px; }
.toolbar h2 {
  color: #172b4d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 500;
}
.refresh {
  padding: 11px 17px;
  border: 1px solid #d8c6a4;
  border-radius: 3px;
  background: #fff;
  color: #172b4d;
  font-weight: 700;
  transition: .2s ease;
}
.refresh:hover {
  background: #f0e5cf;
  border-color: #b99a60;
}
.coupon-grid { gap: 20px; }
.coupon {
  position: relative;
  grid-template-columns: 116px minmax(0, 1fr);
  border: 1px solid #e5dccd;
  border-radius: 5px;
  background: #fffefa;
  box-shadow: 0 6px 22px rgba(23,43,77,.055);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.coupon:hover {
  transform: translateY(-4px);
  border-color: #c5a66d;
  box-shadow: 0 14px 30px rgba(23,43,77,.10);
}
.discount {
  background: linear-gradient(155deg, #f4ead5, #e9dcc0);
  color: #172b4d;
  border-right: 1px dashed #c5a66d;
  padding: 16px 8px;
}
.discount strong {
  font-size: 22px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.discount span {
  color: #8c6a35;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}
.coupon-body { padding: 21px 20px; }
.coupon-body h3 {
  color: #172b4d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.4;
}
.coupon-body p, .coupon-meta {
  color: #777d86;
  font-size: 12px;
  line-height: 1.7;
}
.code {
  background: #f8f4eb;
  border: 1px dashed #c5a66d;
  border-radius: 3px;
  color: #172b4d;
  letter-spacing: 1px;
}
.copy {
  background: #172b4d;
  color: #f4dfb4;
  border: 1px solid #172b4d;
  border-radius: 3px;
  padding: 10px 15px;
  letter-spacing: .5px;
  transition: .2s ease;
}
.copy:hover {
  background: #c5a66d;
  border-color: #c5a66d;
  color: #172b4d;
}
.state {
  background: #fffefa;
  border-color: #e5dccd;
  border-radius: 5px;
}
.state strong { color: #172b4d; }
footer {
  background: #fff;
  border-top: 1px solid #e5dccd;
  color: #777d86;
  letter-spacing: .3px;
}
@media (max-width: 650px) {
  header { padding: 16px 18px; }
  .brand { font-size: 16px; }
  .container { padding: 0 15px; }
  .hero { padding: 25px 22px; }
  .hero::after { right: 15px; font-size: 43px; }
  .coupon { grid-template-columns: 88px minmax(0,1fr); }
  .coupon-body { padding: 14px 12px; }
  .discount strong { font-size: 19px; }
  .coupon-body h3 { font-size: 16px; }
}

  

--- STYLE BLOCK 2 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 3 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 4 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/my-orders.html ==========


--- STYLE BLOCK 1 ---

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: #f1f3f6;
      color: #212121;
      font-family: Arial, Helvetica, sans-serif;
    }

    a {
      text-decoration: none;
    }

    .orders-header {
      min-height: 70px;
      padding: 14px 5%;
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    }

    .brand {
      color: #172b4d;
      font-size: 20px;
      font-weight: 800;
    }

    .brand span {
      color: #2874f0;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .header-right a {
      color: #2874f0;
      font-size: 14px;
      font-weight: 600;
    }

    .orders-page {
      max-width: 1100px;
      min-height: 65vh;
      margin: 32px auto;
      padding: 0 20px;
    }

    .back-link {
      display: inline-block;
      margin-bottom: 22px;
      color: #2874f0;
      font-size: 14px;
      font-weight: 600;
    }

    .orders-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 24px;
    }

    .orders-heading h1 {
      margin: 0 0 8px;
      font-size: 28px;
    }

    .orders-subtitle {
      color: #777;
      font-size: 14px;
      line-height: 1.6;
    }

    .profile-link {
      padding: 11px 16px;
      border: 1px solid #2874f0;
      border-radius: 5px;
      color: #2874f0;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }

    .orders-panel {
      padding: 24px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    }

    .status {
      margin: 0;
      padding: 14px 0;
      color: #666;
      font-size: 14px;
      line-height: 1.7;
      overflow-wrap: anywhere;
    }

    .status:empty {
      display: none;
    }

    .status.error {
      color: #c62828;
    }

    .status.success {
      color: #16803c;
    }

    .orders-list {
      display: grid;
      gap: 18px;
    }

    .empty-orders {
      padding: 42px 15px;
      text-align: center;
    }

    .empty-orders .empty-icon {
      margin-bottom: 15px;
      font-size: 42px;
    }

    .empty-orders h2 {
      margin: 0 0 10px;
      font-size: 20px;
    }

    .empty-orders p {
      margin: 0 0 22px;
      color: #777;
      font-size: 14px;
      line-height: 1.7;
    }

    .shop-button {
      display: inline-block;
      padding: 12px 20px;
      border-radius: 5px;
      background: #2874f0;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
    }

    .shop-button:hover {
      background: #1763d6;
    }

    .orders-footer {
      padding: 24px 15px;
      background: #17212f;
      color: #fff;
      text-align: center;
      font-size: 12px;
      line-height: 1.8;
    }

    .orders-footer p {
      margin: 5px 0 0;
      color: #c7ced8;
    }

    @media (max-width: 600px) {
      .orders-header {
        padding: 14px;
        align-items: flex-start;
      }

      .brand {
        max-width: 170px;
        font-size: 16px;
        line-height: 1.5;
      }

      .header-right {
        justify-content: flex-end;
        gap: 12px;
      }

      .header-right a {
        font-size: 12px;
      }

      .orders-page {
        margin: 22px auto;
        padding: 0 12px;
      }

      .orders-heading {
        align-items: flex-start;
        flex-direction: column;
      }

      .orders-heading h1 {
        font-size: 24px;
      }

      .orders-panel {
        padding: 17px;
      }
    }

    /* =========================================
   PREMIUM MY ORDERS PAGE
========================================= */

:root {
  --order-blue: #2874f0;
  --order-blue-dark: #1758c7;
  --order-text: #172b4d;
  --order-muted: #70809c;
  --order-border: #e3ebf7;
  --order-background: #f4f7fc;
}

body {
  background: var(--order-background);
  color: var(--order-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Arial, sans-serif;
}

/* Header */
.orders-header {
  min-height: 76px;
  padding: 14px 4%;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e9eef7;
  box-shadow: 0 3px 16px rgba(23, 43, 77, 0.04);
}

.brand {
  font-size: 22px;
  letter-spacing: -0.7px;
  font-weight: 800;
}

.brand span {
  color: var(--order-blue);
}

.header-right {
  gap: 24px;
}

.header-right a {
  transition: color 0.2s ease;
}

.header-right a:hover {
  color: var(--order-blue-dark);
}

/* Main page */
.orders-page {
  max-width: 1450px;
  margin: 35px auto;
  padding: 0 28px;
}

.back-link {
  margin-bottom: 24px;
  font-weight: 600;
}

.orders-heading {
  margin-bottom: 25px;
}

.orders-heading h1 {
  color: var(--order-text);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -1px;
}

.orders-subtitle {
  color: var(--order-muted);
  font-size: 14px;
}

/* Main white panel */
.orders-panel {
  padding: 26px;
  background: #fff;
  border: 1px solid #e8eef8;
  border-radius: 15px;
  box-shadow: 0 8px 35px rgba(23, 43, 77, 0.045);
}

#orders-status {
  margin-bottom: 18px;
  color: var(--order-muted);
  font-size: 14px;
}

/* Individual order cards */
.orders-list {
  display: grid;
  gap: 18px;
}

.order-card,
.checkout-panel.order-card {
  display: grid;
  grid-template-columns: minmax(180px, 1.15fr)
                         minmax(230px, 1fr)
                         minmax(135px, 0.65fr);
  align-items: center;
  gap: 24px;
  padding: 25px;
  background: #fff;
  border: 1px solid var(--order-border);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(23, 43, 77, 0.025);
  transition: border-color 0.2s ease,
              box-shadow 0.2s ease,
              transform 0.2s ease;
}

.order-card:hover {
  border-color: #c5d9ff;
  box-shadow: 0 8px 24px rgba(40, 116, 240, 0.075);
  transform: translateY(-2px);
}

/* Order number and date */
.order-card-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.order-card-heading h2 {
  margin: 0;
  color: var(--order-text);
  font-size: 17px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.order-card-heading time {
  color: var(--order-muted);
  font-size: 12px;
  line-height: 1.6;
}

/* Order information */
.order-card-meta {
  display: grid;
  gap: 13px;
  min-width: 0;
  padding: 2px 24px;
  border-left: 1px solid #edf1f7;
  border-right: 1px solid #edf1f7;
}

.order-card-meta p {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  color: #33445f;
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.order-card-meta strong {
  color: var(--order-muted);
  font-weight: 500;
}

/* Order action buttons */
.order-card-actions {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}

.order-action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--order-blue);
  border-radius: 7px;
  background: var(--order-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.order-action:hover {
  background: var(--order-blue-dark);
  color: #fff;
  transform: translateY(-1px);
}

.order-action.secondary {
  color: var(--order-blue);
  background: #fff;
  border-color: #bfd3ff;
}

.order-action.secondary:hover {
  background: #f1f6ff;
}

.order-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Empty state */
.empty-orders {
  margin-top: 10px;
  padding: 45px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f4f8ff, #f8faff);
  border: 1px solid #edf3ff;
}

.empty-orders .empty-icon {
  display: grid;
  place-items: center;
  width: 65px;
  height: 65px;
  margin: 0 auto 17px;
  border-radius: 50%;
  background: #e4edff;
  font-size: 30px;
}

.empty-orders h2 {
  color: var(--order-text);
  font-size: 21px;
  font-weight: 750;
}

.empty-orders p {
  color: var(--order-muted);
  font-size: 13px;
}

.shop-button {
  border-radius: 7px;
  box-shadow: 0 4px 12px rgba(40, 116, 240, 0.18);
}

.shop-button:hover {
  transform: translateY(-1px);
}

/* Footer */
.orders-footer {
  margin-top: 45px;
  padding: 28px 5%;
  background: #172337;
  color: #fff;
}

.orders-footer strong {
  font-size: 16px;
}

.orders-footer p {
  color: #c5cede;
}

/* Tablet */
@media (max-width: 1000px) {
  .orders-page {
    padding: 0 18px;
  }

  .orders-panel {
    padding: 18px;
  }

  .order-card,
  .checkout-panel.order-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
  }

  .order-card-meta {
    border-right: 0;
    padding-right: 0;
  }

  .order-card-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .orders-header {
    position: static;
    flex-wrap: wrap;
  }

  .brand {
    font-size: 18px;
  }

  .header-right {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .orders-page {
    margin: 22px auto;
    padding: 0 12px;
  }

  .orders-heading h1 {
    font-size: 27px;
  }

  .orders-panel {
    padding: 12px;
    border-radius: 10px;
  }

  .order-card,
  .checkout-panel.order-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
  }

  .order-card-meta {
    padding: 17px 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #edf1f7;
    border-bottom: 1px solid #edf1f7;
  }

  .order-card-actions {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .empty-orders {
    padding: 35px 15px;
  }
}
  
    /* Fix account greeting and dropdown text visibility */
    .customer-account-greeting,
    .customer-account-greeting small,
    .customer-account-greeting strong,
    .customer-account-trigger,
    .account-user-name {
      color: #172b4d !important;
    }

    .customer-account-dropdown,
    .customer-account-dropdown a,
    .customer-account-item,
    .customer-account-heading,
    .customer-account-heading strong,
    .customer-account-heading span {
      color: #172b4d !important;
    }
  




.customer-account-greeting,
.customer-account-greeting small,
.customer-account-greeting strong,
.customer-account-arrow,
.account-user-name {
  color: #000000 !important;
}

.customer-account-dropdown {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.customer-account-dropdown a,
.customer-account-item,
.customer-account-heading,
.customer-account-heading strong,
.customer-account-heading span,
.customer-account-logout {
  color: #000000 !important;
}

.customer-account-item:hover,
.customer-account-logout:hover {
  background: #f3f4f6 !important;
  color: #000000 !important;
}




.orders-header .header-right {
  position: relative;
  overflow: visible;
}

.orders-header .customer-account-menu {
  position: relative;
  z-index: 1001;
}

.orders-header .customer-account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1002;
  min-width: 250px;
  background: #fff !important;
  color: #000 !important;
}

.orders-header .customer-account-trigger,
.orders-header .customer-account-greeting,
.orders-header .customer-account-greeting small,
.orders-header .customer-account-greeting strong,
.orders-header .customer-account-arrow {
  color: #000 !important;
}

.orders-header .customer-account-trigger {
  background: #fff !important;
  cursor: pointer;
}




.orders-header .brand,
.orders-header .brand span,
.orders-header .header-right > a,
.orders-header .customer-account-trigger,
.orders-header .customer-account-greeting,
.orders-header .customer-account-greeting small,
.orders-header .customer-account-greeting strong,
.orders-header .customer-account-arrow {
  color: #000000 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.orders-header .customer-account-trigger {
  background: #ffffff !important;
}

.orders-header .customer-account-dropdown {
  background: #ffffff !important;
  color: #000000 !important;
}

.orders-header .customer-account-dropdown a,
.orders-header .customer-account-item,
.orders-header .customer-account-heading,
.orders-header .customer-account-heading strong,
.orders-header .customer-account-heading span,
.orders-header .customer-account-logout {
  color: #000000 !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* MY ORDERS DROPDOWN VISIBILITY FIX */
body > header,
body > header .header-right,
body > header .customer-account-menu {
    overflow: visible !important;
}

body > header .customer-account-menu {
    position: relative !important;
    z-index: 99999 !important;
}

body > header .customer-account-dropdown[hidden] {
    display: none !important;
}

body > header .customer-account-dropdown:not([hidden]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 100000 !important;
    min-width: 250px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    background: #fff !important;
    color: #172b4d !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.16) !important;
}

body > header .customer-account-dropdown a,
body > header .customer-account-dropdown button,
body > header .customer-account-dropdown .customer-account-item {
    visibility: visible !important;
    opacity: 1 !important;
    color: #172b4d !important;
}



--- STYLE BLOCK 2 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 3 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 4 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}


--- STYLE BLOCK 5 ---

/* My Orders: dropdown color visibility fix */
body > header .customer-account-dropdown:not([hidden]) {
    background: #ffffff !important;
    color: #172b4d !important;
    border: 1px solid #e5e7eb !important;
}

body > header .customer-account-dropdown .customer-account-heading,
body > header .customer-account-dropdown .customer-account-heading strong,
body > header .customer-account-dropdown .customer-account-heading span,
body > header .customer-account-dropdown a,
body > header .customer-account-dropdown button,
body > header .customer-account-dropdown .customer-account-item {
    color: #172b4d !important;
    -webkit-text-fill-color: #172b4d !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body > header .customer-account-dropdown svg {
    color: #172b4d !important;
    stroke: #172b4d !important;
}

body > header .customer-account-dropdown a:hover,
body > header .customer-account-dropdown button:hover {
    background: #f3f4f6 !important;
    color: #7f1023 !important;
    -webkit-text-fill-color: #7f1023 !important;
}

/* PARTNER_ORDERS_PREMIUM_V1 */

/* Premium fashion-store background */
body {
  background: #f5f6f8 !important;
  color: #172333 !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.orders-header {
  min-height: 76px !important;
  padding: 16px clamp(18px, 5vw, 64px) !important;
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid #e9e5dc !important;
  box-shadow: 0 5px 24px rgba(19,35,52,.055) !important;
}

.orders-header .brand,
.brand {
  color: #142b3b !important;
  font-weight: 850 !important;
  letter-spacing: -.55px !important;
}

.orders-header .brand span,
.brand span {
  color: #ad8745 !important;
}

.header-right {
  gap: 12px 22px !important;
}

.header-right a {
  color: #253b50 !important;
  transition: color .2s ease !important;
}

.header-right a:hover {
  color: #ad8745 !important;
}

.orders-page {
  max-width: 1120px !important;
  margin: 38px auto 72px !important;
  padding: 0 24px !important;
}

.back-link {
  color: #8b6a32 !important;
  margin-bottom: 24px !important;
  font-weight: 650 !important;
}

.orders-heading {
  margin-bottom: 28px !important;
  align-items: center !important;
}

.orders-heading h1 {
  color: #142b3b !important;
  font-size: clamp(27px, 3vw, 35px) !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  line-height: 1.2 !important;
}

.orders-subtitle {
  color: #77818c !important;
  line-height: 1.75 !important;
}

.profile-link {
  border: 1px solid #d5c19c !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #142b3b !important;
  padding: 11px 17px !important;
  font-weight: 700 !important;
  transition: background .2s, transform .2s !important;
}

.profile-link:hover {
  background: #f8f3e9 !important;
  transform: translateY(-1px);
}

/* Order list and individual cards */
.orders-panel {
  overflow: hidden;
  border: 1px solid #e8e9ed !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 12px 35px rgba(20,43,59,.055) !important;
}

.order-card,
.checkout-panel.order-card {
  margin-bottom: 18px !important;
  padding: 23px !important;
  border: 1px solid #e8e9ed !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 5px 18px rgba(20,43,59,.045) !important;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease !important;
}

.order-card:hover,
.checkout-panel.order-card:hover {
  border-color: #d9c59f !important;
  box-shadow: 0 13px 30px rgba(20,43,59,.085) !important;
  transform: translateY(-2px);
}

.order-card-heading {
  gap: 12px !important;
  padding-bottom: 15px !important;
  border-bottom: 1px solid #eff0f2 !important;
}

.order-card-heading h2 {
  color: #172d40 !important;
  font-size: 17px !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;
}

.order-card-heading time {
  color: #7b8490 !important;
  font-size: 12px !important;
}

.order-card-meta {
  gap: 10px 20px !important;
  padding-top: 15px !important;
}

.order-card-meta p {
  color: #66717d !important;
  line-height: 1.7 !important;
}

.order-card-meta strong {
  color: #1c3043 !important;
  font-weight: 750 !important;
}

.order-card-actions {
  gap: 10px !important;
  margin-top: 18px !important;
}

.order-card-actions button,
.order-card-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 10px 15px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease !important;
}

.order-card-actions button:hover,
.order-card-actions a:hover {
  transform: translateY(-1px);
}

/* Status labels: preserve the status text and functionality */
.order-card [class*="status"],
.order-card [class*="badge"] {
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

/* Responsive layout */
@media (max-width: 760px) {
  .orders-header {
    padding: 14px 16px !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  .header-right {
    gap: 10px 15px !important;
  }

  .orders-page {
    margin: 24px auto 44px !important;
    padding: 0 14px !important;
  }

  .orders-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .order-card,
  .checkout-panel.order-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .order-card-heading {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .order-card-meta {
    gap: 8px 12px !important;
  }

  .order-card-actions button,
  .order-card-actions a {
    max-width: 100%;
  }
}


/* PARTNER_ORDERS_COMPACT_V2 */

/* Order boxes ki extra height kam */
.order-card,
.checkout-panel.order-card {
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  min-height: 0 !important;
}

/* Box ke andar spacing compact */
.order-card-heading {
  padding-bottom: 10px !important;
  margin-bottom: 0 !important;
}

.order-card-meta {
  padding-top: 10px !important;
  gap: 6px 16px !important;
}

.order-card-meta p {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
  line-height: 1.45 !important;
}

.order-card-actions {
  margin-top: 12px !important;
  gap: 8px !important;
}

/* Product image ko bada aur clear dikhana */
.order-card img {
  width: 100px !important;
  height: 115px !important;
  min-width: 100px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}

/* Mobile par balanced size */
@media (max-width: 600px) {
  .order-card,
  .checkout-panel.order-card {
    padding: 13px !important;
  }

  .order-card img {
    width: 86px !important;
    height: 100px !important;
    min-width: 86px !important;
  }
}


/* PARTNER_ORDERS_IMAGE_LAYOUT_V3 */

/* Compact order card */
.orders-list {
  gap: 12px !important;
}

.order-card,
.checkout-panel.order-card {
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.5fr) minmax(125px, 0.65fr) !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px !important;
  min-height: 0 !important;
}

/* Product image */
.order-card img {
  width: 140px !important;
  height: 155px !important;
  min-width: 140px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Reduce excess vertical spacing */
.order-card-heading {
  gap: 6px !important;
  padding-bottom: 9px !important;
}

.order-card-meta {
  gap: 7px !important;
  padding: 0 14px !important;
}

.order-card-meta p {
  line-height: 1.45 !important;
}

.order-card-actions {
  gap: 8px !important;
}

.order-card-actions .order-action,
.order-card-actions button,
.order-card-actions a {
  min-height: 36px !important;
  padding: 8px 10px !important;
}

/* Tablet */
@media (max-width: 1000px) {
  .order-card,
  .checkout-panel.order-card {
    grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.4fr) !important;
    gap: 14px !important;
  }

  .order-card-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .order-card,
  .checkout-panel.order-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 13px !important;
  }

  .order-card img {
    width: 145px !important;
    height: 155px !important;
    min-width: 0 !important;
  }

  .order-card-meta {
    padding: 12px 0 !important;
  }

  .order-card-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}


/* PARTNER_ORDERS_LUXURY_V4 — Partner Jeans & Pants */

/* Premium page background */
body {
  background: #f5f5f2 !important;
  color: #192b3a !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.orders-page {
  max-width: 1240px !important;
  margin: 38px auto 70px !important;
  padding: 0 28px !important;
}

.orders-heading {
  margin-bottom: 30px !important;
}

.orders-heading h1 {
  color: #142b3b !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -1.3px !important;
}

.orders-subtitle {
  color: #78818a !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

/* Main order-list surface */
.orders-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.orders-list {
  display: grid !important;
  gap: 18px !important;
}

/* Luxury order card */
.order-card,
.checkout-panel.order-card {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) 155px !important;
  align-items: stretch !important;
  gap: 24px !important;
  padding: 20px !important;
  min-height: 0 !important;
  background: #fff !important;
  border: 1px solid #e8e5dd !important;
  border-radius: 17px !important;
  box-shadow: 0 7px 24px rgba(25, 43, 58, .045) !important;
  transition: transform .22s ease, box-shadow .22s ease,
              border-color .22s ease !important;
}

.order-card:hover,
.checkout-panel.order-card:hover {
  transform: translateY(-3px) !important;
  border-color: #cbb88e !important;
  box-shadow: 0 16px 36px rgba(25, 43, 58, .09) !important;
}

/* Larger product image area */
.order-card > a:has(img),
.order-card > div:has(img) {
  min-width: 0 !important;
}

.order-card img {
  width: 100% !important;
  max-width: 190px !important;
  height: 210px !important;
  min-width: 0 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
  padding: 8px !important;
  background: #f7f6f2 !important;
  border-radius: 12px !important;
}

/* Order number and date */
.order-card-heading {
  align-self: start !important;
  gap: 8px !important;
  padding-bottom: 13px !important;
  border-bottom: 1px solid #efeee9 !important;
}

.order-card-heading h2 {
  color: #172e40 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
}

.order-card-heading time {
  color: #8b8e91 !important;
  font-size: 12px !important;
}

/* Order information */
.order-card-meta {
  align-content: start !important;
  gap: 10px !important;
  padding: 14px 0 0 !important;
  border: 0 !important;
}

.order-card-meta p {
  display: block !important;
  margin: 0 !important;
  color: #596673 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  overflow-wrap: anywhere !important;
}

.order-card-meta strong {
  color: #213648 !important;
  font-weight: 750 !important;
}

/* Action area */
.order-card-actions {
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding-left: 18px !important;
  border-left: 1px solid #efeee9 !important;
}

.order-card-actions .order-action,
.order-card-actions button,
.order-card-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 43px !important;
  padding: 10px 12px !important;
  border: 1px solid #173348 !important;
  border-radius: 8px !important;
  background: #173348 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all .2s ease !important;
}

.order-card-actions .order-action:hover,
.order-card-actions button:hover,
.order-card-actions a:hover {
  background: #a98445 !important;
  border-color: #a98445 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.order-card-actions .secondary {
  background: #fff !important;
  color: #173348 !important;
  border-color: #d8c8a7 !important;
}

.order-card-actions .secondary:hover {
  background: #f7f1e5 !important;
  color: #173348 !important;
  border-color: #a98445 !important;
}

/* Keep status labels polished */
.order-card [class*="status"],
.order-card [class*="badge"] {
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

/* Tablet */
@media (max-width: 1000px) {
  .orders-page {
    padding: 0 20px !important;
  }

  .order-card,
  .checkout-panel.order-card {
    grid-template-columns: 155px minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .order-card img {
    max-width: 155px !important;
    height: 180px !important;
  }

  .order-card-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 14px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid #efeee9 !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .orders-page {
    margin: 24px auto 42px !important;
    padding: 0 12px !important;
  }

  .orders-heading {
    margin-bottom: 20px !important;
  }

  .orders-heading h1 {
    font-size: 29px !important;
  }

  .order-card,
  .checkout-panel.order-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 13px !important;
    padding: 14px !important;
    border-radius: 13px !important;
  }

  .order-card img {
    width: 100% !important;
    max-width: 230px !important;
    height: 220px !important;
    margin: 0 auto !important;
  }

  .order-card-heading {
    padding-bottom: 11px !important;
  }

  .order-card-meta {
    gap: 8px !important;
    padding-top: 11px !important;
  }

  .order-card-actions {
    grid-column: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .order-card-actions .order-action,
  .order-card-actions button,
  .order-card-actions a {
    min-height: 40px !important;
    padding: 9px 7px !important;
    font-size: 11px !important;
  }
}
\n


========== INLINE CSS: templates/my-supercoins.html ==========


--- STYLE BLOCK 1 ---

        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: #f4f6fa;
            color: #172b4d;
        }
        header {
            background: #fff;
            padding: 18px 6%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            box-shadow: 0 2px 8px #00000010;
        }
        header a { color: #172b4d; text-decoration: none; }
        main { max-width: 1000px; margin: 35px auto; padding: 0 18px; }
        .hero {
            background: #172b4d;
            color: white;
            padding: 35px;
            border-radius: 16px;
        }
        .hero h1 { margin-top: 0; }
        .balance { font-size: 46px; font-weight: bold; margin: 18px 0 8px; }
        .rupees { color: #d8e4ff; }
        .cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
            margin: 22px 0;
        }
        .card, .panel {
            background: white;
            border-radius: 12px;
            padding: 22px;
            box-shadow: 0 2px 10px #00000008;
        }
        .card strong { display: block; font-size: 26px; margin-top: 10px; }
        .panel { margin-top: 20px; }
        .panel h2 { margin-top: 0; }
        li { margin: 12px 0; line-height: 1.5; }
        button {
            background: #172b4d;
            color: white;
            border: 0;
            padding: 10px 16px;
            border-radius: 7px;
            cursor: pointer;
        }
        .muted { color: #667085; }
        .transaction {
            padding: 14px 0;
            border-bottom: 1px solid #e8ecf2;
            display: flex;
            justify-content: space-between;
            gap: 15px;
        }
        .transaction:last-child { border-bottom: 0; }
        .earned { color: #16803c; }
        .redeemed { color: #b42318; }
        @media (max-width: 550px) {
            header { padding: 16px; }
            .hero { padding: 24px; }
            .balance { font-size: 36px; }
        }
    

/* PARTNER PREMIUM SUPERCOINS */
body {
  background: #f5f2eb;
  color: #172b4d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
header {
  min-height: 76px;
  background: #fff;
  padding: 18px 5.5%;
  border-bottom: 1px solid #e7dece;
  box-shadow: 0 5px 20px rgba(23,43,77,.045);
}
header strong {
  color: #172b4d;
  font-size: 20px;
  letter-spacing: -.4px;
}
header a {
  color: #172b4d;
  font-size: 13px;
  font-weight: 650;
  transition: color .2s ease;
}
header a:hover { color: #a27c40; }
main {
  max-width: 1160px;
  margin: 36px auto 60px;
  padding: 0 24px;
}
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid #e2d2b2;
  border-radius: 7px;
  background: linear-gradient(120deg, #fffdf8, #efe4cd);
  color: #172b4d;
  box-shadow: 0 12px 32px rgba(23,43,77,.055);
}
.hero::after {
  content: "✦";
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  color: #c5a66d;
  font-size: clamp(65px, 10vw, 112px);
  opacity: .42;
  pointer-events: none;
}
.hero h1 {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 4.5vw, 47px);
  font-weight: 500;
  letter-spacing: -1px;
}
.hero p, .rupees {
  position: relative;
  z-index: 1;
  color: #6c7480;
  line-height: 1.7;
}
.balance {
  position: relative;
  z-index: 1;
  margin: 23px 0 6px;
  color: #172b4d;
  font-size: clamp(38px, 6vw, 58px);
  font-weight: 800;
  letter-spacing: -1.5px;
}
.rupees {
  color: #92713e;
  font-size: 14px;
  font-weight: 700;
}
.cards {
  gap: 18px;
  margin: 23px 0;
}
.card, .panel {
  background: #fffefa;
  border: 1px solid #e6dece;
  border-radius: 5px;
  box-shadow: 0 6px 22px rgba(23,43,77,.045);
}
.card {
  padding: 24px;
  color: #747b85;
  font-size: 13px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: #c5a66d;
  box-shadow: 0 12px 25px rgba(23,43,77,.08);
}
.card strong {
  margin: 13px 0 5px;
  color: #172b4d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
}
.card .muted {
  color: #9a7b48;
  font-size: 12px;
}
.panel {
  margin-top: 22px;
  padding: clamp(21px, 3vw, 30px);
}
.panel h2 {
  margin: 0 0 18px;
  color: #172b4d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 500;
}
.panel ul { padding-left: 22px; }
.panel li {
  margin: 13px 0;
  color: #5f6978;
  font-size: 14px;
  line-height: 1.7;
}
.muted { color: #777f8b; line-height: 1.7; }
button {
  background: #172b4d;
  color: #f3dfb7;
  border: 1px solid #172b4d;
  border-radius: 3px;
  padding: 11px 17px;
  font-weight: 700;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
button:hover {
  background: #c5a66d;
  border-color: #c5a66d;
  color: #172b4d;
}
#history {
  color: #697382;
  font-size: 13px;
  line-height: 1.6;
}
.transaction {
  padding: 17px 0;
  border-bottom: 1px solid #eee6d9;
  align-items: center;
}
.transaction strong { color: #172b4d; }
.transaction .muted {
  margin-top: 4px;
  font-size: 12px;
}
.earned { color: #28794d !important; }
.redeemed { color: #a34c54 !important; }
@media (max-width: 550px) {
  header { padding: 16px; }
  header strong { font-size: 16px; }
  header nav { font-size: 12px; }
  main { margin: 24px auto 42px; padding: 0 14px; }
  .hero { padding: 25px 21px; }
  .hero::after { right: 12px; font-size: 55px; }
  .balance { font-size: 38px; }
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 19px; }
  .card strong { font-size: 28px; }
  .panel { padding: 20px 17px; }
  .transaction { gap: 10px; }
  .transaction > strong { text-align: right; font-size: 12px; }
}

  

--- STYLE BLOCK 2 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 3 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 4 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/new.html ==========


--- STYLE BLOCK 1 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 2 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 3 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/order-confirmation.html ==========


--- STYLE BLOCK 1 ---

    .confirmation-card { max-width: 760px; margin: 28px auto; }
    .confirmation-state { padding: 14px; border-radius: 8px; background: #edf7f0; color: #176b3a; line-height: 1.5; }
    .delivery-summary { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e2e7ea; line-height: 1.6; }
    .confirmation-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
    .confirmation-actions a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 18px; border-radius: 7px; background: #173b4b; color: #fff; text-decoration: none; font-weight: 700; }
    @media (max-width: 520px) { .confirmation-actions a { width: 100%; } }
  

--- STYLE BLOCK 2 ---

.checkout-progress a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.checkout-progress a:hover {
  text-decoration: underline;
}


--- STYLE BLOCK 3 ---


/* Shared customer dropdown visibility fix */
/* Fix account greeting and dropdown text visibility */
    .customer-account-greeting,
    .customer-account-greeting small,
    .customer-account-greeting strong,
    .customer-account-trigger,
    .account-user-name {
      color: #172b4d !important;
    }

    .customer-account-dropdown,
    .customer-account-dropdown a,
    .customer-account-item,
    .customer-account-heading,
    .customer-account-heading strong,
    .customer-account-heading span {
      color: #172b4d !important;
    }
  


/* Account dropdown: white background, black text */
.customer-account-trigger {
  background: #ffffff !important;
  color: #000000 !important;
}

.customer-account-greeting,
.customer-account-greeting small,
.customer-account-greeting strong,
.customer-account-arrow,
.account-user-name {
  color: #000000 !important;
}

.customer-account-dropdown {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.customer-account-dropdown a,
.customer-account-item,
.customer-account-heading,
.customer-account-heading strong,
.customer-account-heading span,
.customer-account-logout {
  color: #000000 !important;
}

.customer-account-item:hover,
.customer-account-logout:hover {
  background: #f3f4f6 !important;
  color: #000000 !important;
}

/* Keep account menu above checkout content */
body > header {
  position: relative;
  z-index: 10000;
  overflow: visible;
}

body > header .header-right,
body > header .customer-account-menu {
  position: relative;
  overflow: visible;
  z-index: 10001;
}

body > header .customer-account-dropdown:not([hidden]) {
  display: block;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10002;
  min-width: 240px;
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  color: #000;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

body > header .customer-account-dropdown[hidden] {
  display: none !important;
}

body > header .customer-account-dropdown .customer-account-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  color: #000 !important;
  background: #fff;
}

body > header .customer-account-dropdown .customer-account-item:hover {
  background: #ffe5e5 !important;
  color: #000 !important;
}



--- STYLE BLOCK 4 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 5 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 6 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/order-details.html ==========


--- STYLE BLOCK 1 ---


/* Shared Partner Jeans & Pants navbar */
body > header.pj-site-header {
  box-sizing: border-box;
  width: 100%;
  min-height: 78px;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background: #fff;
  color: #172b4d;
  border-bottom: 1px solid #e8edf2;
  box-shadow: 0 2px 10px rgba(15, 35, 55, .07);
  position: relative;
  z-index: 1000;
  font-family: Arial, sans-serif;
}
.pj-site-header .pj-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}
.pj-site-header .pj-brand img {
  display: block;
  width: 112px;
  height: auto;
  max-height: 58px;
  object-fit: contain;
}
.pj-site-header .pj-main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: 17px;
  flex-wrap: wrap;
}
.pj-site-header .pj-main-nav a {
  color: #172b4d;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .25px;
  transition: color .2s ease;
}
.pj-site-header .pj-main-nav a:hover {
  color: #b77932;
}
.pj-site-header .pj-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 10px;
  position: relative;
}
.pj-site-header .pj-search {
  display: flex;
  align-items: center;
  border: 1px solid #dce2e8;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}
.pj-site-header .pj-search input {
  width: 105px;
  min-width: 0;
  padding: 9px 8px;
  border: 0;
  outline: none;
  color: #172b4d;
  background: #fff;
  font-size: 12px;
}
.pj-site-header .pj-search button {
  padding: 7px 9px;
  border: 0;
  background: #fff;
  color: #172b4d;
  cursor: pointer;
  font-size: 18px;
}
.pj-site-header .pj-header-right > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  padding: 0 9px;
  border-radius: 4px;
  color: #172b4d;
  background: transparent;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.pj-site-header .pj-header-right > a:hover {
  color: #a86b2c;
  background: #f7f4ef;
}
.pj-site-header .customer-account-menu {
  color: #172b4d;
}
.pj-site-header .customer-account-trigger {
  color: #172b4d;
  background: #fff;
}
.pj-site-header .customer-account-dropdown {
  z-index: 1100;
  color: #222;
  background: #fff;
}
.pj-site-header .customer-account-dropdown a,
.pj-site-header .customer-account-dropdown button,
.pj-site-header .customer-account-item,
.pj-site-header .customer-account-heading {
  color: #222;
}
.pj-site-header .customer-account-dropdown a:hover,
.pj-site-header .customer-account-dropdown button:hover,
.pj-site-header .customer-account-item:hover {
  color: #a86b2c;
  background: #f7f4ef;
}
@media (max-width: 1100px) {
  body > header.pj-site-header {
    padding: 12px 16px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .pj-site-header .pj-main-nav {
    order: 3;
    flex: 1 1 100%;
    gap: 12px;
  }
  .pj-site-header .pj-header-right {
    margin-left: auto;
  }
}
@media (max-width: 600px) {
  body > header.pj-site-header {
    padding: 10px 12px;
    gap: 10px;
  }
  .pj-site-header .pj-brand img {
    width: 88px;
  }
  .pj-site-header .pj-main-nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 7px 0;
  }
  .pj-site-header .pj-main-nav a {
    font-size: 10px;
  }
  .pj-site-header .pj-header-right {
    gap: 4px;
    flex-wrap: wrap;
  }
  .pj-site-header .pj-search input {
    width: 75px;
  }
  .pj-site-header .pj-header-right > a {
    padding: 0 6px;
    font-size: 11px;
  }
}

  

--- STYLE BLOCK 2 ---


/* PARTNER_TRACKING_LUXURY_V1 */

/* Premium fashion-store canvas */
body {
  background: #f4f3ef !important;
  color: #192e40 !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.checkout-page {
  max-width: 1080px !important;
  margin: 38px auto 70px !important;
  padding: 0 24px !important;
}

.back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 22px !important;
  color: #96733d !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.back-link:hover {
  color: #172f43 !important;
}

/* Main order details card */
.order-detail-card {
  padding: clamp(20px, 4vw, 38px) !important;
  background: #fff !important;
  border: 1px solid #e7e2d8 !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 42px rgba(24, 43, 58, .07) !important;
}

#order-detail-card > h1 {
  margin: 0 0 26px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #eeeae2 !important;
  color: #142c3e !important;
  font-size: clamp(27px, 4vw, 36px) !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
}

/* Tracking panel hero */
.tracking-panel {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 0 30px !important;
  padding: clamp(20px, 3.5vw, 34px) !important;
  background: linear-gradient(135deg, #142b3c 0%, #203e51 100%) !important;
  border: 1px solid #294657 !important;
  border-radius: 17px !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(20, 43, 60, .12) !important;
}

.tracking-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
}

.tracking-eyebrow {
  margin: 0 0 9px !important;
  color: #d8bb7d !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
}

#tracking-title {
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: clamp(23px, 3vw, 31px) !important;
  font-weight: 800 !important;
  letter-spacing: -.6px !important;
}

#tracking-message {
  margin: 0 !important;
  color: #d1dce3 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

.tracking-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(220, 192, 132, .5) !important;
  border-radius: 999px !important;
  background: rgba(220, 192, 132, .12) !important;
  color: #f0d79d !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

/* Tracking timeline */
.tracking-timeline {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.tracking-step {
  position: relative !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  text-align: center !important;
}

.tracking-step::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 18px !important;
  left: -50% !important;
  width: 100% !important;
  height: 2px !important;
  background: #536574 !important;
}

.tracking-step:first-child::before {
  display: none !important;
}

.tracking-marker {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 auto 13px !important;
  border: 1px solid #697c89 !important;
  border-radius: 50% !important;
  background: #203e51 !important;
  color: #e5e9ec !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
}

.tracking-step h3 {
  margin: 0 0 7px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;
}

.tracking-step p {
  margin: 0 !important;
  color: #c6d1d8 !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
}

/* Completed/current steps are controlled by existing JS classes */
.tracking-step.completed .tracking-marker,
.tracking-step.active .tracking-marker,
.tracking-step.is-complete .tracking-marker,
.tracking-step.is-active .tracking-marker {
  border-color: #e0c17f !important;
  background: #d3b16b !important;
  color: #172c3d !important;
}

.tracking-step.completed::before,
.tracking-step.active::before,
.tracking-step.is-complete::before,
.tracking-step.is-active::before {
  background: #d3b16b !important;
}

.tracking-note {
  margin: 24px 0 0 !important;
  padding-top: 17px !important;
  border-top: 1px solid rgba(255,255,255,.15) !important;
  color: #c8d3da !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

/* Order metadata */
.order-status-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 32px !important;
}

.order-status-grid > p {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 17px 19px !important;
  border: 1px solid #ebe7df !important;
  border-radius: 12px !important;
  background: #faf9f6 !important;
  color: #20374a !important;
  overflow-wrap: anywhere !important;
}

.order-status-grid strong {
  color: #81858a !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
}

.order-status-grid span {
  color: #1b3448 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;
}

/* Products and address headings */
#order-detail-card > h2,
.delivery-summary h2 {
  margin: 30px 0 17px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #ebe7df !important;
  color: #172f43 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
}

/* Product rows created by existing JavaScript */
.checkout-items {
  display: grid !important;
  gap: 12px !important;
}

.checkout-items > * {
  border-radius: 11px !important;
}

/* Price summary */
.totals {
  margin: 26px 0 !important;
  padding: 20px 22px !important;
  border: 1px solid #e9e4da !important;
  border-radius: 13px !important;
  background: #faf9f6 !important;
}

.totals > div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 11px 0 !important;
  border-bottom: 1px solid #ebe7df !important;
}

.totals > div:last-child {
  border-bottom: 0 !important;
}

.totals dt {
  color: #687580 !important;
  font-size: 13px !important;
}

.totals dd {
  margin: 0 !important;
  color: #20374a !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  text-align: right !important;
  overflow-wrap: anywhere !important;
}

.totals .grand-total {
  margin-top: 6px !important;
  padding-top: 17px !important;
}

.totals .grand-total dt,
.totals .grand-total dd {
  color: #172f43 !important;
  font-size: 19px !important;
  font-weight: 850 !important;
}

/* Shipping address */
.delivery-summary {
  margin-top: 28px !important;
  padding: 20px !important;
  border: 1px solid #e9e4da !important;
  border-radius: 13px !important;
  background: #fff !important;
}

.delivery-summary h2 {
  margin-top: 0 !important;
}

/* Cancel button stays functional */
#cancel-order-button {
  min-height: 43px !important;
  margin-top: 24px !important;
  padding: 11px 20px !important;
  border: 1px solid #b84c48 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #a83d39 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  transition: background .2s ease, color .2s ease !important;
}

#cancel-order-button:hover {
  background: #a83d39 !important;
  color: #fff !important;
}

/* Tablet */
@media (max-width: 760px) {
  .checkout-page {
    margin: 25px auto 45px !important;
    padding: 0 16px !important;
  }

  .tracking-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: 26px !important;
  }

  .tracking-step:nth-child(4)::before {
    display: none !important;
  }
}

/* Phone */
@media (max-width: 480px) {
  .checkout-page {
    padding: 0 11px !important;
  }

  .order-detail-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  #order-detail-card > h1 {
    margin-bottom: 19px !important;
    font-size: 27px !important;
  }

  .tracking-panel {
    padding: 18px 13px !important;
    border-radius: 13px !important;
  }

  .tracking-heading {
    flex-direction: column !important;
    gap: 13px !important;
    margin-bottom: 23px !important;
  }

  .tracking-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 23px !important;
  }

  .tracking-step {
    padding: 0 4px !important;
  }

  .tracking-step::before {
    display: none !important;
  }

  .tracking-step h3 {
    font-size: 12px !important;
  }

  .tracking-step p {
    font-size: 10px !important;
  }

  .order-status-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .order-status-grid > p {
    padding: 14px !important;
  }

  .totals,
  .delivery-summary {
    padding: 15px !important;
  }
}



--- STYLE BLOCK 3 ---


/* PARTNER_TRACKING_DATETIME_STYLE_V1 */
.tracking-step .tracking-datetime {
  display: block;
  margin: 9px 0 0 !important;
  color: #d8bb7d !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: .15px !important;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .tracking-step .tracking-datetime {
    font-size: 10px !important;
  }
}



--- STYLE BLOCK 4 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 5 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 6 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/payment-success.html ==========


--- STYLE BLOCK 1 ---

    .payment-success-card { max-width: 760px; margin: 28px auto; }
    .payment-success-card h1 { color: #176b3a; }
    .payment-success-card .checkout-action { margin-top: 16px; text-decoration: none; }
  

--- STYLE BLOCK 2 ---

.checkout-progress a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.checkout-progress a:hover {
  text-decoration: underline;
}


--- STYLE BLOCK 3 ---


/* Shared customer dropdown visibility fix */
/* Fix account greeting and dropdown text visibility */
    .customer-account-greeting,
    .customer-account-greeting small,
    .customer-account-greeting strong,
    .customer-account-trigger,
    .account-user-name {
      color: #172b4d !important;
    }

    .customer-account-dropdown,
    .customer-account-dropdown a,
    .customer-account-item,
    .customer-account-heading,
    .customer-account-heading strong,
    .customer-account-heading span {
      color: #172b4d !important;
    }
  


/* Account dropdown: white background, black text */
.customer-account-trigger {
  background: #ffffff !important;
  color: #000000 !important;
}

.customer-account-greeting,
.customer-account-greeting small,
.customer-account-greeting strong,
.customer-account-arrow,
.account-user-name {
  color: #000000 !important;
}

.customer-account-dropdown {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.customer-account-dropdown a,
.customer-account-item,
.customer-account-heading,
.customer-account-heading strong,
.customer-account-heading span,
.customer-account-logout {
  color: #000000 !important;
}

.customer-account-item:hover,
.customer-account-logout:hover {
  background: #f3f4f6 !important;
  color: #000000 !important;
}

/* Keep account menu above checkout content */
body > header {
  position: relative;
  z-index: 10000;
  overflow: visible;
}

body > header .header-right,
body > header .customer-account-menu {
  position: relative;
  overflow: visible;
  z-index: 10001;
}

body > header .customer-account-dropdown:not([hidden]) {
  display: block;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10002;
  min-width: 240px;
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  color: #000;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

body > header .customer-account-dropdown[hidden] {
  display: none !important;
}

body > header .customer-account-dropdown .customer-account-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  color: #000 !important;
  background: #fff;
}

body > header .customer-account-dropdown .customer-account-item:hover {
  background: #ffe5e5 !important;
  color: #000 !important;
}



--- STYLE BLOCK 4 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 5 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 6 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/product-detail.html ==========


--- STYLE BLOCK 1 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 2 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 3 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/sale.html ==========


--- STYLE BLOCK 1 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 2 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 3 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/saved-addresses.html ==========


--- STYLE BLOCK 1 ---

    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: #f1f3f6;
      color: #212121;
      font-family: Arial, sans-serif;
    }
    .address-page {
      max-width: 1050px;
      margin: 30px auto;
      padding: 0 16px;
    }
    .breadcrumb { color: #666; font-size: 13px; margin-bottom: 18px; }
    .address-layout {
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }
    .panel {
      background: white;
      border: 1px solid #e4e7eb;
      border-radius: 5px;
      padding: 22px;
      margin-bottom: 18px;
    }
    .side-title { font-size: 17px; font-weight: bold; margin: 0 0 18px; }
    .side-link {
      display: block;
      padding: 12px 0;
      text-decoration: none;
      color: #333;
      border-top: 1px solid #eee;
    }
    .side-link.active { color: #2874f0; font-weight: bold; }
    .heading-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }
    h1 { font-size: 22px; margin: 0; }
    .muted { color: #777; font-size: 13px; }
    button {
      cursor: pointer;
      border: 0;
      border-radius: 4px;
      padding: 11px 16px;
      font-weight: bold;
    }
    .primary { background: #2874f0; color: white; }
    .secondary { background: white; color: #2874f0; border: 1px solid #2874f0; }
    .danger { background: white; color: #c62828; border: 1px solid #e0b5b5; }
    .address-card { border: 1px solid #e6e6e6; padding: 18px; border-radius: 5px; margin-top: 14px; }
    .address-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .person { font-weight: bold; }
    .tag {
      display: inline-block; background: #e8f1ff; color: #225fbb;
      font-size: 11px; padding: 5px 8px; border-radius: 3px; margin-left: 8px;
    }
    .address-text { line-height: 1.7; margin: 12px 0; white-space: pre-line; }
    .actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .field { display: flex; flex-direction: column; gap: 7px; }
    .field.full { grid-column: 1 / -1; }
    label { font-size: 13px; font-weight: bold; }
    input {
      width: 100%; padding: 12px; border: 1px solid #c9cdd2;
      border-radius: 4px; font-size: 14px; outline-color: #2874f0;
    }
    .form-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
    .notice { padding: 12px; border-radius: 4px; margin: 12px 0; font-size: 14px; }
    .error { color: #a61b1b; background: #fff0f0; }
    .success { color: #176b36; background: #edfff2; }
    .empty { text-align: center; padding: 35px 10px; color: #666; }
    [hidden] { display: none !important; }

    @media (max-width: 650px) {
      .address-layout { grid-template-columns: 1fr; }
      .panel { padding: 16px; }
      .form-grid { grid-template-columns: 1fr; }
      .field.full { grid-column: auto; }
      .address-page { margin-top: 18px; }
      h1 { font-size: 20px; }
    }
  

--- STYLE BLOCK 2 ---


/* PARTNER_SAVED_ADDRESS_LUXURY_V1 */
:root {
  --address-ink: #172b3a;
  --address-navy: #142a3a;
  --address-gold: #c5a66b;
  --address-muted: #78838b;
  --address-border: #e8e5df;
  --address-cream: #faf8f4;
}

body {
  background: #f5f3ee !important;
  color: var(--address-ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.address-page {
  max-width: 1200px !important;
  margin: 38px auto 64px !important;
  padding: 0 24px !important;
}

.breadcrumb {
  color: #7c858a !important;
  font-size: 12px !important;
  letter-spacing: .3px;
  margin-bottom: 24px !important;
}

.breadcrumb a {
  color: var(--address-ink) !important;
  font-weight: 700;
}

.address-layout {
  grid-template-columns: 255px minmax(0, 1fr) !important;
  gap: 24px !important;
}

.panel {
  background: #fff !important;
  border: 1px solid var(--address-border) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 8px 30px rgba(23, 43, 58, .045) !important;
}

.address-layout > aside.panel {
  padding: 25px 20px !important;
  overflow: hidden;
}

.side-title {
  font-size: 11px !important;
  letter-spacing: 2px;
  color: #9b8251 !important;
  margin: 0 0 18px !important;
}

.side-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 14px 13px !important;
  margin: 3px 0;
  border: 0 !important;
  border-radius: 9px;
  color: #52616b !important;
  font-size: 13px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease;
}

.side-link:hover {
  background: #f6f3ed;
  color: var(--address-ink) !important;
}

.side-link.active {
  background: var(--address-navy) !important;
  color: #f0d8a3 !important;
  font-weight: 700;
}

.heading-row {
  align-items: center !important;
  margin-bottom: 26px !important;
  padding-bottom: 22px;
  border-bottom: 1px solid #efede8;
}

h1 {
  color: var(--address-ink) !important;
  font-size: clamp(25px, 3vw, 32px) !important;
  letter-spacing: -.8px;
  font-weight: 800 !important;
}

.muted {
  color: var(--address-muted) !important;
  font-size: 13px !important;
  margin: 8px 0 0;
  line-height: 1.7;
}

button {
  border-radius: 8px !important;
  padding: 12px 18px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .65px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
}

button:disabled {
  opacity: .6;
  cursor: wait;
}

.primary {
  background: var(--address-navy) !important;
  color: #f4dfb0 !important;
  border: 1px solid var(--address-navy) !important;
  box-shadow: 0 5px 12px rgba(20, 42, 58, .12);
}

.primary:hover:not(:disabled) {
  background: #244459 !important;
  box-shadow: 0 7px 17px rgba(20, 42, 58, .18);
}

.secondary {
  background: #fff !important;
  color: var(--address-ink) !important;
  border: 1px solid #d8d9d5 !important;
}

.secondary:hover:not(:disabled) {
  background: #f7f5f0 !important;
}

.danger {
  background: #fff !important;
  color: #a63f3f !important;
  border: 1px solid #ead2cf !important;
}

.danger:hover:not(:disabled) {
  background: #fff5f3 !important;
}

.address-card {
  position: relative;
  background: linear-gradient(145deg, #fff 0%, #fdfcf9 100%) !important;
  border: 1px solid #e8e4da !important;
  border-radius: 13px !important;
  padding: 23px !important;
  margin-top: 16px !important;
  box-shadow: 0 4px 15px rgba(23, 43, 58, .035);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.address-card:hover {
  border-color: #cbb783 !important;
  box-shadow: 0 10px 25px rgba(23, 43, 58, .07);
  transform: translateY(-2px);
}

.address-top {
  align-items: flex-start !important;
}

.person {
  color: var(--address-ink) !important;
  font-size: 16px;
  font-weight: 800 !important;
  overflow-wrap: anywhere;
}

.tag {
  display: inline-block !important;
  background: #f4ecd9 !important;
  color: #80652f !important;
  font-size: 9px !important;
  font-weight: 800;
  letter-spacing: .8px;
  padding: 6px 9px !important;
  border-radius: 5px !important;
  margin-left: 8px;
  vertical-align: middle;
}

.address-text {
  color: #5e6a71 !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
  margin: 15px 0 19px !important;
  overflow-wrap: anywhere;
}

.actions {
  display: flex !important;
  gap: 9px !important;
  padding-top: 15px;
  border-top: 1px solid #efede8;
}

.form-grid {
  gap: 18px !important;
}

.field {
  gap: 9px !important;
}

label {
  color: #344653 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

input {
  min-height: 47px;
  padding: 12px 14px !important;
  color: var(--address-ink) !important;
  background: #fdfdfc !important;
  border: 1px solid #deded8 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

input:hover {
  border-color: #bcb6a7 !important;
}

input:focus {
  outline: none !important;
  background: #fff !important;
  border-color: #a88b51 !important;
  box-shadow: 0 0 0 3px rgba(197, 166, 107, .15) !important;
}

.form-actions {
  gap: 10px !important;
  margin-top: 25px !important;
  padding-top: 20px;
  border-top: 1px solid #efede8;
}

#formTitle {
  color: var(--address-ink) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
}

#addressFormSection > hr {
  border-top-color: #e8e4da !important;
  margin: 25px 0 !important;
}

.notice {
  border-radius: 9px !important;
  padding: 14px 16px !important;
  line-height: 1.6;
}

.error {
  color: #963b36 !important;
  background: #fff3f1 !important;
  border: 1px solid #f0d5d1;
}

.success {
  color: #246442 !important;
  background: #f0f8f1 !important;
  border: 1px solid #d6ead8;
}

#loading {
  color: #7b858a;
  padding: 18px 0;
  font-size: 13px;
}

.empty {
  padding: 48px 16px !important;
  background: var(--address-cream);
  border: 1px dashed #d9d1c1;
  border-radius: 12px;
  margin-top: 15px;
}

.empty h3 {
  color: var(--address-ink);
  font-size: 19px;
}

.empty p {
  color: var(--address-muted);
  font-size: 13px;
  line-height: 1.7;
}

[hidden] {
  display: none !important;
}

@media (max-width: 800px) {
  .address-page {
    margin: 24px auto 40px !important;
    padding: 0 16px !important;
  }

  .address-layout {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .address-layout > aside.panel {
    padding: 18px !important;
  }

  .side-title {
    margin-bottom: 10px !important;
  }

  .side-link {
    display: inline-flex !important;
    padding: 10px 12px !important;
    margin: 3px 2px 3px 0;
    border: 1px solid #efede8 !important;
  }

  .side-link.active {
    border-color: var(--address-navy) !important;
  }

  .panel {
    padding: 21px !important;
  }
}

@media (max-width: 520px) {
  .address-page {
    padding: 0 12px !important;
    margin-top: 17px !important;
  }

  .panel {
    padding: 17px !important;
    border-radius: 12px !important;
  }

  .heading-row {
    align-items: flex-start !important;
    gap: 15px !important;
  }

  h1 {
    font-size: 24px !important;
  }

  #addButton {
    width: 100%;
  }

  .address-card {
    padding: 17px !important;
  }

  .address-top {
    gap: 10px !important;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .field.full {
    grid-column: auto !important;
  }

  .actions button,
  .form-actions button {
    flex: 1 1 auto;
  }

  .form-actions {
    gap: 8px !important;
  }
}



--- STYLE BLOCK 3 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 4 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 5 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: templates/women.html ==========


--- STYLE BLOCK 1 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 2 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* MOBILE NAVIGATION FIX - 2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 3 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: backend/templates/admin-login.html ==========


--- STYLE BLOCK 1 ---

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 20px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: #17212b;
      background: radial-gradient(ellipse at top right, #dce8ed, transparent 55%), #f3f5f7;
    }

    .login-card {
      width: 100%;
      max-width: 430px;
      padding: 36px;
      border: 1px solid #e2e7ea;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 20px 55px rgba(16, 24, 32, .10);
    }

    .brand {
      display: block;
      width: 120px;
      height: 85px;
      margin: 0 auto 20px;
      object-fit: contain;
    }

    .eyebrow {
      margin: 0 0 8px;
      text-align: center;
      color: #55798a;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      text-align: center;
      color: #101820;
      font-size: 30px;
    }

    .intro {
      margin: 10px 0 26px;
      text-align: center;
      color: #64717c;
      font-size: 14px;
      line-height: 1.5;
    }

    label {
      display: block;
      margin: 17px 0 7px;
      font-size: 13px;
      font-weight: 700;
    }

    input {
      width: 100%;
      min-height: 47px;
      padding: 12px;
      border: 1px solid #d7dfe4;
      border-radius: 8px;
      font: inherit;
      outline: none;
    }

    input:focus {
      border-color: #3c7188;
      box-shadow: 0 0 0 3px rgba(60, 113, 136, .13);
    }

    button {
      width: 100%;
      min-height: 48px;
      margin-top: 23px;
      border: 0;
      border-radius: 8px;
      background: #173b4b;
      color: #fff;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover:not(:disabled) { background: #23566c; }
    button:disabled { opacity: .65; cursor: wait; }

    .status {
      margin: 14px 0 0;
      color: #23764b;
      font-size: 13px;
      line-height: 1.5;
    }

    .status.error { color: #b42318; }

    .back-home {
      display: block;
      margin-top: 22px;
      text-align: center;
      color: #405966;
      font-size: 13px;
      text-decoration: none;
    }

    .back-home:hover { text-decoration: underline; }

    @media (max-width: 420px) {
      .login-card { padding: 26px 20px; }
      h1 { font-size: 26px; }
    }
  


========== INLINE CSS: backend/templates/admin.html ==========


--- STYLE BLOCK 1 ---

    :root {
      color-scheme: light;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: #17212b;
      background: #f3f5f7;
      font-synthesis: none;
      text-rendering: optimizeLegibility;
    }

    * {
      box-sizing: border-box;
    }

    body {
      min-width: 320px;
      min-height: 100vh;
      margin: 0;
      background:
        radial-gradient(ellipse at 90% 0%, rgba(72, 126, 149, 0.13), transparent 34rem),
        #f3f5f7;
    }

    .topbar {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 16px max(24px, calc((100vw - 1120px) / 2));
      color: #fff;
      background: #101820;
    }

    .brand {
      color: inherit;
      font-size: 16px;
      font-weight: 750;
      letter-spacing: 0.13em;
      text-decoration: none;
      text-transform: uppercase;
    }

    .topbar-note {
      color: #b7c3cc;
      font-size: 13px;
    }

    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .logout-button {
      min-height: 38px;
      padding: 8px 16px;
      border: 1px solid #3b4a56;
      border-radius: 8px;
      background: transparent;
      color: #e7edf2;
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      font-weight: 650;
      transition: background 150ms ease, border-color 150ms ease;
    }

    .logout-button:hover:not(:disabled) {
      background: #1d2833;
      border-color: #57697a;
    }

    .logout-button:disabled {
      cursor: wait;
      opacity: 0.65;
    }

    main {
      width: min(100% - 40px, 760px);
      margin: 56px auto 72px;
    }

    .eyebrow {
      margin: 0 0 10px;
      color: #55798a;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      color: #101820;
      font-size: clamp(30px, 5vw, 42px);
      letter-spacing: -0.04em;
      line-height: 1.1;
    }

    .intro {
      margin: 12px 0 28px;
      color: #64717c;
      font-size: 15px;
      line-height: 1.6;
    }

    .form-card {
      padding: clamp(22px, 5vw, 38px);
      border: 1px solid #e2e7ea;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 20px 55px rgba(16, 24, 32, 0.08);
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px 18px;
    }

    .field {
      min-width: 0;
    }

    .field-full {
      grid-column: 1 / -1;
    }

    label {
      display: block;
      margin-bottom: 8px;
      color: #263541;
      font-size: 13px;
      font-weight: 700;
    }

    .optional {
      color: #84909a;
      font-weight: 450;
    }

    input,
    select,
    textarea {
      width: 100%;
      min-height: 48px;
      padding: 12px 14px;
      border: 1px solid #d7dfe4;
      border-radius: 8px;
      outline: none;
      background: #fff;
      color: #17212b;
      font: inherit;
      font-size: 14px;
      transition: border-color 150ms ease, box-shadow 150ms ease;
    }

    textarea {
      min-height: 128px;
      resize: vertical;
      line-height: 1.5;
    }

    input::placeholder,
    textarea::placeholder {
      color: #9aa5ad;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: #3c7188;
      box-shadow: 0 0 0 3px rgba(60, 113, 136, 0.13);
    }

    .help-text {
      margin: 7px 0 0;
      color: #7c8891;
      font-size: 12px;
      line-height: 1.5;
    }

    .form-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 28px;
      padding-top: 22px;
      border-top: 1px solid #edf0f2;
    }

    .status {
      min-height: 20px;
      margin: 0;
      color: #23764b;
      font-size: 13px;
      line-height: 1.5;
    }

    .status.error {
      color: #b42318;
    }

    .management-card {
      margin-top: 28px;
      padding: clamp(22px, 5vw, 38px);
      border: 1px solid #e2e7ea;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 20px 55px rgba(16, 24, 32, 0.06);
    }

    .management-card h2 { margin: 0 0 8px; color: #101820; font-size: 22px; }
    .admin-table-wrap { overflow-x: auto; margin-top: 24px; }
    .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .admin-table th, .admin-table td { padding: 12px 10px; border-bottom: 1px solid #edf0f2; text-align: left; white-space: nowrap; }
    .admin-table th { color: #55798a; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
    .admin-table button { min-height: 34px; padding: 0 12px; font-size: 12px; }
    .badge { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #e8f5ed; color: #23764b; font-size: 11px; font-weight: 700; }
    .badge.inactive { background: #fbe9e7; color: #b42318; }

    button {
      min-height: 48px;
      flex: 0 0 auto;
      padding: 0 22px;
      border: 0;
      border-radius: 8px;
      background: #173b4b;
      color: #fff;
      cursor: pointer;
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      transition: background 150ms ease, transform 150ms ease;
    }

    button:hover:not(:disabled) {
      background: #23566c;
      transform: translateY(-1px);
    }

    button:focus-visible {
      outline: 3px solid #82b7cc;
      outline-offset: 3px;
    }

    button:disabled {
      cursor: wait;
      opacity: 0.7;
    }

    @media (max-width: 560px) {
      .topbar {
        min-height: 62px;
        padding-inline: 20px;
      }

      .topbar-note {
        font-size: 12px;
        text-align: right;
      }

      main {
        width: min(100% - 28px, 760px);
        margin-top: 36px;
      }

      .form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .field-full {
        grid-column: auto;
      }

      .form-footer {
        align-items: stretch;
        flex-direction: column-reverse;
      }

      button {
        width: 100%;
      }
    }

    /* Premium Admin Orders Dashboard */
    .orders-dashboard {
      margin: 0 0 28px;
      padding: 28px;
      border: 1px solid #e6e9ef;
      border-radius: 22px;
      background: linear-gradient(145deg, #fff, #f8faff);
      box-shadow: 0 14px 40px rgba(20, 35, 60, .07);
    }
    .orders-heading {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 22px;
    }
    .orders-heading h2 { margin: 5px 0 8px; }
    .orders-heading p { margin: 0; color: #687386; }
    .orders-eyebrow {
      color: #64748b;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
    .orders-toolbar {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) minmax(155px, 220px) auto;
      gap: 12px;
      margin-bottom: 20px;
    }
    .orders-toolbar input, .orders-toolbar select,
    .order-detail select {
      width: 100%;
      min-height: 45px;
      padding: 11px 13px;
      border: 1px solid #dce2eb;
      border-radius: 11px;
      background: #fff;
      color: #172b4d;
      font: inherit;
    }
    .orders-btn {
      min-height: 43px;
      padding: 10px 16px;
      border: 0;
      border-radius: 11px;
      background: #172b4d;
      color: #fff;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      transition: background .2s, transform .2s;
    }
    .orders-btn:hover { background: #294875; transform: translateY(-1px); }
    .orders-btn:disabled { opacity: .55; cursor: wait; transform: none; }
    .orders-btn.secondary {
      border: 1px solid #dce2eb;
      background: #fff;
      color: #172b4d;
    }
    .orders-btn.secondary:hover { background: #f1f5f9; }
    .orders-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 13px;
      margin-bottom: 22px;
    }
    .orders-stat {
      padding: 17px;
      border: 1px solid #e8edf4;
      border-radius: 15px;
      background: #fff;
    }
    .orders-stat span { display: block; color: #718096; font-size: 12px; }
    .orders-stat strong {
      display: block;
      margin-top: 8px;
      color: #172b4d;
      font-size: 25px;
      overflow-wrap: anywhere;
    }
    .orders-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid #e7ebf1;
      border-radius: 14px;
      background: #fff;
    }
    .orders-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 780px;
      text-align: left;
    }
    .orders-table th {
      padding: 14px 13px;
      background: #f4f6fa;
      color: #64748b;
      font-size: 11px;
      letter-spacing: .7px;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .orders-table td {
      padding: 15px 13px;
      border-top: 1px solid #edf0f5;
      color: #344054;
      font-size: 13px;
      vertical-align: middle;
    }
    .orders-table tbody tr:hover { background: #f9fbff; }
    .order-id { color: #172b4d; font-weight: 800; }
    .order-customer { color: #172b4d; font-weight: 700; }
    .order-muted { display: block; margin-top: 4px; color: #8490a1; font-size: 12px; }
    .order-badge {
      display: inline-flex;
      padding: 6px 9px;
      border-radius: 999px;
      background: #eef2f7;
      color: #475569;
      font-size: 11px;
      font-weight: 800;
      text-transform: capitalize;
      white-space: nowrap;
    }
    .order-badge.delivered, .order-badge.paid { background: #dcfce7; color: #166534; }
    .order-badge.shipped, .order-badge.processing { background: #dbeafe; color: #1d4ed8; }
    .order-badge.confirmed { background: #ede9fe; color: #6d28d9; }
    .order-badge.pending { background: #fef3c7; color: #92400e; }
    .order-badge.cancelled, .order-badge.failed { background: #fee2e2; color: #991b1b; }
    .order-detail {
      margin-top: 22px;
      padding: 22px;
      border: 1px solid #e1e7f0;
      border-radius: 17px;
      background: #fff;
    }
    .order-detail[hidden] { display: none; }
    .order-detail-heading {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .order-detail-heading h3 { margin: 0 0 6px; color: #172b4d; }
    .order-detail-heading p { margin: 0; color: #718096; font-size: 13px; }
    .order-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 20px;
    }
    .order-info-card {
      padding: 16px;
      border: 1px solid #e8edf4;
      border-radius: 13px;
      overflow-wrap: anywhere;
    }
    .order-info-card h4 { margin: 0 0 11px; color: #172b4d; }
    .order-info-card p { margin: 6px 0; color: #566276; font-size: 13px; line-height: 1.55; }
    .order-items-list { display: grid; gap: 10px; margin: 12px 0 20px; }
    .order-item-row {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      padding: 13px;
      border: 1px solid #edf0f5;
      border-radius: 12px;
    }
    .order-item-row strong { color: #172b4d; }
    .order-item-row p { margin: 5px 0 0; color: #718096; font-size: 12px; }
    .order-item-price { text-align: right; white-space: nowrap; font-weight: 800; color: #172b4d; }
    .order-totals { max-width: 360px; margin: 0 0 20px auto; }
    .order-total-line {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      padding: 7px 0;
      color: #64748b;
      font-size: 13px;
    }
    .order-total-line.grand {
      margin-top: 5px;
      padding-top: 13px;
      border-top: 1px solid #e2e8f0;
      color: #172b4d;
      font-size: 18px;
      font-weight: 800;
    }
    .order-status-editor {
      display: grid;
      grid-template-columns: minmax(150px, 230px) auto;
      align-items: end;
      gap: 12px;
      padding-top: 18px;
      border-top: 1px solid #edf0f5;
    }
    .order-status-editor label { display: block; margin-bottom: 7px; color: #475569; font-size: 12px; font-weight: 700; }

    .refund-panel {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid #e8edf4;
    }
    .refund-panel-heading h4 { margin: 0 0 5px; color: #172b4d; font-size: 17px; }
    .refund-panel-heading p { margin: 0; color: #718096; font-size: 12px; }
    .refund-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin: 16px 0;
    }
    .refund-summary > div {
      display: grid;
      gap: 7px;
      padding: 13px;
      border: 1px solid #e8edf4;
      border-radius: 11px;
    }
    .refund-summary span { color: #718096; font-size: 11px; }
    .refund-summary strong { color: #172b4d; font-size: 16px; overflow-wrap: anywhere; }
    .refund-disclaimer, .refund-notice {
      padding: 12px;
      border-radius: 9px;
      background: #fff8e8;
      color: #805b16;
      font-size: 12px;
      line-height: 1.6;
    }
    .refund-request-form {
      margin: 16px 0;
      padding: 16px;
      border: 1px solid #e8edf4;
      border-radius: 12px;
    }
    .refund-request-form h5, .refund-history h5 {
      margin: 0 0 13px;
      color: #172b4d;
      font-size: 14px;
    }
    .refund-form-grid {
      display: grid;
      grid-template-columns: minmax(130px, .7fr) minmax(200px, 1.3fr);
      gap: 12px;
      margin-bottom: 12px;
    }
    .refund-form-grid label, .refund-process-fields label {
      display: grid;
      gap: 6px;
      color: #475569;
      font-size: 12px;
      font-weight: 700;
    }
    .refund-form-grid input, .refund-form-grid textarea,
    .refund-process-fields input {
      width: 100%;
      min-width: 0;
      padding: 10px;
      border: 1px solid #dce3ed;
      border-radius: 8px;
      color: #172b4d;
      font: inherit;
      font-weight: 400;
      box-sizing: border-box;
    }
    .refund-history { margin-top: 20px; }
    .refund-history-item {
      margin: 10px 0;
      padding: 14px;
      border: 1px solid #e8edf4;
      border-radius: 11px;
      overflow-wrap: anywhere;
    }
    .refund-history-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .refund-history-top p, .refund-history-item > p {
      margin: 5px 0;
      color: #64748b;
      font-size: 12px;
      line-height: 1.5;
    }
    .refund-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .refund-reject { color: #a12626 !important; }
    .refund-process-fields { display: grid; gap: 10px; margin-top: 12px; }
    @media (max-width: 650px) {
      .refund-summary { grid-template-columns: 1fr; }
      .refund-form-grid { grid-template-columns: 1fr; }
    }

    .orders-message { margin: 12px 0; color: #64748b; font-size: 13px; }
    .orders-message.error { color: #b42318; }
    .orders-empty { padding: 28px !important; text-align: center; color: #718096 !important; }
    @media (max-width: 760px) {
      .orders-dashboard { padding: 17px; border-radius: 16px; }
      .orders-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .orders-toolbar { grid-template-columns: 1fr; }
      .order-detail { padding: 15px; }
      .order-detail-grid { grid-template-columns: 1fr; }
      .order-status-editor { grid-template-columns: 1fr; }
    }

  

    /* PREMIUM_LUXURY_ADMIN_THEME_V1 */

    :root {
      color-scheme: light;
      --lux-navy: #111c2d;
      --lux-navy-light: #1b2b40;
      --lux-gold: #b89a60;
      --lux-gold-light: #e5d4ad;
      --lux-ink: #202b3c;
      --lux-muted: #748092;
      --lux-border: #e8e9ed;
      --lux-surface: #ffffff;
      --lux-background: #f5f6f8;
      font-family: Inter, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
      color: var(--lux-ink);
      background: var(--lux-background);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      min-width: 320px;
      min-height: 100vh;
      margin: 0;
      color: var(--lux-ink);
      background:
        radial-gradient(ellipse at 90% 0%, rgba(184,154,96,.09), transparent 32rem),
        linear-gradient(180deg, #f8f9fb 0%, #f2f4f7 100%);
      -webkit-font-smoothing: antialiased;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      min-height: 78px;
      padding: 16px clamp(18px, 4vw, 64px);
      border-bottom: 1px solid rgba(229,212,173,.24);
      background: rgba(17,28,45,.97);
      box-shadow: 0 8px 28px rgba(17,28,45,.13);
      backdrop-filter: blur(16px);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: #fff;
      font-size: clamp(13px, 1.3vw, 16px);
      font-weight: 800;
      letter-spacing: .15em;
      line-height: 1.5;
    }

    .brand::before {
      content: "";
      width: 3px;
      height: 30px;
      border-radius: 5px;
      background: linear-gradient(180deg, #e8d7b0, #a8894e);
    }

    .topbar-note {
      color: #d3c6a8;
      font-size: 12px;
      font-weight: 650;
      letter-spacing: .035em;
    }

    .topbar-actions {
      gap: 18px;
    }

    .logout-button {
      min-height: 40px;
      padding: 9px 17px;
      border: 1px solid rgba(229,212,173,.43);
      border-radius: 7px;
      background: transparent;
      color: #f7f2e8;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .025em;
      transition: background .2s, border-color .2s, transform .2s;
    }

    .logout-button:hover:not(:disabled) {
      transform: translateY(-1px);
      border-color: var(--lux-gold-light);
      background: rgba(184,154,96,.14);
    }

    main {
      width: min(100% - 64px, 1440px);
      margin: 44px auto 80px;
    }

    main > h1,
    main > .eyebrow {
      max-width: 900px;
    }

    h1 {
      color: var(--lux-navy);
      font-size: clamp(32px, 4vw, 46px);
      font-weight: 780;
      letter-spacing: -.055em;
      line-height: 1.12;
    }

    h2, h3 {
      color: var(--lux-navy);
      letter-spacing: -.035em;
    }

    .eyebrow,
    .orders-eyebrow {
      color: #9b7a3e;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .19em;
      text-transform: uppercase;
    }

    .intro {
      max-width: 760px;
      color: var(--lux-muted);
      font-size: 14px;
      line-height: 1.8;
    }

    .form-card,
    .management-card,
    .orders-dashboard {
      min-width: 0;
      margin-top: 26px;
      padding: clamp(22px, 3vw, 38px);
      overflow: hidden;
      border: 1px solid rgba(225,228,234,.95);
      border-radius: 16px;
      background: var(--lux-surface);
      box-shadow:
        0 3px 8px rgba(17,28,45,.025),
        0 18px 48px rgba(17,28,45,.045);
    }

    .form-card,
    .management-card {
      position: relative;
    }

    .form-card::before,
    .management-card::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, var(--lux-navy), var(--lux-gold), transparent 90%);
      content: "";
    }

    .management-card h2,
    .orders-heading h2 {
      margin: 0 0 10px;
      color: var(--lux-navy);
      font-size: clamp(22px, 2.5vw, 29px);
      font-weight: 780;
      letter-spacing: -.045em;
    }

    .management-card > p:not(.eyebrow) {
      color: var(--lux-muted);
      font-size: 13px;
      line-height: 1.7;
    }

    .form-grid {
      gap: 24px 22px;
    }

    label {
      margin-bottom: 9px;
      color: #344054;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .01em;
    }

    input,
    select,
    textarea {
      min-height: 47px;
      padding: 12px 14px;
      border: 1px solid #dfe3e9;
      border-radius: 8px;
      background-color: #fcfcfd;
      color: #202b3c;
      font-size: 13px;
      transition: border-color .18s, box-shadow .18s, background .18s;
    }

    input:hover,
    select:hover,
    textarea:hover {
      border-color: #c5cad3;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--lux-gold);
      outline: none;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(184,154,96,.13);
    }

    input::placeholder,
    textarea::placeholder {
      color: #9aa3b1;
    }

    .help-text {
      color: #818b9a;
      font-size: 11px;
    }

    .form-footer {
      margin-top: 30px;
      padding-top: 23px;
      border-color: #eceef2;
    }

    button,
    .orders-btn {
      min-height: 43px;
      padding: 0 19px;
      border: 1px solid var(--lux-navy);
      border-radius: 7px;
      background: var(--lux-navy);
      color: #fff;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .015em;
      box-shadow: 0 4px 10px rgba(17,28,45,.09);
      transition:
        background .18s,
        border-color .18s,
        color .18s,
        transform .18s,
        box-shadow .18s;
    }

    button:hover:not(:disabled),
    .orders-btn:hover:not(:disabled) {
      transform: translateY(-1px);
      border-color: #30465f;
      background: #263b54;
      box-shadow: 0 7px 16px rgba(17,28,45,.13);
    }

    button:focus-visible {
      outline: 3px solid rgba(184,154,96,.55);
      outline-offset: 3px;
    }

    .orders-dashboard {
      margin-bottom: 30px;
      padding: clamp(18px, 3vw, 34px);
      border-radius: 17px;
    }

    .orders-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      margin-bottom: 26px;
    }

    .orders-heading h2 {
      margin-top: 8px;
    }

    .orders-heading p {
      max-width: 660px;
      margin: 0;
      color: var(--lux-muted);
      font-size: 13px;
      line-height: 1.7;
    }

    .orders-btn.secondary {
      border-color: #d9dce3;
      background: #fff;
      color: var(--lux-navy);
      box-shadow: none;
    }

    .orders-btn.secondary:hover:not(:disabled) {
      border-color: var(--lux-gold);
      background: #faf7f0;
    }

    .orders-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 15px;
      margin: 25px 0;
    }

    .orders-stat {
      position: relative;
      min-width: 0;
      padding: 22px 20px;
      overflow: hidden;
      border: 1px solid #e8e9ed;
      border-radius: 11px;
      background: linear-gradient(145deg, #fff 30%, #faf9f6 100%);
    }

    .orders-stat::after {
      position: absolute;
      right: -18px;
      bottom: -30px;
      width: 80px;
      height: 80px;
      border: 1px solid rgba(184,154,96,.18);
      border-radius: 50%;
      content: "";
    }

    .orders-stat span {
      display: block;
      color: #788394;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .09em;
      line-height: 1.6;
      text-transform: uppercase;
    }

    .orders-stat strong {
      display: block;
      margin-top: 10px;
      color: var(--lux-navy);
      font-size: clamp(25px, 3vw, 34px);
      font-weight: 800;
      letter-spacing: -.05em;
      font-variant-numeric: tabular-nums;
    }

    .orders-toolbar {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(170px, 230px) auto;
      gap: 12px;
      margin: 24px 0 16px;
      padding: 15px;
      border: 1px solid #eceef2;
      border-radius: 10px;
      background: #f8f9fb;
    }

    .orders-toolbar input,
    .orders-toolbar select {
      min-width: 0;
      min-height: 44px;
      background: #fff;
    }

    .orders-toolbar .orders-btn {
      min-height: 44px;
    }

    .orders-message {
      color: var(--lux-muted);
      font-size: 12px;
      line-height: 1.7;
    }

    .orders-table-wrap,
    .admin-table-wrap {
      width: 100%;
      margin-top: 18px;
      overflow-x: auto;
      border: 1px solid #e9ebf0;
      border-radius: 10px;
      background: #fff;
      scrollbar-color: #c5b58f #f2f3f5;
      scrollbar-width: thin;
    }

    .orders-table,
    .admin-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 12px;
    }

    .orders-table th,
    .admin-table th {
      padding: 15px 14px;
      border-bottom: 1px solid #e6e8ed;
      background: #f7f8fa;
      color: #6c7788;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .105em;
      text-align: left;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .orders-table td,
    .admin-table td {
      padding: 15px 14px;
      border-bottom: 1px solid #eff0f3;
      color: #455165;
      text-align: left;
      vertical-align: middle;
      white-space: nowrap;
    }

    .orders-table tbody tr:last-child td,
    .admin-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .orders-table tbody tr:hover td,
    .admin-table tbody tr:hover td {
      background: #fbfaf7;
    }

    .orders-table .orders-empty {
      padding: 32px 18px;
      color: #8791a0;
      text-align: center;
    }

    .orders-table button,
    .admin-table button {
      min-height: 34px;
      padding: 0 12px;
      border-radius: 6px;
      font-size: 11px;
      box-shadow: none;
    }

    .orders-table .badge,
    .admin-table .badge {
      padding: 6px 9px;
      border: 1px solid #d9ebdf;
      border-radius: 6px;
      background: #eff8f1;
      color: #267447;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .015em;
      text-transform: capitalize;
    }

    .badge.inactive {
      border-color: #f1d8d5;
      background: #fff2f0;
      color: #a93226;
    }

    .order-detail {
      margin-top: 26px;
      padding: clamp(17px, 3vw, 28px);
      border: 1px solid #e3dfd4;
      border-radius: 12px;
      background: linear-gradient(150deg, #fff 50%, #fbf9f4);
    }

    .order-detail-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding-bottom: 18px;
      border-bottom: 1px solid #eae8e1;
    }

    .order-detail-heading h3 {
      margin: 0;
      font-size: clamp(19px, 2.5vw, 25px);
    }

    .order-detail-heading p {
      margin: 7px 0 0;
      color: var(--lux-muted);
      font-size: 12px;
    }

    #order-detail-content {
      overflow-wrap: anywhere;
    }

    #order-detail-content > div {
      min-width: 0;
    }

    #order-detail-content h4 {
      color: var(--lux-navy);
      font-size: 13px;
      letter-spacing: -.01em;
    }

    #order-detail-content img {
      max-width: 100%;
      border-radius: 7px;
      object-fit: cover;
    }

    #order-detail-content input,
    #order-detail-content select {
      min-width: 0;
      max-width: 100%;
    }

    .status {
      color: #267447;
      font-size: 12px;
    }

    .status.error {
      color: #b42318;
    }

    ::selection {
      background: #e8dcc1;
      color: #111c2d;
    }

    [hidden] {
      display: none !important;
    }

    @media (min-width: 1500px) {
      main {
        width: min(100% - 96px, 1480px);
      }
    }

    @media (max-width: 900px) {
      main {
        width: calc(100% - 36px);
        margin-top: 30px;
      }

      .orders-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .orders-toolbar {
        grid-template-columns: 1fr 1fr;
      }

      .orders-toolbar input {
        grid-column: 1 / -1;
      }

      .orders-toolbar .orders-btn {
        width: 100%;
      }

      .topbar {
        padding-inline: 22px;
      }
    }

    @media (max-width: 560px) {
      .topbar {
        position: relative;
        min-height: 66px;
        flex-wrap: wrap;
        gap: 10px;
        padding: 13px 16px;
      }

      .brand {
        font-size: 11px;
        letter-spacing: .09em;
      }

      .brand::before {
        height: 24px;
      }

      .topbar-actions {
        gap: 8px;
      }

      .topbar-note {
        max-width: 130px;
        font-size: 10px;
      }

      .logout-button {
        min-height: 35px;
        padding: 6px 10px;
        font-size: 11px;
      }

      main {
        width: calc(100% - 24px);
        margin: 27px auto 45px;
      }

      h1 {
        font-size: 32px;
      }

      .form-card,
      .management-card,
      .orders-dashboard {
        margin-top: 18px;
        padding: 18px 14px;
        border-radius: 12px;
      }

      .form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;
      }

      .field-full {
        grid-column: auto;
      }

      .form-footer {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 10px;
      }

      .form-footer button {
        width: 100%;
      }

      .orders-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
      }

      .orders-heading > button {
        width: 100%;
      }

      .orders-stats {
        gap: 9px;
        margin: 18px 0;
      }

      .orders-stat {
        padding: 15px 12px;
        border-radius: 9px;
      }

      .orders-stat span {
        font-size: 9px;
        letter-spacing: .045em;
      }

      .orders-stat strong {
        font-size: 27px;
      }

      .orders-toolbar {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 11px;
      }

      .orders-toolbar input {
        grid-column: auto;
      }

      .orders-toolbar button {
        width: 100%;
      }

      .orders-table th,
      .orders-table td,
      .admin-table th,
      .admin-table td {
        padding: 12px 10px;
      }

      .order-detail-heading {
        align-items: flex-start;
        flex-direction: column;
      }

      .order-detail-heading button {
        width: 100%;
      }

      .management-card h2 {
        font-size: 22px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }

  

    /* Premium Admin Dashboard */
    .dashboard-overview {
      margin: 0 0 38px;
      padding: 28px;
      border: 1px solid #e6e8ec;
      border-radius: 20px;
      background: linear-gradient(135deg, #fff 0%, #f7f9fc 100%);
      box-shadow: 0 12px 36px rgba(20, 35, 60, .055);
    }
    .dashboard-heading {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 24px;
    }
    .dashboard-heading h2 {
      margin: 5px 0 8px;
      color: #142238;
      font-size: clamp(23px, 3vw, 30px);
      letter-spacing: -.8px;
    }
    .dashboard-heading p {
      margin: 0;
      color: #718096;
      font-size: 14px;
      line-height: 1.6;
    }
    .dashboard-kicker {
      color: #9a7138;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.8px;
      text-transform: uppercase;
    }
    .dashboard-refresh {
      flex: 0 0 auto;
      border: 1px solid #dce2ea;
      border-radius: 10px;
      padding: 10px 14px;
      background: #fff;
      color: #23344e;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .dashboard-refresh:hover {
      border-color: #b28b50;
      color: #8a622b;
    }
    .dashboard-stats {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
    }
    .dashboard-stat {
      min-width: 0;
      padding: 20px 17px;
      border: 1px solid #e9edf2;
      border-radius: 15px;
      background: #fff;
    }
    .dashboard-stat-label {
      display: block;
      margin-bottom: 14px;
      color: #718096;
      font-size: 12px;
      font-weight: 650;
      line-height: 1.5;
    }
    .dashboard-stat-value {
      display: block;
      overflow-wrap: anywhere;
      color: #142238;
      font-size: clamp(22px, 2.2vw, 29px);
      font-weight: 800;
      letter-spacing: -.7px;
    }
    .dashboard-stat-note {
      display: block;
      margin-top: 8px;
      color: #8792a2;
      font-size: 11px;
      line-height: 1.5;
    }
    .dashboard-stat.revenue {
      border-top: 3px solid #b18a50;
    }
    .dashboard-stat.stock-alert {
      border-top: 3px solid #d98b48;
    }
    .dashboard-recent {
      margin-top: 25px;
      padding-top: 22px;
      border-top: 1px solid #e8ebf0;
    }
    .dashboard-recent-heading {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .dashboard-recent-heading h3 {
      margin: 0;
      color: #142238;
      font-size: 17px;
    }
    .dashboard-table-wrap {
      overflow-x: auto;
      border: 1px solid #e8ebf0;
      border-radius: 12px;
      background: #fff;
    }
    .dashboard-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .dashboard-table th,
    .dashboard-table td {
      padding: 13px 14px;
      border-bottom: 1px solid #edf0f4;
      text-align: left;
      white-space: nowrap;
    }
    .dashboard-table th {
      background: #f7f8fa;
      color: #718096;
      font-size: 11px;
      font-weight: 750;
      letter-spacing: .5px;
      text-transform: uppercase;
    }
    .dashboard-table td {
      color: #35445a;
    }
    .dashboard-table tr:last-child td {
      border-bottom: 0;
    }
    .dashboard-order-id {
      color: #172b4d;
      font-weight: 800;
    }
    .dashboard-status {
      display: inline-block;
      padding: 5px 9px;
      border-radius: 20px;
      background: #f0f2f5;
      color: #536174;
      font-size: 11px;
      font-weight: 750;
      text-transform: capitalize;
    }
    .dashboard-status.paid,
    .dashboard-status.delivered {
      background: #e8f7ee;
      color: #207347;
    }
    .dashboard-status.failed,
    .dashboard-status.cancelled {
      background: #fff0ee;
      color: #b33b31;
    }
    .dashboard-status.shipped,
    .dashboard-status.processing,
    .dashboard-status.confirmed {
      background: #edf3ff;
      color: #315da8;
    }
    .dashboard-message {
      padding: 18px;
      color: #718096;
      font-size: 13px;
      text-align: center;
    }
    @media (max-width: 1050px) {
      .dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 650px) {
      .dashboard-overview { padding: 18px; border-radius: 15px; }
      .dashboard-heading { align-items: flex-start; }
      .dashboard-heading p { font-size: 12px; }
      .dashboard-refresh { padding: 9px 10px; font-size: 12px; }
      .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .dashboard-stat { padding: 15px 13px; }
      .dashboard-stat-value { font-size: 23px; }
      .dashboard-stat-label { margin-bottom: 10px; }
      .dashboard-table th, .dashboard-table td { padding: 11px 12px; }
    }

  
    /* PREMIUM_SALES_ANALYTICS_V1 */
    .dashboard-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .dashboard-period { min-height:42px; padding:0 36px 0 13px; border:1px solid #d8deea; border-radius:10px; background:#fff; color:#172b4d; font:600 13px inherit; cursor:pointer; max-width:100%; }
    .dashboard-sales-panel { margin:22px 0 26px; padding:24px; background:#fff; border:1px solid #e6eaf0; border-radius:18px; box-shadow:0 8px 28px rgba(23,43,77,.045); min-width:0; }
    .dashboard-sales-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
    .dashboard-sales-heading h3 { margin:0 0 6px; color:#172b4d; font-size:19px; font-weight:750; }
    .dashboard-sales-heading p { margin:0; color:#788397; font-size:13px; line-height:1.5; }
    .dashboard-sales-total { color:#172b4d; font-size:clamp(20px,3vw,28px); font-weight:800; text-align:right; overflow-wrap:anywhere; }
    .dashboard-sales-total small { display:block; margin-top:4px; color:#788397; font-size:11px; font-weight:600; }
    .dashboard-sales-chart { display:flex; align-items:stretch; gap:clamp(4px,1.1vw,13px); min-height:220px; padding:16px 4px 0; border-bottom:1px solid #e9edf3; overflow-x:auto; }
    .sales-bar-item { display:flex; flex:1 0 0; min-width:0; min-height:200px; flex-direction:column; align-items:center; justify-content:flex-end; gap:9px; }
    .sales-bar-track { display:flex; align-items:flex-end; justify-content:center; width:100%; height:170px; min-width:5px; }
    .sales-bar-fill { width:min(68%,34px); min-height:0; border-radius:7px 7px 2px 2px; background:linear-gradient(180deg,#d8b46a 0%,#b58a3c 100%); transition:height .25s ease; }
    .sales-bar-item span { min-height:16px; color:#788397; font-size:10px; white-space:nowrap; }
    .dashboard-sales-legend { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:14px; color:#788397; font-size:12px; }
    .dashboard-sales-legend strong { color:#172b4d; }
    .dashboard-sales-empty { display:flex; align-items:center; justify-content:center; min-height:180px; padding:20px; color:#788397; text-align:center; font-size:13px; }
    @media (max-width:640px) { .dashboard-sales-panel { padding:16px 12px; } .dashboard-sales-heading h3 { font-size:17px; } .dashboard-sales-chart { min-height:185px; } .sales-bar-item { min-height:170px; } .sales-bar-track { height:140px; } .dashboard-period { min-height:38px; font-size:12px; } .dashboard-controls { gap:7px; } }
    /* END PREMIUM_SALES_ANALYTICS_V1 */

    /* INVENTORY_SUMMARY_CARDS_V1 */
    .inventory-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin: 22px 0 18px;
    }

    .inventory-summary-card {
      position: relative;
      overflow: hidden;
      padding: 21px;
      border: 1px solid #e9e2d5;
      border-radius: 16px;
      background: linear-gradient(135deg, #fff 0%, #faf7f0 100%);
      box-shadow: 0 5px 18px rgba(23, 43, 77, 0.045);
    }

    .inventory-summary-card::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: #b08d57;
    }

    .inventory-summary-card.low::after { background: #d49a35; }
    .inventory-summary-card.out::after { background: #bd5148; }

    .inventory-summary-label {
      display: block;
      margin-bottom: 12px;
      color: #687386;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .inventory-summary-value {
      display: block;
      color: #172b4d;
      font-size: 30px;
      font-weight: 750;
      line-height: 1.15;
      font-variant-numeric: tabular-nums;
    }

    .inventory-summary-card.low .inventory-summary-value { color: #a56d16; }
    .inventory-summary-card.out .inventory-summary-value { color: #b33b31; }

    .inventory-summary-note {
      display: block;
      margin-top: 8px;
      color: #778092;
      font-size: 12px;
    }

    @media (max-width: 760px) {
      .inventory-summary { gap: 10px; }
      .inventory-summary-card { padding: 16px 13px; }
      .inventory-summary-value { font-size: 25px; }
      .inventory-summary-label { font-size: 10px; }
      .inventory-summary-note { font-size: 11px; }
    }

    @media (max-width: 420px) {
      .inventory-summary { grid-template-columns: 1fr; }
    }

    /* Premium Inventory Management */
    .inventory-section {
      margin: 0 0 38px;
      padding: 26px;
      background: #fff;
      border: 1px solid #e5e9ef;
      border-radius: 18px;
      box-shadow: 0 12px 32px rgba(20,35,60,.05);
    }
    .inventory-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 22px;
    }
    .inventory-heading h2 {
      margin: 5px 0 8px;
      color: #142238;
      font-size: clamp(22px,3vw,29px);
      letter-spacing: -.6px;
    }
    .inventory-heading p {
      margin: 0;
      color: #718096;
      font-size: 13px;
      line-height: 1.6;
    }
    .inventory-controls {
      display: grid;
      grid-template-columns: minmax(180px,2fr) minmax(140px,1fr) minmax(140px,1fr);
      gap: 12px;
      margin-bottom: 18px;
    }
    .inventory-controls input,
    .inventory-controls select,
    .inventory-stock-input {
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      padding: 11px 12px;
      border: 1px solid #dce2ea;
      border-radius: 9px;
      background: #fff;
      color: #23344e;
      font: inherit;
      font-size: 13px;
    }
    .inventory-table-wrap {
      overflow-x: auto;
      border: 1px solid #e7ebf0;
      border-radius: 12px;
    }
    .inventory-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .inventory-table th,
    .inventory-table td {
      padding: 13px 12px;
      border-bottom: 1px solid #edf0f4;
      text-align: left;
      vertical-align: middle;
    }
    .inventory-table th {
      background: #f7f8fa;
      color: #718096;
      font-size: 10px;
      letter-spacing: .6px;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .inventory-table tr:last-child td { border-bottom: 0; }
    .inventory-product-name {
      min-width: 170px;
      color: #172b4d;
      font-weight: 750;
    }
    .inventory-muted {
      display: block;
      margin-top: 4px;
      color: #8993a2;
      font-size: 11px;
    }
    .inventory-pill {
      display: inline-block;
      padding: 5px 9px;
      border-radius: 20px;
      background: #e8f7ee;
      color: #207347;
      font-size: 11px;
      font-weight: 750;
      white-space: nowrap;
    }
    .inventory-pill.low {
      background: #fff4df;
      color: #99621b;
    }
    .inventory-pill.out {
      background: #fff0ee;
      color: #b33b31;
    }
    .inventory-stock-editor {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 160px;
    }
    .inventory-stock-input { max-width: 86px; }
    .inventory-save {
      padding: 10px 12px;
      border: 0;
      border-radius: 8px;
      background: #172b4d;
      color: #fff;
      font: inherit;
      font-size: 12px;
      font-weight: 750;
      cursor: pointer;
    }
    .inventory-save:hover { background: #9a7138; }
    .inventory-save:disabled { opacity: .55; cursor: wait; }
    .inventory-feedback {
      min-height: 18px;
      margin: 12px 0 0;
      color: #207347;
      font-size: 12px;
    }
    .inventory-feedback.error { color: #b33b31; }
    .inventory-count {
      color: #718096;
      font-size: 12px;
      white-space: nowrap;
    }
    @media (max-width: 650px) {
      .inventory-section { padding: 17px; }
      .inventory-controls { grid-template-columns: 1fr; }
      .inventory-heading { flex-wrap: wrap; }
    }

  
    /* CUSTOMER MANAGEMENT STYLES */
    .customers-section {
      margin: 24px 0;
      padding: 26px;
      border: 1px solid #e7eaf0;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 10px 30px rgba(20, 35, 60, .055);
    }
    .customers-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 22px;
    }
    .customers-heading h2 {
      margin: 0 0 7px;
      color: #172b4d;
      font-size: 22px;
      font-weight: 750;
    }
    .customers-heading p {
      margin: 0;
      color: #718096;
      font-size: 13px;
    }
    .customers-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 18px;
    }
    .customers-toolbar input,
    .customers-toolbar select {
      min-height: 43px;
      padding: 0 13px;
      border: 1px solid #dce3ec;
      border-radius: 10px;
      background: #fff;
      color: #243247;
      font: inherit;
      font-size: 13px;
      outline: none;
    }
    .customers-toolbar input {
      flex: 1 1 240px;
      min-width: 0;
    }
    .customers-toolbar select {
      flex: 0 1 165px;
    }
    .customers-toolbar input:focus,
    .customers-toolbar select:focus {
      border-color: #345b85;
      box-shadow: 0 0 0 3px rgba(52, 91, 133, .10);
    }
    .customers-refresh {
      min-height: 43px;
      padding: 0 17px;
      border: 0;
      border-radius: 10px;
      background: #172b4d;
      color: #fff;
      font-weight: 650;
      cursor: pointer;
    }
    .customers-refresh:disabled,
    .customers-pagination button:disabled {
      opacity: .45;
      cursor: not-allowed;
    }
    .customers-summary {
      margin: 0 0 12px;
      color: #718096;
      font-size: 12px;
    }
    .customers-table-wrap {
      overflow-x: auto;
      border: 1px solid #edf0f4;
      border-radius: 12px;
    }
    .customers-table {
      width: 100%;
      min-width: 760px;
      border-collapse: collapse;
      font-size: 13px;
    }
    .customers-table th {
      padding: 14px 13px;
      background: #f7f9fc;
      color: #64748b;
      font-size: 10px;
      font-weight: 750;
      letter-spacing: .08em;
      text-align: left;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .customers-table td {
      padding: 15px 13px;
      border-top: 1px solid #edf0f4;
      color: #334155;
      vertical-align: middle;
    }
    .customers-table tbody tr:hover {
      background: #fbfcfe;
    }
    .customer-name {
      color: #172b4d;
      font-weight: 700;
    }
    .customer-id {
      display: block;
      margin-top: 4px;
      color: #94a3b8;
      font-size: 11px;
    }
    .customer-status {
      display: inline-block;
      padding: 5px 9px;
      border-radius: 99px;
      background: #e7f7ed;
      color: #187044;
      font-size: 10px;
      font-weight: 750;
    }
    .customer-status.inactive {
      background: #fff0ee;
      color: #b42318;
    }
    .customers-message {
      margin: 14px 0 0;
      color: #64748b;
      font-size: 13px;
    }
    .customers-message.error {
      color: #b42318;
    }
    .customers-pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 18px;
    }
    .customers-page-info {
      color: #64748b;
      font-size: 12px;
    }
    .customers-page-actions {
      display: flex;
      gap: 8px;
    }
    .customers-pagination button {
      min-height: 36px;
      padding: 0 13px;
      border: 1px solid #dce3ec;
      border-radius: 9px;
      background: #fff;
      color: #172b4d;
      font-size: 12px;
      font-weight: 650;
      cursor: pointer;
    }
    @media (max-width: 640px) {
      .customers-section { padding: 17px; }
      .customers-heading h2 { font-size: 19px; }
      .customers-toolbar input,
      .customers-toolbar select,
      .customers-refresh { flex: 1 1 100%; width: 100%; }
    }


    /* PREMIUM_ADMIN_REDESIGN_V2: visual-only overrides; existing application logic preserved */

    :root {
      --luxury-ink: #14243a;
      --luxury-navy: #101c2e;
      --luxury-gold: #c5a46d;
      --luxury-gold-light: #f4ead8;
      --luxury-page: #f4f6f9;
      --luxury-border: #e5e9ef;
      --luxury-muted: #718096;
      --luxury-radius: 18px;
      --luxury-shadow: 0 12px 34px rgba(20, 36, 58, .065);
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 100px;
    }

    body {
      color: var(--luxury-ink);
      background:
        radial-gradient(ellipse at 95% 0%, rgba(197, 164, 109, .11), transparent 30rem),
        var(--luxury-page);
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 100;
      min-height: 78px;
      padding: 16px clamp(18px, 4vw, 64px);
      background: rgba(16, 28, 46, .97);
      border-bottom: 1px solid rgba(197, 164, 109, .38);
      box-shadow: 0 8px 28px rgba(10, 20, 35, .14);
      backdrop-filter: blur(16px);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: clamp(13px, 1.5vw, 17px);
      letter-spacing: .12em;
      line-height: 1.5;
    }

    .brand::before {
      content: "";
      width: 4px;
      height: 27px;
      flex: 0 0 4px;
      border-radius: 4px;
      background: var(--luxury-gold);
    }

    .topbar-note {
      font-size: 12px;
      letter-spacing: .035em;
    }

    .logout-button {
      min-height: 42px;
      padding: 10px 18px;
      border-color: rgba(197, 164, 109, .6);
      border-radius: 10px;
      transition: background .2s ease, transform .2s ease;
    }

    .logout-button:hover:not(:disabled) {
      background: rgba(197, 164, 109, .13);
      border-color: var(--luxury-gold);
      transform: translateY(-1px);
    }

    main {
      width: min(100% - 64px, 1480px);
      margin: 34px auto 76px;
    }

    main > section {
      min-width: 0;
      margin-bottom: 28px;
      scroll-margin-top: 100px;
    }

    .inventory-section,
    .dashboard-overview,
    .form-card,
    .orders-dashboard,
    .management-card,
    .customers-section {
      padding: clamp(22px, 3vw, 36px);
      border: 1px solid rgba(225, 231, 239, .95);
      border-radius: var(--luxury-radius);
      background: rgba(255, 255, 255, .96);
      box-shadow: var(--luxury-shadow);
    }

    .dashboard-heading,
    .orders-heading,
    .customers-heading {
      gap: 20px;
      margin-bottom: 26px;
    }

    .dashboard-heading h2,
    .orders-heading h2,
    .customers-heading h2,
    .management-card h2,
    .inventory-section h2,
    .form-card h2 {
      color: var(--luxury-ink);
      font-size: clamp(22px, 2.4vw, 30px);
      font-weight: 760;
      letter-spacing: -.045em;
      line-height: 1.2;
    }

    .dashboard-heading p,
    .orders-heading p,
    .customers-heading p,
    .management-card > p,
    .form-card > .intro {
      color: var(--luxury-muted);
      line-height: 1.7;
    }

    .dashboard-kicker,
    .orders-eyebrow,
    .eyebrow {
      color: #a17c43;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .dashboard-stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin: 24px 0 30px;
    }

    .dashboard-stat,
    .orders-stat {
      min-width: 0;
      padding: 23px 21px;
      border: 1px solid var(--luxury-border);
      border-radius: 15px;
      background: linear-gradient(145deg, #fff, #f8f9fb);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .dashboard-stat:hover,
    .orders-stat:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(20, 36, 58, .08);
    }

    .dashboard-stat-label,
    .orders-stat span {
      color: var(--luxury-muted);
      font-size: 12px;
      font-weight: 650;
      letter-spacing: .025em;
    }

    .dashboard-stat-value,
    .orders-stat strong {
      color: var(--luxury-ink);
      overflow-wrap: anywhere;
      font-size: clamp(23px, 2.3vw, 34px);
      font-weight: 800;
      letter-spacing: -.045em;
    }

    .dashboard-stat.revenue {
      border-top: 3px solid var(--luxury-gold);
    }

    .dashboard-stat.stock-alert {
      border-top: 3px solid #c87956;
    }

    .dashboard-recent {
      padding-top: 25px;
      border-top: 1px solid var(--luxury-border);
    }

    .dashboard-recent-heading {
      margin-bottom: 16px;
    }

    .dashboard-recent-heading h3 {
      color: var(--luxury-ink);
      font-size: 18px;
      font-weight: 750;
    }

    .dashboard-table-wrap,
    .orders-table-wrap,
    .customers-table-wrap,
    .admin-table-wrap {
      max-width: 100%;
      overflow-x: auto;
      border: 1px solid var(--luxury-border);
      border-radius: 13px;
      background: #fff;
      -webkit-overflow-scrolling: touch;
    }

    .dashboard-table,
    .orders-table,
    .customers-table,
    .admin-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }

    .dashboard-table th,
    .orders-table th,
    .customers-table th,
    .admin-table th {
      padding: 15px 17px;
      border-bottom: 1px solid var(--luxury-border);
      background: #f7f8fa;
      color: #657287;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .085em;
      text-align: left;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .dashboard-table td,
    .orders-table td,
    .customers-table td,
    .admin-table td {
      padding: 15px 17px;
      border-bottom: 1px solid #edf0f4;
      color: #344258;
      font-size: 13px;
      vertical-align: middle;
    }

    .dashboard-table tbody tr:last-child td,
    .orders-table tbody tr:last-child td,
    .customers-table tbody tr:last-child td,
    .admin-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .dashboard-table tbody tr:hover,
    .orders-table tbody tr:hover,
    .customers-table tbody tr:hover,
    .admin-table tbody tr:hover {
      background: #fbfaf7;
    }

    .dashboard-refresh,
    .orders-btn,
    .customers-refresh,
    .customers-page-actions button,
    #submit-button,
    #create-admin-button,
    #coupon-save-button,
    #coupon-cancel-button {
      min-height: 42px;
      padding: 10px 17px;
      border: 1px solid var(--luxury-ink);
      border-radius: 10px;
      background: var(--luxury-ink);
      color: #fff;
      font: inherit;
      font-size: 12px;
      font-weight: 750;
      cursor: pointer;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .dashboard-refresh:hover,
    .orders-btn:hover,
    .customers-refresh:hover,
    .customers-page-actions button:hover:not(:disabled),
    #submit-button:hover:not(:disabled),
    #create-admin-button:hover:not(:disabled),
    #coupon-save-button:hover:not(:disabled) {
      border-color: #a17c43;
      background: #263b56;
      transform: translateY(-1px);
    }

    .orders-btn.secondary,
    #coupon-cancel-button {
      border-color: #d8dee7;
      background: #fff;
      color: var(--luxury-ink);
    }

    .orders-btn.secondary:hover,
    #coupon-cancel-button:hover {
      background: var(--luxury-gold-light);
      border-color: var(--luxury-gold);
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
      min-width: 0;
      border: 1px solid #dce2ea;
      border-radius: 10px;
      background-color: #fff;
      color: var(--luxury-ink);
      box-shadow: 0 1px 2px rgba(20, 36, 58, .025);
    }

    input:not([type="checkbox"]):not([type="radio"]):focus,
    select:focus,
    textarea:focus {
      border-color: var(--luxury-gold);
      box-shadow: 0 0 0 4px rgba(197, 164, 109, .16);
      outline: none;
    }

    input::placeholder,
    textarea::placeholder {
      color: #9aa5b4;
    }

    .form-grid {
      gap: 22px;
    }

    .field label,
    label {
      color: #39485c;
      font-weight: 700;
    }

    .form-footer {
      gap: 16px;
      margin-top: 24px;
    }

    .status,
    .dashboard-message,
    .orders-message,
    .customers-message,
    .customers-summary,
    .inventory-count,
    .inventory-feedback {
      line-height: 1.7;
    }

    .customers-toolbar,
    .orders-toolbar {
      gap: 12px;
      margin-bottom: 18px;
    }

    .customers-pagination {
      gap: 14px;
      padding-top: 20px;
    }

    .customer-status,
    .dashboard-status {
      border-radius: 999px;
      font-weight: 750;
      letter-spacing: .01em;
    }

    .order-detail {
      margin-top: 22px;
      padding: 22px;
      border: 1px solid var(--luxury-border);
      border-radius: 14px;
      background: #fafbfc;
    }

    button:focus-visible,
    a:focus-visible {
      outline: 3px solid rgba(197, 164, 109, .7);
      outline-offset: 3px;
    }

    button:disabled {
      cursor: not-allowed;
      opacity: .55;
      transform: none;
    }

    @media (min-width: 1500px) {
      main {
        width: min(100% - 96px, 1560px);
      }
    }

    @media (max-width: 900px) {
      main {
        width: calc(100% - 32px);
        margin-top: 24px;
      }

      .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .inventory-section,
      .dashboard-overview,
      .form-card,
      .orders-dashboard,
      .management-card,
      .customers-section {
        padding: 22px;
        border-radius: 15px;
      }
    }

    @media (max-width: 600px) {
      .topbar {
        min-height: 68px;
        gap: 10px;
        padding: 12px 16px;
      }

      .brand {
        max-width: 68%;
        font-size: 12px;
        letter-spacing: .075em;
      }

      .topbar-note {
        display: none;
      }

      .topbar-actions {
        gap: 8px;
      }

      .logout-button {
        min-height: 38px;
        padding: 8px 11px;
        font-size: 12px;
      }

      main {
        width: calc(100% - 24px);
        margin: 18px auto 42px;
      }

      main > section {
        margin-bottom: 16px;
      }

      .inventory-section,
      .dashboard-overview,
      .form-card,
      .orders-dashboard,
      .management-card,
      .customers-section {
        padding: 17px;
        border-radius: 13px;
      }

      .dashboard-heading,
      .orders-heading,
      .customers-heading {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
      }

      .dashboard-heading h2,
      .orders-heading h2,
      .customers-heading h2,
      .management-card h2 {
        font-size: 22px;
      }

      .dashboard-stats {
        gap: 10px;
        margin: 18px 0 23px;
      }

      .dashboard-stat,
      .orders-stat {
        padding: 15px 12px;
        border-radius: 12px;
      }

      .dashboard-stat-value,
      .orders-stat strong {
        font-size: 22px;
      }

      .dashboard-stat-note {
        font-size: 11px;
        line-height: 1.5;
      }

      .customers-toolbar,
      .orders-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }

      .form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;
      }

      .field-full {
        grid-column: auto;
      }

      .dashboard-table th,
      .dashboard-table td,
      .orders-table th,
      .orders-table td,
      .customers-table th,
      .customers-table td,
      .admin-table th,
      .admin-table td {
        padding: 12px;
      }

      .customers-pagination {
        align-items: flex-start;
        flex-direction: column;
      }

      .customers-page-actions {
        display: flex;
        width: 100%;
        gap: 10px;
      }

      .customers-page-actions button {
        flex: 1;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }

  
    /* PREMIUM_ADMIN_SIDEBAR_CSS_V1 */
    :root {
      --sidebar-width: 238px;
      --sidebar-bg: #101c2e;
      --sidebar-text: #d2dae6;
      --sidebar-gold: #c5a46d;
    }

    .admin-sidebar {
      position: fixed;
      z-index: 100;
      top: 88px;
      left: 18px;
      bottom: 18px;
      width: var(--sidebar-width);
      display: flex;
      flex-direction: column;
      padding: 22px 14px 14px;
      color: var(--sidebar-text);
      background: var(--sidebar-bg);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 18px;
      box-shadow: 0 12px 32px rgba(16,28,46,.12);
      overflow-y: auto;
    }

    .admin-sidebar-brand {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 2px 8px 23px;
      border-bottom: 1px solid rgba(255,255,255,.11);
    }

    .admin-sidebar-mark {
      display: grid;
      place-items: center;
      flex: 0 0 39px;
      height: 39px;
      border-radius: 12px;
      background: var(--sidebar-gold);
      color: #101c2e;
      font-size: 22px;
      font-weight: 800;
    }

    .admin-sidebar-brand strong,
    .admin-sidebar-brand small,
    .admin-sidebar-footer strong,
    .admin-sidebar-footer small {
      display: block;
    }

    .admin-sidebar-brand strong {
      color: #fff;
      font-size: 12px;
      letter-spacing: 2px;
    }

    .admin-sidebar-brand small {
      margin-top: 4px;
      color: #aeb9c9;
      font-size: 9px;
      letter-spacing: 1px;
    }

    .admin-sidebar-label {
      margin: 25px 10px 11px;
      color: #8290a5;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.6px;
    }

    .admin-sidebar-nav {
      display: grid;
      gap: 6px;
    }

    .admin-side-link {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 45px;
      padding: 0 12px;
      border: 1px solid transparent;
      border-radius: 10px;
      color: var(--sidebar-text);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      transition: background .18s ease, color .18s ease;
    }

    .admin-side-link:hover {
      background: rgba(255,255,255,.07);
      color: #fff;
    }

    .admin-side-link.is-active {
      color: #fff;
      background: rgba(197,164,109,.16);
      border-color: rgba(197,164,109,.32);
    }

    .admin-side-link.is-active .admin-side-icon {
      color: var(--sidebar-gold);
    }

    .admin-side-icon {
      display: inline-grid;
      place-items: center;
      width: 22px;
      flex: 0 0 22px;
      color: #aab6c7;
      font-size: 19px;
    }

    .admin-sidebar-footer {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: auto;
      padding: 17px 8px 4px;
      border-top: 1px solid rgba(255,255,255,.11);
    }

    .admin-sidebar-status {
      width: 8px;
      height: 8px;
      flex: 0 0 8px;
      border-radius: 50%;
      background: #62c59b;
      box-shadow: 0 0 0 4px rgba(98,197,155,.12);
    }

    .admin-sidebar-footer strong {
      color: #f4f6f9;
      font-size: 11px;
    }

    .admin-sidebar-footer small {
      margin-top: 4px;
      color: #98a6b9;
      font-size: 10px;
    }

    body > main {
      margin-left: calc(var(--sidebar-width) + 40px) !important;
      width: auto !important;
      max-width: none !important;
      min-width: 0;
      padding-right: 24px;
      padding-bottom: 35px;
    }

    body > main > section,
    body > main > .form-card,
    body > main > .eyebrow,
    body > main > h1,
    body > main > .intro {
      scroll-margin-top: 105px;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 100px;
    }

    @media (max-width: 900px) {
      .admin-sidebar {
        top: 82px;
        left: 10px;
        bottom: 10px;
        width: 68px;
        padding: 15px 7px;
        align-items: stretch;
      }

      .admin-sidebar-brand {
        justify-content: center;
        padding: 0 0 17px;
      }

      .admin-sidebar-brand > div,
      .admin-sidebar-label,
      .admin-side-link > span:not(.admin-side-icon),
      .admin-sidebar-footer > div {
        display: none;
      }

      .admin-sidebar-mark {
        flex-basis: 40px;
      }

      .admin-side-link {
        justify-content: center;
        padding: 0;
      }

      .admin-side-icon {
        font-size: 21px;
      }

      .admin-sidebar-footer {
        justify-content: center;
        padding: 15px 0 3px;
      }

      body > main {
        margin-left: 94px !important;
        padding-right: 12px;
      }
    }

    @media (max-width: 560px) {
      .admin-sidebar {
        top: 76px;
        left: 6px;
        bottom: 6px;
        width: 54px;
        padding: 12px 5px;
        border-radius: 13px;
      }

      .admin-sidebar-mark {
        flex-basis: 34px;
        height: 34px;
      }

      .admin-side-link {
        min-height: 42px;
      }

      body > main {
        margin-left: 68px !important;
        padding-right: 6px;
      }
    }

  

/* PREMIUM_LUXURY_FINAL_OVERRIDES_V1 */

/* Luxury palette */
:root {
  --lux-navy: #111827;
  --lux-navy-light: #1c293b;
  --lux-gold: #c5a46d;
  --lux-gold-light: #ead9b5;
  --lux-ink: #202b3c;
  --lux-muted: #778195;
  --lux-border: #e7e4dc;
  --lux-surface: #fffefa;
  --lux-background: #f4f3ef;
}

body {
  color: var(--lux-ink);
  background: #f4f3ef;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  background: linear-gradient(110deg, #101827, #202e42) !important;
  border-bottom: 1px solid rgba(197,164,109,.4) !important;
  box-shadow: 0 8px 28px rgba(17,24,39,.12) !important;
}

.brand {
  color: #fff !important;
  letter-spacing: .12em;
}

.admin-sidebar {
  background: linear-gradient(180deg, #111827 0%, #1c293b 100%) !important;
  border: 1px solid rgba(197,164,109,.25) !important;
  box-shadow: 0 16px 42px rgba(17,24,39,.18) !important;
}

.admin-sidebar-label {
  color: #c5a46d !important;
}

.admin-side-link {
  border-radius: 9px !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.admin-side-link:hover {
  background: rgba(255,255,255,.08) !important;
}

.admin-side-link.is-active {
  color: #fff !important;
  background: linear-gradient(100deg, rgba(197,164,109,.23), rgba(197,164,109,.08)) !important;
  border-color: rgba(197,164,109,.48) !important;
}

.admin-side-link.is-active .admin-side-icon {
  color: #e7cc93 !important;
}

body > main {
  color: var(--lux-ink);
}

body > main > h1 {
  color: #172235;
  letter-spacing: -.035em;
}

body > main > section,
body > main > .form-card {
  border-color: var(--lux-border);
}

.form-card,
.dashboard-overview,
.dashboard-sales-panel,
.orders-dashboard,
.dashboard-stat {
  border-color: var(--lux-border) !important;
  box-shadow: 0 8px 28px rgba(30,41,59,.045) !important;
}

.dashboard-stat,
.form-card,
.dashboard-overview,
.dashboard-sales-panel,
.orders-dashboard {
  border-radius: 14px;
}

button,
.btn,
input[type="submit"] {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

button:not(:disabled):hover,
.btn:hover,
input[type="submit"]:hover {
  box-shadow: 0 5px 15px rgba(17,24,39,.12);
}

input,
select,
textarea {
  border-color: #dedfdc;
  border-radius: 8px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #b89a60 !important;
  outline: 3px solid rgba(197,164,109,.16);
}

table th {
  background: #f5f2eb;
  color: #5b6472;
  font-size: 11px;
  letter-spacing: .055em;
  text-transform: uppercase;
}

table td {
  border-color: #eeece6;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

  


========== INLINE CSS: backend/templates/profile.html ==========


--- STYLE BLOCK 1 ---

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

    body {
      font-family: Arial, Helvetica, sans-serif;
      background: #f1f3f6;
      color: #212121;
      min-height: 100vh;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    button, input, select {
      font: inherit;
    }

    button:focus-visible, a:focus-visible,
    input:focus-visible, select:focus-visible {
      outline: 3px solid rgba(40, 116, 240, .3);
      outline-offset: 2px;
    }

    /* Header */
    .header {
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
      padding: 15px 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
      font-size: 21px;
      font-weight: 800;
      color: #172b4d;
      letter-spacing: -.5px;
    }

    .brand span {
      color: #2874f0;
    }

    .header-link {
      color: #2874f0;
      font-weight: 600;
      font-size: 14px;
    }

    /* Main layout */
    .page-container {
      max-width: 1200px;
      margin: 35px auto;
      padding: 0 20px;
    }

    .breadcrumb {
      font-size: 13px;
      color: #777;
      margin-bottom: 20px;
    }

    .breadcrumb a {
      color: #2874f0;
    }

    .profile-layout {
      display: grid;
      grid-template-columns: 270px minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

    .sidebar, .content-card {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
      min-width: 0;
    }

    /* Sidebar */
    .user-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px;
      min-width: 0;
    }

    .avatar {
      flex: 0 0 52px;
      width: 52px;
      height: 52px;
      min-width: 52px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      display: grid;
      place-items: center;
    }

    .welcome-text {
      color: #777;
      font-size: 12px;
      margin-bottom: 5px;
    }

    .sidebar-name {
      font-size: 15px;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .menu-title {
      padding: 20px 22px 12px;
      font-size: 12px;
      color: #888;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
    }

    .menu-link {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 15px 22px;
      font-size: 14px;
      color: #444;
      border-left: 3px solid transparent;
      transition: background .2s, color .2s;
    }

    .menu-link:hover {
      background: #f5f8ff;
      color: #2874f0;
    }

    .menu-link.active {
      background: #eef4ff;
      color: #2874f0;
      font-weight: 700;
      border-left-color: #2874f0;
    }

    .menu-icon {
      width: 20px;
      text-align: center;
      font-size: 17px;
    }

    /* Profile content */
    .content-card {
      padding: 32px;
    }

    .content-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 15px;
      padding-bottom: 24px;
      border-bottom: 1px solid #eee;
    }

    .content-heading h1 {
      font-size: 25px;
      margin-bottom: 8px;
    }

    .description {
      color: #777;
      font-size: 13px;
      line-height: 1.6;
    }

    .edit-button {
      background: #fff;
      color: #2874f0;
      border: 1px solid #2874f0;
      border-radius: 5px;
      padding: 10px 17px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    .edit-button:hover {
      background: #f5f8ff;
    }

    .section-title {
      font-size: 17px;
      font-weight: 700;
      margin: 28px 0 22px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }

    .form-group {
      margin-bottom: 5px;
      min-width: 0;
    }

    .form-group label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #555;
      margin-bottom: 9px;
    }

    .form-group input, .form-group select {
      display: block;
      width: 100%;
      min-height: 45px;
      border: 1px solid #d9dce2;
      border-radius: 5px;
      background: #f9fafc;
      padding: 12px;
      font-size: 14px;
      color: #222;
      outline: none;
      transition: border .2s, box-shadow .2s;
    }

    .form-group input:focus, .form-group select:focus {
      border-color: #2874f0;
      box-shadow: 0 0 0 3px rgba(40, 116, 240, .1);
      background: #fff;
    }

    .form-group input:disabled, .form-group select:disabled {
      background: #f5f6f8;
      color: #555;
      cursor: not-allowed;
    }

    .form-actions {
      display: none;
      gap: 12px;
      margin-top: 28px;
      flex-wrap: wrap;
    }

    .form-actions.visible {
      display: flex;
    }

    .button {
      padding: 12px 20px;
      border: 0;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: background .2s, opacity .2s;
    }

    .button:disabled {
      opacity: .6;
      cursor: wait;
    }

    .save-button {
      background: #2874f0;
      color: white;
    }

    .save-button:hover {
      background: #1763d6;
    }

    .cancel-button {
      background: #fff;
      border: 1px solid #ddd;
      color: #333;
    }

    .cancel-button:hover {
      background: #f5f5f5;
    }

    .status-message {
      font-size: 13px;
      line-height: 1.6;
      margin-top: 15px;
      overflow-wrap: anywhere;
    }

    .status-message:empty {
      display: none;
    }

    .status-message.success {
      color: #16803c;
    }

    .status-message.error {
      color: #c62828;
    }

    /* Account management */
    .account-danger {
      margin-top: 32px;
      padding-top: 8px;
      border-top: 1px solid #eee;
    }

    .account-danger .section-title {
      margin-bottom: 10px;
    }

    .account-action {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 20px 0;
      border-bottom: 1px solid #eee;
    }

    .account-action-info {
      min-width: 0;
    }

    .account-action strong {
      font-size: 14px;
    }

    .account-action p {
      margin-top: 7px;
      color: #777;
      font-size: 13px;
      line-height: 1.6;
    }

    .danger-outline {
      color: #b42318;
      background: #fff;
      border: 1px solid #b42318;
      flex-shrink: 0;
    }

    .danger-outline:hover {
      background: #fff5f5;
    }

    .danger-button {
      color: #fff;
      background: #b42318;
      flex-shrink: 0;
    }

    .danger-button:hover {
      background: #921d14;
    }

    .security-note {
      margin-top: 28px;
      background: #f5f8ff;
      padding: 17px;
      border-radius: 6px;
      color: #555;
      font-size: 12px;
      line-height: 1.7;
    }

    .security-note strong {
      color: #172b4d;
    }

    /* Footer */
    .footer {
      margin-top: 45px;
      background: #17212f;
      color: #fff;
      text-align: center;
      padding: 24px 15px;
      font-size: 12px;
      line-height: 1.8;
    }

    .footer p {
      color: #c7ced8;
    }

    /* Responsive */
    @media (max-width: 900px) {
      .profile-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 15px;
      }

      .content-card {
        padding: 24px;
      }

      .user-card {
        padding: 18px;
      }

      .menu-link {
        padding: 13px 15px;
      }
    }

    @media (max-width: 760px) {
      .page-container {
        margin: 22px auto;
        padding: 0 12px;
      }

      .profile-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
      }

      .content-card {
        padding: 23px 18px;
      }

      .content-heading h1 {
        font-size: 22px;
      }

      .form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
      }

      .menu-title {
        padding-top: 15px;
      }

      .menu-link {
        padding-top: 12px;
        padding-bottom: 12px;
      }
    }

    @media (max-width: 420px) {
      .header {
        padding: 14px;
        gap: 10px;
      }

      .brand {
        font-size: 16px;
      }

      .header-link {
        font-size: 12px;
        text-align: right;
      }

      .content-heading {
        flex-direction: column;
      }

      .edit-button {
        width: 100%;
      }

      .form-actions .button {
        width: 100%;
      }

      .account-action {
        align-items: stretch;
        flex-direction: column;
      }

      .account-action .button {
        width: 100%;
      }
    }
  
/* Premium brand colours matching the website */
.header .brand {
  color: #172b4d !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px !important;
  text-decoration: none !important;
}

.header .brand span {
  color: #b89658 !important;
}

.header .brand:hover {
  opacity: 0.9;
}


/* Dark logo-matching brand colours */
.header .brand {
  color: #101b2a !important;
  font-weight: 850 !important;
  letter-spacing: -0.6px !important;
  text-decoration: none !important;
}

.header .brand span {
  color: #70501f !important;
}

.header .brand:hover {
  opacity: 0.92;
}


    .avatar {
      overflow: hidden;
      position: relative;
    }

    .avatar img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    
    .dp-upload-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border-radius: 7px;
      background: #172b4d;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: background .2s;
      white-space: nowrap;
    }

    .dp-upload-button:hover {
      background: #294b7a;
    }

    .dp-remove-button {
      padding: 6px 10px;
      border: 1px solid #e1e5eb;
      border-radius: 6px;
      background: #fff;
      color: #172b4d;
      font-size: 12px;
      cursor: pointer;
    }

    .dp-help-text {
      max-width: 155px;
      color: #778195;
      font-size: 10px;
      line-height: 1.4;
    }



    .dp-upload-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 14px;
      border-radius: 7px;
      background: #172b4d;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: background .2s, transform .2s;
    }

    .dp-upload-button:hover {
      background: #294b7a;
      transform: translateY(-1px);
    }

    .dp-remove-button {
      border: 1px solid #e1e5eb;
      border-radius: 7px;
      background: #fff;
      color: #a12b35;
      padding: 7px 12px;
      font-size: 12px;
      cursor: pointer;
    }

    .dp-remove-button[hidden] {
      display: none !important;
    }

    .dp-help-text {
      color: #7b8492;
      font-size: 10px;
      line-height: 1.5;
    }

    @media (max-width: 480px) {
      .user-card {
        flex-wrap: wrap;
      }
    }


  
    /* DP_USER_CARD_DETAILS_FIX */
    .user-card {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 18px;
      min-width: 0;
    }

    .user-card-details {
      flex: 1 1 auto;
      min-width: 0;
    }

    .user-card .avatar {
      flex: 0 0 52px;
      width: 52px;
      height: 52px;
      min-width: 52px;
      border-radius: 50%;
      overflow: hidden;
    }

    .user-card .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 50%;
    }

    .user-card .profile-picture-controls {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 7px;
      margin-top: 10px;
      min-width: 0;
    }

    .user-card .sidebar-name {
      overflow-wrap: anywhere;
    }



--- STYLE BLOCK 2 ---

/* PARTNER JEANS & PANTS — PREMIUM PROFILE DESIGN */
:root {
  --profile-navy: #142b3b;
  --profile-navy-light: #203f52;
  --profile-gold: #c6a568;
  --profile-bg: #f4f5f7;
  --profile-text: #202c36;
  --profile-muted: #77818b;
  --profile-border: #e8e9ed;
}

body {
  background:
    radial-gradient(ellipse at top left, rgba(198,165,104,.10), transparent 35%),
    var(--profile-bg) !important;
  color: var(--profile-text);
}

.header {
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 5px 24px rgba(20,43,59,.07) !important;
  border-bottom: 1px solid rgba(198,165,104,.30) !important;
}

.page-container {
  width: min(1240px, calc(100% - 40px)) !important;
  margin: 36px auto 70px !important;
}

.profile-layout {
  display: grid !important;
  grid-template-columns: 270px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
  margin-top: 24px !important;
}

.sidebar {
  background: #fff !important;
  border: 1px solid var(--profile-border) !important;
  border-radius: 18px !important;
  padding: 22px 16px !important;
  box-shadow: 0 12px 35px rgba(20,43,59,.055) !important;
  overflow: hidden;
}

.menu-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 15px !important;
  margin: 4px 0 !important;
  border-radius: 10px !important;
  color: #52606c !important;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease, transform .2s ease !important;
}

.menu-link:hover {
  background: #f7f3eb !important;
  color: var(--profile-navy) !important;
  transform: translateX(3px);
}

.menu-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--profile-navy), var(--profile-navy-light)) !important;
  box-shadow: 0 7px 16px rgba(20,43,59,.17) !important;
}

.profile-content,
.profile-card,
.account-management,
.account-management-card {
  min-width: 0;
}

.profile-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.profile-content > *,
.profile-layout > section,
.profile-main,
.account-section {
  border-radius: 18px;
}

h1 {
  color: var(--profile-navy) !important;
  letter-spacing: -.7px !important;
  font-weight: 800 !important;
}

h2, .section-title {
  color: var(--profile-navy) !important;
  font-weight: 750 !important;
  letter-spacing: -.25px !important;
}

.section-title {
  padding-bottom: 14px !important;
  margin-bottom: 22px !important;
  border-bottom: 1px solid var(--profile-border) !important;
  position: relative;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 58px;
  height: 3px;
  background: var(--profile-gold);
  border-radius: 4px;
}

form#profileForm,
#profileForm,
.profile-card,
.profile-section,
.account-management-section,
.account-management-card {
  background: #fff;
  border: 1px solid var(--profile-border);
  border-radius: 18px;
  padding: 28px !important;
  box-shadow: 0 12px 35px rgba(20,43,59,.045);
}

label {
  display: block;
  color: #44515c !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

input:not([type="checkbox"]),
select,
textarea {
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 12px 14px !important;
  border: 1px solid #dfe3e7 !important;
  border-radius: 10px !important;
  background: #fbfcfd !important;
  color: var(--profile-text) !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
}

input:not([type="checkbox"]):focus,
select:focus,
textarea:focus {
  border-color: var(--profile-gold) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(198,165,104,.15) !important;
}

input:disabled,
select:disabled,
textarea:disabled {
  color: #52606c !important;
  background: #f7f8fa !important;
  opacity: 1 !important;
}

.edit-button,
.save-button,
button.button,
#editButton,
#saveButton {
  min-height: 44px !important;
  border-radius: 10px !important;
  padding: 11px 20px !important;
  font-weight: 750 !important;
  letter-spacing: .1px !important;
  transition: transform .2s, box-shadow .2s, background .2s !important;
}

.edit-button,
#editButton {
  color: #fff !important;
  background: linear-gradient(135deg, var(--profile-navy), #294b5e) !important;
  border: 1px solid var(--profile-navy) !important;
  box-shadow: 0 5px 13px rgba(20,43,59,.13) !important;
}

.save-button,
#saveButton {
  color: #fff !important;
  background: linear-gradient(135deg, #b89658, #d0b579) !important;
  border: 1px solid #b89658 !important;
  box-shadow: 0 6px 16px rgba(169,132,67,.20) !important;
}

.edit-button:hover,
.save-button:hover,
button.button:hover,
#editButton:hover,
#saveButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(20,43,59,.16) !important;
}

button:disabled {
  opacity: .65 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.breadcrumb,
.breadcrumbs {
  color: var(--profile-muted) !important;
  font-size: 13px !important;
}

hr {
  border: 0;
  border-top: 1px solid var(--profile-border);
}

@media (max-width: 800px) {
  .page-container {
    width: calc(100% - 24px) !important;
    margin: 24px auto 40px !important;
  }

  .profile-layout {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .sidebar {
    padding: 14px !important;
  }

  form#profileForm,
  #profileForm,
  .profile-card,
  .profile-section,
  .account-management-section,
  .account-management-card {
    padding: 20px !important;
  }
}

@media (max-width: 480px) {
  .page-container {
    width: calc(100% - 18px) !important;
  }

  form#profileForm,
  #profileForm,
  .profile-card,
  .profile-section,
  .account-management-section,
  .account-management-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  .edit-button,
  .save-button,
  #editButton,
  #saveButton {
    max-width: 100%;
    padding: 10px 14px !important;
  }
}

/* DP_FINAL_STYLE */
.user-card .avatar {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  flex: 0 0 56px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}

.user-card .avatar img,
.avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.user-card .dp-upload-button {
  color: #fff !important;
  background: #172b4d !important;
  text-decoration: none !important;
}

.user-card .dp-upload-button:hover {
  color: #fff !important;
  background: #294b7a !important;
}


/* PERFECT_ROUND_DP_FIX */
#avatar.avatar {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  flex: 0 0 56px !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
  display: block !important;
  line-height: normal !important;
}

#avatar.avatar img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
}



--- STYLE BLOCK 3 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 4 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 5 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}



========== INLINE CSS: backend/templates/wishlist.html ==========


--- STYLE BLOCK 1 ---

body > header.pj-common-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:86px;
  padding:12px 4% !important;
  background:#fff !important;
  border-bottom:2px solid #d8bd91 !important;
  box-shadow:0 3px 16px rgba(75,10,25,.08) !important;
  box-sizing:border-box;
  position:relative;
  z-index:100;
}
.pj-common-header .logo { flex:0 0 auto; }
.pj-common-header .logo img {
  display:block;width:145px;max-width:100%;height:auto;object-fit:contain;
}
.pj-common-header nav {
  display:flex;align-items:center;justify-content:center;
  flex:1;gap:clamp(8px,1.4vw,22px);
}
.pj-common-header nav a {
  color:#5b0b19 !important;text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.pj-common-header nav a:hover { color:#7f1023 !important; }
.pj-common-header .header-right {
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;flex:0 0 auto;
}
.pj-common-header .pj-common-search {
  display:flex;align-items:center;width:175px;max-width:22vw;
  border:1px solid #e5d7d9;border-radius:5px;overflow:hidden;
}
.pj-common-header .pj-common-search input {
  min-width:0;width:100%;border:0!important;outline:0;
  padding:9px 8px;background:#fff;
}
.pj-common-header .pj-common-search button {
  border:0;background:#fff;color:#7f1023;padding:7px 10px;
}
.pj-common-header .login,
.pj-common-header .register,
.pj-common-header .pj-header-cart,
.pj-common-header .customer-account-trigger {
  display:inline-flex;align-items:center;justify-content:center;
  background:#7f1023 !important;color:#fff !important;
  border:1px solid #7f1023 !important;border-radius:5px;
  padding:9px 12px;text-decoration:none;font-size:12px;
  font-weight:700;white-space:nowrap;
}
.pj-common-header .login:hover,
.pj-common-header .register:hover,
.pj-common-header .pj-header-cart:hover,
.pj-common-header .customer-account-trigger:hover {
  background:#5b0b19 !important;color:#fff !important;
}
.pj-common-header .customer-account-trigger * {
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}
body > footer.pj-footer {
  background:linear-gradient(145deg,#350812 0%,#570d20 55%,#3d0916 100%) !important;
  color:#fff !important;border-top:3px solid #d8bd91 !important;
}
.pj-footer .pj-footer-brand > p,
.pj-footer .pj-footer-group a,
.pj-footer .pj-footer-group p,
.pj-footer .pj-footer-bottom p,
.pj-footer .pj-footer-bottom a { color:#f8f2ed !important; }
.pj-footer .pj-footer-group summary { color:#d8bd91 !important; }
.pj-footer .pj-footer-watermark {
  color:#fff !important;opacity:1 !important;
  -webkit-text-fill-color:#fff !important;
}
.pj-footer .pj-payment {
  background:rgba(255,255,255,.07) !important;
  border-top:1px solid rgba(216,189,145,.35) !important;
  border-bottom:1px solid rgba(216,189,145,.35) !important;
}
.pj-footer .pj-payment h3 { color:#d8bd91 !important; }
.pj-footer .pj-payment-note { color:#f8f2ed !important; }
.pj-footer .pj-back-top {
  background:#d8bd91 !important;color:#5b0b19 !important;
  border:1px solid #d8bd91 !important;
}
@media(max-width:1100px) {
  body > header.pj-common-header { flex-wrap:wrap !important; }
  .pj-common-header .mobile-menu-toggle {
    display:flex;flex-direction:column;gap:5px;order:0;
    border:0;background:transparent;padding:8px;cursor:pointer;
  }
  .pj-common-header .mobile-menu-toggle span {
    display:block;width:25px;height:2px;background:#7f1023;
  }
  .pj-common-header .logo { order:1; }
  .pj-common-header .header-right { order:2;margin-left:auto; }
  .pj-common-header nav {
    display:none;order:3;flex:0 0 100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .pj-common-header nav.is-open { display:flex; }
  .pj-common-header nav a {
    padding:12px 8px;border-bottom:1px solid #eee;
  }
}
@media(max-width:600px) {
  .pj-common-header .logo img { width:105px; }
  .pj-common-header .pj-common-search { width:115px;max-width:30vw; }
  .pj-common-header .pj-common-search input { padding:8px 5px;font-size:12px; }
  .pj-common-header .header-right { gap:5px; }
  .pj-common-header .login,
  .pj-common-header .register,
  .pj-common-header .pj-header-cart,
  .pj-common-header .customer-account-trigger { padding:8px 7px;font-size:11px; }
  .pj-common-header .register { display:none; }
}


--- STYLE BLOCK 2 ---

/* Match customer page header with homepage */
body > header.pj-common-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 3% !important;
  gap: 22px !important;
  background: #fff !important;
  border-bottom: 2px solid #d8bd91 !important;
  box-shadow: 0 3px 16px rgba(75,10,25,.08) !important;
  color: #34252a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10000 !important;
}

body > header.pj-common-header .logo {
  flex: 0 0 125px !important;
  min-width: 125px !important;
}

body > header.pj-common-header .logo img {
  display: block !important;
  width: 125px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  height: auto !important;
  object-fit: contain !important;
}

body > header.pj-common-header nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 20px) !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

body > header.pj-common-header nav a {
  color: #5b0b19 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

body > header.pj-common-header nav a:hover,
body > header.pj-common-header nav a:focus-visible {
  color: #7f1023 !important;
  background: #fbf8f3 !important;
}

body > header.pj-common-header .header-right {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  position: relative !important;
  overflow: visible !important;
}

body > header.pj-common-header .search {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 40px !important;
  border: 1px solid #e5d7d9 !important;
  border-radius: 24px !important;
  background: #fff !important;
  overflow: hidden !important;
}

body > header.pj-common-header .search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #34252a !important;
  font-size: 13px !important;
}

body > header.pj-common-header .search button,
body > header.pj-common-header .search-mic-button {
  flex: 0 0 auto !important;
  min-width: 34px !important;
  height: 100% !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1023 !important;
  cursor: pointer !important;
}

body > header.pj-common-header .login,
body > header.pj-common-header .register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #7f1023 !important;
  border-radius: 5px !important;
  background: #7f1023 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

body > header.pj-common-header .login:hover,
body > header.pj-common-header .register:hover {
  background: #5b0b19 !important;
  border-color: #5b0b19 !important;
  color: #fff !important;
}

body > header.pj-common-header .mobile-menu-toggle span {
  background: #7f1023 !important;
}

/* Preserve account dropdown functionality */
body > header.pj-common-header .customer-account-menu {
  position: relative !important;
  z-index: 10001 !important;
}

body > header.pj-common-header .customer-account-dropdown {
  z-index: 10002 !important;
}

/* Responsive header */
@media (max-width: 1050px) {
  body > header.pj-common-header {
    gap: 12px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }

  body > header.pj-common-header .logo {
    flex-basis: 100px !important;
    min-width: 100px !important;
  }

  body > header.pj-common-header .logo img {
    width: 100px !important;
  }

  body > header.pj-common-header nav {
    gap: 9px !important;
  }

  body > header.pj-common-header nav a {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }

  body > header.pj-common-header .search {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    flex-basis: 165px !important;
  }
}

@media (max-width: 760px) {
  body > header.pj-common-header .search {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    flex-basis: 125px !important;
  }
}

/* PJ-MOBILE-NAV-DISPLAY-FIX-2026-11-10 */
@media (max-width: 1050px) {
  body > header.pj-common-header nav:not(.is-open) {
    display: none !important;
  }

  body > header.pj-common-header nav.is-open {
    display: flex !important;
  }

  body > header.pj-common-header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    padding: 8px 0 !important;
  }

  body > header.pj-common-header nav a {
    flex: 0 0 auto !important;
  }
}



--- STYLE BLOCK 3 ---

/* Respect account.js hidden state after login */
body > header .login[hidden],
body > header .register[hidden] {
  display: none !important;
}
