/*
 * Responsive layout layer, loaded after style.css and modern.css.
 * style.css lays the site out at a fixed 805px; this file makes it fluid up to
 * 1160px and usable on phones. Colours/type come from modern.css variables.
 *
 * Breakpoints: phone <= 767px, tablet 768-1023px, desktop >= 1024px.
 */

/* ================= Shell ================= */

#page-wrapper {
    width: auto;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

#header-bg { width: auto; float: none; left: 0; }
/* flow-root: #header used to be a float, which is what contained its floated children */
#header { width: auto; float: none; right: 0; padding: 0 0 24px; display: flow-root; }
/* each menu keeps its own row at the right, as when they had fixed widths */
#user-account-nav { width: auto; clear: right; }
#manu-nav { width: auto; clear: right; }
.nav-toggle { display: none; }

#contant { width: auto; float: none; }
#contant img, #footer img { max-width: 100%; height: auto; }
#contant { overflow-wrap: break-word; }

/* most pages wrap their content in a one-cell layout table; two-cell ones (order and
   checkout: form + 181px summary sidebar) keep their table layout until their phase */
:is(#contant > table, #contant > form > table):not(:has(> tbody > tr > td + td)),
:is(#contant > table, #contant > form > table):not(:has(> tbody > tr > td + td)) > tbody,
:is(#contant > table, #contant > form > table):not(:has(> tbody > tr > td + td)) > tbody > tr,
:is(#contant > table, #contant > form > table):not(:has(> tbody > tr > td + td)) > tbody > tr > td { display: block; width: 100%; }

/* full-width content panels; flow-root contains the floats inside them */
.acrylic-block.col-765 { float: none; width: auto !important; display: flow-root; clear: both; }

.btm-text, .ac-btm-text, .top-text { width: auto; max-width: 620px; box-sizing: border-box; }

#footer {
    width: auto;
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}
#footer ul { float: none; flex: 1 1 auto; order: 1; display: flex; flex-wrap: wrap; row-gap: 4px; }
#footer .social-icon { order: 2; float: none; top: 0; }
#footer .copyright { order: 3; float: none; width: 100%; padding: 0; }

/* order page (upload.php): image chooser + preview side by side across the full width */
#contant .fleft:has(> #image-td) { float: none !important; width: 100%; }
#image-td { width: 100%; }
#image-td .upload-left, #image-td .mygallery-right { width: 50%; }
/* preview fills the panel */
#image-td .preview { width: auto; padding: 16px 0; }
#image-td .preview img#up_img { display: block; width: auto; max-width: 100%; max-height: 360px; margin: 0 auto 10px; border-radius: 2px; }

/* "image -> preview" arrow: centred on the gap between the two panels */
#image-td .mygallery-right > .relative { position: static; }
#image-td .mygallery-right { position: relative; }
#image-td .or-img { top: 50%; left: 0; transform: translate(-50%, -50%); z-index: 2; }

/* my gallery: thumbnails fit inside their fixed 170x170 tiles */
#contant .captionfull-img img { width: 170px; height: 170px; object-fit: cover; display: block; }
/* the markup drops the margin on every 4th tile (4 per row at 805px); use a grid instead */
ul.images-gallery { display: grid; grid-template-columns: repeat(auto-fill, 170px); gap: 0 24px; justify-content: start; }
ul.images-gallery li { margin: 0 !important; float: none; }

/* product chooser: six tiles spread across the panel */
.acrylic-block ul.product-box-large { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; float: none; }
.acrylic-block ul.product-box-large li { width: auto; margin: 0 !important; float: none; }
.acrylic-block ul.product-box-large li .prod-img { width: 100%; height: auto; aspect-ratio: 117 / 120; overflow: hidden; }
.acrylic-block ul.product-box-large li .prod-img img { width: 100%; height: 100%; object-fit: cover; }

/* ================= Account / billing / shipping forms ================= */

/* two columns that share the panel, instead of 370px floats pushed to the edges */
#contant .form-col { width: calc(50% - 20px); }
#contant .acrylic-block.shipping-information,
#contant .acrylic-block.order-history { width: calc(50% - 44px); }
#contant .acrylic-block.shipping-information .form-col { width: 100%; }

/* field rows: each fixed-width wrapper becomes a share of its column */
/* rows wrap like the old floats, but a taller field (e.g. one showing a validation
   message) only makes its own row taller instead of letting the next field slide up beside it */
#contant .form, #contant .form div:has(> p) { display: flex; flex-wrap: wrap; align-items: flex-start; }
#contant .form > :not(p), #contant .form div:has(> p) > :not(p) { width: 100%; box-sizing: border-box; }
#contant .form p { box-sizing: border-box; padding-right: 8px; float: none; }
#contant .form p:has(> .input-bg-1), #contant .form p:has(> .input-bg-7) { width: 100%; }
#contant .form p:has(> .input-bg-6), #contant .form p:has(textarea) { width: 70%; }
#contant .form p:has(textarea) > span { margin-right: 0; }
#contant .form p:has(> .input-bg-2) { width: 52%; }
#contant .form p:has(> .input-bg-5) { width: 46%; }
#contant .form p:has(> .input-bg-3) { width: 27%; }
#contant .form p:has(> .input-bg-4) { width: 22%; min-width: 84px; }
#contant .form select.month, #contant .form select.year { width: auto; min-width: 84px; }
#contant .form [class^="input-bg-"] { display: block; width: 100% !important; margin-right: 0; }
#contant .form [class^="input-bg-"] select { width: 100%; box-sizing: border-box; }
#contant .form .width-input { width: 100% !important; }
#contant .form p.width370 { width: 100%; }
#contant .acrylic-block.order-history .order-history { width: auto; float: none; }

/* ================= Order & checkout: form + "building your product" sidebar ================= */

/* form fills the width beside the summary; thumbnails and price columns are both
   right-aligned, so they stay lined up as the rows stretch */
#contant > table:has(> tbody > tr > td.right-col),
#contant > table:has(> tbody > tr > td.right-col) > tbody { display: block; width: 100%; }
#contant > table:has(> tbody > tr > td.right-col) > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 8px;
    align-items: start;
}
#contant > table:has(> tbody > tr > td.right-col) > tbody > tr > td { display: block; width: auto; }
/* the cell spans the row; the summary inside it stays in view while scrolling */
#contant td.right-col { align-self: stretch; background: none; border: 0; }
/* !important: the order pages' scroll script sets position:fixed inline, which detached the box */
#contant td.right-col > .right-col-text { position: sticky !important; top: 16px !important; background: var(--panel); border-radius: var(--radius); box-sizing: border-box; }
#contant .left-col, #contant .left-col .acrylic-block, #contant .left-col .add-matte { width: auto; float: none; }
/* price grid: the thumbnail header and every price row share one column template
   (label | one fixed column per product type), so thumbnails sit exactly over their prices */
.acrylic-block:has(> .Prints_Order_list) { --pcol: 150px; }
.acrylic-block:has(> .Prints_Order_list li .fright > :nth-child(4)) { --pcol: 130px; }
.acrylic-block:has(> .Prints_Order_list) > ul.size-box,
.Prints_Order_list ul li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: var(--pcol);
    align-items: center;
    float: none;
    width: auto;
}
.acrylic-block:has(> .Prints_Order_list) > ul.size-box { padding: 15px 10px 4px; }
.acrylic-block:has(> .Prints_Order_list) > ul.size-box::before { content: ""; } /* label column */
.acrylic-block:has(> .Prints_Order_list) > ul.size-box li { float: none; width: auto; margin: 0; text-align: left; align-self: end; }
.acrylic-block:has(> .Prints_Order_list) > ul.size-box li .prod-img { width: 80px; height: 60px; margin: 0 0 8px; overflow: hidden; }
.acrylic-block:has(> .Prints_Order_list) > ul.size-box li .prod-img img { width: 100%; height: 100%; object-fit: cover; }
.acrylic-block:has(> .Prints_Order_list) > ul.size-box li p { padding: 0 0 12px; }
.Prints_Order_list ul li .size { float: none; }
.Prints_Order_list ul li .fright { display: contents; }
.Prints_Order_list ul li .price,
.Prints_Order_list ul li .price-canvas { float: none; width: auto; padding-left: 0; text-align: left; white-space: nowrap; }
#contant .right-col-text { width: auto; float: none; padding: 16px; }
#contant .left-col .acrylic-block { display: flow-root; }
/* quantity / add-to-cart bar sits after #contant */
#page-wrapper .add-cart { width: auto; margin: 0 0 8px; float: none; display: flow-root; box-sizing: border-box; line-height: 36px; }
#contant .billing-information { width: auto; }
#contant .billing-information .form { box-sizing: border-box; }
/* "Checking Out..." bar lines up with the form + summary below it */
#contant .checkouting { height: auto; margin: 0 0 12px; float: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#contant .checkouting h2 { float: none; width: auto; box-sizing: border-box; background: none; padding: 0; line-height: 1.2; font-size: 24px; }
#contant .checkout-l-img { display: none; }

/* checkout progress (includes/checkout_steps.php) */
.checkout-steps { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: none; flex: 0 1 460px; }
.checkout-steps li { flex: 1 1 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; position: relative; }
.checkout-steps li + li { padding-left: 12px; }
/* the first step has no connector, so it only takes its own width; the others share the rest */
.checkout-steps li:first-child { flex: none; }
/* connector line before every step after the first */
.checkout-steps li + li::before { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); margin-right: 4px; min-width: 16px; order: -1; }
.checkout-step-num {
    flex: none;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    font-size: 13px; font-weight: 500;
}
.checkout-steps li.is-done { color: var(--paper); }
.checkout-steps li.is-done .checkout-step-num { border-color: var(--violet); color: var(--violet); }
.checkout-steps li.is-done + li::before { background: var(--violet); }
.checkout-steps li.is-current { color: var(--paper); font-weight: 500; }
.checkout-steps li.is-current .checkout-step-num { background: var(--violet-fill); border-color: var(--violet-fill); color: #fff; }

@media (max-width: 1023px) {
    #contant > table:has(> tbody > tr > td.right-col) > tbody > tr { grid-template-columns: minmax(0, 1fr); }
    #contant td.right-col > .right-col-text { position: static !important; }

    /* checkout: heading above the steps */
    #contant .checkouting { flex-direction: column; align-items: stretch; gap: 10px; }
    .checkout-steps { flex: none; width: 100%; }
}

/* price table group headings (Paper / Canvas ...): no rule underneath */
.paper-text { border-bottom: 0; }

/* custom size inputs are dimmed until "Custom" is picked: keep them readable */
.desired-size, .lightcolor, .desired-size.lightcolor strong { color: var(--muted) !important; }
.lightcolor { opacity: .7; }

/* ---------- Form validation (jQuery validationEngine) ----------
   The plugin inserts each message just before its field and floats it as a bubble.
   Show it in the flow instead: a short red line under the field, and a red outline
   on the field itself. Works for every form that uses validate[...] classes. */
.formError {
    position: static !important;
    display: block;
    width: auto !important;
    margin: 6px 0 2px !important;
    opacity: 1 !important;
    cursor: default;
    pointer-events: none;
}
.formError .formErrorArrow { display: none !important; }
.formError .formErrorContent {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 0 0 20px;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
    color: var(--danger) !important;
    font: 400 13px/18px var(--font-ui) !important;
    text-transform: none !important;
    position: relative;
    text-align: left;
}
.formError .formErrorContent::before {
    content: "!";
    position: absolute; left: 0; top: 1px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--danger); color: #1d1b19;
    font: 700 10px/14px var(--font-ui); text-align: center;
}
input:has(+ .formError), select:has(+ .formError), textarea:has(+ .formError) { border-color: var(--danger) !important; }

