/* NOTE Use CSS3 rem units where possible, but provide a fallback in pt, pc or em. */

@-ms-viewport {zoom: 1.0; width: extend-to-zoom}
@viewport {zoom: 1.0; width: extend-to-zoom}

/* NOTE Every element is set to clear:both by default.  This must be overridden for elements floated side-by-side. */
* {
    -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    clear: both;
    margin: 0;
    padding: 0;
}
img {border: none}


/* Typography */
html {
    font-family: sans-serif;
    font-size: 12pt;
    line-height: 1.5em; line-height: 1.5rem;
}

p, h1, h2, h3, h4, h5, h6, ul, ol, dl, address, summary {padding: 0.75pc 2pc; padding: 0.75rem 2rem}
ul ul, ol ol, ul ol, ol ul {padding: 0 0 0 2pc; padding: 0 0 0 2rem}
h1, h2, h3, h4, h5, h6, summary {color: rgb(40, 40, 40); text-decoration: none}
address {font-style: normal}

/* Heading line-height should be a multiple of the paragraph line-height. */
h1, h2, h3 {font-weight: normal}
h4, h5, h6, summary {font-weight: bold}
h1 {font-size: 2em; line-height: 1.5em; line-height: 3rem}
h2 {font-size: 1.6em; line-height: 1.875em; line-height: 3rem}
h3 {font-size: 1.25em; line-height: 1.2em; line-height: 1.5rem}
h5 {font-size: 0.8em; line-height: 1.875em; line-height: 1.5rem}
h6 {font-size: 0.625em; line-height: 2.4em; line-height: 1.5rem}

/* Capitalise headings that are smaller than paragraph text */
h5, h6 {text-transform: uppercase}

/* Style form elements */
button, input, select, textarea {font-size: inherit; line-height: inherit}
button {padding-left: 1em; padding-left: 1rem; padding-right: 1em; padding-right: 1rem}
textarea {vertical-align: top; width: 100%}
input[type=text], input[type=datetime-local], input[type=date], input[type=time], input[type=month], input[type=week], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=url] {height: 1.5em; height: 1.5rem}
input.price, input.units, input[type=number] {text-align: right; width: 6em; width: 6rem}
input.currency {width: 4em; width: 4rem}
.invalid, input:invalid, textarea:invalid {outline: 1pt solid red; outline: 0.1rem solid red}

/* Add spacing between form elements */
p > label, p > button, span.radio {margin-left: 1.5pc; margin-left: 1.5rem}
button + button {margin-left: 1pc; margin-left: 1rem}
p > label:first-child, p > button:first-child, span.radio:first-child {margin-left: 0}
span.radio label {margin-left: 0.75pc; margin-left: 0.75rem}

@media (min-width: 45em) {
    button.continue {
        clear: right;
        float: right;
        margin-left: 2pc; margin-left: 2rem;
    }
}


/* Page Margins */
body {background: white; color: black; min-width: 20em}
#page {
    box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.12);
    margin: auto;
    max-width: 65pc; max-width: 65rem;
}


/* Description Lists */
dt {color: rgb(40, 40, 40); font-weight: bold}
dd {padding-left: 2pc; padding-left: 2rem}

dl.compact {padding: 0.75pc 1.75pc; padding: 0.75rem 1.75rem}
.compact > dt {
    clear: left;
    float: left;
    font-size: 0.8em;
    margin-right: 1pc; margin-right: 1rem;
    padding-left: 0.25pc; padding-left: 0.25rem;
}
.compact > dd {
    clear: right;
    padding: 0 0.25pc; padding: 0 0.25rem;
    text-align: right;
}
.compact > dd:nth-of-type(odd) {
    background: rgb(245, 245, 245);
    -moz-border-radius: 0.25pc; -moz-border-radius: 0.25rem; -webkit-border-radius: 0.25pc; -webkit-border-radius: 0.25rem; border-radius: 0.25pc; border-radius: 0.25rem;
}
.compact > dd:only-of-type {background: transparent}


/* Tables */
table {
    border: none;
    border-collapse: collapse;
    margin: 0 0 0.75pc; margin: 0 0 0.75rem;
    width: 100%;
}
th {padding: 0.75pc 0.5pc 0; padding: 0.75rem 0.5rem 0; text-align: left}
td {padding: 0 0.5pc; padding: 0 0.5rem}
th:first-child, td:first-child {padding-left: 2pc; padding-left: 2rem}
th:last-child, td:last-child {padding-right: 2pc; padding-right: 2rem}
th {background: rgb(220, 210, 210)}

