/*
 * WooCommerce pages inside the portal's Store tab. See includes/store-embed.php.
 *
 * Every layout rule is scoped to html.glds-in-portal, which the inline <head>
 * script sets only when the page is framed by the portal. The public shop sees
 * one rule from this file: the one hiding the portal-only additions.
 */

/* Public shop: the additions from store-embed.php stay out of sight. */
.glds-store-bar,
.glds-store-cats,
.glds-store-crumbs,
.glds-store-details,
.glds-store-qty,
.glds-store-price {
    display: none;
}

.glds-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * The portal palette, copied from the top of style-v2.css. That stylesheet is
 * not loaded here - it is scoped to the portal page and far larger than this
 * needs. Keep the two in step.
 */
html.glds-in-portal,
html.glds-store-account {
    --glds-primary: #2366C5;
    --glds-primary-dark: #1B4F9C;
    --glds-ink: #1F2234;
    --glds-muted: #7A7A7A;
    --glds-border: #E3E3E3;
    --glds-surface: #FAFBFD;
    --glds-radius: 8px;
    --glds-transition: 0.3s ease;
}

/* ---- My Account -----------------------------------------------------------
 * WooCommerce does not count /my-account/ as is_woocommerce(), which left the
 * page using the theme's bare list, pink links and unstyled form/table defaults.
 * glds-store-account is added only on account routes. Unlike iframe mode, this
 * keeps the normal site header and footer and styles the complete page between.
 */

html.glds-store-account body {
    color: var(--glds-ink);
    background: var(--glds-surface);
}

html.glds-store-account body .site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

html.glds-store-account body .page-header .entry-title {
    max-width: none;
    margin: 0 0 1.25rem;
    color: var(--glds-ink);
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.15;
}

html.glds-store-account .page-content > .woocommerce {
    padding: 2rem;
    border: 1px solid var(--glds-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(31, 34, 52, 0.08);
}

html.glds-store-account .woocommerce a {
    color: var(--glds-primary);
    text-decoration-color: rgba(35, 102, 197, 0.45);
    text-underline-offset: 0.15em;
}

html.glds-store-account .woocommerce a:hover {
    color: var(--glds-primary-dark);
    text-decoration-color: currentColor;
}

html.glds-store-account .woocommerce h2,
html.glds-store-account .woocommerce h3 {
    color: var(--glds-ink);
}

/* Signed-in account: portal-like section navigation beside the content. */
html.glds-store-account body.logged-in .page-content > .woocommerce {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    direction: ltr;
}

html.glds-store-account body.logged-in .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}

html.glds-store-account body.logged-in .woocommerce-notices-wrapper:empty {
    display: none;
}

html.glds-store-account .woocommerce-MyAccount-navigation,
html.glds-store-account .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    direction: ltr;
}

/* Pin both regions instead of relying on grid auto-placement. WooCommerce can
 * inject account notices around them; an extra grid item must not swap the
 * navigation and content columns. */
html.glds-store-account .woocommerce-MyAccount-navigation {
    grid-column: 1 / 2;
}

html.glds-store-account .woocommerce-MyAccount-content {
    grid-column: 2 / -1;
    min-width: 0;
}

html.glds-store-account .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--glds-border);
    border-radius: var(--glds-radius);
    overflow: hidden;
}

html.glds-store-account .woocommerce-MyAccount-navigation li {
    margin: 0;
    border-bottom: 1px solid var(--glds-border);
}

html.glds-store-account .woocommerce-MyAccount-navigation li:last-child {
    border-bottom: 0;
}

html.glds-store-account .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 0.8rem 1rem;
    border-left: 3px solid transparent;
    color: var(--glds-ink);
    text-decoration: none;
    transition: color var(--glds-transition), background var(--glds-transition), border-color var(--glds-transition);
}

html.glds-store-account .woocommerce-MyAccount-navigation a:hover {
    color: var(--glds-primary);
    background: var(--glds-surface);
}

html.glds-store-account .woocommerce-MyAccount-navigation .is-active a {
    border-left-color: var(--glds-primary);
    color: var(--glds-primary-dark);
    background: #EAF1FB;
    font-weight: 600;
}

html.glds-store-account .woocommerce-MyAccount-content > :first-child {
    margin-top: 0;
}

/* Logged-out account: Login and Register as two matching cards. */
html.glds-store-account #customer_login {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "login register";
    gap: 2rem;
    direction: ltr;
}

html.glds-store-account #customer_login > .col-1,
html.glds-store-account #customer_login > .col-2 {
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none;
    margin: 0 !important;
    direction: ltr;
}

html.glds-store-account #customer_login > .col-1 {
    grid-area: login;
}