/* contact form honeypot: clipped to nothing in place (not display:none, which some bots skip) */
.hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* price rows: the whole price cell selects its option */
.Prints_Order_list ul li .fright > * { cursor: pointer; }

/* security-code help: inline icon next to the field (opens the "what is this" popup) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#contant .form p:has(> a.cc-help) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
#contant .form p:has(> a.cc-help) > label { flex: 0 0 100%; }
#contant .form p:has(> a.cc-help) > [class^="input-bg-"] { flex: 1 1 auto; width: auto !important; }
#contant a.cc-help { flex: none; display: inline-flex; color: var(--muted); text-decoration: none; }
#contant a.cc-help:hover, #contant a.cc-help:focus-visible { color: var(--violet); }

/* real <textarea class="textarea"> (gift message): style.css uses .textarea for an image
   wrapper, so draw the field on the element itself */
#contant textarea.textarea, #contant .form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 96px;
    padding: 8px 10px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--paper);
    font: 14px/1.5 var(--font-ui);
}
#contant textarea.textarea:focus, #contant .form textarea:focus { border-color: var(--violet); outline: none; }

/* checkout payment: card logos on their own line under the card number */
#contant .form p:has(> .credit-cart-icon) { width: 100%; float: none; clear: both; padding: 6px 0 4px; }
#contant .credit-cart-icon { position: static; display: flex; gap: 8px; align-items: center; }
#contant .credit-cart-icon img { margin: 0; }

