* { box-sizing: border-box; }

:root {
    --customer-primary: #673493;
    --customer-primary-deep: #40205f;
    --customer-primary-dark: #201724;
    --customer-primary-soft: #f3ebf8;
    --customer-primary-mist: #faf7fc;
    --customer-white: #ffffff;
    --customer-border: rgba(103, 52, 147, .14);
    --customer-shadow: 0 16px 38px rgba(64, 32, 95, .09);
}

html { scroll-behavior: smooth; }
body { margin: 0; }
button, input { font: inherit; }
a { color: inherit; }

.customer-dashboard-body {
    min-width: 0;
    background: var(--customer-primary-mist);
    color: var(--customer-primary-dark);
    font-family: "Poppins", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.customer-skip-link {
    position: fixed;
    z-index: 100;
    top: .5rem;
    left: .5rem;
    transform: translateY(-160%);
    padding: .65rem 1rem;
    border-radius: .65rem;
    background: var(--customer-white);
    color: var(--customer-primary-deep);
}
.customer-skip-link:focus { transform: translateY(0); }
.customer-utility svg, .rail-icon svg, .rail-order-thumb svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
}
.utility-cart b {
    display: grid;
    min-width: 1.3rem;
    height: 1.3rem;
    place-items: center;
    border-radius: 999px;
    background: var(--customer-white);
    color: var(--customer-primary-deep);
    font-size: .7rem;
}