html.glds-store-account #customer_login > .col-2 {
    grid-area: register;
}

html.glds-store-account #customer_login h2 {
    margin: 0 0 0.75rem;
}

html.glds-store-account .woocommerce form.login,
html.glds-store-account .woocommerce form.register,
html.glds-store-account .woocommerce form.edit-account,
html.glds-store-account .woocommerce form.woocommerce-address-fields {
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--glds-border);
    border-radius: var(--glds-radius);
    background: var(--glds-surface);
}

html.glds-store-account .woocommerce form .form-row {
    margin: 0 0 1rem;
    padding: 0;
}

html.glds-store-account .woocommerce form .form-row label {
    margin-bottom: 0.35rem;
    color: var(--glds-ink);
    font-weight: 600;
}

html.glds-store-account .woocommerce form .input-text,
html.glds-store-account .woocommerce form select,
html.glds-store-account .woocommerce form textarea,
html.glds-store-account .select2-container--default .select2-selection--single {
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--glds-border);
    border-radius: var(--glds-radius);
    background: #fff;
    color: var(--glds-ink);
    transition: border-color var(--glds-transition), box-shadow var(--glds-transition);
}

html.glds-store-account .woocommerce form .input-text:focus,
html.glds-store-account .woocommerce form select:focus,
html.glds-store-account .woocommerce form textarea:focus {
    border-color: var(--glds-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(35, 102, 197, 0.16);
}

html.glds-store-account .woocommerce button.button,
html.glds-store-account .woocommerce a.button,
html.glds-store-account .woocommerce input.button {
    min-height: 44px;
    padding: 0.7rem 1.15rem;
    border: 0;
    border-radius: var(--glds-radius);
    background: var(--glds-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--glds-transition);
}

html.glds-store-account .woocommerce button.button:hover,
html.glds-store-account .woocommerce a.button:hover,
html.glds-store-account .woocommerce input.button:hover {
    background: var(--glds-primary-dark);
    color: #fff;
}

html.glds-store-account .woocommerce table.shop_table {
    border: 1px solid var(--glds-border);
    border-collapse: separate;
    border-radius: var(--glds-radius);
    overflow: hidden;
}

html.glds-store-account .woocommerce table.shop_table th,
html.glds-store-account .woocommerce table.shop_table td {
    padding: 0.85rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--glds-border);
}

html.glds-store-account .woocommerce table.shop_table th {
    background: var(--glds-surface);
    color: var(--glds-ink);
}

html.glds-store-account .woocommerce table.shop_table tr:last-child td {
    border-bottom: 0;
}

html.glds-store-account .woocommerce .woocommerce-Address {
    padding: 1.25rem;
    border: 1px solid var(--glds-border);
    border-radius: var(--glds-radius);
    background: var(--glds-surface);
}

html.glds-store-account .woocommerce-error,
html.glds-store-account .woocommerce-info,
html.glds-store-account .woocommerce-message {
    border-radius: var(--glds-radius);
    background: var(--glds-surface);
}

@media (max-width: 768px) {
    html.glds-store-account body .site-main {
        padding: 1.5rem 1rem 3rem;
    }

    html.glds-store-account .page-content > .woocommerce {
        padding: 1.25rem;
    }

    html.glds-store-account body.logged-in .page-content > .woocommerce,
    html.glds-store-account #customer_login {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    html.glds-store-account #customer_login {
        grid-template-areas:
            "login"
            "register";
    }

    html.glds-store-account .woocommerce-MyAccount-navigation,
    html.glds-store-account .woocommerce-MyAccount-content {
        grid-column: 1;
    }

    html.glds-store-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
    }

    html.glds-store-account .woocommerce-MyAccount-navigation li {
        flex: 1 1 145px;
        border-right: 1px solid var(--glds-border);
    }
}

/*
 * Auto height so the page reports its content height, not the frame's, to the
 * portal (store-embed.js). margin-top undoes the admin bar's offset for
 * logged-in staff.
 */
html.glds-in-portal,
html.glds-in-portal body {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    background: #fff;
}

/* Site chrome belongs to the portal page around the frame, not inside it. */
html.glds-in-portal .elementor-location-header,
html.glds-in-portal .elementor-location-footer,
html.glds-in-portal #wpadminbar,
html.glds-in-portal .woocommerce-store-notice,
/* Its "Home" crumb would load the whole site into the frame. The category
   list on the left does the same job and stays inside the store. */
html.glds-in-portal .woocommerce-breadcrumb {
    display: none !important;
}