/* cart coupon: title left; field, button and any messages stacked on the right */
.coupon-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 32px;
    align-items: center;
    overflow: visible;
}
.coupon-box .coupon-title { grid-column: 1; grid-row: 1; font-size: 15px; color: var(--paper); }
.coupon-box > :not(.coupon-title) { grid-column: 2; }
.coupon-form { display: flex; align-items: center; gap: 10px; }
.coupon-form label { color: var(--muted); white-space: nowrap; }
.coupon-form .gray-input { display: block; margin: 0; }
.coupon-form #coupon { width: 200px; margin: 0; }
.coupon-form #coupon_applied { margin: 0; }
.coupon-box .coupon-msg, .coupon-box .coupon-txt { margin: 0; max-width: 440px; font-size: 13px; line-height: 1.5; }
.coupon-box .coupon-msg { display: flex; gap: 8px; align-items: flex-start; }
.coupon-box .coupon-msg::before {
    content: "!"; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--danger);
}
.coupon-box .coupon-msg.is-error { color: var(--danger); }
.coupon-box .coupon-msg.is-ok { color: #7fc99a; }
.coupon-box .coupon-msg.is-ok::before { content: "\2713"; background: #3f9a63; }
.coupon-box .coupon-txt { color: var(--muted); }
.coupon-box .coupon-txt strong { color: var(--paper); }
.coupon-box .coupon-txt a { color: var(--violet); }

/* ================= Contact ================= */

.faq-box:has(> .studio-info) {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: 0 40px;
}
.studio-info, .send-form { float: none; width: auto; }
.studio-info .map { float: none; width: 100%; }
.studio-info .map iframe { display: block; width: 100%; height: 200px; border: 0; border-radius: 3px; }

.send-form form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.send-form form > * { grid-column: 1 / -1; }
.send-form form > p:has(.small-input) { grid-column: auto; }
.send-form p { float: none; }
.large-input, .small-input, .textarea { width: 100%; float: none; }
.small-input-mr { margin-right: 0; }
.large-input input, .small-input input, .textarea textarea { width: 100%; }

/* ================= Products & pricing ================= */

/* price tables keep their columns and scroll inside the panel on narrow screens */
.paper-canvas { overflow-x: auto; }
.paper-canvas table { min-width: 560px; }
.paper-canvas:has(> .pp-acrylic) { display: flex; flex-wrap: wrap; gap: 16px; overflow-x: visible; }
.paper-canvas .pp-acrylic,
.paper-canvas .pp-blocks,
.paper-canvas .pp-aluminum { float: none; width: auto; margin: 0; overflow-x: auto; }
.paper-canvas .pp-acrylic { flex: 2 1 360px; }
.paper-canvas .pp-blocks, .paper-canvas .pp-aluminum { flex: 1 1 180px; }
.paper-canvas .pp-acrylic table { min-width: 360px; }
.paper-canvas .pp-blocks table, .paper-canvas .pp-aluminum table { min-width: 180px; }

.giclee-printing { left: 0; padding-left: 0; padding-right: 0; }
.headding { margin-left: 0; padding-left: 0; }
.giclee-printing ul,
.giclee-printing ul.stretching-options { display: flex; flex-wrap: wrap; gap: 24px; float: none; }
.giclee-printing ul li,
.giclee-printing ul.stretching-options li { float: none; padding-right: 0 !important; }
.giclee-printing .small-box { width: 100px; height: auto; }
.giclee-printing .print-size { float: none; display: inline-block; vertical-align: top; margin: 0 21px 12px 0; }
.giclee-printing .small-box .print-size { display: block; margin: 0 0 5px; }
.giclee-printing .large-box { flex: 1 1 300px; width: auto; }
.print-size-large { float: none !important; width: 100%; height: auto; }
.print-size-large img { display: block; width: 100%; height: auto; }

.giclee-printing ul.executive-collection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px 16px;
}
.giclee-printing ul.executive-collection li { width: auto; padding-bottom: 0; }

/* ================= Login, register, password pages ================= */

.home-logo { float: none; display: block; margin: 0 auto; }
.login-box, .login-form { width: auto; max-width: 275px; }
.request-box, .request-form { width: auto; max-width: 479px; }
.login-form .form-field .input { width: 100%; box-sizing: border-box; }

/* register: two fields per row, wide ones (company, website, address) span both */
.request-form .request-field { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.request-form .request-field > * { grid-column: 1 / -1; }
.request-form .request-field > p { float: none; width: auto; padding-right: 0 !important; grid-column: auto; }
.request-form .request-field > p:has(.width-input) { grid-column: 1 / -1; }
.request-form .request-field .input,
.request-form .request-field .select,
.request-form .request-field .width-input { width: 100% !important; box-sizing: border-box; }

/* ================= Phone ================= */

@media (max-width: 767px) {
    #page-wrapper { padding: 0 16px; }

    /* header built by includes/header.php: logo + Menu button, menus collapse below */
    #header:has(> .logo-part) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px 0 16px;
    }
    #header:has(> .logo-part) .logo-part { width: auto; flex: 1 1 auto; }
    #header:has(> .logo-part) .user-txt { display: none; }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 16px;
        background: none;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        color: var(--paper);
        font: 500 15px/1 var(--font-ui);
        cursor: pointer;
    }
    #header.is-nav-open .nav-toggle { border-color: var(--violet); }

    #header:has(> .logo-part) > .top-menu,
    #header:has(> .logo-part) > #user-account-nav,
    #header:has(> .logo-part) > #manu-nav { display: none; }

    #header.is-nav-open > #manu-nav { display: block; order: 2; width: 100%; float: none; margin: 12px 0 0; }
    #header.is-nav-open > #user-account-nav { display: block; order: 3; width: 100%; float: none; margin-top: 12px; }
    #header.is-nav-open > .top-menu { display: flex; order: 4; width: 100%; float: none; gap: 20px; padding: 14px 0 0; }
    #header:has(> .logo-part) > .home-slider { order: 5; flex: 0 0 100%; width: 100%; }

    #manu-nav ul { float: none; }
    #manu-nav ul li { float: none; margin: 0; border-bottom: 1px solid var(--line); }
    #manu-nav ul li a,
    #manu-nav ul li a span { float: none; display: block; }
    #manu-nav ul li a span,
    #manu-nav ul li a:hover span,
    #manu-nav ul li.active a span { padding: 12px 0; min-height: 20px; border-bottom: 0; }
    #manu-nav ul li.active a span { color: var(--violet); }

    #user-account-nav ul { float: none; display: flex; flex-wrap: wrap; gap: 8px; }
    #user-account-nav ul li { float: none; padding: 0; }
    #user-account-nav ul li a span { padding: 10px 14px; }

    #header.is-nav-open > .top-menu li { padding: 0; }

    .faq-box:has(> .studio-info) { grid-template-columns: 1fr; }
    .send-form form { grid-template-columns: 1fr; }

    .login-padd65 { padding-top: 32px; }
    .login-box, .login-form, .request-box, .request-form { max-width: none; }
    .request-form .request-field { grid-template-columns: 1fr; padding: 20px; }
    .request-form .request-field > p:has(.width-input) { grid-column: auto; }

    /* account / billing / shipping: one column */
    #contant .form-col,
    #contant .acrylic-block.shipping-information,
    #contant .acrylic-block.order-history { width: auto; float: none !important; }

    .cart-icon { float: none; margin: 6px 0 0; }

    /* order & checkout: one fluid column, summary below */
    #page-wrapper .add-cart { padding: 16px; }

    /* cart: the item table keeps its columns and scrolls inside the panel */
    table.checking-out { display: block; overflow-x: auto; }
    table.checking-out > tbody { display: table; width: 100%; min-width: 560px; }
    .coupon-box { grid-template-columns: minmax(0, 1fr); }
    .coupon-box > :not(.coupon-title) { grid-column: 1; }
    .coupon-form .gray-input { flex: 1; min-width: 0; }
    .coupon-form #coupon { width: 100%; }
    .coupon-form label { display: none; }
    .gray-part table.sub-total { width: 100%; }

    /* checkout: fluid forms */
    #contant .billing-information .form { padding-left: 0; }

    /* price grid: narrower columns */
    .acrylic-block:has(> .Prints_Order_list) { --pcol: 76px; }
    .acrylic-block:has(> .Prints_Order_list li .fright > :nth-child(4)) { --pcol: 60px; }
    .Prints_Order_list ul li .fright:has(> :nth-child(4)) > * { font-size: 12px; }
    .acrylic-block:has(> .Prints_Order_list) > ul.size-box li .prod-img { width: 56px; height: 42px; }
    .acrylic-block:has(> .Prints_Order_list li .fright > :nth-child(4)) > ul.size-box li .prod-img { width: 50px; height: 38px; }
    /* other option lists (color mode, edge, finishing): wrap evenly */
    .acrylic-block ul.size-box { float: none; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px 16px; }
    .acrylic-block ul.size-box li { margin-left: 0; }
    .acrylic-block:has(> .Prints_Order_list) > ul.size-box { display: grid; gap: 0; }
    .acrylic-block:has(> .Prints_Order_list) > ul.size-box li p strong { font-size: 10px; overflow-wrap: normal; word-break: normal; }

    /* order page: image chooser above preview */
    #image-td, #image-td > tbody, #image-td > tbody > tr, #image-td > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; }
    #image-td > tbody > tr > td[width="3"] { display: none; }
    #image-td .or-img { display: none; }
    #image-td .mygallery-right { margin-top: 8px; }

    /* my gallery: two square tiles per row */
    ul.images-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
    ul.images-gallery li div.delete-img { width: auto; float: none; }
    ul.images-gallery li, ul.images-gallery .boxgrid, ul.images-gallery .captionfull-img { width: 100% !important; }
    ul.images-gallery .boxgrid { height: auto !important; aspect-ratio: 1; }
    ul.images-gallery .captionfull-img { display: block; height: 100%; }
    #contant ul.images-gallery .captionfull-img img { width: 100%; height: 100%; }

    #footer { padding-top: 48px; }
    #footer ul li { padding-right: 14px; }
}

