/*
 * Visual refresh layered over style.css. Layout (widths, floats, columns) is
 * untouched; this file only replaces the 2012 surface: bevel/gloss images,
 * grey header box, dotted-image rules, image-backed inputs, all-caps type.
 *
 * Idea: a print gallery after hours. Warm graphite walls, label-card paper
 * text, the brand violet as the only accent, and one soft "picture light"
 * over the header so the artwork is the brightest thing on the page.
 */

:root {
    --wall: #262422;
    --panel: #302d2a;
    --raised: #3b3834;
    --line: #4a4641;
    --paper: #efe9df;
    --muted: #aaa196;
    --violet: #a497dc;       /* links / accents on dark (5:1 on panel) */
    --violet-fill: #6f61a8;  /* filled buttons, white text */
    --violet-hover: #7d6fbb;
    --danger: #f08a87;
    --radius: 4px;
    --font-ui: 'Jost', 'Century Gothic', 'CenturyGothic', Futura, sans-serif;
    --font-display: 'Marcellus', Georgia, serif;
}

/* ---------- Base ---------- */

html { background: var(--wall); }
body {
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    color: var(--paper);
    background:
        radial-gradient(ellipse 900px 420px at 50% -120px, rgba(255, 232, 196, .11), rgba(255, 232, 196, 0) 70%) no-repeat,
        var(--wall);
    -webkit-font-smoothing: antialiased;
}

/* style.css pins Century Gothic on dozens of selectors; route them all to Jost */
.user-txt, .acrylic-block h2, .acrylic-block strong, .dotted-text, .right-col-text h2, .right-col-text p,
.add-cart, .btm-text, .ac-btm-text, .top-text, .member-txt a, .login-form .footer-btn a, .form-field p label,
.order-history-grid, .upload-add, .upload-add p, .uploading-box ul, ul.images-gallery span, .show-more a,
.gallery-h, .studio-info, .send-form, .send-form p span input[type="text"], textarea, .paper-canvas,
.stander-size, .headding, .giclee-printing, .see-img a, .upload h3, .checking-out, .checking-out tr td a,
.gray-part, .sub-total tr td, .form, .form p span input[type="text"], .form p span input[type="password"],
.checkouting h2, .order-summery span, .billing-information h3, .summary-text, .option-select,
.request-field p, .request-field p label, .request-form .footer-btn a, .newest-prod h3, .insp-project h3,
.home-text, .thank-you p, .order-imgages, .order-imgages tr th h3, .view-all, .order-history table tr td,
.faq-box ul.links-list li, .faq-box ul.text-list li, .faq-box ul.privacy-txt li, .faq-box ul.suggested-txt li,
.suggested-grid, .button span span, .button span input, .button2 span span, .button2 span input,
.login-form .form-field .input, .request-form .request-field .input, .request-form .request-field .select {
    font-family: var(--font-ui);
}

a { color: var(--violet); transition: color .15s; }
a:hover { color: var(--paper); }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }

::selection { background: var(--violet-fill); color: #fff; }

/* ---------- Header ---------- */

#header-bg { background: none; padding: 0; left: 0; width: 805px; }
#header {
    width: 765px;
    right: 0;
    background: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 24px;
    min-height: 0;
}

.user-txt { color: var(--muted); font-size: 12px; letter-spacing: .02em; text-transform: none; padding-top: 63px; padding-left: 14px; }
.user-txt strong { font-size: 12px; font-weight: 500; }

#header ul.top-menu { padding: 14px 0 14px; }
#header ul.top-menu li { padding-left: 20px; }
#header ul.top-menu li a { color: var(--muted); font-size: 13px; }
#header ul.top-menu li a:hover, #header ul.top-menu li.active a { color: var(--paper); }

