/* WordPress and WooCommerce parts the HTML design did not have: image thumbs, the
   image logo, linked cards, WordPress pagination, page and article text, notices. */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important
}

/* logo image from Customizer > Site Identity */
.logo.has-img img {
    display: block;
    max-height: 48px;
    width: auto;
    height: auto
}

footer .logo.has-img img {
    max-height: 56px
}

/* a long site name or a wide logo image gives way to the header's buttons on phones
   (the design's «قلم» is short; a longer name pushed the menu button off the screen) */
@media (max-width:760px) {
    .bar .logo {
        flex: 0 1 auto;
        min-width: 0
    }

    .bar .logo i {
        flex: none
    }

    .bar .logo span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .bar .logo.has-img img {
        max-width: 100%;
        object-fit: contain
    }
}

/* the newsletter form's 280px minimum is wider than its card on a 320px phone */
@media (max-width:360px) {
    .news form {
        min-width: 0;
        width: 100%
    }

    .news form .field {
        min-width: 0;
        flex: 1
    }
}

/* cards: the whole thumb links to the product, the heart stays a button */
.thumb .thumb-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit
}

.thumb .tag,
.thumb .fav,
.thumb .stock {
    z-index: 2
}

/* the design's heart took the card icon's 3.2rem and overflowed its 34px circle */
.thumb .fav {
    font-size: 1rem
}

.thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit
}

.card h3 a:hover {
    color: var(--primary)
}

a.add {
    display: grid;
    place-items: center;
    flex: none
}

/* the drawer's refreshable part keeps the drawer's column layout */
.cart-inner {
    display: contents
}

.ci-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit
}

.ci-top h4 a:hover {
    color: var(--primary)
}

/* WordPress pagination in the shop pager's look */
.pager a,
.pager span {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-weight: 700;
    transition: .2s;
    display: inline-grid;
    place-items: center
}

.pager a:hover {
    border-color: var(--primary);
    color: var(--primary)
}

.pager .current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff
}

.pager .dots {
    border: 0;
    background: none
}

/* «previous» on the first page and «next» on the last, dimmed like shop.html's disabled buttons */
.pager [aria-disabled="true"] {
    opacity: .4;
    cursor: not-allowed
}

/* pages and articles */
.entry {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: clamp(18px, 4vw, 36px);
    max-width: 880px;
    margin-inline: auto
}

.entry .title {
    margin-bottom: 18px
}

.entry-thumb {
    height: clamp(180px, 32vw, 320px);
    border-radius: 16px;
    margin-bottom: 16px;
    font-size: 4rem;
    overflow: hidden
}

.entry .ameta {
    margin-bottom: 6px
}

.entry-content {
    line-height: 2.1
}

.entry-content > * + * {
    margin-top: 1em
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    line-height: 1.6;
    margin-top: 1.6em
}

.entry-content ul,
.entry-content ol {
    padding-inline-start: 1.4em
}

.entry-content a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px
}

.entry-content table {
    width: 100%;
    border-collapse: collapse
}

.entry-content th,
.entry-content td {
    border: 1px solid var(--border);
    padding: 8px 10px
}

.entry-content blockquote {
    border-inline-start: 4px solid var(--primary);
    padding-inline-start: 14px;
    color: var(--muted)
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--primary);
    border-radius: 14px;
    padding: 12px 16px;
    margin: 0 0 16px
}

.woocommerce-error {
    border-inline-start-color: #dc2626
}

.woocommerce-message .button,
.woocommerce-info .button {
    margin-inline-start: 10px;
    color: var(--primary);
    font-weight: 700
}

/* forms that WooCommerce prints inside pages (order tracking) */
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"] {
    width: 100%;
    max-width: 420px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font: inherit
}

.entry-content button[type="submit"],
.entry-content .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 14px;
    font-weight: 700;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    cursor: pointer
}

/* ---------- account pages (login.html, panel.html) ---------- */

/* notices in the design's boxes */
.notice-box {
    border-radius: 12px;
    padding: 10px 14px;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.9
}

.notice-box p + p {
    margin-top: 4px
}

.notice-box.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca
}

.notice-box.ok {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0
}

body.dark .notice-box.error,
[data-theme="dark"] .notice-box.error {
    background: #3b1215;
    color: #fecaca;
    border-color: #7f1d1d
}

body.dark .notice-box.ok,
[data-theme="dark"] .notice-box.ok {
    background: #0c2e22;
    color: #a7f3d0;
    border-color: #065f46
}

.logo-box.has-img {
    background: none;
    box-shadow: none
}

.logo-box.has-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.form-note {
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 16px;
    opacity: .85
}