/* ================= Home ================= */

/* slideshow: native 739x233 banners, never upscaled; scales down with the page */
.home-slider { width: auto; max-width: none; margin: 26px 0 0; height: auto; padding: 0; }
.ss3_wrapper { width: 100%; max-width: none; height: auto; margin: 0; }
#slideshow_3 { width: 100% !important; height: auto !important; aspect-ratio: 739 / 233; }
#slideshow_3 .slideshow_item { width: 100% !important; height: 100% !important; }
#slideshow_3 .slideshow_item .image,
#slideshow_3 .slideshow_item a { display: block; height: 100%; }
#slideshow_3 .slideshow_item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss3_wrapper .slideshow_paging { padding-bottom: 4px; }

/* newest products (left) | studio photo + promo (right); stacked on phone */
#contant td:has(> .newest-prod) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "newest photo" "newest promo" "text text";
    gap: 8px;
}
.newest-prod, .insp-project, .acrylic-block-img {
    float: none;
    width: auto;
    margin: 0;
    box-sizing: border-box;
}
.newest-prod { grid-area: newest; padding: 20px !important; }
.insp-project { grid-area: photo; padding: 20px !important; }
.acrylic-block-img { grid-area: promo; padding: 10px; text-align: center; }
#contant td:has(> .newest-prod) > .clear { display: none; }
#contant td:has(> .newest-prod) > .home-text {
    grid-area: text;
    padding: 32px 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
}
.home-text .home-bdr { display: none; }
.home-text .home-intro p:first-child { padding-top: 0; font-size: 17px; line-height: 1.6; }
.home-text .home-quality h2 { margin-top: 0; }
.home-text .home-archival { grid-column: 1 / -1; padding-top: 16px; }
.home-text p { max-width: none; }