/* account buttons (Register / Login / My Cart ...) */
#user-account-nav ul li { padding-left: 8px; }
#user-account-nav ul li a,
#user-account-nav ul li a:hover,
#user-account-nav ul li.active a { background: none; height: auto; padding: 0; }
#user-account-nav ul li a span,
#user-account-nav ul li a:hover span,
#user-account-nav ul li.active a span {
    background: none;
    height: auto;
    padding: 5px 14px;
    line-height: 20px;
    font-size: 13px;
    text-transform: none;
    color: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .15s, background-color .15s;
}
#user-account-nav ul li a:hover span { border-color: var(--muted); }
#user-account-nav ul li.active a span { border-color: var(--violet); color: var(--violet); }

/* primary navigation: plain words with an accent rule under the current page */
#manu-nav { margin-top: 18px; }
#manu-nav ul li { margin-left: 28px; padding: 0; }
#manu-nav ul li a,
#manu-nav ul li a:hover,
#manu-nav ul li.active a { background: none; height: auto; padding: 0; }
#manu-nav ul li a span,
#manu-nav ul li a:hover span,
#manu-nav ul li.active a span {
    background: none;
    height: auto;
    padding: 6px 0;
    line-height: 20px;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    color: var(--paper);
    border-bottom: 2px solid transparent;
    transition: border-color .15s, color .15s;
}
#manu-nav ul li a:hover span { border-bottom-color: var(--line); }
#manu-nav ul li.active a span { border-bottom-color: var(--violet); color: var(--paper); }

/* ---------- Home slideshow: a print hung on the wall, no grey bezel ---------- */

.home-slider { background: none; padding: 0; margin: 26px 0 0 13px; height: auto; width: 739px; }
.ss3_wrapper { height: auto; }
.ss3_wrapper .slideshow { border-radius: 2px; box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .35); }
.ss3_wrapper .slideshow_paging { background: none; margin-top: 18px; width: auto; text-align: center; display: flex; justify-content: center; gap: 10px; float: none; }
.ss3_wrapper .slideshow_paging li,
.ss3_wrapper .slideshow_paging li.activeSlide {
    background: var(--line);
    width: 22px;
    height: 3px;
    margin: 0;
    border-radius: 2px;
    float: none;
    transition: background-color .2s;
}
.ss3_wrapper .slideshow_paging li.activeSlide { background: var(--paper); }
.ss3_wrapper .slideshow_paging li a { display: block; height: 3px; padding: 6px 0; margin-top: -6px; overflow: hidden; }

/* ---------- Content panels ---------- */

#contant { padding-top: 12px; }

.acrylic-block, .policy-box, .gray-part, .add-matte {
    background-color: var(--panel);
}
.acrylic-block { border-radius: var(--radius); margin-bottom: 8px; }
.add-matte { border-top-color: var(--line); }
.right-col { background-color: var(--panel); border-bottom: 0; border-radius: var(--radius); }
.add-cart { background-color: var(--raised); border-radius: var(--radius); }

/* section titles: wall-text serif, sentence case */
.acrylic-block h2,
.newest-prod h3, .insp-project h3,
.right-col-text h2,
.checkouting h2,
.order-summery span,
.billing-information h3,
.order-imgages tr th h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--paper);
}
.acrylic-block h2 { background: none; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 4px; }
.acrylic-block h2 strong, .right-col-text h2 strong, .acrylic-block .headding strong, .headding strong { font-family: inherit; font-weight: inherit; text-transform: none; }
.acrylic-block strong { font-weight: 600; }