/* panel */
.app .brand-img {
    max-height: 40px;
    width: auto
}

.app #pform {
    display: block
}

.app #pform .card + .card {
    margin-top: 16px
}

.app .fgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.app .form-actions {
    margin-top: 16px
}

.app a.chip {
    text-decoration: none;
    display: inline-flex;
    align-items: center
}

.app table a {
    color: var(--g-text);
    font-weight: 700
}

.app .addr {
    position: relative
}

.app .addr-del {
    display: block;
    position: absolute;
    top: 12px;
    inset-inline-end: 12px
}

.app .addr .del {
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
    width: auto
}

.app .addr .del:hover {
    color: var(--red)
}

.app .prod a.ph {
    text-decoration: none;
    overflow: hidden
}

.app .prod .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.app .coupon-card,
.app .order-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px
}

.app .order-head {
    justify-content: space-between
}

.app .order-head h3 {
    margin: 0
}

.app .coupon-card .ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--g-tint);
    color: var(--g-text);
    display: grid;
    place-items: center;
    flex: none
}

.app .coupon-card b,
.app .coupon-card .code {
    display: block
}

.app .coupon-card .code {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--g-text)
}

.app .pager-row {
    display: flex;
    justify-content: space-between;
    margin-top: 16px
}

.app .view > .card + .card {
    margin-top: 16px
}

.app a.brand,
.app a.ib {
    color: inherit;
    text-decoration: none
}

/* a code people type: Western digits, not the FaNum font's Persian ones */
.app .coupon-card .code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
}

.app tfoot th {
    text-align: start;
    font-weight: 500
}

.phone-pop .more-contact {
    display: block;
    text-align: center;
    font-size: 13px;
    margin-top: 8px;
    color: var(--muted)
}

@media (max-width:860px) {
    .app .fgrid {
        grid-template-columns: 1fr
    }
}

/* login.html centres its card in a flex <body>: WooCommerce's wrapper takes the card's place */
.ghalam-login .woocommerce {
    width: 100%;
    max-width: 400px
}

.ghalam-login .woocommerce .container {
    max-width: none
}

/* The toast of blog.html and post.html (deep green, white) on every storefront page: index.html, shop.html and
   product.html have the same element with no style, so «به سبد خرید اضافه شد» fell below the footer as a plain line.
   The panel keeps panel.html's own. Above the drawers, which also send messages. */
body:not(.ghalam-panel) #toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 100010;
    /* its own width up to 90vw: from «left: 50%» alone a long message wrapped at half the screen on phones */
    width: max-content;
    max-width: 90vw;
    padding: 10px 22px;
    border-radius: 14px;
    background: var(--deep, #064e3b);
    color: #fff;
    font-size: .92rem;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition: opacity .25s, transform .25s
}

body:not(.ghalam-panel) #toast.show {
    opacity: 1;
    transform: translate(-50%, 0)
}

a.logo-box {
    text-decoration: none;
    color: inherit
}

/* a long view title («علاقه‌مندی‌ها») gives way to the top bar's buttons on phones */
.app .top h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* …but only after the buttons give up a few pixels, as in panel.html, where «داشبورد» and «سفارش‌ها» fit in
   full at 375; panel.html squeezes them on (into narrow ovals) for longer titles, the theme stops at 34px */
.app .top > :not(h1) {
    flex-shrink: 1000
}

.app .top .menu-btn,
.app .top .avatar {
    min-width: 34px
}

/* the footer's three brand icons, inline SVG instead of the brands font */
.social .brand-ic {
    width: 1em;
    height: 1em;
    fill: currentColor
}

/* the current page in the header menu (shop.html marks «فروشگاه» this way) */
#nav a[aria-current="page"] {
    background: var(--surface-2);
    color: var(--primary-dark)
}

/* in the dark, only a parent with a submenu turns to --primary, as index.html's open submenu does */
[data-theme="dark"] #nav .has-sub > a[aria-current="page"] {
    color: var(--primary)
}

/* an item's own page at the top of its sub-menu, for phones only, where a tap on the item opens the sub-menu
   (inc/menu-walker.php) */
@media (min-width:761px) {
    #nav .sub-self {
        display: none
    }
}

/* main.css styles every nav as the header menu, and below 760px as its drop-down: hidden, absolute under the
   header, white. In shop.html, product.html and post.html that took the breadcrumb and the previous/next box out
   of the page on phones, onto the products and the article's text. The other navs stay in the page's flow; no
   more weight than main.css's nav, so their own display (flex, grid) stays. */