tr {background: rgb(220, 210, 210)}
tr:nth-child(odd) {background: transparent}
@supports selector(:nth-child(1 of .foo)) {
    /* Fix row striping when some rows are hidden */
    tr:nth-child(odd) {background: rgb(220, 210, 210)}
    tr:nth-child(odd of :not(.hidden):not([hidden])) {background: transparent}
}

.order-totals {clear:right; float: right; width: auto}
.order-totals .total {font-weight: bold}
table .price, table .quantity {text-align: right}
table label {white-space: nowrap}


/* Blockquotes */
blockquote {
    background: rgb(220, 210, 210);
    box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.12);
    padding: 0 2pc; padding: 0 2rem;
    position: relative;
    z-index: 2;
}
blockquote + .attribution {background: rgb(245, 245, 245); text-align: right}
blockquote p {position: relative}
blockquote p:before {content: no-open-quote}
blockquote p:after {content: no-close-quote}
blockquote p:first-child:before {
    color: rgb(40, 40, 40);
    content: open-quote;
    font-size: 2em;
    left: 0;
    position: absolute;
}
blockquote p:last-child:after {
    color: rgb(40, 40, 40);
    content: close-quote;
    font-size: 2em;
    position: absolute;
    right: 0;
}


/* Photograph galleries */
.image-frame {text-align: center}
.caption {text-align: left}
.gallery .image-frame.main {
    flex-grow: 1;
    min-height: 50%;
    width: 100%;

    position: relative;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
}
#productsummaryarea .gallery .mini .image-frame.main {padding: 0.5pc 0 0.25pc; padding: 0.5rem 0 0.25rem}
.image-frame img, .gallery img.main, .gallery .thumbs img {
    box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.12);
    max-width: 100%;
    vertical-align: middle;
}
.gallery img.main {max-height: 100%}

.gallery .caption {text-align: center}
.gallery.single .thumbs, .gallery.single .icon.previous, .gallery.single .icon.next {display: none}

/* Mini and Lightbox */
.gallery .mini {height: 26pc; height: 26rem}
.gallery .mini .image-frame {position: relative}
.gallery .mini img.main, .gallery .icon.enlarge {cursor: zoom-in}

.gallery .mini, .gallery .lightbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
.gallery .lightbox:not(.open) {display: none}
.gallery .lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 40, 40, 0.9);
    z-index: 100;
}
.gallery .lightbox .caption {color: white}
body.behind {overflow: hidden}

/* Icons */
.gallery .icon, .image-frame .icon {
    cursor: pointer;
    padding: 0.25pc; padding: 0.25rem;
    -moz-box-sizing: content-box; -ms-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;
    width: 3rem;
}
.gallery .icon {
    color: white;
    filter: drop-shadow(0 0 0.4rem rgba(0, 0, 0, 0.4));
    font-size: 4pc;
    transition-property: color, fill, stroke;
    transition-duration: 1s;
    z-index: 10;

    /* SVG */
    fill: white;
    stroke: white;
}
.gallery .icon:hover {
    color: rgb(220, 220, 220);
    fill: rgb(220, 220, 220);
    stroke: rgb(220, 220, 220);
}
.gallery .icon::selection {background: none}
.gallery .icon.enlarge {
    position: absolute;
    top: 3pc; top: 3rem;
    right: 1.5pc; right: 1.5rem;
    width: 2rem;
}
.gallery .icon.next, .gallery .icon.previous {
    padding: 4pc 0.75pc; padding: 4rem 0.75rem;
    position: absolute;
}
.gallery .lightbox .icon.close {
    position: fixed;
    right: 0.75pc; right: 0.75rem;
    top: 0.75pc; top: 0.75rem;
    z-index: 11;
}
.gallery .icon.previous {left: 0}
.gallery .icon.next {right: 0}
.gallery .icon.more {font-size: 2pc}

