/*
Theme Name: PostaMap
Theme URI: https://postamap.com
Author: You
Version: 1.1
*/

/* ============================================================
   WooCommerce skin for the PostaMap "Atlas Instrument" system.

   Loaded AFTER view/css/main.css, which already supplies the tokens, the
   type scale, and the base input/table/button styling. Only what WooCommerce
   adds on top is restyled here: the account layout, its own button and notice
   classes, and the block checkout.

   Rule of thumb: flat surfaces, hairline rules (--line-paper), 2px radii,
   Newsreader for headings, brass reserved for the accent.
   ============================================================ */

/* ---- page shell ---- */
/* woocommerce_content() emits its own headings, so drop the engine's big top
   pad a little; .content still supplies the 92% / 1280px measure. */
.woocommerce-page-wrap{ padding: 72px 0 104px; }

.woocommerce .order-again{ display: none !important; }

/* ---- my account: nav column + content card ---- */
.woocommerce .woocommerce-MyAccount-navigation{
    float: left;
    width: 220px;
    min-width: 220px;
    margin-right: 24px;
    box-sizing: border-box;
}
.woocommerce .woocommerce-MyAccount-content{
    float: left;
    width: calc(100% - 220px - 24px);
    box-sizing: border-box;
    border: 1px solid var(--line-paper);
    border-radius: 2px;
    background: var(--white);
    padding: 26px 30px;
}
.woocommerce::after{ content: ""; display: table; clear: both; }

.woocommerce .woocommerce-MyAccount-navigation ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce .woocommerce-MyAccount-navigation li{ margin-bottom: 2px; }

/* the account nav reads as a label list, like the eyebrow rows elsewhere */
.woocommerce .woocommerce-MyAccount-navigation li a{
    display: block;
    padding: 10px 14px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink);
    opacity: .64;
    transition: opacity .2s, border-color .2s, background-color .2s;
}
.woocommerce .woocommerce-MyAccount-navigation li a:hover{
    opacity: 1;
    color: var(--ink);
    background: var(--paper-2);
}
.woocommerce .woocommerce-MyAccount-navigation li.is-active > a{
    opacity: 1;
    border-left-color: var(--brass);
    background: var(--paper-2);
    font-weight: 600;
}

/* ---- typography inside the account / checkout panels ---- */
.woocommerce .woocommerce-MyAccount-content h1,
.woocommerce .woocommerce-MyAccount-content h2,
.woocommerce .woocommerce-MyAccount-content h3,
.woocommerce-page-wrap h1,
.woocommerce-page-wrap h2{
    font-family: var(--display);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-top: 0;
}
.woocommerce .woocommerce-MyAccount-content h1{ font-size: 30px; margin-bottom: 18px; }
.woocommerce .woocommerce-MyAccount-content h2{ font-size: 24px; margin-bottom: 16px; }
.woocommerce .woocommerce-MyAccount-content h3{ font-size: 19px; margin-bottom: 12px; font-weight: 700; }
.woocommerce .woocommerce-MyAccount-content p{ margin: 0 0 14px; line-height: 1.6; }

/* ---- tables (orders, addresses, totals) ---- */
/* main.css already sets the hairline row rule and the label-styled thead —
   the old file killed both with `th, td { border-bottom: 0 !important }`. */
.woocommerce table.shop_table{
    width: 100%;
    border-collapse: collapse;
    border: 0;
    border-radius: 0;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
    padding: 14px 8px;
    border-bottom: 1px solid var(--line-paper);
    vertical-align: top;
}
.woocommerce table.shop_table thead th{
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-paper);
    white-space: nowrap;
}
.woocommerce table.shop_table tfoot th{ font-weight: 600; }

/* ---- forms ---- */
/* main.css styles the controls themselves; only layout and labels here. */
.woocommerce form .form-row{ margin: 0 0 16px; padding: 0; }
.woocommerce label,
.woocommerce .woocommerce-MyAccount-content label{
    display: block;
    margin-bottom: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-paper);
    line-height: 1.6;
}
/* checkbox / radio labels stay sentence case — they are prose, not field names */
.woocommerce label.checkbox,
.woocommerce .woocommerce-form__label-for-checkbox{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--body);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}
.woocommerce-EditAccountForm fieldset{ margin-bottom: 24px; }
.woocommerce-EditAccountForm legend{
    font-family: var(--display);
    font-size: 19px;
    font-weight: 700;
}