@media (max-width: 760px) {
    :where(body:not(.ghalam-panel, .ghalam-login, .ghalam-checkout)) nav:where(:not(#nav)) {
        position: static;
        display: block;
        max-height: none;
        overflow: visible;
        padding: 0;
        border-bottom: 0;
        background: none
    }
}

/* «.bar {padding: 10px 0}» (main.css) and «.shop-top {padding: 26px 0 8px}» (shop.css) took .wrap's side
   padding from the header and from the top of the shop, product and cart pages: below the wrap's 1180px plus
   its padding, the logo, the buttons, the title and its text touched the screen's edges */
@media (max-width: 1219px) {
    .wrap.bar,
    .wrap.shop-top {
        padding-inline: 20px
    }
}

/* …but not the header between 761px and 900px, where the design's menu needs the whole bar */
@media (min-width: 761px) and (max-width: 900px) {
    .wrap.bar {
        padding-inline: 0
    }
}

/* …and only 10px on a 320px phone, where 20px would cut the shop's name short beside the four buttons */
@media (max-width: 359px) {
    .wrap.bar {
        padding-inline: 10px
    }
}

/* the slider's arrows point outward: «قبلی» (›) on the right, «بعدی» (‹) on the left, as the
   keys and swipe already go; index.html had them the other way round, pointing inward */
.arrow.prev {
    inset-inline-start: 18px;
    inset-inline-end: auto
}

.arrow.next {
    inset-inline-end: 18px;
    inset-inline-start: auto
}

@media (max-width:560px) {
    .arrow.prev {
        inset-inline-start: 12px
    }

    .arrow.next {
        inset-inline-end: 12px
    }
}

/* ---------- product page ---------- */
.main-thumb .thumb-img {
    border-radius: inherit
}

.product-gallery .thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap
}

.thumb-btn {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--border);
    padding: 0;
    background: var(--surface);
    cursor: pointer
}

.thumb-btn.on {
    border-color: var(--primary)
}

.thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pi-desc p + p {
    margin-top: .6em
}

.product-more {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: clamp(18px, 3vw, 28px);
    margin-top: 22px
}

.product-more h2,
.product-more .woocommerce-Reviews-title {
    font-size: 1.15rem;
    margin-bottom: 12px
}

.product-more .commentlist {
    list-style: none
}

.product-more .commentlist li + li {
    border-top: 1px solid var(--border);
    margin-top: 12px;
    padding-top: 12px
}

.product-more .avatar {
    display: none
}

.product-more .star-rating {
    display: none
}

.product-more textarea,
.product-more input[type="text"],
.product-more input[type="email"] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font: inherit
}

.product-more .comment-form > p {
    margin-top: 12px
}

.product-more .stars a {
    color: #f5a623;
    margin-inline-end: 4px
}

.product-more .form-submit input {
    margin-top: 6px;
    padding: 10px 22px;
    border-radius: 14px;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    cursor: pointer
}

.pi-variable table {
    width: 100%
}

.pi-variable select {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font: inherit
}

/* the review form's star picker (WooCommerce draws it as links «۱ از ۵ ستاره»…) as stars */
.product-more p.stars a {
    position: relative;
    display: inline-block;
    width: 1.5em;
    height: 1.4em;
    font-size: 1.1rem;
    overflow: hidden;
    color: transparent;
    text-decoration: none
}

.product-more p.stars a::before {
    content: "\f005";
    position: absolute;
    inset: 0;
    font: var(--fa-font-regular);
    font-size: 1.1rem;
    color: #f5a623;
    line-height: 1.4
}

.product-more p.stars:hover a::before,
.product-more p.stars.selected a::before {
    font: var(--fa-font-solid);
    font-size: 1.1rem;
    line-height: 1.4
}

.product-more p.stars a:hover ~ a::before,
.product-more p.stars.selected a.active ~ a::before {
    font: var(--fa-font-regular);
    font-size: 1.1rem;
    line-height: 1.4
}

.product-more textarea {
    min-height: 110px;
    height: 110px
}

/* ---------- checkout (checkout.html on WooCommerce's checkout) ---------- */
.ghalam-checkout #page > .woocommerce {
    display: contents
}

.ghalam-checkout form.checkout {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 24px;
    align-items: start
}

.ghalam-checkout form.checkout > .woocommerce-NoticeGroup,
.ghalam-checkout .notices-row {
    grid-column: 1/-1
}

.ghalam-checkout header a.logo {
    text-decoration: none;
    color: inherit
}

.ghalam-checkout .logo-img {
    max-height: 40px;
    width: auto
}

.ghalam-checkout h2 > i {
    margin-inline-end: 8px;
    color: var(--brand)
}