/* Thumbs */
.gallery .thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5pc; gap: 0.5rem;
    justify-content: center;
    line-height: 3pc; line-height: 3rem; /* line-height should match the max-height of .gallery .thumbs img */
    padding: 0.5pc 0.2pc; padding: 0.5rem 0.2rem;
}
.gallery .lightbox .thumbs {
    flex-shrink: 0;
    max-height: 8pc; max-height: 8rem;
    min-height: 4pc; min-height: 4rem;
    overflow: auto;
}
.gallery .thumbs img {
    cursor: pointer;
    margin: 0;
    max-height: 3pc; max-height: 3rem; /* max-height should match the line-height of .gallery .thumbs */
    max-width: 6pc; max-width: 6rem;
}
.gallery .thumbs img.current {box-shadow: none; cursor: auto; outline: 0.2pc solid rgb(220, 210, 210); outline-width: 0.2rem}
.gallery .lightbox .thumbs img.current, #productsummaryarea .gallery .thumbs img.current, .info .gallery .thumbs img.current {outline-color: white}


/* YouTube videos */
.youtube-video {height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative}
.youtube-video iframe {height: 100%; position: absolute; top: 0; width: 100%}


.date, .price, .quantity {white-space: nowrap}
th.date, th.price, th.quantity {white-space: normal}
.itementry .price, .itemlist .price, div.variantlist .price {
    color: red;
    float: right;
    font-weight: bold;
}
.itemlist .full-price {float: right}
.dimensionalorderform .price {color: red; font-weight: bold}
.basket-totals .price, #delivery-charge .price, .variant-options .price {color: red}

.mark {
    -moz-border-radius: 0.25pc; -moz-border-radius: 0.25rem; -webkit-border-radius: 0.25pc; -webkit-border-radius: 0.25rem; border-radius: 0.25pc; border-radius: 0.25rem;
    font-size: 0.625em; font-size: 0.625rem;
    font-weight: bold;
    line-height: 2.4em; line-height: 1.5rem;
    padding: 0.25pc; padding: 0.25rem;
    text-transform: uppercase;
    vertical-align: top;
    white-space: nowrap;
}
.stock-in {background: green; color: white}
.stock-out {background: red; color: white}
.stock-to-order {background: orange; color: white}

.index, .itementry, .info, .navigation {background: rgb(220, 210, 210)}
.note {background: rgb(255, 175, 25)}
.warning {background: rgb(200, 20, 20); color: white}
.index, .itementry, .info, .note, .warning {box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.12); position: relative; z-index: 2}

.info button, .note button, .warning button {
    clear: right;
    float: right;
    margin-left: 2pc; margin-left: 2rem;
}

.note.mark {background: orange}
.warning.mark {background: red}

.image-link {
    display: inline; display: inline-block;
    margin: 0.75pc 0.5pc; margin: 0.75rem 0.5rem;
    position: relative;
}
.image-link .caption {
    background: white; background: rgba(255, 255, 255, 0.6);
    bottom: 3pc; bottom: 3rem;
    font-size: 1.25em;
    padding: 0;
    position: absolute;
    text-align: center;
    transition: background 1s;
    width: 100%;
    z-index: 2;
}
.image-link:hover .caption {background: rgba(255, 255, 255, 0.8)}
.image-link .caption > a {
    color: rgb(40, 40, 40);
    display: block;
    padding: 0.75pc 1pc; padding: 0.75rem 1rem;
    text-decoration: none;
}
.image-link img {
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.12);
    transition: box-shadow 1s;
}
.image-link:hover img {box-shadow: 0 0 0.75rem 0.1rem rgba(0, 0, 0, 0.3)}


/* Header */
.header {background: rgb(220, 210, 210); color: white}
.header .logo {
    border: 0.75pc solid transparent; border-width: 0.75rem;
    border-left-width: 2pc; border-left-width: 2rem;
    border-right-width: 2pc; border-right-width: 2rem;
    max-width: 100%;
    vertical-align: middle;
}