/* ---- buttons: same shape as the site's .btn ----
   Element-qualified on purpose: WooCommerce ships `.woocommerce a.button`
   (0,2,1), which outranks a class-only `.woocommerce .button` (0,2,0) whatever
   the file order — that is what left the "View" link in the orders table on the
   stock lavender-grey. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .woocommerce-Button,
.woocommerce button[type="submit"],
.woocommerce input[type="submit"]{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--bone);
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 2px;
    padding: 14px 26px;
    min-width: 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s, color .25s, border-color .25s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .woocommerce-Button:hover,
.woocommerce button[type="submit"]:hover,
.woocommerce input[type="submit"]:hover{
    background: var(--brass);
    border-color: var(--brass);
    color: var(--ink);
}

/* ---- notices ---- */
/* WooCommerce parks the status glyph in an absolutely positioned ::before and
   reserves room for it with padding-left: 3.5em. Restyling the padding without
   keeping that inset drops the text underneath the icon, so the left pad and the
   icon are pinned together here in px. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info{
    position: relative;
    margin: 0 0 20px;
    padding: 16px 20px 16px 52px;
    border: 1px solid var(--line-paper);
    border-top: 2px solid var(--brass);
    border-radius: 2px;
    background: var(--paper-2);
    color: var(--ink);
    list-style: none;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before,
.woocommerce .woocommerce-info::before{
    top: 17px;
    left: 20px;
    width: 18px;
    font-size: 16px;
    line-height: 1;
    color: var(--brass);
}
.woocommerce .woocommerce-error{ border-top-color: #A3402F; }
.woocommerce .woocommerce-error::before{ color: #A3402F; }

/* the notices are <ul>s — kill the inherited bullet indent on their rows */
.woocommerce .woocommerce-message li,
.woocommerce .woocommerce-error li,
.woocommerce .woocommerce-info li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce .woocommerce-message li + li,
.woocommerce .woocommerce-error li + li,
.woocommerce .woocommerce-info li + li{ margin-top: 6px; }

.woocommerce-notices-wrapper:empty{ display: none; }

mark{ background-color: transparent; color: var(--brass); font-weight: 600; }

/* ---- select2 (country / state pickers) ---- */
.select2-container{ width: auto; }
.select2-container--default .select2-selection--single .select2-selection__rendered{
    padding: 9px;
    font-size: 15px;
    color: var(--ink);
}
.select2-container .select2-dropdown,
.select2-container .select2-selection{
    border: 1px solid var(--line-paper);
    border-radius: 2px;
    background: var(--white);
}

/* ============================================================
   Order received — the confirmation reads as a plate registration, not a
   receipt. Selectors carry the .woocommerce-page-wrap prefix because
   WooCommerce's own `.woocommerce ul.order_details li` is (0,2,2) and would
   otherwise keep its float layout.
   ============================================================ */

.woocommerce-page-wrap .woocommerce-thankyou-order-received{
    font-family: var(--display);
    font-size: clamp(30px, 5.4vw, 46px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 30px;
}
/* the house eyebrow: brass rule drawn as a background so the one pseudo-element
   can carry both the mark and the label */
.woocommerce-page-wrap .woocommerce-thankyou-order-received::before{
    content: "Order confirmed";
    display: block;
    margin-bottom: 20px;
    padding-left: 32px;
    background: linear-gradient(var(--brass), var(--brass)) left center / 22px 1px no-repeat;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-paper);
}

/* the record: label left, value right, hairlines running the full measure */
.woocommerce-page-wrap .woocommerce .woocommerce-order-overview,
.woocommerce-page-wrap ul.woocommerce-order-overview{
    max-width: 520px;
    margin: 0 0 30px;
    padding: 0;
    border-top: 1px solid var(--line-paper);
    list-style: none;
}
.woocommerce-page-wrap .woocommerce ul.woocommerce-order-overview li{
    float: none;
    width: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid var(--line-paper);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-paper);
    text-align: left;
}
.woocommerce-page-wrap .woocommerce ul.woocommerce-order-overview li strong{
    font-family: var(--body);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    text-align: right;
}

.woocommerce-page-wrap .postamap-next-step{
    max-width: 520px;
    margin: 0 0 52px;
    color: var(--muted-paper);
    line-height: 1.6;
}
.woocommerce-page-wrap .postamap-next-step strong{
    color: var(--ink);
    font-weight: 600;
}