.newest-prod ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0 0; }
.newest-prod ul li { float: none; width: auto; height: auto; margin: 0; }
.newest-prod ul li img { display: block; width: 100%; aspect-ratio: 173 / 125; object-fit: cover; }
.insp-project img { display: block; width: 100%; height: auto; }
.acrylic-block-img img { width: 100%; height: auto; max-width: 382px; }

@media (max-width: 767px) {
    .home-slider { margin-top: 8px; }
    #contant td:has(> .newest-prod) {
        grid-template-columns: 1fr;
        grid-template-areas: "newest" "photo" "promo" "text";
    }
    .insp-project h3 { display: none; }
    .newest-prod, .insp-project { padding: 16px !important; }
    #contant td:has(> .newest-prod) > .home-text { padding: 16px 4px 0; grid-template-columns: 1fr; gap: 24px; }
}

/* canvas: custom edge color = color swatch + text field (hex code or color name) */
#contant .edge-color-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
#contant .edge-color-box label { display: grid; gap: 2px; text-transform: none; }
#contant .edge-color-box label strong { font-size: 14px; color: var(--paper); }
#contant .edge-color-box label span { font-size: 13px; }
#contant .edge-color-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 0 1 320px; }
#contant .edge-color-field #edge_color { flex: 1 1 0; min-width: 0; width: auto; float: none; margin: 0; text-align: left; font-family: var(--font-ui); }
#contant .edge-color-field .formError { flex: 0 0 100%; order: 3; margin: 0 !important; }
#edge_color_picker {
    flex: none; width: 40px; height: 36px; padding: 3px; cursor: pointer;
    background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius);
}
#edge_color_picker:disabled { cursor: not-allowed; }
#edge_color_picker::-webkit-color-swatch-wrapper { padding: 0; }
#edge_color_picker::-webkit-color-swatch { border: 0; border-radius: 3px; }
#edge_color_picker::-moz-color-swatch { border: 0; border-radius: 3px; }
@media (max-width: 767px) { #contant .edge-color-field { flex-basis: 100%; } }

/* empty lists (order history with no orders) */
.empty-state { padding: 40px 16px 48px; text-align: center; color: var(--muted); font-size: 14px; }
.empty-state p { margin: 0 auto 8px; max-width: 46ch; }
.empty-state .empty-state-title { color: var(--paper); font-size: 17px; }
.empty-state .btn { display: inline-block; margin-top: 12px; float: none; text-decoration: none; }