/**
 * Hemmy premium theme ("hemmy2") - legacy page shim
 *
 * The routes the theme has not taken over yet still render OpenCart's default
 * .tpl templates, and the information pages carry admin-entered HTML written
 * against Bootstrap 3 and the old hemmy stylesheet. This file reimplements the
 * handful of classes those two actually use, on the theme's own tokens, so the
 * legacy pages no longer need bootstrap.min.css, font-awesome.min.css or
 * theme/hemmy/stylesheet.css.
 *
 * Loaded after theme.css and only when !$is_modern_page. It deliberately does
 * not restate base typography - theme.css already sets body, headings and
 * links for every page.
 *
 * The scope is closed, not open-ended: every selector below is used by one of
 * the eight legacy templates or by the CMS content in oc_information_description.
 * Adding markup that needs more Bootstrap means adding it here too.
 */

/* ------------------------------------------------------------------ *
 * Grid
 *
 * Bootstrap 3 semantics on purpose - floats, a 15px gutter and the same
 * 768/992/1200 breakpoints - because the CMS content was authored against
 * them and nests rows inside columns.
 * ------------------------------------------------------------------ */

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--layout-gutter);
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.row::before,
.row::after {
    content: " ";
    display: table;
}

.row::after { clear: both; }

.col-xs-12,
.col-sm-6, .col-sm-9, .col-sm-12,
.col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-10, .col-md-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col-xs-12 { float: left; width: 100%; }

@media (min-width: 768px) {
    .col-sm-6  { float: left; width: 50%; }
    .col-sm-9  { float: left; width: 75%; }
    .col-sm-12 { float: left; width: 100%; }
}

@media (min-width: 992px) {
    .col-md-4  { float: left; width: 33.33333333%; }
    .col-md-5  { float: left; width: 41.66666667%; }
    .col-md-6  { float: left; width: 50%; }
    .col-md-7  { float: left; width: 58.33333333%; }
    .col-md-8  { float: left; width: 66.66666667%; }
    .col-md-10 { float: left; width: 83.33333333%; }
    .col-md-12 { float: left; width: 100%; }
}

/* The default templates put the page body in #content and never clear it. */
#content {
    padding-bottom: 48px;
}

#content::after {
    content: "";
    display: table;
    clear: both;
}

/* ------------------------------------------------------------------ *
 * Breadcrumb
 *
 * The old sheet drew the separator as a rotated border on ::after; the theme's
 * own breadcrumbs use a slash, so these match those instead.
 * ------------------------------------------------------------------ */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 20px 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--color-ink-soft);
}

.breadcrumb > li + li::before {
    content: "/";
    margin-right: 6px;
    color: var(--color-ink-faint);
}

.breadcrumb > li a { color: var(--color-ink-soft); }

.breadcrumb > li:last-child a { color: var(--color-ink); }

/* The home crumb's text is Font Awesome's house icon (text_home in the
   language file), which has no glyph below. It reads "Hem" instead, the way
   common/breadcrumbs.blade.php writes it on the redesigned pages. */
.breadcrumb .fa-home {
    width: auto;
    height: auto;
    vertical-align: baseline;
    background: none;
    -webkit-mask-image: none;
            mask-image: none;
    font-style: normal;
}

.breadcrumb .fa-home::before { content: "Hem"; }

/* ------------------------------------------------------------------ *
 * Buttons
 *
 * Mapped onto the theme's .button so a CMS-authored .btn looks like the rest
 * of the site rather than like Bootstrap.
 * ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 26px;
    border: 1px solid var(--color-ink);
    border-radius: 999px;
    background: transparent;
    color: var(--color-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background var(--transition-quick), color var(--transition-quick);
}

.btn:hover { opacity: 1; background: var(--color-ink); color: #ffffff; }

.btn-primary,
.btn-success {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #ffffff;
}

.btn-primary:hover,
.btn-success:hover { background: #454542; border-color: #454542; color: #ffffff; }

.btn-default { background: transparent; }

.btn-lg { padding: 16px 34px; font-size: 15px; }

/* common/success.tpl wraps its button in this. */
.buttons::after { content: ""; display: table; clear: both; }

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

.form-group { margin-bottom: 20px; }

.form-group > label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
}

.form-group.required > label::after {
    content: " *";
    color: var(--color-campaign);
}

.form-control {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-small);
    background: var(--color-background);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-ink);
    transition: border-color var(--transition-quick);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-ink);
}

textarea.form-control { resize: vertical; }

.help-block {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-ink-soft);
}

.has-error .form-control { border-color: var(--color-campaign); }

.has-error > label { color: var(--color-campaign); }

.text-danger {
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-campaign);
}

/* ------------------------------------------------------------------ *
 * Alerts
 * ------------------------------------------------------------------ */

.alert {
    padding: 14px 18px;
    margin-bottom: 20px;
    border: 1px solid var(--color-line);
    border-left-width: 3px;
    border-radius: var(--radius-small);
    background: var(--color-surface);
    font-size: 15px;
}

.alert > :first-child { margin-top: 0; }

.alert > :last-child { margin-bottom: 0; }

.alert-success { border-left-color: var(--color-success); }

.alert-info { border-left-color: var(--color-ink); }

.alert-warning { border-left-color: var(--color-warning); }

.alert-danger { border-left-color: var(--color-campaign); }

/* The checkout's "no delivery options for that postcode" notice uses the bare
   background helper rather than a full alert. */
.bg-warning {
    background-color: #fdf6e7;
    border-radius: var(--radius-small);
}