/* ---- order line: poster thumbnail beside the title ---- */
.woocommerce-table__product-name.product-name{
    display: grid;
    grid-template-columns: 180px 1fr;
    grid-auto-rows: auto;
    column-gap: 16px;
    align-items: flex-start;
}
.woocommerce-table__product-name .memomap-order-thumb{
    grid-column: 1;
    grid-row: 1 / span 2;
}
.woocommerce-table__product-name .memomap-order-thumb img{
    display: block;
    width: 180px;
    height: auto;
    border: 1px solid var(--line-paper);
    border-radius: 2px;
}
.woocommerce-table__product-name .memomap-order-title{
    grid-column: 2;
    margin-bottom: 10px;
    font-family: var(--display);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    position: relative;
    width: fit-content;
    padding-bottom: 6px;
}
.woocommerce-table__product-name .memomap-order-title:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    height: 1px;
    background-color: var(--brass);
}
.woocommerce-table__product-name .wc-item-meta{
    grid-column: 2;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Label and value on one line. This only works because the phone layout below
   drops the price column and lets the cell run the full measure — at the old
   ~125px every value broke over three or four lines. */
.woocommerce-table__product-name .wc-item-meta li{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin-bottom: 5px;
}
/* Short pairs share a line; a value that cannot hold 60% next to its label —
   "Personal Message" is the long one — drops to its own full-width line
   instead of shredding into a narrow column. */
.woocommerce-table__product-name .wc-item-meta li p{
    margin: 0;
    flex: 1 1 60%;
}
.woocommerce-table__product-name .wc-item-meta strong{
    flex: none;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-paper);
}

/* ---- block checkout ---- */
.wc-block-checkout__form .wc-block-components-text-input input,
#wc-block-components-totals-coupon__input-coupon{
    padding: 1.5em .5em .5em !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__image{
    display: none !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__description{
    padding-left: 0 !important;
}
/* The summary printed the price twice — the per-unit figure under the name and
   the line total on the right. Quantity is always 1, so they can never differ;
   the total keeps its conventional spot on the right. */
.woocommerce-page-wrap .wc-block-components-order-summary-item__individual-prices{
    display: none;
}
.wc-block-components-order-summary .wc-block-components-product-name{
    font-family: var(--display) !important;
    font-size: 18px;
    font-weight: 700 !important;
    color: var(--ink) !important;
    position: relative;
    width: fit-content;
    padding-bottom: 6px;
}
.wc-block-components-order-summary .wc-block-components-product-name:after{
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 80%;
    height: 1px;
    background-color: var(--brass);
}
.wc-block-components-order-summary .wc-block-components-product-details__name{ font-weight: 600; }
.wc-block-components-order-summary .price.wc-block-components-product-price span{
    font-family: var(--display) !important;
    font-size: 18px;
    font-weight: 400 !important;
}

.wc-block-components-button.wc-block-components-checkout-place-order-button.contained{
    font-family: var(--body);
    font-size: 16px;
    font-weight: 600;
    color: var(--bone);
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 2px;
    padding: 15px 28px !important;
    min-height: auto !important;
    text-align: center;
    cursor: pointer;
    transition: background-color .25s, color .25s, border-color .25s;
}
.wc-block-components-button.wc-block-components-checkout-place-order-button.contained:hover{
    background: var(--brass);
    border-color: var(--brass);
    color: var(--ink);
}
.wc-block-components-checkout-return-to-cart-button{
    font-family: var(--body);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink) !important;
    background: transparent;
    border: 1px solid var(--line-paper);
    border-radius: 2px;
    padding: 15px 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color .25s, background-color .25s;
}
.wc-block-components-checkout-return-to-cart-button:hover{
    border-color: var(--ink);
    background: var(--paper-2);
}
.wc-block-components-checkout-return-to-cart-button svg{ display: none; }

/* ---- 404 ---- */
.error-404 h1{ margin: 0 0 40px; }
.error-404 h2{
    text-align: center;
    color: var(--ink);
    font-size: 16rem;
    margin: 120px 0;
    opacity: .12;
}

@media only screen and (max-width: 768px){
    .woocommerce .woocommerce-MyAccount-navigation,
    .woocommerce .woocommerce-MyAccount-content{
        float: none;
        width: 100%;
        margin-right: 0;
    }
    .woocommerce .woocommerce-MyAccount-navigation{ margin-bottom: 24px; }
}

