button {
    cursor: pointer;
}

.sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.sub-menu.open {
    max-height: 600px;
}

/* allauth's account pages (login, signup, password reset, email management).
   Their templates own the `content` block, so the chrome cannot wrap them from
   a template — see openstudio/templates/allauth/layouts/base.html. */
.account-page main {
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
    padding: 3rem 1rem;
}

.account-page main form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.account-page main h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* allauth renders its forms through Django's `as_p`, so the inputs and buttons
   arrive classless. Tailwind v4's preflight strips their default border/background,
   which would leave them invisible — style them here, scoped to account pages. */
.account-page main label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.account-page main input[type="text"],
.account-page main input[type="email"],
.account-page main input[type="password"],
.account-page main input[type="search"],
.account-page main input[type="url"],
.account-page main input[type="number"],
.account-page main input[type="tel"],
.account-page main input[type="date"],
.account-page main textarea,
.account-page main select {
    display: block;
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    background-color: #fff;
    color: #181717;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.account-page main input:focus,
.account-page main textarea:focus,
.account-page main select:focus {
    outline: none;
    border-color: #4ecca3;
    box-shadow: 0 0 0 1px #4ecca3;
}

.account-page main input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.account-page main .helptext {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.account-page main .helptext a {
    color: #4ecca3;
    text-decoration: underline;
}

.account-page main .errorlist {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 0.75rem;
    color: #AF6663;
}

.account-page main button,
.account-page main input[type="submit"] {
    cursor: pointer;
    border: none;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    background-color: #4ecca3;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
}

.account-page main button:hover,
.account-page main input[type="submit"]:hover {
    background-color: #3dbb91;
}

/* Product descriptions arrive as HTML from the supplier feed — see the
   `description_html` filter in home/templatetags/shop_extras.py, which decides
   what is allowed through. The markup gets here classless, and Tailwind v4's
   preflight has stripped the list bullets, heading sizes and paragraph margins
   the browser would otherwise supply, so restore them here — same reason the
   account pages above need their own styling. The typography plugin that would
   normally do this is not part of the browser build the site loads. */
.product-description p {
    margin: 0 0 0.75rem;
}

.product-description ul,
.product-description ol {
    padding-left: 1.25rem;
    margin: 0 0 0.75rem;
}

.product-description ul {
    list-style: disc;
}

.product-description ol {
    list-style: decimal;
}

.product-description li {
    margin-bottom: 0.25rem;
}

.product-description h2,
.product-description h3,
.product-description h4 {
    font-weight: 600;
    color: #181717;
    margin: 1.25rem 0 0.5rem;
}

.product-description h2 {
    font-size: 1.125rem;
}

.product-description h3 {
    font-size: 1rem;
}

.product-description h4 {
    font-size: 0.9375rem;
}

.product-description strong,
.product-description b {
    font-weight: 600;
    color: #181717;
}

.product-description em,
.product-description i {
    font-style: italic;
}

.product-description a {
    color: #4ecca3;
    text-decoration: underline;
}

.product-description a:hover {
    color: #3dbb91;
}

/* The block already carries its own bottom padding from the template. */
.product-description > :first-child {
    margin-top: 0;
}

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