/* products & pricing section bars */
.headding {
    background: none;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 24px;
    text-transform: none;
    padding: 0 0 8px 30px;
    color: var(--paper);
}
.giclee-printing { color: #d6cfc4; font-size: 14px; }
.giclee-printing p { line-height: 1.6; }
.frame { border-bottom-color: var(--line); color: var(--muted) !important; font-size: 12px; }
.frame span { color: var(--paper); text-transform: none; font-size: 12px; }
.price-size { background: none; border-bottom: 1px solid var(--line); color: var(--muted) !important; font-size: 12px; }
.price-size span { font-size: 12px; }

/* dotted-image rules -> hairlines (the text label sits over the line, so match panel colour) */
.dotted, .dotted-btn { background: linear-gradient(var(--line), var(--line)) 0 9px / 100% 1px no-repeat; }
.dotted-btn { background-position: 0 12px; }
.dotted-text { background-color: var(--panel); font-size: 12px; color: var(--muted); padding-left: 8px; }
.dotted2, .request-dotted { background: var(--line); height: 1px; }
.dotted-row, .Prints_Order_list ul li, .add-frame, .order-summery span {
    background: linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat;
}
.desired-size { background: linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat; }
.home-bdr { border-bottom-color: var(--line); }
.bdr { border-bottom-color: var(--line); }
.upload-btm-padd, .order-history-box { border-bottom-color: var(--line); }
.faq-box ul.links-list, .faq-box ul.text-list, .faq-box ul.privacy-txt { border-bottom: 1px solid var(--line); }

/* small labels that were 9-10px uppercase Verdana */
.acrylic-block ul.size-box li .plus-price,
.acrylic-block ul.size-box-large li .plus-price,
.acrylic-block ul.product-box-large li .plus-price,
.acrylic-block ul.frame-option li .frame-price {
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: none;
    color: var(--violet);
}
.acrylic-block ul.size-box li p strong,
.acrylic-block ul.size-box-large li p strong,
.acrylic-block ul.product-box-large li p strong,
.acrylic-block ul.frame-option li p strong,
.Prints_Order_list ul li .size, .Prints_Order_list ul li .fright,
.add-frame strong, .add-matte strong, .desired-size {
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}
.acrylic-block ul.product-box-large li .prod-img,
.acrylic-block ul.frame-option li .frame-img { border-radius: 3px; overflow: hidden; }

/* ---------- Home ---------- */

.newest-prod ul li { background-color: var(--raised); border-radius: 2px; overflow: hidden; }
.home-text { color: #d6cfc4; font-size: 14px; }
.home-text p { line-height: 1.6; padding-top: 12px; max-width: 68ch; }
.home-text strong { text-transform: none; font-size: inherit; color: var(--paper); }
.home-text h2 { font-family: var(--font-display); font-weight: 400; font-size: 20px; text-transform: none; color: var(--paper); }

/* ---------- Buttons ---------- */

.btn, .next-btn, input.next-btn, .yellow-btn, .width-btn, .upload-msg a.btn {
    display: inline-block;
    background: var(--violet-fill);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    padding: 7px 16px;
    border: 0;
    border-radius: var(--radius);
    text-transform: none;
    cursor: pointer;
    transition: background-color .15s;
}
.btn:hover, .next-btn:hover, .yellow-btn:hover { background: var(--violet-hover); color: #fff; }
.yellow-btn { background: #b9a92a; color: #1d1b19; }
.yellow-btn:hover { background: #cbbb3a; color: #1d1b19; }
.log-in-icon-png { background-image: none; padding-left: 16px; min-width: 0; }
.col-765 a.btn, .col-765 a.btn:hover { color: #fff; }
.home-text a.btn-large, .home-text a.btn-large:hover { color: #fff; font-size: 15px; padding: 11px 22px; margin-top: 6px; }

/* .button / .button2: sliced bevel images around an <input> */
.button, .button:hover, .button:active, .button span, .button:hover span, .button:active span,
.button2, .button2 span {
    background: none;
    height: auto;
    line-height: normal;
    padding: 0;
}
.button span input, .button2 span input {
    background: var(--violet-fill);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    padding: 8px 20px;
    border-radius: var(--radius);
    transition: background-color .15s;
}
.button span input:hover, .button2 span input:hover { background: var(--violet-hover); }

/* image buttons with the label baked in */
.calc2, .next, .update-btn, .my-gallery-btn, .go-gallery-btn, .upload-btn, .upload-btn2 {
    background: var(--raised);
    color: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    width: auto;
    height: auto;
    text-indent: 0;
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: 18px;
    padding: 3px 12px;
}
.calc2::before { content: "Calculate"; }
.calc2[disabled] { opacity: .5; cursor: default; }
.calc2 { top: 0; }

/* ---------- Forms ---------- */

input[type="text"], input[type="password"], input[type="email"], textarea, select {
    font-family: var(--font-ui);
}

/* wrappers that drew the field as a background image: draw the field on the input instead */
.input-bg-1, .input-bg-2, .input-bg-3, .input-bg-4, .input-bg-5, .input-bg-6, .input-bg-7,
.large-input, .small-input, .textarea, .gray-input, .qty-input-bg, .qty {
    background: none;
    height: auto;
    padding: 0;
}
/* #contant: style.css's `.input-bg-N input[type="text"] { background:none; border:none }` is more specific */
#contant .input-bg-1 input, #contant .input-bg-2 input, #contant .input-bg-3 input, #contant .input-bg-4 input, #contant .input-bg-5 input,
#contant .input-bg-6 input, #contant .input-bg-7 input, .large-input input, .small-input input, .textarea textarea,
.gray-input input, .qty-input-bg input[type="text"], .add-cart input[type="text"],
.comment textarea, .desired-size input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 4px 10px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--paper);
    font-size: 14px;
    transition: border-color .15s;
}
.textarea textarea, .comment textarea { height: 80px; padding-top: 8px; }
.input-bg-1 input:focus, .input-bg-2 input:focus, .input-bg-3 input:focus, .input-bg-4 input:focus,
.input-bg-5 input:focus, .input-bg-6 input:focus, .input-bg-7 input:focus, .large-input input:focus,
.small-input input:focus, .textarea textarea:focus, .gray-input input:focus, .qty-input-bg input:focus,
.comment textarea:focus, .desired-size input[type="text"]:focus { border-color: var(--violet); }
.qty-input-bg input[type="text"], .add-cart input[type="text"] { width: 58px; text-align: center; }
.gray-input input { width: 135px; }
.desired-size input[type="text"] { width: 73px; height: 26px; top: 3px; text-align: center; }
.lightcolor input[type="text"] { background-color: var(--panel); }

.form, .send-form, .studio-info { font-size: 13px; color: var(--paper); }
.form p label, .send-form p label { color: var(--muted); padding-bottom: 4px; }
.form p select, .form p b select, .send-form p b select, .option-select, select.select {
    background: var(--raised);
    color: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    height: 32px;
    padding: 4px 8px;
}
.form p select option { background-color: var(--raised); }
.send-form span, .studio-info span { border-bottom-color: var(--line); text-transform: none; }

/* ---------- Login & request-account cards ---------- */

.home-logo { opacity: .95; }
.login-form, .request-form {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7);
}
.form-field p label, .request-field p, .request-field p label { color: var(--muted); font-size: 13px; padding-left: 2px; }
.request-field p label { font-size: 12px; }
.login-form .form-field .input, .request-form .request-field .input, .request-form .request-field .select,
.login-form .form-field .input:hover, .request-form .request-field .input:hover {
    background: var(--raised);
    color: var(--paper);
    text-shadow: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    font-size: 14px;
}
.login-form .form-field .input:focus, .request-form .request-field .input:focus {
    background: var(--raised);
    color: var(--paper);
    border-color: var(--violet);
    box-shadow: none;
}
.login-form .footer-btn a, .request-form .footer-btn a { color: var(--muted); font-size: 13px; }
.login-form .footer-btn a:hover, .request-form .footer-btn a:hover { color: var(--paper); }

/* "LOGIN" / "REQUEST AN ACCOUNT" tab images -> real headings */
.login-img, .request-img {
    background: none;
    width: auto;
    height: auto;
    left: 0;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 34px;
    color: var(--paper);
}
.login-img::before { content: "Log in"; }
.request-img::before { content: "Request a wholesale account"; }
.request-box .request-img { padding-bottom: 6px; }
.member-arrow { background: none; padding-right: 0; }
.member-txt { top: 3px; padding-right: 0; }
.member-txt a { font-family: var(--font-ui); font-weight: 500; font-size: 12px; line-height: 15px; color: var(--muted); }
.member-txt a:hover { color: var(--paper); }

/* ---------- Messages ---------- */

.btm-text, .ac-btm-text, .top-text, .upload-msg {
    background: #3f3957;
    border: 1px solid #5b5280;
    border-radius: var(--radius);
    color: var(--paper);
    font-size: 14px;
}
.top-text { background-image: none; border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.btm-text, .ac-btm-text { z-index: auto; }
.upload-msg span { font-size: 13px; padding: 8px 12px; }
.policy-box.bg-color { background-color: #3f3957; }
.policy-box.bg-color a { color: #f2df6b; }

/* ---------- Tables ---------- */

.checking-out, .order-history-grid, .paper-canvas, .suggested-grid, .order-imgages, .order-history table tr td, .sub-total tr td {
    font-size: 13px;
    color: #d6cfc4;
}
.checking-out tr th, .order-history-grid tr th, .paper-canvas table tr th, .order-imgages tr th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--line);
}
.checking-out tr td, .paper-canvas table tr td {
    background: linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat;
    color: #d6cfc4;
}
.checking-out tr td a, .order-history-box a, .order-history a, .order-imgages a, .view-all, .pink-link,
ul.images-gallery li a, .show-more a, .faq-box ul.links-list li a, .faq-box ul.text-list li a,
.faq-box ul.privacy-txt li a, .studio-info p a, .form a, .preview a {
    color: var(--violet);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-family: var(--font-ui);
}
.pink-link { color: var(--violet) !important; }
.pink-link:hover { color: var(--paper) !important; }
.grid-btm-bdr th, .grid-btm-bdr, .grid-top-bdr { border-color: var(--line); }
.stander-size { background-color: var(--raised); color: var(--paper); }
.stander-size span { color: var(--muted); }
.paper-text { border-bottom-color: var(--line); }
.order-imgages tr.bdr td { border-bottom-color: var(--line); }
.suggested-grid table, .suggested-grid table tr td, .suggested-grid table tr th { border-color: var(--line) !important; }
.suggested-grid table tr th { background-color: var(--violet-fill); }

/* ---------- FAQ / privacy ---------- */

.faq-box ul.links-list li, .faq-box ul.text-list li, .faq-box ul.privacy-txt li, .faq-box ul.suggested-txt li {
    font-size: 14px;
    font-weight: 600;
    color: var(--paper);
}
.faq-box ul.text-list li p, .faq-box ul.privacy-txt li p, .faq-box ul.suggested-txt li p {
    font-size: 14px;
    line-height: 1.6;
    color: #d6cfc4;
    max-width: 70ch;
}

/* ---------- Gallery ---------- */

ul.images-gallery li img { border-radius: 2px; }
.gallery-h { background: rgba(26, 24, 22, .82); font-size: 12px; border-radius: 0 0 2px 2px; }
.gallery-h strong { text-transform: none; }

/* ---------- Footer ---------- */

#footer { padding: 72px 0 40px; }
#footer ul li { padding-right: 18px; line-height: 20px; }
#footer ul li a { color: var(--muted); font-size: 13px; line-height: 20px; }
#footer ul li a:hover { color: var(--paper); }
.copyright { color: #857d72; font-size: 12px; padding-top: 12px; }
.social-icon { top: -4px; display: flex; gap: 6px; }
.social-icon a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); transition: color .15s, border-color .15s; }
.social-icon a:hover { color: var(--paper); border-color: var(--muted); }

/* ---------- Motion preferences ---------- */

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