@media only screen and (max-width: 600px){
    .woocommerce-page-wrap{ padding: 44px 0 64px; }
    .woocommerce .woocommerce-MyAccount-content{ padding: 20px 18px; }

    /* Desktop button metrics (15px/14x26, and 16px/15x28 on the block checkout)
       are too heavy at this width — inside a ~308px notice the pill took 62% of
       the row. One smaller size for every WooCommerce button instead. Same
       selectors as the base rules, later in the file, so they win on order. */
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce .woocommerce-Button,
    .woocommerce button[type="submit"],
    .woocommerce input[type="submit"]{
        padding: 9px 15px;
        font-size: 13px;
    }
    /* Air above the action. WooCommerce floats the notice button beside the
       text, which at this width leaves no room for that gap to read — drop it
       onto its own line first. */
    .woocommerce .woocommerce-message .button,
    .woocommerce .woocommerce-error .button,
    .woocommerce .woocommerce-info .button{
        float: none;
        margin-top: 16px;
    }
    .woocommerce .woocommerce-Button,
    .woocommerce button[type="submit"],
    .woocommerce input[type="submit"]{ margin-top: 16px; }

    .wc-block-components-button.wc-block-components-checkout-place-order-button.contained,
    .wc-block-components-checkout-return-to-cart-button{
        padding: 10px 18px !important;
        font-size: 14px;
    }
    .wc-block-components-button.wc-block-components-checkout-place-order-button.contained{
        margin-top: 16px;
    }

    /* Smaller type in the fields. Trade-off worth knowing: iOS Safari zooms the
       page when focusing an input under 16px, which is exactly why main.css
       sets 16.

       The :not() chain is copied from main.css deliberately — that selector is
       (0,5,1), and WooCommerce's block inputs are (0,2,1), so anything simpler
       here loses to one or the other. Scoping it to .woocommerce-page-wrap adds
       the one class that puts this above both, with no !important. */
    .woocommerce-page-wrap input:not(.btn):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
    .woocommerce-page-wrap select,
    .woocommerce-page-wrap textarea,
    /* the block checkout's country/state pickers carry their own (0,2,0) rule */
    .woocommerce-page-wrap .wc-blocks-components-select__select{
        font-size: 14px;
    }
    .woocommerce-page-wrap .select2-container--default .select2-selection--single .select2-selection__rendered{
        font-size: 14px;
    }
    /* The block checkout has no placeholder attribute — the hint sitting in an
       empty field is a floating <label> that shrinks on focus. It carries its
       own 16px, so it has to come down with the typed text or the two disagree.
       ::placeholder itself already inherits the field size. */
    .woocommerce-page-wrap .wc-block-components-text-input label,
    .woocommerce-page-wrap .wc-block-components-textarea label,
    .woocommerce-page-wrap .wc-blocks-components-select__label{
        font-size: 14px;
    }
    .wc-block-components-button.wc-block-components-checkout-place-order-button.contained{
        width: 100% !important;
    }
    .woocommerce ul.order_details li{ margin-bottom: 15px; }
    .woocommerce table.shop_table th,
    .woocommerce table.shop_table td{ padding: 10px 6px; }
    /* The TOTAL column took ~70px out of a 235px cell, leaving the title and
       every meta value about 125px to wrap in. Drop the columns on a phone:
       each line becomes a block and its price sits under it, so the poster
       details get the full measure. */
    .woocommerce-page-wrap table.order_details thead{ display: none; }
    .woocommerce-page-wrap table.order_details tbody tr{
        display: block;
        padding: 16px 0;
        border-bottom: 1px solid var(--line-paper);
    }
    .woocommerce-page-wrap table.order_details tbody td{
        display: block;
        width: auto;
        padding: 0;
        border: 0;
    }
    .woocommerce-page-wrap table.order_details tbody td.product-total{
        margin-top: 12px;
        text-align: left;
        font-weight: 600;
        color: var(--ink);
    }

    /* the poster is the product — it was the smallest thing on the page. With
       the cell running full width it sits above the title rather than stealing
       the measure back. */
    .woocommerce-table__product-name .memomap-order-thumb{ margin-bottom: 12px; }
    .woocommerce-table__product-name .memomap-order-thumb img{ width: 120px; }
    .woocommerce-table__product-name .memomap-order-title{ font-size: 17px; }
    .woocommerce-columns.woocommerce-columns--2.addresses .woocommerce-column--billing-address{
        margin-bottom: 2em;
    }
    .woocommerce-table__product-name.product-name .wc-item-meta-label{ float: none !important; }
    .error-404 h2{ font-size: 30vw; margin: 60px 0; }
}