/* Page Content */
.text-body > p, .text-body > h1, .text-body > h2, .text-body > h3, .text-body > h4, .text-body > h5, .text-body > h6, .text-body > ul, .text-body > ol, .text-body > blockquote, .text-body > .badge {margin-right: 32%}
.text-body p, .text-body h1, .text-body h2, .text-body h3, .text-body h4, .text-body h5, .text-body h6, .text-body ul, .text-body ol, .text-body li, .text-body blockquote, .text-body .badge {clear: left}
.text-body .caption {color: gray}
.text-body .gallery > .image-frame.main {
    height: 450px;
    width: auto;
}
.text-body .gallery .mini, .text-body > .image-frame.mini {
    clear: right;
    float: right;
    padding-left: 2.75pc; padding-left: 2.75rem;
    width: 32%;

    height: auto;
    align-items: start;
}
.text-body .gallery .mini .image-frame.main, .text-body > .image-frame {
    justify-content: start;
    text-align: left;
}
.text-body .gallery .mini .caption, .text-body > .image-frame.mini .caption {padding-left: 0; text-align: center; width: 100%}
.text-body .gallery .mini .icon.enlarge {top: 1.5pc; top: 1.5rem}
.text-body .gallery .mini .thumbs {
    justify-content: start;
    padding: 0.75pc 0.2pc 0.75pc 0; padding: 0.75rem 0.2rem 0.75rem 0;
}
@media (max-width: 45em) {
    .text-body > p, .text-body > h1, .text-body > h2, .text-body > h3, .text-body > h4, .text-body > h5, .text-body > h6, .text-body > ul, .text-body > ol, .text-body > blockquote, .text-body > .badge {margin-right: 0}
    .text-body p, .text-body h1, .text-body h2, .text-body h3, .text-body h4, .text-body h5, .text-body h6, .text-body ul, .text-body ol, .text-body li, .text-body blockquote, .text-body .badge {clear: both}
    .text-body .gallery .mini {height: 26pc; height: 26rem}
    .text-body .gallery .mini, .text-body > .image-frame.mini {
        clear: both;
        float: none;
        padding-left: 0;
        width: auto;
    }
    .text-body .gallery .mini .image-frame.main, .text-body > .image-frame {
        justify-content: center;
        text-align: center;
    }
    .text-body .gallery .mini .caption, .text-body > .image-frame.mini .caption {padding-left: 2pc; padding-left: 2rem}
    .text-body .gallery .mini .thumbs {
        justify-content: center;
        padding: 0.75pc 0.2pc; padding: 0.75rem 0.2rem;
        width: 100%;
    }
}


/* Footer */
ul.footer {list-style: none}
.footer.contact {background: rgb(220, 210, 210); text-align: center}

.footer.copyright, .footer.credit {color: gray; font-size: 0.8em}
.footer.copyright a, .footer.credit a {color: gray}
.footer.copyright {clear: left; float: left}
.footer.credit {clear: right; float: right}
@media (max-width: 45em) {
    .footer.copyright, .footer.credit {clear: both; float: left}
}


/* Main Menu */
ul.menu {
    color: white;
    list-style: none;
    overflow: hidden;
    padding: 0 1.5pc; padding: 0 1.5rem;	/* Standard padding minus one menu entry border. */
    position: relative;
}
.menu {background: rgb(150, 15, 0)}
.submenu {background: rgb(230, 95, 80)}
.menu a {
    border: 0.5pc solid transparent; border-width: 0.5rem;
    color: white;
    text-decoration: none;
}
.menu a:hover {text-decoration: underline}

.menu li {
    -moz-border-radius: 0.25pc 0.25pc 0 0; -moz-border-radius: 0.25rem 0.25rem 0 0; -webkit-border-radius: 0.25pc 0.25pc 0 0; -webkit-border-radius: 0.25rem 0.25rem 0 0; border-radius: 0.25pc 0.25pc 0 0; border-radius: 0.25rem 0.25rem 0 0;
    clear: none;
    display: block;
    float: left;
    line-height: 2pc; line-height: 2rem;
}

.menu li.selected {background: rgb(230, 95, 80); box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.12)}
.submenu li.selected {background: rgb(220, 210, 210)}

.header .menu > .basket-link {float: right}
.header .menu .basket-count {font-weight: bold}
.header .menu .basket-count:not(:empty)::before {
    font-weight: normal;
    content: ": ";
}


/* Index */
.index {float: left}
.index div {clear: none; float: left; }
.index ul {list-style: none}


/* Tabs */
.tab-bar {
    list-style: none;
    padding: 0.75pc 1.5pc 0.5pc; padding: 0.75rem 1.5rem 0.5rem;
}
.tab {
    border-bottom: 0.25pc solid transparent; border-bottom-width: 0.25rem;
    clear: none;
    color: rgb(150, 15, 0);
    cursor: pointer;
    display: block;
    float: left;
    padding: 0 0.5pc; padding: 0 0.5rem;
}
.tab:hover {text-decoration: underline}
.tab.current {
    border-color: rgb(230, 95, 80);
    cursor: auto;
    text-decoration: none;
}
.tabs.active > .tab-content, .tabs.active .tab-name {display: none}
.tabs > .tab-content.current {display: block}