.customer-notice { max-width: 1180px; margin: 1rem auto 0; padding: .8rem 1rem; border: 1px solid var(--customer-border); border-radius: .85rem; background: var(--customer-primary-soft); color: var(--customer-primary-deep); font-size: .875rem; }
.customer-notice.is-error { background: var(--customer-white); box-shadow: inset 4px 0 var(--customer-primary); }
.customer-dashboard-shell { width: min(100% - 2rem, 1180px); margin: 0 auto; padding: 1.25rem 0 3rem; }
.customer-utility { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.customer-search { display: flex; width: min(100%, 520px); min-height: 48px; align-items: center; gap: .7rem; padding: 0 1rem; border: 1px solid var(--customer-border); border-radius: .85rem; background: var(--customer-white); box-shadow: 0 7px 22px rgba(64,32,95,.05); color: var(--customer-primary); }
.customer-search input { width: 100%; padding: .8rem 0; border: 0; outline: 0; background: transparent; color: var(--customer-primary-dark); font-size: .875rem; }
.customer-search input::placeholder { color: rgba(64,32,95,.53); }
.customer-utility-actions { display: flex; align-items: center; gap: .5rem; }
.customer-utility-actions > a { display: flex; min-height: 46px; align-items: center; gap: .5rem; padding: .6rem .85rem; border: 1px solid var(--customer-border); border-radius: .75rem; background: var(--customer-white); color: var(--customer-primary-deep); font-size: .8rem; text-decoration: none; }
.customer-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.customer-dashboard-grid.has-rail { grid-template-columns: minmax(0, 1fr) 290px; }
.customer-dashboard-main { min-width: 0; }

.customer-hero {
    position: relative;
    display: grid;
    min-height: 285px;
    overflow: hidden;
    grid-template-columns: minmax(270px, .85fr) 1.15fr;
    border: 1px solid var(--customer-border);
    border-radius: 1.25rem;
    background: linear-gradient(115deg, var(--customer-primary-soft), var(--customer-white));
    box-shadow: var(--customer-shadow);
}
.customer-hero::after { position: absolute; inset: auto -7rem -12rem auto; width: 22rem; height: 22rem; border: 1px solid rgba(103,52,147,.13); border-radius: 50%; box-shadow: 0 0 0 3.5rem rgba(103,52,147,.04), 0 0 0 7rem rgba(103,52,147,.025); content: ""; }
.customer-hero-copy { position: relative; z-index: 2; align-self: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
.customer-kicker { display: block; margin-bottom: .55rem; color: var(--customer-primary); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.customer-hero h1 { max-width: 28rem; margin: 0; color: var(--customer-primary-dark); font-size: clamp(2rem, 4vw, 3.35rem); letter-spacing: -.055em; line-height: 1.02; }
.customer-hero p { max-width: 29rem; margin: .85rem 0 1.15rem; color: rgba(32,23,36,.7); font-size: .88rem; }
.customer-primary-button { display: inline-flex; min-height: 44px; align-items: center; gap: .55rem; padding: .68rem 1.15rem; border-radius: .7rem; background: var(--customer-primary); box-shadow: 0 9px 20px rgba(103,52,147,.24); color: var(--customer-white); font-size: .82rem; font-weight: 600; text-decoration: none; }
.customer-primary-button:hover { background: var(--customer-primary-deep); }
.customer-hero-art { position: relative; z-index: 1; min-height: 100%; background: url("../img/home/product-line.png") center / cover no-repeat; }
.customer-hero-art::before { position: absolute; inset: 0; background: linear-gradient(90deg, var(--customer-white), transparent 34%); content: ""; }
.customer-hero-mark { position: absolute; z-index: 3; top: 1.2rem; right: 1.2rem; padding-left: .65rem; border-left: 2px solid var(--customer-primary); color: var(--customer-primary-deep); font-size: .75rem; font-weight: 700; letter-spacing: .14em; line-height: 1.5; }
.customer-dashboard-grid:not(.has-rail) .customer-hero { grid-template-columns: minmax(330px, .72fr) 1.28fr; }
.customer-hero.customer-hero--image-only {
    display: block;
    min-height: 0;
    aspect-ratio: 3 / 1;
    background: none;
}
.customer-hero.customer-hero--image-only::after { display: none; }
.customer-hero--image-only > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.dashboard-section { margin-top: 1.65rem; }
.dashboard-section-head, .rail-card-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.dashboard-section-head h2, .rail-card-head h2 { margin: .12rem 0 0; color: var(--customer-primary-dark); font-size: 1.05rem; letter-spacing: -.025em; }
.dashboard-section-head > div > span, .rail-card-head > div > span { color: var(--customer-primary); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-section-head > a, .rail-card-head > a { color: var(--customer-primary); font-size: .75rem; font-weight: 600; text-decoration: none; }
.featured-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.featured-card { overflow: hidden; border: 1px solid var(--customer-border); border-radius: .95rem; background: var(--customer-white); box-shadow: 0 8px 22px rgba(64,32,95,.055); }
.featured-image { display: grid; height: 145px; place-items: center; overflow: hidden; background: var(--customer-primary-soft); color: var(--customer-primary); font-size: 2rem; font-weight: 700; text-decoration: none; }
.featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.featured-card:hover .featured-image img { transform: scale(1.035); }
.featured-content { padding: .8rem; }
.featured-category { display: block; overflow: hidden; color: var(--customer-primary); font-size: .75rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.featured-content h3 { margin: .2rem 0 .05rem; overflow: hidden; font-size: .88rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.featured-content h3 a { text-decoration: none; }
.featured-content p { margin: 0 0 .55rem; color: rgba(32,23,36,.55); font-size: .75rem; }
.featured-content > strong { display: block; margin-bottom: .65rem; color: var(--customer-primary-dark); font-size: .88rem; }
.featured-content form { margin: 0; }
.featured-content button { width: 100%; min-height: 38px; border: 0; border-radius: .6rem; background: var(--customer-primary); color: var(--customer-white); cursor: pointer; font-size: .75rem; font-weight: 600; }
.featured-content button:hover { background: var(--customer-primary-deep); }
.dashboard-empty { grid-column: 1 / -1; margin: 0; padding: 1.5rem; border: 1px dashed rgba(103,52,147,.3); border-radius: .9rem; color: rgba(32,23,36,.6); font-size: .82rem; }

.customer-dashboard-rail { display: grid; gap: .75rem; }
.rail-card { border: 1px solid var(--customer-border); border-radius: 1rem; background: var(--customer-white); box-shadow: 0 10px 28px rgba(64,32,95,.055); }
.delivery-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: start; padding: 1rem; }
.rail-icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .7rem; background: var(--customer-primary-soft); color: var(--customer-primary); }
.delivery-card span, .rail-card-head span { color: rgba(32,23,36,.5); font-size: .75rem; }
.delivery-card strong { display: block; margin-top: .08rem; color: var(--customer-primary-dark); font-size: .77rem; }
.delivery-card p { margin: .15rem 0 0; overflow: hidden; color: rgba(32,23,36,.58); font-size: .75rem; line-height: 1.5; text-overflow: ellipsis; }
.delivery-card > a { padding-top: .1rem; color: var(--customer-primary); font-size: .75rem; font-weight: 600; text-decoration: none; }
.order-card { padding: 1rem; }
.rail-card-head h2 { font-size: .95rem; }
.rail-orders { display: grid; }
.rail-order { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; gap: .55rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--customer-border); text-decoration: none; }
.rail-order:first-child { border-top: 0; }
.rail-order-thumb { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border-radius: .65rem; background: var(--customer-primary-soft); color: var(--customer-primary); }
.rail-order-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rail-order-copy { min-width: 0; }
.rail-order-copy strong, .rail-order-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-order-copy strong { color: var(--customer-primary-dark); font-size: .7rem; }
.rail-order-copy small { margin-top: .08rem; color: rgba(32,23,36,.52); font-size: .75rem; }
.rail-status { max-width: 90px; overflow: hidden; padding: .25rem .4rem; border-radius: 999px; background: var(--customer-primary-soft); color: var(--customer-primary-deep); font-size: .75rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rail-chevron { color: var(--customer-primary); font-size: 1.15rem; }
.rail-empty { padding: 1.25rem .25rem .5rem; border-top: 1px solid var(--customer-border); }
.rail-empty strong { font-size: .78rem; }
.rail-empty p { margin: .25rem 0 .65rem; color: rgba(32,23,36,.55); font-size: .75rem; }
.rail-empty a { color: var(--customer-primary); font-size: .7rem; font-weight: 600; }
.account-shortcut { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .85rem 1rem; text-decoration: none; }
.account-shortcut > span:nth-child(2) strong, .account-shortcut > span:nth-child(2) small { display: block; }
.account-shortcut > span:nth-child(2) strong { color: var(--customer-primary-dark); font-size: .75rem; }
.account-shortcut > span:nth-child(2) small { margin-top: .1rem; color: rgba(32,23,36,.53); font-size: .75rem; }
.account-shortcut > b { color: var(--customer-primary); font-size: 1.15rem; }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }

@media (max-width: 1100px) {
    .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .customer-dashboard-grid.has-rail { grid-template-columns: 1fr; }
    .customer-dashboard-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .order-card { grid-row: span 3; }
}

@media (max-width: 760px) {
    .customer-utility { align-items: stretch; flex-direction: column; }
    .customer-search { width: 100%; }
    .customer-utility-actions { width: 100%; }
    .customer-utility-actions > a { flex: 1; }
    .customer-hero,
    .customer-dashboard-grid:not(.has-rail) .customer-hero { min-height: 360px; grid-template-columns: 1fr; }
    .customer-hero.customer-hero--image-only { min-height: 0; }
    .customer-hero-copy { align-self: start; padding-bottom: 0; }
    .customer-hero-art { min-height: 160px; background-position: center; }
    .customer-hero-art::before { background: linear-gradient(180deg, var(--customer-white), transparent 35%); }
    .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .customer-dashboard-shell { width: min(100% - 1rem, 1180px); padding-top: .75rem; }
    .customer-utility-actions > a:first-child { display: none; }
    .customer-hero h1 { font-size: 2.15rem; }
    .featured-image { height: 125px; }
    .customer-dashboard-rail { grid-template-columns: 1fr; }
    .order-card { grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none!important; }
}