/*
 * Full frame width. The extra "body" is load-bearing: hello-elementor caps the
 * column with body:not([class*=elementor-page-]) .site-main (max-width 500-1140px
 * by breakpoint, centred), which ties with "html.glds-in-portal .site-main" on
 * specificity and wins on source order - the store sat in an 800px column in a
 * 1200px frame.
 */
html.glds-in-portal body .site-main {
    max-width: none;
    margin: 0;
    padding: 1.25rem;
}

/* ---- store bar ----------------------------------------------------------- */

html.glds-in-portal .glds-store-bar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--glds-border);
    background: var(--glds-surface);
}

html.glds-in-portal .glds-store-bar a {
    color: var(--glds-primary);
    font-weight: 600;
    text-decoration: none;
}

/* One back link: the shop, or Training when the frame is the Training tab's. */
html.glds-in-portal .glds-store-bar-training,
html.glds-in-portal.glds-in-training .glds-store-bar-shop {
    display: none;
}

html.glds-in-portal.glds-in-training .glds-store-bar-training {
    display: inline;
}

html.glds-in-portal .glds-store-bar a:hover {
    color: var(--glds-primary-dark);
    text-decoration: underline;
}

/* ---- categories left, content right ---------------------------------------
 * #main is WooCommerce's content wrapper on shop, category and product pages;
 * cart and checkout are ordinary pages (#content) and keep a single column.
 * The nav spans the rows every other child is auto-placed into.
 */

html.glds-in-portal #main.site-main {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
}

html.glds-in-portal #main.site-main > * {
    grid-column: 2;
}

html.glds-in-portal #main.site-main > .glds-store-cats {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 20;
}

html.glds-in-portal .glds-store-cats-title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    color: var(--glds-ink);
}

html.glds-in-portal .glds-store-cats ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

html.glds-in-portal .glds-store-cats li {
    margin: 0;
    border-bottom: 1px solid var(--glds-border);
}

/* Subcategories, when Garrick adds some, indent under their parent. */
html.glds-in-portal .glds-store-cats .children li {
    border-bottom: 0;
}

html.glds-in-portal .glds-store-cats .children a {
    padding-left: 1.75rem;
}

html.glds-in-portal .glds-store-cats a {
    display: block;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid transparent;
    color: var(--glds-ink);
    text-decoration: none;
    transition: background var(--glds-transition), border-color var(--glds-transition);
}

html.glds-in-portal .glds-store-cats a:hover {
    background: var(--glds-surface);
    color: var(--glds-primary);
}

html.glds-in-portal .glds-store-cats .current-cat > a {
    border-left-color: var(--glds-primary);
    background: #EAF1FB;
    color: var(--glds-primary-dark);
    font-weight: 600;
}

/* The portal's own breadcrumb (store-embed.php), rooted at GLDS Store. */
html.glds-in-portal .glds-store-crumbs {
    display: block;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--glds-muted);
}

html.glds-in-portal .glds-store-crumbs a {
    color: var(--glds-primary);
    text-decoration: none;
}

html.glds-in-portal .glds-store-crumbs a:hover {
    color: var(--glds-primary-dark);
    text-decoration: underline;
}

html.glds-in-portal .woocommerce-products-header__title {
    margin: 0 0 0.5rem;
    color: var(--glds-ink);
}

/* ---- products as rows ------------------------------------------------------
 * Image | title + description | qty, price, button - the layout Garrick asked
 * for. The product link (image + title) is a subgrid across the first two
 * columns so the image can span both rows while the description, which is not
 * inside the link, sits under the title.
 */

html.glds-in-portal ul.products {
    display: block !important;
    margin: 0 !important;
    padding: 0;
}

html.glds-in-portal ul.products::before,
html.glds-in-portal ul.products::after {
    display: none !important;
}

html.glds-in-portal ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 1.5rem 0 !important;
    border-bottom: 1px solid var(--glds-border);
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 210px;
    grid-template-rows: auto 1fr;
    column-gap: 1.5rem;
    text-align: left;
}

/*
 * "a." is load-bearing: without it this ties with WooCommerce's
 * .woocommerce ul.products li.product a.woocommerce-loop-product__link
 * { display: block } and loses on source order, so the image filled the row
 * and covered the description.
 */
html.glds-in-portal ul.products li.product > a.woocommerce-LoopProduct-link {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    color: var(--glds-ink);
    text-decoration: none;
}

html.glds-in-portal ul.products li.product > .woocommerce-LoopProduct-link img {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 100%;
    height: auto;
    margin: 0 !important;
    border: 1px solid var(--glds-border);
    border-radius: var(--glds-radius);
}

html.glds-in-portal ul.products li.product .woocommerce-loop-product__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 0.5rem;
    padding: 0 !important;
    font-size: 1.1rem !important;
    color: var(--glds-ink);
}