/* Badges */
.badges {text-align: center}
.badges img {vertical-align: middle}

.badge {margin: 0.75pc 0; margin: 0.75rem 0; text-align: center}
.badge .image-frame {height: 150px}
.badge img {
    box-shadow: none;
    max-height: 100%;
    max-width: 100%;
}


/* Enquiries Page */
form.enquiry div {text-align: right}
form.enquiry div input {width: 50%}
form.enquiry textarea {height: 22em; height: 22rem}


/* Product/s and Offers Pages */
.itementries {float: left; width: 100%}
.itementry .image-frame {
    text-align: center;
    width: 100%;
    height: 16pc; height: 16rem;
}
.itementry img {max-height: 100%}
ul.variantlist {list-style: none}
.variantlist.hidden {display: none}

/* Two columns */
.itementries .itementry {
    clear: none;
    float: left;
    margin: 1%;
    overflow: hidden;
    width: 48%;
}
.itementries .itementry:nth-of-type(odd) {
    border-radius: 0 0.5rem 0.5rem 0;
    clear: both;
    margin-left: 0;
    width: 49%;
}
.itementries .itementry:nth-of-type(even) {
    border-radius: 0.5rem 0 0 0.5rem;
    clear: right;
    float: right;
    margin-right: 0;
    width: 49%;
}

/* Single column */
@media (max-width: 45em) {
    .itementries .itementry {max-width: 30rem}
    .itementries .itementry:nth-of-type(n) {
        border-radius: 0;
        box-shadow: none;
        clear: both;
        float: none;
        margin: 0;
        width: auto;
    }
    .itementries .itementry:nth-of-type(even) {background: transparent}
    .itementries .image-frame {
        text-align: left;
        padding: 0.75pc 2pc; padding: 0.75rem 2rem;
        height: 14pc; height: 14rem;
    }
}

/* Three columns */
@media (min-width: 65em) {
    .itementries .itementry:nth-of-type(n) {
        border-radius: 0.5rem;
        clear: none;
        float: left;
        margin: 1%;
        width: 32%;
    }
    .itementries .itementry:nth-of-type(3n-2) {
        border-radius: 0 0.5rem 0.5rem 0;
        clear: both;
        margin-left: 0;
    }
    .itementries .itementry:nth-of-type(3n) {
        border-radius: 0.5rem 0 0 0.5rem;
        clear: right;
        float: right;
        margin-right: 0;
    }
    .itementry .image-frame {height: 14pc; height: 14rem}
}


/* Product Pages */
#productsummaryarea {
    background: rgb(220, 210, 210);
    box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.12);
    float: left;
    position: relative;
    width: 100%;
}
.product-order-form {position: relative}
.product-order-form .confirmtext {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 100;

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

    transition: opacity 0.2s ease-in, visibility 0.2s;
}
.product-order-form .confirmtext.hidden {
    opacity: 0;
    visibility: hidden;
}
.product-order-form .confirmtext > * {
    background: green;
    border-radius: 0.25rem;
    box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.12);
    color: white;
}
.dispatch-time, .prices-include-vat {font-size: 0.8em; padding: 0.6pc 2pc; padding: 0.6rem 2rem}
.dispatch-time {clear: left; float: left}
.dispatch-time:empty {display: none}
.prices-include-vat {color: red; clear: right; float: right}
.product-order-form::after {content: ""; display: block; clear: both}

div.variantlist {padding: 0.75pc 0; padding: 0.75rem 0}
div.variantlist p, .variant-options .option {padding-bottom: 0; padding-top: 0}
.variant-options .option:not(.disabled):first-of-type {padding-top: 0.75pc; padding-top: 0.75rem}
.variant-options .option:not(.disabled):last-of-type {padding-bottom: 0.75pc; padding-bottom: 0.75rem}
.variant-options .option.disabled {display: none}

