/*
Theme Name: letstudy
Description: Minimal theme for the pages WordPress still renders (cart, checkout, account, login). The public site is Next.js; these pages wear the site's own header and footer, fetched from it over localhost (functions.php), and are skinned with its design tokens. The theme's own chrome is the fallback. It never restructures WooCommerce templates.
Version: 0.8.1
Text Domain: letstudy
*/

/* The site's tokens when its stylesheet is on the page (globals.css of packages/web, brought in
   with the chrome), the theme's own values otherwise. */
:root {
  --ls-font: var(--font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --ls-text: var(--ink, #1c2238);
  --ls-muted: var(--muted, #63718c);
  --ls-bg: var(--bg, #ffffff);
  --ls-soft: var(--bg-soft, #f5f7fb);
  --ls-tint: var(--bg-tint, #eef4fb);
  --ls-accent: var(--coral, #fc6c4d);
  --ls-accent-dark: var(--coral-dark, #c7553d);
  --ls-navy: var(--navy, #1c2238);
  --ls-border: var(--line, #e5e9f2);
  --ls-radius: var(--radius, 4px);
  --ls-radius-sm: var(--radius-sm, 4px);
  --ls-max: var(--container, 1200px);
}

/* The canvas is the site's footer colour when the site's chrome is on the page (as on the site:
   below a short page, an empty cart on a tall screen, the footer reaches the bottom of the screen
   rather than ending above a white band); the page itself is white, from the body. */
html { font-family: var(--ls-font); color: var(--ls-text); background: var(--navy, var(--ls-bg)); }
body { margin: 0; line-height: 1.6; background: var(--ls-bg); }
/* The page's own links and the fallback chrome's: the site's header and footer bring their own
   colours, and a bare `a` here, loaded after the site's stylesheet with the same specificity,
   repainted every one of their links that has none of its own in coral. `:where` keeps it at `a`. */
:where(.ls-main, .ls-header, .ls-footer) a { color: var(--ls-accent); }

/* ---- the theme's own chrome, shown only when the site does not answer --------------------- */
.ls-header, .ls-footer { max-width: var(--ls-max); margin: 0 auto; padding: 1rem 1.5rem; }
.ls-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ls-border); }
.ls-header a.ls-brand { font-weight: 600; text-decoration: none; color: var(--ls-text); font-size: 1.25rem; }
.ls-header nav a { margin-left: 1rem; text-decoration: none; }
.ls-footer { border-top: 1px solid var(--ls-border); color: var(--ls-muted); font-size: .9rem; }

/* ---- the content WordPress renders, framed like a page of the site ------------------------ */
.ls-main { max-width: var(--ls-max); margin: 0 auto; padding: clamp(1.75rem, 4vw, 2.75rem) 1.5rem clamp(3rem, 6vw, 4.5rem); }
.ls-main > h1, .ls-main .entry-title, .ls-main h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.01em; color: var(--ls-navy); margin: 0 0 1.5rem; }
.ls-main h2 { font-size: 1.35rem; margin: 2rem 0 .85rem; color: var(--ls-navy); }

/* The site's footer carries its own top margin; the theme's does not need the gap doubled. */
body.has-site-chrome .ls-main { padding-bottom: clamp(2rem, 4vw, 3rem); }
body.has-site-chrome .footer { margin-top: 0; }

/* Under WordPress's admin bar the site's sticky header sits below it. */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }

/* ---- WooCommerce, skinned rather than restructured ---------------------------------------- */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.wc-block-components-button {
  background: var(--ls-accent); color: #fff; border: 0; border-radius: var(--ls-radius-sm);
  padding: .7rem 1.4rem; font-weight: 700; line-height: 1.2;
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover,
.woocommerce input.button:hover, .wc-block-components-button:hover { background: var(--ls-accent-dark); color: #fff; }
.woocommerce .button.alt, .woocommerce button.button.alt { background: var(--ls-navy); }
.woocommerce .button.alt:hover, .woocommerce button.button.alt:hover { background: var(--ls-accent); }

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .woocommerce-page input[type="text"], .woocommerce-page input[type="email"],
.woocommerce-page input[type="password"], .woocommerce-page input[type="tel"] {
  border: 1px solid var(--ls-border); border-radius: var(--ls-radius-sm); padding: .65rem .8rem; background: #fff;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row select:focus {
  outline: 2px solid var(--ls-accent); outline-offset: 1px; border-color: transparent;
}

/* Notices keep WooCommerce's 3.5em of left padding: its icon is positioned absolutely inside that
   space, and taking the padding away drops the icon on top of the text. The colour still says what
   kind of notice it is, so only the frame is restyled. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 0; border-left: 4px solid var(--ls-border); background: var(--ls-soft);
  border-radius: var(--ls-radius-sm); padding: 1.1em 1.5em 1.1em 3.5em; margin: 0 0 1.75em;
}
.woocommerce-message { border-left-color: var(--ok, #1e9e6a); }
.woocommerce-info { border-left-color: #1e85be; }
.woocommerce-error { border-left-color: #b3202c; }

/* The account page. WooCommerce lays it out with floats and clears them with ::before/::after on
   the wrapper, so the wrapper must stay a block: making it a grid or a flex container turns those
   two clearfix pseudo-elements into items of their own and deals the real columns into the wrong
   cells. Skin the two panels and leave the layout alone; woocommerce-smallscreen.css already
   stacks them on narrow screens. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: .4rem; background: #fff;
  border: 1px solid var(--ls-border); border-radius: var(--ls-radius);
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: .6rem .85rem; border-radius: var(--ls-radius-sm);
  color: var(--ls-text); font-weight: 600; text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--ls-tint); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--ls-navy); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content {
  background: #fff; border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius); padding: clamp(1.25rem, 3vw, 2rem);
}
.woocommerce-account .woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content > :last-child { margin-bottom: 0; }

/* Cart and checkout tables read as cards rather than bare rules. */
.woocommerce table.shop_table {
  border: 1px solid var(--ls-border); border-radius: var(--ls-radius); border-collapse: separate;
  border-spacing: 0; overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--ls-soft); color: var(--ls-navy); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: .9rem 1rem; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3 { color: var(--ls-navy); }

/* ---- the cart, laid out like a page of the site ------------------------------------------- */
/* Two columns from 960px: what you are buying on the left, what you will pay on the right, the
   panel following the reader down. WooCommerce floats the totals panel at 48% of the row with a
   three-class selector, so the override has to be at least as specific — and `td.actions` must
   stay a table cell: giving it `display:flex` takes it out of the table and its colspan with it,
   which is what dropped the coupon box beside the table instead of under it. */
.woocommerce-cart .ls-main article > .woocommerce { display: grid; gap: 1.5rem; }
.woocommerce-cart .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-cart .woocommerce .cart-collaterals { width: 100%; }
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
  float: none; width: auto;
  background: #fff; border: 1px solid var(--ls-border); border-radius: var(--ls-radius);
  padding: 1.25rem; box-shadow: 0 10px 30px -18px rgba(28, 34, 56, .35);
}
.woocommerce-cart .cart_totals h2 { margin: 0 0 .75rem; font-size: 1.15rem; }
.woocommerce-cart .cart_totals table.shop_table { border: 0; border-radius: 0; width: 100%; }
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  background: transparent; border-top: 1px dashed var(--ls-border); padding: .6rem 0; vertical-align: top;
}
.woocommerce-cart .cart_totals table.shop_table th { width: 45%; text-align: left; padding-right: .75rem; font-weight: 600; }
.woocommerce-cart .cart_totals table.shop_table td { text-align: right; }
.woocommerce-cart .cart_totals tr:first-child th, .woocommerce-cart .cart_totals tr:first-child td { border-top: 0; }
.woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { font-size: 1.1rem; color: var(--ls-navy); }
.woocommerce-cart .cart_totals .order-total small { display: block; font-weight: 400; }
.woocommerce-cart .wc-proceed-to-checkout { padding: 1rem 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block; box-sizing: border-box; width: 100%; text-align: center; white-space: normal;
  background: var(--ls-accent); color: #fff; font-size: 1.02rem; padding: .95rem 1rem; border-radius: var(--ls-radius-sm);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--ls-accent-dark); }

/* The line items. The first two columns are as wide as what they hold, not a third of the table. */
.woocommerce-cart table.cart th.product-remove, .woocommerce-cart table.cart td.product-remove { width: 3rem; text-align: center; }
.woocommerce-cart table.cart th.product-thumbnail, .woocommerce-cart table.cart td.product-thumbnail { width: 88px; }
.woocommerce-cart td.product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--ls-radius-sm); }
.woocommerce-cart td.product-name a { color: var(--ls-navy); font-weight: 700; text-decoration: none; }
.woocommerce-cart td.product-name a:hover { color: var(--ls-accent-dark); }
.woocommerce-cart .quantity .qty { width: 4.5rem; padding: .5rem; border: 1px solid var(--ls-border); border-radius: var(--ls-radius-sm); }
.woocommerce-cart a.remove { color: var(--ls-muted) !important; font-weight: 400; }
.woocommerce-cart a.remove:hover { background: transparent !important; color: var(--ls-accent) !important; }

/* The row under the table: coupon left, "update" right, both floated the way WooCommerce lays
   them out — only wider, because its coupon field is 80px and fits no coupon anybody writes. */
.woocommerce-cart table.cart td.actions { background: var(--ls-soft); padding: .9rem 1rem; }
/* It wraps: a refused coupon puts its message inside the row (cart.js, p.coupon-error-notice, which
   WooCommerce sizes at flex-basis 100%). On one line the message took the field's width and
   stretched the button to its own height. Now it gets a line of its own under the two. */
.woocommerce-cart table.cart td.actions .coupon { float: left; display: flex; flex-wrap: wrap; gap: .5rem; width: min(24rem, 100%); }
.woocommerce-cart table.cart td.actions .coupon .coupon-error-notice { margin: 0; font-size: .85rem; line-height: 1.45; color: #b3202c; }
.woocommerce-cart table.cart td.actions .coupon .input-text.has-error { border-color: #b3202c; }
.woocommerce-cart table.cart td.actions .coupon label { display: none; }
.woocommerce-cart table.cart td.actions .coupon .input-text {
  width: auto; flex: 1; min-width: 0; float: none; margin: 0; padding: .65rem .8rem;
  border: 1px solid var(--ls-border); border-radius: var(--ls-radius-sm); background: #fff;
}
.woocommerce-cart table.cart td.actions .coupon .button { background: var(--ls-navy); white-space: nowrap; }
.woocommerce-cart table.cart td.actions .coupon .button:hover { background: var(--ls-accent); }
.woocommerce-cart table.cart td.actions > .button { background: transparent; color: var(--ls-navy); border: 1px solid var(--ls-border); }
.woocommerce-cart table.cart td.actions > .button:hover { background: #fff; color: var(--ls-accent-dark); }
.woocommerce-cart table.cart td.actions > .button[disabled] { opacity: .5; }

/* Empty cart: one sentence and one way out, centred like the site's own empty states. */
.woocommerce-cart .cart-empty, .woocommerce-cart .return-to-shop { text-align: center; }
.woocommerce-cart .cart-empty { font-size: 1.1rem; color: var(--ls-muted); margin: 2rem 0 1.25rem; }

@media (max-width: 600px) {
  .woocommerce-cart table.cart td.actions .coupon { float: none; width: 100%; margin-bottom: .6rem; }
  .woocommerce-cart table.cart td.actions > .button { float: none; width: 100%; }
}
@media (min-width: 960px) {
  .woocommerce-cart .ls-main article > .woocommerce { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 2rem; }
  /* Only the line items and the totals are columns. Notices, and the empty cart's message and its
     button, run the full width — otherwise an empty cart puts its one sentence in the left column
     and its one button in the right. */
  .woocommerce-cart .ls-main article > .woocommerce > *:not(form.woocommerce-cart-form):not(.cart-collaterals) { grid-column: 1 / -1; }
  .woocommerce-cart .woocommerce .cart-collaterals .cart_totals { position: sticky; top: 88px; }
}

/* ---- lost password: one card, centred, like the site's sign-in ---------------------------- */
.woocommerce-lost-password .ls-main article { max-width: 520px; margin: 0 auto; }
.woocommerce-lost-password .ls-main h1 { text-align: center; }
.woocommerce-lost-password .woocommerce-ResetPassword {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius); padding: clamp(1.25rem, 4vw, 2rem);
  box-shadow: 0 18px 44px -24px rgba(28, 34, 56, .45);
}
.woocommerce-lost-password .woocommerce-ResetPassword > p:first-child { margin: 0 0 1.25rem; color: var(--ls-muted); }
.woocommerce-lost-password .woocommerce-ResetPassword .form-row-first { width: 100%; float: none; margin: 0 0 1rem; }
.woocommerce-lost-password .woocommerce-ResetPassword label { display: block; font-weight: 600; margin-bottom: .35rem; }
.woocommerce-lost-password .woocommerce-ResetPassword .input-text {
  width: 100%; padding: .8rem .9rem; border: 1px solid var(--ls-border); border-radius: var(--ls-radius-sm); background: #fff;
}
.woocommerce-lost-password .woocommerce-ResetPassword .button { width: 100%; padding: .9rem 1.2rem; font-size: 1.02rem; }
.woocommerce-lost-password .woocommerce-ResetPassword .clear { display: none; }
/* the way back, which the template puts before the button; flex order moves it under it */
.ls-alt { order: 9; margin: 1rem 0 0; text-align: center; color: var(--ls-muted); font-size: .92rem; }

/* ---- the checkout, in the site's clothes --------------------------------------------------- */
/* Details on the left, the order and the payment on the right, following the reader down. The
   two-column float WooCommerce uses inside #customer_details is undone (its selector is three
   classes deep, so these are four) and the panels become cards. */
.woocommerce-checkout .ls-main form.checkout { display: grid; gap: 1.5rem; }
/* A refused order (checkout.js submit_error) or a failed review refresh prepends its notices inside
   the form, where they would take the first cell and push the details into the right-hand column.
   They get a row of their own across both columns instead. */
.woocommerce-checkout .ls-main form.checkout > .woocommerce-NoticeGroup,
.woocommerce-checkout .ls-main form.checkout > .woocommerce-error,
.woocommerce-checkout .ls-main form.checkout > .wc-block-components-notice-banner { grid-column: 1 / -1; }
.woocommerce-checkout .woocommerce .col2-set .col-1,
.woocommerce-checkout .woocommerce .col2-set .col-2 { float: none; width: auto; }
.woocommerce-checkout #customer_details { display: grid; gap: 1.5rem; }
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review {
  background: #fff; border: 1px solid var(--ls-border); border-radius: var(--ls-radius);
  padding: clamp(1.1rem, 3vw, 1.6rem); box-shadow: 0 10px 30px -18px rgba(28, 34, 56, .35);
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 { margin: 0 0 1rem; font-size: 1.15rem; }
.woocommerce-checkout #order_review_heading { font-size: 1.15rem; margin: 0 0 .75rem; color: var(--ls-navy); }
.woocommerce-checkout .form-row { padding: 0; margin: 0 0 1rem; }
.woocommerce-checkout .form-row label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.woocommerce-checkout .form-row .required { color: var(--ls-accent); text-decoration: none; }
.woocommerce-checkout .woocommerce-billing-fields .form-row { display: inline-block; vertical-align: top; }
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: auto; padding: .45rem .3rem; border: 1px solid var(--ls-border); border-radius: var(--ls-radius-sm);
}

/* One field for a code: the coupon form, open, as a card whose heading is WooCommerce's "Have a
   coupon?" line (functions.php words it and drops its link). checkout.js hides the form on load
   with an inline style, which the !important outranks. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  margin: 0; padding: 1rem 1.2rem .5rem; background: #fff; color: var(--ls-navy);
  border: 1px solid var(--ls-border); border-bottom: 0; border-radius: var(--ls-radius) var(--ls-radius) 0 0;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .ls-coupon-hint { display: block; margin-top: .2rem; font-weight: 400; font-size: .9rem; color: var(--ls-muted); }
.woocommerce-checkout form.checkout_coupon {
  display: flex !important; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin: 0 0 1.5rem;
  padding: .5rem 1.2rem 1.1rem; background: #fff; border: 1px solid var(--ls-border); border-top: 0;
  border-radius: 0 0 var(--ls-radius) var(--ls-radius); box-shadow: 0 10px 30px -18px rgba(28, 34, 56, .35);
}
.woocommerce-checkout form.checkout_coupon .form-row { float: none; width: auto; margin: 0; padding: 0; }
.woocommerce-checkout form.checkout_coupon .form-row-first { flex: 1 1 14rem; }
.woocommerce-checkout form.checkout_coupon .input-text { width: 100%; text-transform: uppercase; }
.woocommerce-checkout form.checkout_coupon .input-text::placeholder { text-transform: none; }
.woocommerce-checkout form.checkout_coupon .button { background: var(--ls-navy); white-space: nowrap; }
.woocommerce-checkout form.checkout_coupon .clear { display: none; }

/* The order table reads as a list of what is being bought, not as a spreadsheet. */
.woocommerce-checkout #order_review table.shop_table { border: 0; border-radius: 0; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td { background: transparent; border-top: 1px dashed var(--ls-border); padding: .6rem 0; }
.woocommerce-checkout #order_review table.shop_table thead th { border-top: 0; border-bottom: 1px solid var(--ls-border); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.woocommerce-checkout #order_review table.shop_table td { text-align: right; }
.woocommerce-checkout #order_review table.shop_table td.product-name { text-align: left; }
.woocommerce-checkout #order_review .order-total th, .woocommerce-checkout #order_review .order-total td { font-size: 1.1rem; color: var(--ls-navy); }

/* Payment methods as rows one can click, with the gateway's own form under the chosen one. */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; margin: 0 0 1rem; }
.woocommerce-checkout #payment ul.payment_methods li {
  list-style: none; border: 1px solid var(--ls-border); border-radius: var(--ls-radius-sm);
  padding: .8rem .9rem; margin: 0 0 .5rem; background: #fff;
}
.woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--ls-accent); }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 700; color: var(--ls-navy); display: inline; }
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--ls-accent); margin-right: .4rem; }
.woocommerce-checkout #payment ul.payment_methods li img { max-height: 24px; vertical-align: middle; margin-left: .4rem; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--ls-soft); color: var(--ls-text); border-radius: var(--ls-radius-sm);
  margin: .7rem 0 0; padding: .9rem 1rem; font-size: .92rem;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.payment_box select, .woocommerce-checkout #payment div.payment_box input.input-text {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--ls-border); border-radius: var(--ls-radius-sm); background: #fff;
}
.woocommerce-checkout #payment .form-row.place-order { padding: 0; margin: 1rem 0 0; }
.woocommerce-checkout #payment #place_order {
  display: block; box-sizing: border-box; width: 100%; background: var(--ls-accent);
  font-size: 1.05rem; padding: .95rem 1.2rem; border-radius: var(--ls-radius-sm);
}
.woocommerce-checkout #payment #place_order:hover { background: var(--ls-accent-dark); }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: .75rem; font-size: .9rem; }