.ghalam-checkout .opt > i {
    color: var(--brand);
    font-size: 1.2rem
}

.ghalam-checkout .pay i,
.ghalam-checkout .coupon button i {
    margin-inline-end: 6px
}

.ghalam-checkout .grid2 .form-row {
    margin: 0
}

/* every field is required: a red star beside each (the client's wish of 9 Aban), and no «(اختیاری)» */
.ghalam-checkout .form-row .required {
    color: var(--danger);
    font-weight: 700;
    text-decoration: none
}

.ghalam-checkout .form-row .optional {
    display: none
}

.ghalam-checkout .form-row .woocommerce-input-wrapper {
    display: block
}

/* a textarea sits on the wrapper's text line: no gap under it before its message */
.ghalam-checkout .form-row textarea {
    vertical-align: top
}

.ghalam-checkout .ghalam-hidden {
    display: none
}

.ghalam-checkout .form-row.invalid input,
.ghalam-checkout .form-row.invalid select,
.ghalam-checkout .form-row.invalid textarea,
.ghalam-checkout .form-row.woocommerce-invalid input,
.ghalam-checkout .form-row.woocommerce-invalid select,
.ghalam-checkout .form-row.woocommerce-invalid textarea {
    border-color: var(--danger)
}

.ghalam-checkout .form-row .err {
    display: none;
    color: var(--danger);
    font-size: .8rem
}

.ghalam-checkout .form-row.invalid .err {
    display: block
}

.ghalam-checkout ul.payment_methods {
    list-style: none;
    margin: 0;
    padding: 0
}

.ghalam-checkout ul.payment_methods li + li {
    margin-top: 10px
}

.ghalam-checkout .payment_box {
    padding: 10px 14px 0;
    font-size: .9rem;
    color: var(--muted)
}

.ghalam-checkout .gw-icon {
    margin-inline-start: auto
}

.ghalam-checkout .gw-icon img {
    max-height: 28px;
    width: auto
}

.ghalam-checkout .ship-wait {
    color: var(--muted);
    font-size: .9rem
}

/* «اطلاعات ثبت‌شده» with nothing to choose: the design's empty-state line, a sign-in link for a guest */
.ghalam-checkout #savedBox .empty {
    padding: 14px 0 4px
}

.ghalam-checkout #savedBox .empty a,
.ghalam-checkout .woocommerce-terms-and-conditions-wrapper a {
    color: var(--brand)
}

.ghalam-checkout #savedBox .empty a {
    font-weight: 700
}

.ghalam-checkout .row.discount .rm-coupon {
    margin-inline-start: 6px;
    color: var(--danger);
    font-size: .8rem;
    font-weight: 400
}

/* WooCommerce hides the radio when only one payment method is on; the design always shows it */
.ghalam-checkout .payment_methods input.input-radio {
    display: inline-block !important
}

/* WooCommerce's privacy line under the totals (Settings > Accounts & Privacy), small as a footnote */
.ghalam-checkout .woocommerce-privacy-policy-text {
    margin-top: 12px;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.8
}

.ghalam-checkout .woocommerce-privacy-policy-text p {
    margin: 0
}

.ghalam-checkout .notices-row:not(:has(.notice-box)) {
    display: none
}

.ghalam-checkout .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit
}

.ghalam-checkout .woocommerce-terms-and-conditions-wrapper {
    margin: 12px 0;
    font-size: .9rem
}

.ghalam-checkout .woocommerce-error {
    border-inline-start-color: var(--danger)
}

.ghalam-checkout .woocommerce-message,
.ghalam-checkout .woocommerce-info {
    border-inline-start-color: var(--brand)
}

.ghalam-checkout .blockUI.blockOverlay {
    border-radius: 16px
}

.ghalam-checkout .success .btn-line {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 22px;
    border-radius: 10px;
    border: 1px solid var(--brand);
    color: var(--brand);
    font-weight: 700;
    text-decoration: none
}

.ghalam-checkout .thanks-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap
}

/* the gateways' own thank-you lines; nothing printed (only the template's spaces): no room taken */
.ghalam-checkout .thanks-extra:not(:has(*)) {
    display: none
}

.ghalam-checkout .thanks-extra {
    margin-top: 16px;
    text-align: start
}

.ghalam-checkout .tick.fail {
    background: var(--danger)
}

@media (max-width:860px) {
    .ghalam-checkout form.checkout {
        grid-template-columns: 1fr
    }

    .ghalam-checkout form.checkout aside {
        order: -1
    }
}