/* ------------------------------------------------------------------ *
 * Tables
 *
 * The privacy policy and the warranty page are built out of these. The CMS
 * writes them without a .table-responsive wrapper, so long cell content has to
 * wrap rather than push the page sideways.
 * ------------------------------------------------------------------ */

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 24px;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tbody > tr > td {
    padding: 10px 12px;
    vertical-align: top;
    text-align: left;
    border-top: 1px solid var(--color-line);
}

.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--color-line);
    font-weight: 500;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td {
    border: 1px solid var(--color-line);
}

.table-striped > tbody > tr:nth-of-type(odd) { background: var(--color-surface); }

/* ------------------------------------------------------------------ *
 * Utilities
 * ------------------------------------------------------------------ */

.pull-right { float: right; }

.pull-left { float: left; }

/* .hidden and .invisible are functional in the checkout - it toggles forms
   and the button spinner with them - so they have to out-rank everything. */
.hidden { display: none !important; }

.invisible { visibility: hidden !important; }

.img-responsive { display: block; max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ *
 * Old hemmy stylesheet leftovers still used by CMS content
 * ------------------------------------------------------------------ */

/* The contact cards on the 404 page and in some CMS content. The 404 template
   carries its own copy of this in an inline <style>; the CMS copy needs ours. */
.help-box {
    width: 100%;
    min-height: 300px;
    margin-top: 20px;
    padding: 20px 20px 5px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-medium);
    text-align: center;
}

/* 16:9 iframe box, used for the delivery videos. */
.videoWrapper {
    position: relative;
    height: 0;
    padding-top: 25px;
    padding-bottom: 56.25%;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------------ *
 * Checkout
 *
 * newcheckout/checkout.tpl brings its own stylesheet (checkout.css, shared
 * with the other themes) and needs little from here, but a few of its rules
 * leaned on the old hemmy stylesheet or on Bootstrap's element defaults.
 * checkout.css loads after this file, so the overrides below out-rank it by
 * specificity rather than by order.
 * ------------------------------------------------------------------ */

/* checkout.css colours its radios, checkboxes, focus rings, text buttons and
   the checkout button with these, blue by default; the old hemmy stylesheet
   made them green. Here they take the theme's ink, the colour of its own
   buttons. html:root because checkout.css declares them on :root and loads
   later. */
html:root {
    --primary-color: var(--color-ink);
    --primary-color-lighter: var(--color-surface-strong);
    --primary-color-darker: #454542;
}

/* The old hemmy stylesheet laid the logos out; the hemmy2 Blade templates do
   it with utilities, but the checkout template writes only the class. */
.payment-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
}

/* checkout.css sets no base size of its own; it was written against the old
   14px body, and the theme's body is 16px. */
.checkout-container,
.checkout-footer {
    font-size: var(--text-sm);
}

/* checkout.css sets the card headings in Open Sans, which the old header
   loaded from Google Fonts. Here the headings take the theme's own face. */
.checkout-container .card h2 { font-family: var(--font-base); }

/* Bootstrap made labels inline-block, and checkout.css spaces them with margin
   utilities such as mb-1, which do nothing on an inline box. :where() keeps
   this at the weight of a bare label, so every class checkout.css lays a label
   out with - .checkbox-container and .radio-container are flex - still wins. */
:where(.checkout-container) label { display: inline-block; }

/* checkout.css leaves the button at the body weight, which was 400 in the old
   stylesheet and is 300 here. */
.checkout-button { font-weight: 400; }

/* The "Ändra" and coupon buttons are bare text coloured --primary-color, which
   is the ink here and so reads as running text. They take the underline of the
   theme's own .button-quiet instead, and lose it on hover. */
html .text-button {
    color: var(--color-ink);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

html .text-button:hover { color: var(--color-ink); text-decoration: none; }

/* The old stylesheet coloured every link; the theme's links inherit their
   colour, so the ones inside running text get the theme's underline instead. */
.checkout-container a:not([class]),
.checkout-footer a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Preflight lets images shrink (max-width: 100%), and the thumbnail sits in a
   flex row beside the product name. Bootstrap left it at its own width. */
.cart-row .image-container { flex-shrink: 0; }

/* ------------------------------------------------------------------ *
 * Icons
 *
 * Font Awesome 4 is gone; these are the five glyphs the legacy templates and
 * the CMS content actually use, drawn as masks so they inherit currentColor
 * and the inline font-size the content sets on them.
 * ------------------------------------------------------------------ */

.fa {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.fa-check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
}

.fa-envelope {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M3 6.5l9 6.5 9-6.5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M3 6.5l9 6.5 9-6.5'/%3E%3C/svg%3E");
}

.fa-phone {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3h3.1l1.6 4-2.1 1.5a12.4 12.4 0 0 0 5.5 5.5L16 11.9l4 1.6v3.1a2 2 0 0 1-2.2 2A17.2 17.2 0 0 1 4.2 5.2 2 2 0 0 1 6.4 3z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3h3.1l1.6 4-2.1 1.5a12.4 12.4 0 0 0 5.5 5.5L16 11.9l4 1.6v3.1a2 2 0 0 1-2.2 2A17.2 17.2 0 0 1 4.2 5.2 2 2 0 0 1 6.4 3z'/%3E%3C/svg%3E");
}

.fa-exclamation-triangle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6L22.2 20.4H1.8z'/%3E%3Cpath d='M12 9.6v4.6'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6L22.2 20.4H1.8z'/%3E%3Cpath d='M12 9.6v4.6'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E");
}

/* The checkout's button spinner. Drawn with a border rather than a mask so it
   can spin without a second element, and .fa-pulse keeps working as the class
   the template already writes. */
.fa-spinner {
    width: 1em;
    height: 1em;
    background: none;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-mask-image: none;
            mask-image: none;
    animation: legacy-spin 0.8s linear infinite;
}

@keyframes legacy-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .fa-spinner { animation-duration: 2.4s; }
}