html.glds-in-portal ul.products li.product > .woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title {
    color: var(--glds-primary);
}

/* Shown in the buy box instead. */
html.glds-in-portal ul.products li.product > .woocommerce-LoopProduct-link .price {
    display: none !important;
}

html.glds-in-portal .glds-store-details {
    display: block;
    grid-column: 2;
    grid-row: 2;
    color: var(--glds-muted);
    font-size: 0.95rem;
}

html.glds-in-portal .glds-store-details p {
    margin: 0 0 0.75rem;
}

html.glds-in-portal .glds-store-more {
    color: var(--glds-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: underline;
}

html.glds-in-portal .glds-store-buy {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--glds-surface);
    border: 1px solid var(--glds-border);
    border-radius: var(--glds-radius);
}

html.glds-in-portal .glds-store-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--glds-muted);
    text-transform: uppercase;
}

html.glds-in-portal .glds-store-qty input {
    width: 4.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--glds-border);
    border-radius: var(--glds-radius);
}

html.glds-in-portal .glds-store-price {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--glds-ink);
    text-align: right;
}

html.glds-in-portal .glds-store-buy .button {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 0.65rem 1rem !important;
    border: 0;
    border-radius: var(--glds-radius);
    background: var(--glds-primary) !important;
    color: #fff !important;
    text-align: center;
    font-weight: 600;
    transition: background var(--glds-transition);
}

html.glds-in-portal .glds-store-buy .button:hover {
    background: var(--glds-primary-dark) !important;
}

/* WooCommerce's "View cart" link that appears after an ajax add. */
html.glds-in-portal .glds-store-buy .added_to_cart {
    text-align: center;
    color: var(--glds-primary);
    font-weight: 600;
}

/* ---- cart and checkout ------------------------------------------------------
 * Ordinary pages holding WooCommerce blocks, so none of the shop rules above
 * reach them. The cart and checkout blocks are "alignwide", which the theme
 * turns into -80px side margins: the cart started 60px left of the frame and
 * its product images were cut off. The title is the theme's centred,
 * max-width .entry-title. "body" outranks both theme rules.
 */

html.glds-in-portal body .alignwide,
html.glds-in-portal body .alignfull {
    max-width: none;
    width: auto;
    margin-left: 0;
    margin-right: 0;
}

html.glds-in-portal body .page-header .entry-title {
    max-width: none;
    margin: 0 0 1rem;
    color: var(--glds-ink);
}

/* The theme's default link colour is pink (#CC3366), as on the portal itself. */
html.glds-in-portal .wc-block-components-product-name {
    color: var(--glds-primary);
}

html.glds-in-portal .wc-block-components-product-name:hover {
    color: var(--glds-primary-dark);
}

/* "Proceed to Checkout" and "Place Order": WordPress's dark grey, underlined by
   the theme's link style, restyled to match the Add to cart buttons. */
html.glds-in-portal body .wc-block-components-button:not(.is-link) {
    background: var(--glds-primary);
    color: #fff;
    border-radius: var(--glds-radius);
    text-decoration: none;
    transition: background var(--glds-transition);
}

html.glds-in-portal body .wc-block-components-button:not(.is-link):hover {
    background: var(--glds-primary-dark);
    color: #fff;
}

html.glds-in-portal body .wc-block-components-button:not(.is-link) .wc-block-components-button__text {
    text-decoration: none;
}

/* ---- narrower frames --------------------------------------------------------
 * The portal is 1200, 1024 or 767px wide depending on the screen, so the frame
 * is roughly 1160, 990 or 730px. Below ~900 the three-column row leaves the
 * description a sliver, so the buy box moves under the text, laid out in a line.
 */

@media (max-width: 900px) {
    html.glds-in-portal ul.products li.product {
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }

    html.glds-in-portal .glds-store-buy {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 1rem;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    html.glds-in-portal .glds-store-price {
        flex: 1;
    }

    html.glds-in-portal .glds-store-buy .button {
        width: auto;
    }
}

/* Phones: the category list goes above the products as wrapping pills. */
@media (max-width: 640px) {
    html.glds-in-portal #main.site-main {
        grid-template-columns: minmax(0, 1fr);
    }

    html.glds-in-portal #main.site-main > *,
    html.glds-in-portal #main.site-main > .glds-store-cats {
        grid-column: 1;
        grid-row: auto;
    }

    html.glds-in-portal .glds-store-cats {
        margin-bottom: 1.25rem;
    }

    html.glds-in-portal .glds-store-cats > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    html.glds-in-portal .glds-store-cats > ul > li {
        border: 1px solid var(--glds-border);
        border-radius: var(--glds-radius);
    }
}