/* ---------- cart page: the drawer's list in a card ---------- */
.cart-page {
    max-width: 640px;
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.cart-page .cart-body {
    flex: none;
    overflow: visible
}

/* WooCommerce rewrites the order button's text when the payment method changes: the lock is CSS */
.ghalam-checkout #place_order::before {
    content: "\f023";
    font: var(--fa-font-solid);
    margin-inline-end: 6px
}

.ghalam-checkout .woocommerce-notices-wrapper:empty,
.ghalam-checkout .notices-row:not(:has(.notice-box)) {
    display: none
}

/* the price slider is dragged sideways: no browser panning may take a pen's or a finger's sideways move */
#priceRange {
    touch-action: pan-y
}

/* fields only robots fill (clipped in place: a far offset would widen an RTL page) */
.hp-field {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap
}

/* WordPress's admin bar, which signed-in managers see: fixed, 32px high (46px on phones), and scrolled away with
   the page below 600px. Sticky parts start below it; drawers, overlays and dialogs open over it. */
.admin-bar {
    --ghalam-bar: var(--wp-admin--admin-bar--height, 32px)
}

@media (max-width:600px) {
    .admin-bar {
        --ghalam-bar: 0px
    }
}

/* the page's own header (the site's and checkout.html's), not a header inside the page: the panel's title bar
   (panel.css: position: relative) would move 32px down onto the first card */
.admin-bar > header {
    top: var(--ghalam-bar)
}

/* post.html's header scrolls away with the page (post.css: position: relative; top: auto); its reading bar is the
   part that stays, under the admin bar */
.admin-bar.ghalam-post > header {
    top: auto
}

.admin-bar .po-progress {
    top: var(--ghalam-bar)
}

.admin-bar .product-gallery {
    top: calc(90px + var(--ghalam-bar))
}

.admin-bar .cart-overlay,
.admin-bar .filter-overlay,
.admin-bar .side-overlay {
    z-index: 100000
}

.admin-bar .cart-drawer {
    z-index: 100001
}

.admin-bar .bye {
    z-index: 100002
}

@media (min-width:901px) {
    .admin-bar .filters {
        top: calc(86px + var(--ghalam-bar));
        max-height: calc(100vh - 106px - var(--ghalam-bar))
    }
}

@media (max-width:900px) {
    .admin-bar .filters {
        z-index: 100001
    }
}

@media (min-width:861px) {
    .admin-bar .side {
        top: var(--ghalam-bar);
        height: calc(100vh - var(--ghalam-bar))
    }
}

@media (max-width:860px) {
    .admin-bar .side {
        z-index: 100001
    }
}

/* ---------- articles (blog.html, post.html) ---------- */

/* a post's featured image fills the design's card, sheet and related card */
.ar-thumb,
.po-sheet,
.po-rthumb {
    position: relative;
    overflow: hidden
}

/* sharing: the theme's own brand icons */
.po-share .brand-ic {
    width: 1.05em;
    height: 1.05em;
    fill: currentColor
}

/* the article text from WordPress's editor */
.po-prose ul:not(.po-check),
.po-prose ol {
    padding-inline-start: 1.6em
}

.po-prose li + li {
    margin-top: .3em
}

.po-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 18px
}

.po-prose figure {
    margin-inline: 0
}

.po-prose figcaption {
    margin-top: 6px;
    color: var(--muted);
    font-size: .85rem;
    text-align: center
}

/* «po-note» on an editor paragraph or group: the lightbulb comes from here, the first bold line is the title */
.po-prose .po-note:not(:has(> i)) {
    display: block;
    position: relative;
    padding-inline-start: 54px
}

.po-prose .po-note:not(:has(> i))::before {
    content: "\f0eb";
    position: absolute;
    inset-inline-start: 20px;
    top: 16px;
    color: var(--primary);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 2.1
}

.po-prose .po-note:not(:has(> i)) > strong:first-child,
.po-prose .po-note:not(:has(> i)) > b:first-child {
    display: block;
    margin-bottom: 2px
}

/* the editor's table block draws its own dark borders (3px under the head); in an article the design's frame
   and dashed rows are the table's, and its «stripes» style takes the design's colour, dark mode too */
.po-prose .wp-block-table thead,
.po-prose .wp-block-table tfoot,
.po-prose .wp-block-table th,
.po-prose .wp-block-table td {
    border: 0
}

.po-prose .wp-block-table tbody tr + tr td {
    border-top: 1px dashed var(--border)
}

.po-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: var(--surface-2)
}

/* a long title on the previous/next cards wraps (the header menu's nowrap ran it past the card) */
.po-pn a {
    white-space: normal
}

/* the article's own page links (<!--nextpage-->) in the shop pager's row */
.po-prose .pager {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px
}