/* ci-shop base — chrome, tokens, buttons, forms, notices, tables.
   NOTE: --hss-* headspin tokens are SECTION-spacing (5.5rem+ with an 88px mobile
   floor) — never use them for component/card padding; use the explicit values here. */

:root {
    --shop-bg: #f5f5f5;
    --shop-card-bg: #ffffff;
    --shop-border: var(--hcl-neutral-4, #e8e8e8);
    --shop-accent: var(--hcl-brand-9, #e87217);
    --shop-accent-hover: var(--hcl-brand-10, #d46200);
    --shop-text: var(--hcl-black-9, #202020);
    --shop-max-width: 1340px;
    --shop-card-pad: clamp(1.25rem, 3vw, 3rem);
    --shop-info-bg: #ddedf9;
    --shop-info-text: #2779bd;
}

body.ci-shop *,
body.ci-shop *::before,
body.ci-shop *::after { box-sizing: border-box; }

body.ci-shop {
    margin: 0;
    background: var(--shop-bg);
    color: var(--shop-text);
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    /* WC ships --wc-form-border-color: rgba(32,7,7,0.8) (near-black) into its own
       field styles — reset it to the measured light grey at the source */
    --wc-form-border-color: #d1d5db;
}

/* Header logo band — measured old rhythm: 66px above the logo AND 66px below it
   before the card. .shop-main has no top padding, so the full 66px bottom space
   lives on this band. */
.shop-header { display: flex; justify-content: center; padding: 66px 1rem; }
.shop-header__logo img { display: block; width: 400px; max-width: 90vw; height: auto; }

.shop-main { max-width: var(--shop-max-width); margin: 0 auto; padding: 0 1rem 2.5rem; }

.shop-card {
    background: var(--shop-card-bg);
    border: 1px solid var(--shop-border);
    border-radius: 2px;
    padding: var(--shop-card-pad);
}

.shop-page-title { margin-top: 0; font-size: 2.25rem; font-weight: 700; }

.shop-footer { padding: 2rem 1rem; }
.shop-footer__links { display: flex; justify-content: center; gap: 1.5rem; }

body.ci-shop a { color: var(--shop-accent); text-decoration: none; }
body.ci-shop a:hover { color: var(--shop-accent-hover); }
body.ci-shop .shop-footer__links a { color: var(--hcl-neutral-11, #646464); font-size: 0.875rem; text-decoration: underline; }

@media (max-width: 640px) {
    /* Measured old mobile (390): 49px above/below logo, 20px side gutters, logo 350 wide */
    .shop-header { padding: 49px 20px; }
    .shop-header__logo img { max-width: 350px; }
    .shop-footer__links { flex-direction: column; align-items: center; gap: 0.75rem; }
    .shop-page-title { font-size: 1.75rem; }
}

/* Buttons — orange solid primary; old design uses Title Case labels */
body.ci-shop .button,
body.ci-shop button[type="submit"],
body.ci-shop input[type="submit"] {
    display: inline-block;
    background: var(--shop-accent);
    color: #fff;
    border: 1px solid var(--shop-accent);
    border-radius: 3px;
    padding: 0.7rem 1.6rem;
    font: 500 1rem 'Roboto', sans-serif;
    text-transform: capitalize;
    cursor: pointer;
    transition: background 0.15s ease;
}
body.ci-shop .button:hover,
body.ci-shop button[type="submit"]:hover,
body.ci-shop input[type="submit"]:hover { background: var(--shop-accent-hover); color: #fff; }
body.ci-shop .button--outline { background: transparent; color: var(--shop-accent); }
body.ci-shop .button--outline:hover { background: var(--shop-accent); color: #fff; }
/* WC paints .alt buttons purple at 0,3,1 — element-qualified to win */
body.ci-shop a.button.alt,
body.ci-shop button.button.alt,
body.ci-shop input.button.alt { background: var(--shop-accent); border-color: var(--shop-accent); color: #fff; }
body.ci-shop a.button.alt:hover,
body.ci-shop button.button.alt:hover,
body.ci-shop input.button.alt:hover { background: var(--shop-accent-hover); }
/* Disabled state (e.g. variable product before a plan is chosen) stays brand
   orange at reduced opacity — WC's default turns it lavender */
body.ci-shop .button.disabled,
body.ci-shop .button:disabled,
body.ci-shop button.single_add_to_cart_button.disabled {
    background: var(--shop-accent);
    border-color: var(--shop-accent);
    color: #fff;
    opacity: 0.45;
    cursor: not-allowed;
}

/* Form fields — measured old: 1px #d1d5db border, radius 3px, 12/16 padding,
   51.2px (3.2rem) height shared by inputs AND selects (so selects match on
   checkout/account/login), text #374151 */
body.ci-shop input[type="text"],
body.ci-shop input[type="email"],
body.ci-shop input[type="tel"],
body.ci-shop input[type="password"],
body.ci-shop input[type="number"],
body.ci-shop select,
body.ci-shop textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 3.2rem;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    font: 400 1rem 'Roboto', sans-serif;
    color: #374151;
    background: #fff;
}

/* Tables (Woo shop_table base) */
body.ci-shop table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--shop-border); }
body.ci-shop table.shop_table th,
body.ci-shop table.shop_table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--shop-border); text-align: left; }
body.ci-shop table.shop_table thead th {
    background: var(--hcl-neutral-2, #f9f9f9);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hcl-neutral-11, #646464);
}

/* Notices — old design: filled light-blue info panels, blue text, icon in a
   reserved left gutter (Woo's ::before icon is absolutely positioned — the
   padding-left MUST reserve ~3.25em or the icon overprints the text) */
body.ci-shop .woocommerce-message,
body.ci-shop .woocommerce-info {
    position: relative;
    display: flex;
    align-items: center;
    /* flex drops the whitespace text node between message text and an inline
       action link ("Have a coupon?Click here…") — gap restores the breathing room */
    gap: 0.4em;
    background: var(--shop-info-bg);
    color: var(--shop-info-text);
    border: 0;
    border-radius: 4px;
    padding: 1em 1.5em 1em 3.25em;
    margin-bottom: 1.5rem;
}
body.ci-shop .woocommerce-message a,
body.ci-shop .woocommerce-info a { color: var(--shop-info-text); font-weight: 700; }
body.ci-shop .woocommerce-message::before,
body.ci-shop .woocommerce-info::before { position: absolute; left: 1.25em; top: 1.1em; color: var(--shop-info-text); }
/* Button inside a notice: WC outputs it BEFORE the message text, so order:2 +
   margin-left:auto lands text left / button hard-right, vertically centred.
   Per Luke: secondary style (outlined orange), fills on hover. */
body.ci-shop .woocommerce-message .button,
body.ci-shop .woocommerce-info .button {
    order: 2;
    margin-left: auto;
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--shop-accent);
    color: var(--shop-accent);
}
body.ci-shop .woocommerce-message .button:hover,
body.ci-shop .woocommerce-info .button:hover {
    background: var(--shop-accent);
    color: #fff;
}
body.ci-shop .woocommerce-error {
    position: relative;
    background: #fdf0f0;
    color: #b81c23;
    border: 0;
    border-radius: 4px;
    padding: 1em 1.5em 1em 3.25em;
    margin-bottom: 1.5rem;
    list-style: none;
}
body.ci-shop .woocommerce-error::before { position: absolute; left: 1.25em; top: 1.1em; color: #b81c23; }

/* Quantity stepper (shared: product page + cart). Measured old = ONE bordered
   box: the number input IS the visible control (1px #d1d5db, radius 3px, ~85x47),
   and the −/+ buttons float borderless/transparent INSIDE it — no dividers.
   The wrapper carries no chrome; buttons are absolutely positioned against it.
   Rules are body.ci-shop-qualified so they beat the global input[type=number]
   rule (which would otherwise force width:100%/min-height onto this input). */
body.ci-shop .shop-qty { position: relative; display: inline-block; }
body.ci-shop .shop-qty input.qty {
    width: 85px;
    height: 47px;
    min-height: 0;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    background: #fff;
    color: #374151;
    text-align: center;
    -moz-appearance: textfield;
}
body.ci-shop .shop-qty input.qty::-webkit-outer-spin-button,
body.ci-shop .shop-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.ci-shop .shop-qty__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
body.ci-shop .shop-qty__btn--down { left: 2px; }
body.ci-shop .shop-qty__btn--up { right: 2px; }
body.ci-shop .shop-qty__btn:hover { color: var(--shop-text); }

/* WC's `.woocommerce form .form-row .input-text/select` (0,3,2) supplies its own
   padding (0.5em) and radius via --wc-form-border-radius, beating the base field
   rule above — kill the radius var at source and out-rank the sizing. Measured
   old build: 18px text, 12px 16px padding, 51.2px height, 3px radius. */
body.ci-shop { --wc-form-border-radius: 3px; }
body.ci-shop form .form-row .input-text,
body.ci-shop form .form-row select,
body.ci-shop form .form-row textarea {
    padding: 12px 16px;
    font-size: 18px;
    min-height: 3.2rem;
    border-radius: 3px;
}
/* select2 renders its own control (default 28px) — match the 51.2px field height */
body.ci-shop .select2-container .select2-selection--single {
    height: 3.2rem;
    border: 1px solid #d1d5db;
    border-radius: 3px;
}
body.ci-shop .select2-container--default .select2-selection--single .select2-selection__rendered {
    /* WC adds 9px vertical padding to this span; combined with the full-height
       line-height that pushes the text below centre — line-height alone centres it */
    line-height: calc(3.2rem - 2px);
    padding: 0 24px 0 16px;
    font-size: 18px;
}
body.ci-shop .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(3.2rem - 2px); }