/* Απόδειξη ή τιμολόγιο (mu-plugins/letstudy-invoice.php) */
.letstudy-invoice { border-top: 1px dashed var(--ls-border); margin-top: .5rem; padding-top: 1.1rem; }
.letstudy-invoice__choice label { font-weight: 600; }
.letstudy-invoice__choice .woocommerce-input-wrapper { display: flex; gap: .5rem; flex-wrap: wrap; }
.letstudy-invoice__choice .radio {
  display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--ls-border);
  border-radius: 999px; padding: .4rem .9rem; margin: 0; font-weight: 600; cursor: pointer;
}
.letstudy-invoice__choice input[type="radio"] { accent-color: var(--ls-accent); }
.letstudy-invoice__fields { margin-top: 1rem; }
.letstudy-invoice__note { font-size: .88rem; color: var(--ls-muted); margin: 0 0 .8rem; }

@media (min-width: 980px) {
  .woocommerce-checkout .ls-main form.checkout { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 2rem; align-items: start; }
  .woocommerce-checkout .ls-review { position: sticky; top: 88px; }
  .woocommerce-checkout .woocommerce-billing-fields .form-row-first,
  .woocommerce-checkout .woocommerce-billing-fields .form-row-last { width: calc(50% - .5rem); }
  .woocommerce-checkout .woocommerce-billing-fields .form-row-first { margin-right: 1rem; }
  .woocommerce-checkout .woocommerce-billing-fields .form-row-wide { width: 100%; }
}

/* the age-and-terms declaration above the pay button (mu-plugins/letstudy-invoice.php) */
.letstudy-declaration { display: block; margin: 0 0 1rem; font-size: .88rem; line-height: 1.5; }
.letstudy-declaration label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.letstudy-declaration input[type="checkbox"] { margin-top: .2rem; flex: none; accent-color: var(--ls-accent); width: 17px; height: 17px; }
.letstudy-declaration a { font-weight: 600; }
.letstudy-declaration .required { color: var(--ls-accent); text-decoration: none; }

/* Where WooCommerce would draw its login form: a button to the sign-in page (woocommerce/global/form-login.php, myaccount/form-login.php). */
.ls-signin { background: var(--ls-soft); border: 1px solid var(--ls-border); border-radius: var(--ls-radius); padding: 1.1rem 1.25rem; margin: 0 0 1.5rem; }
.ls-signin h2 { margin: 0 0 .4rem; }
.ls-signin p { margin: 0 0 .8rem; }
.ls-signin p:last-child { margin-bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.ls-signin__text { color: var(--ls-muted); }
.ls-signin__alt { font-weight: 600; }