.itemdescription {clear: left; float: left; width: 68%}
.itemdescription > img {
    margin: 0.75pc 0; margin: 0.75rem 0;
    max-width: 100%;
}
.sidebar {
    clear: right;
    float: right;
    font-size: 0.8em;
    padding-left: 0.75pc; padding-left: 0.75rem;
    width: 32%;
}
@media (max-width: 45em) {
    .itemdescription, .sidebar {clear: both; float: none; width: auto}
    .sidebar {font-size: 1em; padding-left: 0}
}

.recommendeditems .itementry {background: transparent; box-shadow: none}
.recommendeditems .image-frame, .available-discounts .image-frame {padding-left: 2pc; padding-left: 2rem}
.recommendeditems img {box-shadow: none}
.recommendeditems .image-frame {
    height: 12pc; height: 12rem;
    text-align: left;
}
@media (max-width: 60em) {
    .recommendeditems .image-frame {height: 10pc; height: 10rem}
}
@media (max-width: 55em) {
    .recommendeditems .image-frame {height: 8pc; height: 8rem}
}
@media (max-width: 45em) {
    .recommendeditems .itementry {max-width: 30rem}
    .recommendeditems .itementry:nth-of-type(odd) {background: rgb(210, 233, 243)}
    .recommendeditems .image-frame {
        padding: 0.75pc 2pc; padding: 0.75rem 2rem;
        width: 100%;
        height: 12rem;
    }
}

div.info {float: left; width: 100%}
#productsummaryarea, .contentwithimage {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: 0.75pc; gap: 0.75rem;
}
#productsummaryarea .content {grid-column: 1 / 3} /* Full-width order form when there is no gallery */
#productsummaryarea .gallery ~ .content, .contentwithimage > * {grid-column-start: 2}
.contentwithimage > .gallery, .contentwithimage > .image-frame, .contentwithimage > img {grid-column-start: 1}
@media (max-width: 45em) {
    #productsummaryarea {display: block}
}


/* Basket and Checkout Pages */
.basket-item-options, .basket-offers-link {text-align: right}

.itemlist div {padding: 0.75pc 0; padding: 0.75rem 0}
.itemlist p {padding-bottom: 0; padding-top: 0}
.itemlist div:nth-of-type(odd) {background: rgb(245, 245, 245)}
.itemlist .price {clear: right; float: right}

.basket-totals {font-weight: bold}

form .addresses ul {text-align: right}
.addresses > div {clear: none; float: left; width: 50%}
input.postcode {text-transform: uppercase}

.address-label {line-height: 1.25em}
.address-label .return-address, .address-label .tel p {font-size: 0.7em; line-height: 1.25em}
.tel p {padding: 0 2pc; padding: 0 2rem}

/* Terms and Conditions inset */
#terms-inset {display: none}
.inset {
    background: rgb(220, 210, 210);
    height: 40pc; height: 40rem;
    padding: 1.5pc 2pc; padding: 1.5rem 2rem;
}
.inset .text-body {
    background: white;
    height: 36pc; height: 36rem;
    overflow: auto;
}
.inset p, .inset h1, .inset h2, .inset h3, .inset h4, .inset h5, .inset h6, .inset ul, .inset ol, .inset blockquote {margin-right: auto}


@page {
    margin: 8mm;
}
@media print {
    * {
        box-shadow: none !important;
        color: black !important;
    }
    html {font-size: 10pt}

    th, tr, .header, .footer, .index, .itementry, .navigation, .info, .note, .warning, #productsummaryarea, .inset, .tagline, blockquote, p.attribution, .compact > dd:nth-of-type(odd) {background: transparent !important}

    .mark, .stock-in, .stock-out, .stock-to-order {background: transparent; text-decoration: underline}
    th, td {border: 1pt solid black; border-width: 0.1rem}

    #page {max-width: none}
    .note, .warning {font-weight: bold}

    .menu, .gallery .icon {display: none !important}

    .tab.current {border-color: black}
    .thumbs img.current {outline-color: black !important}

    .address-labels {margin-top: 16mm}
    .address-label {font-size: 12pt; height: 54mm; max-width: 85mm}
    .address-label .return-address, .address-label .tel p {font-size: 7pt}
    .address-label address {padding: 1mm 2mm}
    .address-label .return-address {padding: 0.8mm 2mm}
    .address-label .tel {padding: 0.8mm 0}
    .tel p {padding: 0 2mm}

    .order-contents a {text-decoration: none}
}