/*
 * Every page: fonts, palette, the page frame that the Customizer used to print, and what more than one
 * page type shows (header, menu, search, cart drawer, footer, product card, badges, section titles,
 * archive titles and page numbers, the medical reviewer card). Loaded before the page type's own file
 * (inc/styles.php).
 */

/* === From Shoptimizer === */

/*
 * The rules of Shoptimizer's stylesheets (main, product, comments, cross-sells carousel) that our pages
 * still use, taken over when the theme stopped loading them (theme-plan Step 12a): resets, page frame,
 * header and footer, notices, buttons and forms, product cards. Rules only the product page uses are
 * at the top of product.css. First in the file, where Shoptimizer's files came; its rtl.css is at the end.
 */

*,
::after,
::before {
    box-sizing: border-box;
}

html {
    font-family: system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

body {
    margin: 0;
}

hr {
    height: 0;
    color: inherit;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
pre,
samp {
    font-family: ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

table {
    text-indent: 0;
    border-color: inherit;
}

button,
select {
    text-transform: none;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
    -webkit-appearance: button;
}

::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

:-moz-focusring {
    outline: ButtonText dotted 1px;
}

:-moz-ui-invalid {
    box-shadow: none;
}

legend {
    padding: 0;
}

progress {
    vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

summary {
    display: list-item;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overflow-wrap: break-word;
    scrollbar-gutter: stable;
}

audio,
canvas,
embed,
iframe,
img,
object,
video {
    display: block;
    vertical-align: middle;
}

canvas,
img,
picture,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4 {
    text-wrap: pretty;
}

a,
button,
input {
    touch-action: manipulation;
}

body,
button,
input,
textarea {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

menu,
ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

[hidden] {
    display: none;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

[role="button"],
button {
    cursor: pointer;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

:disabled {
    cursor: default;
}

button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::after,
    ::before {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-delay: 0s !important;
        transition-duration: 0s !important;
    }
}

mark {
    background-color: transparent;
}

address {
    font-style: normal;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

a {
    color: #2c2d33;
    background-color: transparent;
    text-decoration: none;
    transition: color 0.2s;
}

a:active,
a:hover {
    outline: 0;
}

a,
button,
input {
    touch-action: manipulation;
}

cite {
    display: block;
    margin-top: 1rem;
    font-style: normal;
}

mark {
    color: #000;
    background: #ff0;
}

small {
    font-size: 75%;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

optgroup {
    margin: 0;
    color: inherit;
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    margin: 1.618em 0;
    padding: 1em 1.618em 1.618em;
    border: 0;
}

legend {
    border: 0;
}

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    font-size: 15px;
}

legend,
ol,
td,
th,
ul {
    padding: 0;
}

address,
p,
table {
    margin: 0 0 1.21575rem;
}

p:empty {
    margin: 0;
}

ol,
ul {
    margin: 0 0 1.41575em 20px;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li > ol,
li > ul {
    margin-bottom: 0;
    margin-left: 1em;
}

b,
dt,
strong {
    font-weight: 600;
}

dd {
    margin: 0 0 1.618em;
}

pre {
    overflow: auto;
    max-width: 100%;
    margin-bottom: 1.618em;
    padding: 1.618em;
    background: rgba(0,0,0,.1);
    font-family: "Courier 10 Pitch",Courier,monospace;
}

code,
kbd,
tt,
var {
    padding: .202em .5407911001em;
    background-color: rgba(0,0,0,.05);
    font-family: Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

ins,
mark {
    background: 0 0;
    font-weight: 400;
    text-decoration: none;
}

table td,
table th {
    text-align: left;
    vertical-align: middle;
}

table caption,
table th {
    font-weight: 600;
}

embed,
iframe,
object,
select,
video {
    max-width: 100%;
}

button,
input,
select {
    vertical-align: baseline;
}

button {
    border: none;
}

input[type="number"] {
    -webkit-appearance: none;
    border-radius: 0;
}

.required {
    border-bottom: 0;
    color: #df0202;
    text-decoration: none;
}

fieldset legend {
    width: calc(100% + 60px);
    margin-left: -30px;
    padding: 10px 30px;
    color: #111;
    font-size: 20px;
    font-weight: 600;
}

select {
    width: 100%;
    padding: 0 40px 0 0.7em;
    padding-right: 40px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg width='1792' height='1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ctitle%3Ebackground%3C/title%3E%3Crect fill='none' id='canvas_background' height='402' width='582' y='-1' x='-1'/%3E%3C/g%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath fill='%23888' id='svg_1' d='m1408,704q0,26 -19,45l-448,448q-19,19 -45,19t-45,-19l-448,-448q-19,-19 -19,-45t19,-45t45,-19l896,0q26,0 45,19t19,45z'/%3E%3C/g%3E%3C/svg%3E") calc(100% - 12px) 12px no-repeat;
    margin: 0;
    background-size: 15px 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    border: 1px solid #d2d6dc;
    border-radius: 0.3rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    height: 40px;
}

select:focus {
    outline: 0;
}

.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    display: inline-block;
    padding: 0.8180469716em 1.41575em;
    border: 0;
    border-color: #43454b;
    border-radius: 4px;
    font-size: clamp(0.875rem,0.8115rem + 0.2033vw,0.9375rem);
    outline: 0;
    background: 0 0;
    background-color: #43454b;
    font-weight: 600;
    text-shadow: none;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    transition: 0.2s;
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
    color: #fff;
    font-weight: 600;
}

input[type="checkbox"],
input[type="radio"] {
    padding: 0;
}

input[type="tel"],
input[type="text"],
input[type="url"] {
    width: 100%;
}

input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"] {
    outline: 0;
    margin-bottom: 0;
    border: 1px solid #d2d6dc;
    border-radius: 0.3rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    height: 40px;
    padding: 0 0.7em;
}

input[type="search"] {
    padding-left: 43px;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

input[type="search"]::-moz-placeholder {
    color: #555;
}

input[type="search"]::placeholder {
    color: #555;
}

.dy-header-search input[type="search"] {
    border: 0;
    background: #f8f8f8;
    border: 1px solid #f8f8f8;
}

.dy-header-search form:before {
    left: 15px;
    top: 50%;
    margin-top: -7px;
    width: 16px;
    height: 16px;
}

.woocommerce-product-search:before {
    width: 18px;
    height: 18px;
    content: "";
    display: inline-block;
    position: absolute;
    z-index: 1;
    top: 0.7em;
    left: 0.8em;
    background-color: #ccc;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

textarea {
    overflow: auto;
    border: 1px solid #d2d6dc;
    border-radius: 0.25rem;
    padding: 0.8em;
    outline: 0;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    width: 100%;
    padding-left: 0.875em;
    vertical-align: top;
    height: 150px;
}

.input-text:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus,
textarea:focus {
    border-color: #999;
}

.comment-respond p a,
.comment-text a,
.entry-content article a,
.dy-product-widget a,
.product_meta a,
body:not(.woocommerce-account):not(.woocommerce-order-received) .entry-content p:not(.dy-card-cats) a:not(.button) {
    text-decoration: underline;
    text-underline-offset: 0.12em;
    text-decoration-thickness: 0.75px;
}

hr {
    height: 0;
    margin-top: 38px;
    margin-bottom: 38px;
    border: 0;
    border-top: 1px solid #e9e9e9;
}

h1,
h2 {
    margin: 0 0 1rem;
}

h3,
h4,
h5,
h6 {
    margin: 0 0 0.5rem;
}

h5 {
    font-size: 1.2em;
}

h6 {
    font-size: 1em;
}

blockquote+h2,
blockquote+h3,
blockquote+h4,
blockquote+header h2,
form+h2,
form+h3,
form+h4,
form+header h2,
ol+h2,
ol+h3,
ol+h4,
ol+header h2,
p+h2,
p+h3,
p+h4,
p+header h2,
table+h2,
table+h3,
table+h4,
table+header h2,
ul+h2,
ul+h3,
ul+h4,
ul+header h2 {
    margin-top: 1.2906835em;
}

.content-area blockquote {
    position: relative;
    margin: 2.5em 40px;
}

.content-area blockquote p {
    margin-bottom: 0;
}

.content-area blockquote::before {
    position: absolute;
    top: -12px;
    left: -40px;
    margin: 0;
    color: #ccc;
    font-family: Georgia,serif;
    font-size: 50px;
    content: "“";
}

.content-area h3 + blockquote {
    margin-top: 10px;
}

.entry-content ol ol,
.entry-content ul ul {
    margin: 1em 0 1em 2em;
}

.entry-content ol li {
    padding-left: 6px;
}

@media (max-width: 768px) {
    .entry-content,
    .site {
        font-size: 15px;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    .site h1 {
        font-size: 30px;
        letter-spacing: -0.01em;
    }

    .site h2 {
        font-size: clamp(1.375rem,0.9939rem + 1.2195vw,1.75rem);
        letter-spacing: -0.01em;
    }
}

body.error404 h1 {
    margin-bottom: 0.5rem;
}

@media (min-width: 993px) {
    .site-header .dy-wrap {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .site-header {
        position: relative;
        z-index: 20;
    }

    .site-header .site-branding {
        line-height: 1;
    }

    .site-header .custom-logo-link img {
        width: auto;
    }

    .site-header .dy-header-search {
        margin-left: 3em;
        flex-grow: 1;
    }

    .dy-header-search input {
        padding-top: 1.45rem;
        padding-bottom: 1.45rem;
    }

    .site-header .widget {
        margin-bottom: 0;
    }

    .site-branding a {
        color: #111;
        font-weight: bold;
    }

    .site-branding p {
        margin-top: 5px;
        margin-bottom: 0;
        color: #555;
        font-size: 12px;
    }

    .dy-header-bar {
        display: flex;
    }
}

@media (max-width: 1060px) and (min-width: 993px) {
    .site-header .dy-header-search {
        width: 100px;
    }
}

@media (max-width: 992px) {
    .dy-header-bar {
        position: relative;
    }

    .site-branding {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 70px;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .site-header .custom-logo-link img {
        width: auto;
    }

    .site-branding p {
        margin: 5px 0 -3px;
        font-size: 11px;
        line-height: 1.22;
        display: none;
    }

    .site-header .dy-header-cart {
        position: absolute;
        z-index: 2;
        right: 15px;
    }

    .site-header .dy-header-bar.dy-wrap {
        padding-right: 0;
        padding-left: 0;
    }

    .site-header .dy-header-search {
        display: block;
        padding: 0 1em 1em;
        height: 60px;
        background-color: #fff;
        box-shadow: 0 3px 10px -5px rgba(0,0,0,0.18);
        position: relative;
        z-index: 1;
    }

    .site-header .dy-header-bar.dy-wrap {
        margin-bottom: 60px;
    }

    .dy-sticky-header .site-header {
        position: sticky;
        z-index: 9;
        top: 0;
        box-shadow: 0 1px 15px rgba(0,0,0,0.08);
    }
}

@media (max-width: 480px) {
    .site .site-branding p {
        max-width: 240px;
        line-height: 1.2;
    }
}

footer:last-child:not(:only-of-type) {
    margin-top: -3rem;
}

@media (min-width: 993px) {
    .dy-wrap {
        box-sizing: content-box;
        margin-right: auto;
        margin-left: auto;
        max-width: 1170px;
        padding-right: 2.617924em;
        padding-left: 2.617924em;
    }

    .dy-wrap:after {
        display: block;
        clear: both;
        content: "";
    }
}

@media (max-width: 992px) {
    .dy-wrap {
        padding-right: 1em;
        padding-left: 1em;
    }
}

.home .site-content .dy-wrap,
.home .woocommerce-message {
    max-width: inherit;
}

.home .site-content .dy-wrap {
    padding: 0;
}

.site-content {
    position: relative;
}

.site-content:focus {
    outline: 0;
}

@media (min-width: 993px) {
    .site-content:after {
        display: block;
        visibility: hidden;
        position: absolute;
        z-index: 5;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        background: rgba(0,0,0,0.7);
        content: "";
        transition: opacity 0.3s,visibility 0.3s;
        pointer-events: none;
    }

    ul.products li.product {
        align-self: flex-start;
    }
}

ul.products {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-bottom: 0;
    clear: both;
}

ul.products li.product {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
    list-style: none;
}

@media (min-width: 993px) {
    ul.products li.product:not(.product-category) {
        padding-bottom: 40px;
    }
}

@media (max-width: 992px) {
    ul.products {
        display: grid;
        grid-template-columns: repeat(2,minmax(10px,1fr));
        -moz-column-gap: 20px;
        column-gap: 20px;
        row-gap: 30px;
        width: 100%;
        margin-left: 0;
    }

    ul.products li.product {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        padding: 0;
        margin-bottom: 0;
    }

    ul.products li.product .button {
        margin-top: auto;
    }
}

.woocommerce-breadcrumb {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: clamp(0.75rem,0.6547rem + 0.3049vw,0.84375rem);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #666;
}

@media (min-width: 993px) {
    .woocommerce-breadcrumb {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

.woocommerce-breadcrumb p {
    margin: 0;
}

.woocommerce-breadcrumb a,
.woocommerce-breadcrumb a:hover {
    color: #111;
}

.woocommerce-breadcrumb a:hover {
    text-decoration: underline;
    text-decoration-thickness: .5px;
    text-decoration-color: #111;
    text-underline-offset: 0.18em;
}

.woocommerce-breadcrumb a:first-of-type:before {
    display: none;
}

.woocommerce-breadcrumb .dy-crumb-sep {
    display: inline-block;
    position: relative;
    top: -1px;
    padding: 0 0.8em;
    opacity: 0.4;
    font-size: 0.8em;
}

body.single-product:has(:not(.woocommerce-breadcrumb)) .site-main,
body:has(:not(.woocommerce-breadcrumb)) .site-content {
    padding-top: 2rem;
}

body:has(.woocommerce-breadcrumb) .site-content {
    padding-top: 0;
}

.woocommerce-cart .woocommerce-breadcrumb {
    display: none;
}

.button:disabled,
button:disabled,
input[type=button]:disabled,
input[type=reset]:disabled,
input[type=submit]:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.button:disabled:hover,
button:disabled:hover,
input[type=button]:disabled:hover,
input[type=reset]:disabled:hover,
input[type=submit]:disabled:hover {
    opacity: 0.35;
}

.ajax_add_to_cart.add_to_cart_button:after,
.single-product .product form.cart .single_add_to_cart_button:after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
    opacity: 0;
    transition: opacity;
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255,255,255,0.3);
    border-left-color: #fff;
    border-radius: 50%;
    vertical-align: middle;
}

@media (max-width: 992px) {
    ul.products li.product .button {
        opacity: 1;
    }
}

@media (min-width: 993px) {
    .dy-header-cart {
        line-height: 60px;
        margin-left: auto;
    }

    .site-header .dy-header-cart {
        display: none;
        width: auto;
    }
}

.dy-iconnav {
    display: none;
}

@media (min-width: 993px) {
    .dy-iconnav {
        display: block;
        float: right;
        margin-left: auto;
        padding-left: 1.2em;
    }

    .dy-iconnav .menu {
        margin-right: -15px;
    }

    .dy-iconnav ul {
        margin: 0;
    }

    .dy-iconnav ul li {
        display: inline-block;
        position: relative;
    }

    .dy-iconnav ul li a {
        position: relative;
        display: block;
        padding: 0.7em 0.875em 0;
        color: #111;
        font-size: 14px;
    }

    .dy-iconnav .menu li:not(.ri) a {
        padding-top: 35px;
    }

    .dy-iconnav [class*=" ri-"],
    .dy-iconnav [class^=ri-] {
        -webkit-font-smoothing: inherit;
    }

    .dy-iconnav .dy-icon {
        position: absolute;
        top: 0;
        left: 50%;
        top: 5px;
        transform: translate(-50%,0);
    }

    .dy-iconnav .dy-icon svg {
        width: 28px;
        height: 28px;
    }

    .dy-iconnav .dy-icon svg path {
        stroke-width: 1.5px;
    }

    .dy-iconnav .menu-item {
        padding: 0 5px;
        border-left: 1px solid #eee;
    }

    .dy-iconnav .menu-item:first-child {
        border: 0;
    }
}

@media (max-width: 992px) {
    .dy-header-search {
        display: none;
    }
}

.woocommerce-message {
    max-width: 1170px;
    margin-bottom: 1em;
    background-color: #3bb54a;
    margin-right: auto;
    margin-left: auto;
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    clear: both;
    margin-bottom: 2rem;
    margin-left: 0;
    padding: 1em 1.618em;
    border-left: 0.4180469716em solid rgba(0,0,0,0.15);
    border-radius: 4px;
    font-size: clamp(0.8125rem,0.749rem + 0.2033vw,0.875rem);
    color: #fff;
    outline: 0;
}

ul.woocommerce-error li {
    margin-bottom: 0;
}

.woocommerce-error a,
.woocommerce-info a,
.woocommerce-message a {
    color: #fff;
    transition: 0.2s;
}

.woocommerce-error a:hover,
.woocommerce-info a:hover,
.woocommerce-message a:hover {
    opacity: 0.7;
    color: #fff;
}

.woocommerce-error pre,
.woocommerce-info pre,
.woocommerce-message pre {
    background-color: rgba(0,0,0,0.1);
}

.woocommerce-error {
    list-style: none;
}

.woocommerce-error:focus-visible {
    outline: 0;
}

.woocommerce-info {
    background-color: #3d9cd2;
}

.woocommerce-error {
    background-color: #e2401c;
}

.woocommerce-cart .woocommerce > .woocommerce-error {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.woocommerce-cart:has(.dy-steps) .dy-crumbs .woocommerce-message {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .woocommerce-cart:has(.dy-steps) .dy-crumbs .woocommerce-message {
        margin-bottom: 0.5rem;
    }
}

ul.products li.product:focus-within,
ul.products li.product:hover {
    z-index: 2;
}

@media (min-width: 993px) {
    ul.products li.product:not(.product-category):before {
        visibility: hidden;
        position: absolute;
        left: 0;
        opacity: 0;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        content: "";
        transition: 0.2s;
        width: calc(100% + 0px);
        height: calc(100% + 30px);
        margin-top: -15px;
        margin-left: 0;
    }
}

ul.products li.product img {
    display: block;
    width: 100%;
    margin: 0;
    transition: 0.2s ease-in-out;
}

li.product:not(.product-category):hover img {
    transform: scale(0.98);
}

.dy-card-photo {
    position: relative;
    transition: 0.2s ease-in-out;
    width: 100%;
}

li.product:not(.product-category):hover .dy-card-photo img {
    transform: none;
}

li.product:hover .dy-card-photo {
    transform: scale(0.982);
}

.dy-card-text {
    clear: both;
    padding-top: 0.75rem;
}

.dy-card-text * {
    position: relative;
}

@media (max-width: 992px) {
    li.product:hover .dy-card-photo {
        transform: none;
    }

    li.product:not(.product-category) .dy-card-text {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
}

li.product p.dy-card-cats {
    position: relative;
    margin-bottom: 0.25rem;
    -webkit-font-smoothing: antialiased;
    color: #444;
    line-height: 1.4;
    font-size: clamp(0.625rem,0.5615rem + 0.2033vw,0.6875rem);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    margin-bottom: 0;
}

li.product p.dy-card-cats a {
    color: #444;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

ul.products li.product .woocommerce-LoopProduct-link {
    display: block;
    color: #2c2d33;
    -webkit-backface-visibility: hidden;
}

ul.products li.product .price {
    display: block;
    margin-bottom: 0.75rem;
    color: #111;
    font-size: clamp(0.75rem,0.623rem + 0.4065vw,0.875rem);
}

.price del {
    color: #72767c;
    margin-right: 0.25rem;
    font-size: 0.85em;
    font-weight: normal;
}

ul.products li.product .price ins {
    font-weight: bold;
}

ul.products li.product .star-rating {
    margin-bottom: 0.15rem;
    font-size: 0.8em;
}

ul.products li.product .button {
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: calc(100% - 30px);
    height: 40px;
    padding: 0;
    border-radius: 4px;
    opacity: 0;
    font-size: clamp(0.75rem,0.623rem + 0.4065vw,0.875rem);
    font-weight: 600;
    line-height: 40px;
    text-align: center;
    transition: 0.1s;
}

ul.products li.product:focus-within .button,
ul.products li.product:hover .button {
    opacity: 1;
}

@media (max-width: 770px) {
    ul.products li.product .button {
        padding: 8px 12px;
        height: auto;
        line-height: inherit;
    }
}

ul.products li.product:focus-within::before,
ul.products li.product:hover::before {
    visibility: visible;
    opacity: 1;
    transition: 0.2s;
}

@media (max-width: 992px) {
    ul.products li.product .add_to_cart_button,
    ul.products li.product .button {
        position: relative;
        width: 100%;
        opacity: 1;
    }
}

.quantity {
    position: relative;
}

.quantity .qty {
    text-align: center;
}

.quantity input::-webkit-inner-spin-button,
.quantity input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity input[type=number] {
    -moz-appearance: textfield;
}

.product .cart .quantity .input-text:focus-visible {
    position: relative;
    z-index: 1;
}

.dy-wrap.dy-topbar {
    max-width: 100%;
    border-bottom: 1px solid #eee;
}

.dy-topbar-inner form {
    margin: 0;
}

.dy-topbar-inner select {
    font-size: 13px;
    height: 26px;
    background-size: 12px 12px;
    background-position: calc(100% - 7px);
}

.dy-topbar-inner .dy-wrap {
    display: flex;
    padding: 0;
    align-items: center;
}

.dy-topbar-inner p {
    margin: 0;
}

.dy-topbar-inner a {
    transition: 0.2s;
}

.dy-topbar-inner a:hover {
    opacity: 0.85;
}

.dy-topbar-inner svg {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.dy-topbar-start {
    display: flex;
    flex: 1;
}

.dy-topbar-center {
    display: flex;
    justify-content: center;
    max-width: 45%;
    text-align: center;
}

.dy-topbar-end {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 992px) {
    .dy-topbar .dy-topbar-inner {
        padding: 0.6rem 0;
        font-size: clamp(0.75rem,0.623rem + 0.4065vw,0.875rem);
    }

    .dy-topbar-inner {
        border-bottom: none;
    }

    .dy-topbar-inner select {
        font-size: 13px;
    }

    .dy-topbar-inner .dy-wrap {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .dy-wrap.dy-topbar.dy-desktop-only {
        display: none;
    }

    .dy-topbar-inner .dy-wrap,
    .dy-topbar-center,
    .dy-topbar-start,
    .dy-topbar-end {
        display: block;
        text-align: center;
        max-width: 100%;
    }

    .dy-topbar-inner select {
        margin-top: 5px;
        width: 100%;
    }
}

.star-rating {
    height: 1.118em;
    position: relative;
    width: 5.6em;
    overflow: hidden;
}

.star-rating:before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.04893 2.92707C9.34828 2.00576 10.6517 2.00576 10.951 2.92707L12.0206 6.21886C12.1545 6.63089 12.5384 6.90985 12.9717 6.90985H16.4329C17.4016 6.90985 17.8044 8.14946 17.0207 8.71886L14.2205 10.7533C13.87 11.0079 13.7233 11.4593 13.8572 11.8713L14.9268 15.1631C15.2261 16.0844 14.1717 16.8506 13.3879 16.2812L10.5878 14.2467C10.2373 13.9921 9.76269 13.9921 9.4122 14.2467L6.61203 16.2812C5.82832 16.8506 4.77384 16.0844 5.07319 15.1631L6.14276 11.8713C6.27663 11.4593 6.12997 11.0079 5.77949 10.7533L2.97932 8.71886C2.1956 8.14946 2.59838 6.90985 3.5671 6.90985H7.0283C7.46153 6.90985 7.84548 6.63089 7.97936 6.21886L9.04893 2.92707Z' fill='%234B5563'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.04893 2.92707C9.34828 2.00576 10.6517 2.00576 10.951 2.92707L12.0206 6.21886C12.1545 6.63089 12.5384 6.90985 12.9717 6.90985H16.4329C17.4016 6.90985 17.8044 8.14946 17.0207 8.71886L14.2205 10.7533C13.87 11.0079 13.7233 11.4593 13.8572 11.8713L14.9268 15.1631C15.2261 16.0844 14.1717 16.8506 13.3879 16.2812L10.5878 14.2467C10.2373 13.9921 9.76269 13.9921 9.4122 14.2467L6.61203 16.2812C5.82832 16.8506 4.77384 16.0844 5.07319 15.1631L6.14276 11.8713C6.27663 11.4593 6.12997 11.0079 5.77949 10.7533L2.97932 8.71886C2.1956 8.14946 2.59838 6.90985 3.5671 6.90985H7.0283C7.46153 6.90985 7.84548 6.63089 7.97936 6.21886L9.04893 2.92707Z' fill='%234B5563'/%3E%3C/svg%3E");
    -webkit-mask-position: left;
    mask-position: left;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: 1.118em;
    mask-size: 1.118em;
    background: #ccc;
    bottom: 0;
    content: "";
    display: block;
    height: 1.118em;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 5.6em;
}

.star-rating > span {
    display: block;
    text-indent: -10000px;
    width: 5.6em;
    height: 1.118em;
    position: absolute;
    overflow: hidden;
}

.star-rating > span:before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.04893 2.92707C9.34828 2.00576 10.6517 2.00576 10.951 2.92707L12.0206 6.21886C12.1545 6.63089 12.5384 6.90985 12.9717 6.90985H16.4329C17.4016 6.90985 17.8044 8.14946 17.0207 8.71886L14.2205 10.7533C13.87 11.0079 13.7233 11.4593 13.8572 11.8713L14.9268 15.1631C15.2261 16.0844 14.1717 16.8506 13.3879 16.2812L10.5878 14.2467C10.2373 13.9921 9.76269 13.9921 9.4122 14.2467L6.61203 16.2812C5.82832 16.8506 4.77384 16.0844 5.07319 15.1631L6.14276 11.8713C6.27663 11.4593 6.12997 11.0079 5.77949 10.7533L2.97932 8.71886C2.1956 8.14946 2.59838 6.90985 3.5671 6.90985H7.0283C7.46153 6.90985 7.84548 6.63089 7.97936 6.21886L9.04893 2.92707Z' fill='%234B5563'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.04893 2.92707C9.34828 2.00576 10.6517 2.00576 10.951 2.92707L12.0206 6.21886C12.1545 6.63089 12.5384 6.90985 12.9717 6.90985H16.4329C17.4016 6.90985 17.8044 8.14946 17.0207 8.71886L14.2205 10.7533C13.87 11.0079 13.7233 11.4593 13.8572 11.8713L14.9268 15.1631C15.2261 16.0844 14.1717 16.8506 13.3879 16.2812L10.5878 14.2467C10.2373 13.9921 9.76269 13.9921 9.4122 14.2467L6.61203 16.2812C5.82832 16.8506 4.77384 16.0844 5.07319 15.1631L6.14276 11.8713C6.27663 11.4593 6.12997 11.0079 5.77949 10.7533L2.97932 8.71886C2.1956 8.14946 2.59838 6.90985 3.5671 6.90985H7.0283C7.46153 6.90985 7.84548 6.63089 7.97936 6.21886L9.04893 2.92707Z' fill='%234B5563'/%3E%3C/svg%3E");
    -webkit-mask-position: left;
    mask-position: left;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: 1.118em;
    mask-size: 1.118em;
    background-repeat: repeat-x;
    bottom: 0;
    content: "";
    display: block;
    height: 1.118em;
    left: 0;
    position: absolute;
    right: 0;
    text-indent: 10000px;
    top: 0;
}

.widget .widget-title {
    display: block;
    margin-bottom: 0.65em;
    color: #111;
}

.widget ul {
    margin-bottom: 0;
    margin-left: 0;
    list-style: none;
}

.widget ul ul {
    margin-top: 0.7em;
    margin-left: 1em;
}

.site-content .widget li,
.widget li {
    margin-bottom: 0.4em;
    font-size: 14px;
    line-height: 1.45;
}

.widget_product_search form {
    position: relative;
}

.widget_product_search input {
    width: 100%;
}

.dy-header-search input[type="submit"],
.widget_product_search form button[type="submit"],
.widget_product_search form input[type="submit"] {
    clip: rect(1px 1px 1px 1px);
    position: absolute !important;
    right: 0;
}

.widget p {
    margin-bottom: 1em;
    font-size: 14px;
    line-height: 1.5;
}

.widget p:last-child {
    margin-bottom: 0;
}

.widget h4 {
    font-size: 20px;
}

.dy-keyboard .input-text:focus-visible,
.dy-keyboard :focus-visible,
.dy-keyboard input[type="email"]:focus-visible,
.dy-keyboard input[type="password"]:focus-visible,
.dy-keyboard input[type="search"]:focus-visible {
    outline: #2491ff solid 0.2rem;
    outline-offset: 0;
    border-color: transparent;
    box-shadow: none;
}

.dy-keyboard input:focus,
.dy-keyboard textarea:focus {
    border-color: transparent;
}

.screen-reader-text {
    position: absolute;
    visibility: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

.clear {
    clear: both;
}

@media (max-width: 992px) {
    .dy-desktop-only {
        display: none !important;
    }
}

.single-product .woocommerce-error a {
    display: none;
}

.single-product .woocommerce-message a {
    color: #fff;
    transition: 0.2s;
}

.single-product .woocommerce-message a:not(.button) {
    font-weight: 600;
}

.product {
    position: relative;
}

.woocommerce-product-details__short-description p {
    margin-bottom: 0.75rem;
}

.summary .clear + .woocommerce-product-details__short-description > details:first-child {
    margin-top: 0.5rem;
}

.woocommerce-product-details__short-description table td,
.woocommerce-product-details__short-description table th {
    padding: 5px 0;
    font-size: 13px;
}

.summary table {
    font-size: 14px;
}

.summary table th {
    padding: 0.5em 1em 0.5em 0;
}

.summary table td {
    padding: 0.5rem 1rem 0.5rem 0;
}

.summary select {
    background-color: #fff;
}

.ajax_add_to_cart.add_to_cart_button,
.product form.cart .button {
    position: relative;
}

.ajax_add_to_cart.add_to_cart_button:after,
.product form.cart .single_add_to_cart_button:after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
    opacity: 0;
    transition: opacity;
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255,255,255,0.3);
    border-left-color: #fff;
    border-radius: 50%;
    vertical-align: middle;
}

.dy-product-widget .widget fieldset p {
    margin-bottom: 0;
}

.dy-product-widget ul {
    margin: 5px 0 0;
}

.dy-product-widget .widget ul li {
    position: relative;
    margin-bottom: 3px;
    margin-left: 22px;
    list-style: none;
    font-size: 13px;
}

.dy-product-widget ul li:before {
    position: absolute;
    top: 2.5px;
    left: -22px;
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: #333;
}

.dy-product-widget fieldset {
    margin-top: 0.5em;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e2e2e2;
}

.dy-product-widget fieldset legend {
    display: block;
    margin: 0 auto;
    width: inherit;
    padding: 10px;
    color: #111;
    font-weight: 600;
    text-align: center;
}

.woocommerce-product-details__short-description > details:first-child {
    margin-top: 15px;
}

.summary details summary {
    display: block;
    font-size: 13px;
    border-top: 1px solid #e2e2e2;
    outline-offset: 1px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    padding-right: 2rem;
    color: #111;
}

.summary details ul {
    margin-left: 15px;
}

.summary details summary::-webkit-details-marker {
    display: none;
}

.summary details summary:focus-visible {
    outline-offset: 1px;
}

.summary details summary:after {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 9L12 16L5 9' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 9L12 16L5 9' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    content: "";
    width: 14px;
    height: 14px;
    display: block;
    background: #111;
    margin-top: -7px;
    transition: transform 0.2s;
    position: absolute;
    right: 0;
    top: 50%;
}

.summary details[open] summary:after {
    transform: scaleY(-1);
}

.summary details p:last-child,
.summary details ul:last-child {
    margin-bottom: 0;
}

.dy-product-widget ul li:before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

@media (min-width: 993px) {
    .dy-related > section > h2 {
        padding-top: 3rem;
    }
}

@media (max-width: 992px) {
    .dy-related section + section {
        padding-top: 1rem;
    }
}

#respond p:has(input[type="checkbox"]):last-child {
    margin-bottom: 2rem;
}

.dy-compl__body .price ins {
    font-weight: bold;
}

/* The right column of posts, reviewer pages and the site search (theme-plan Step 12c) */
@media (min-width: 993px) {
    .widget-area {
        padding-bottom: 2rem;
    }
}

@media (max-width: 992px) {
    .widget-area {
        padding-top: 2rem;
        padding-bottom: 1rem;
    }
}

/* === Fonts === */

/*
 * Vazirmatn: one variable file (wght 400–600) cut down to the characters the site uses; how it is
 * made and how to add a character: fonts/README.md. Declared as two faces, 400 and 600, on the
 * same file (downloaded once), so weights match as with the old static files: 500 → 400, 700 → 600.
 */
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/vazirmatn-v1.woff2') format('woff2');
}

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/vazirmatn-v1.woff2') format('woff2');
}

/*
 * Peyda Black, the heading font (Fontiran, licensed): one weight, subset to Persian, Persian
 * digits and basic Latin (24 KB). Not preloaded and "optional", so it never delays the first
 * page or shifts its titles: if it isn't there within ~100ms the titles stay in Vazirmatn and
 * the cached file is used from the next page on.
 */
@font-face {
    font-family: 'Peyda';
    font-style: normal;
    font-weight: 700;
    font-display: optional;
    src: url('../fonts/peyda-black.woff2') format('woff2');
}

/* The text font everywhere, form fields too (was the Customizer's typography setting). */
:root,
body,
button,
input,
select,
option,
textarea,
:root :where(body) {
    font-family: Vazirmatn;
}

/* === Palette === */

/*
 * The site's colours, one name each (daroyavar-website/style.md). The --e-global-color-* names are
 * the former Elementor Kit's, kept so nothing else had to change; this is now their only definition.
 * Raw hex belongs only here and in SVG data URIs, which can't read variables.
 */
:root {
    --e-global-color-white: #fff;
    --e-global-color-ink: #222;
    --e-global-color-warmgrey: #615a5a;
    --e-global-color-line: #efe3d3;
    --e-global-color-cream: #faf2e7;
    --e-global-color-peach: #ffe8c5;
    --e-global-color-apricot: #f7be76;
    --e-global-color-maroon: #5a0707;
    --e-global-color-green: #2f711c;
    --dy-green-hover: color-mix(in srgb, var(--e-global-color-green) 80%, #000);
    --dy-shadow-hover: 0 4px 12px rgba(90, 7, 7, .06);
    /* Headings' font: swap it here (and add its @font-face in Fonts) to restyle every title at once. */
    --dy-font-heading: 'Peyda', 'Vazirmatn', sans-serif;
    /* From the Customizer (Customizer section): its dark green, the header's icon links, the content width. */
    --dy-green-dark: #0d3523;
    --dy-header-ink: #212121;
    --dy-width: 1170px;
}

/*
 * Every title takes the heading font: all h1-h6 and the few titles printed as spans or divs.
 * Customizer and blog rules set font-family on .summary h1 and .single-post h1, so html:root body
 * lifts this above them.
 * The heading font has one face, declared as 700, so titles are 700.
 */
html:root body :is(h1, h2, h3, h4, h5, h6, .medical-reviewer-card__title, .dy-cart__title) {
    font-family: var(--dy-font-heading);
    font-weight: 700;
}

/*
 * Except product names, which stay in the text font: a display face would crowd two-line names on
 * catalogue cards. The home page's category tiles do the same (.dy-tile__title, in Home).
 */
html:root body .woocommerce-loop-product__title {
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 600;
}

/*
 * The heading font is for short section titles (توضیحات, a blog section, a card title). The sub-headings
 * inside a product description, an article or an info page are long, so they stay in Vazirmatn,
 * which reads better at length.
 */
html:root body :is(.woocommerce-Tabs-panel, .single-post .entry-content, .dy-info .entry-content) :is(h3, h4, h5, h6) {
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 600;
}

/*
 * Shoptimizer's Customizer printed its colours (sage, a second and a third green, orange, olive,
 * dark-green bars) after this file until theme-plan Step 11, so these repeat its selectors with an
 * html prefix, which also lifts them over Shoptimizer's own CSS. Cart and checkout buttons: css/cart.css.
 */
html .button,
html input[type=submit],
html ul.products li.product .button,
html .woocommerce #respond input#submit.alt,
html .product .cart .single_add_to_cart_button,
html ul.products li.product .added_to_cart,
html ul.wc-block-grid__products .wp-block-button__link {
    background-color: var(--e-global-color-green);
}

html .button:hover,
html [type="submit"]:hover,
html ul.products li.product .button:hover,
html body .woocommerce #respond input#submit.alt:hover,
html .product .cart .single_add_to_cart_button:hover,
html ul.products li.product .added_to_cart:hover,
html ul.wc-block-grid__products .wp-block-button__link:hover {
    background-color: var(--dy-green-hover);
    border-color: var(--dy-green-hover);
}

html a:hover {
    color: var(--dy-green-hover);
}

html .price ins,
html .woocommerce-pagination .page-numbers li .page-numbers.current,
html div.product p.price,
html .search-results article h2 a:hover {
    color: var(--e-global-color-green);
}

html .spinner > div {
    background-color: var(--e-global-color-green);
}

/* Top bar: a solid brand-green strip with white text; the center message leads. */
html .dy-wrap.dy-topbar {
    color: var(--e-global-color-white);
    background-color: var(--e-global-color-green);
    border-bottom: 0;
}

html .dy-topbar .dy-topbar-inner {
    padding: 0;
    font-size: 14px;
    font-weight: 500;
}

html .dy-topbar .dy-topbar-inner .dy-wrap {
    min-height: 44px;
}

html .dy-topbar-center {
    font-size: 16px;
    font-weight: 700;
}

html .dy-topbar-inner,
html .dy-topbar-inner a {
    color: var(--e-global-color-white);
}

/* === Customizer === */

/*
 * What Shoptimizer's Customizer (Kirki) and its Additional CSS printed into every page and still
 * showed, kept here when that output was switched off (theme-plan Step 11, inc/styles.php). Change
 * these here, not in Appearance → Customize. Page-type parts: css/product.css, blog.css, cart.css.
 */
body {
    background-color: var(--e-global-color-white);
}

a {
    color: var(--e-global-color-green);
}

.button,
input[type=submit] {
    color: var(--e-global-color-white);
}

.star-rating > span::before {
    background-color: var(--e-global-color-green);
}

.site-header {
    background-color: var(--e-global-color-white);
}

.dy-iconnav .menu a {
    color: var(--dy-header-ink);
}

.dy-wrap {
    max-width: var(--dy-width);
}

.widget .widget-title,
ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
}

@media (max-width: 770px) {
    ul.products li.product .woocommerce-loop-product__title {
        font-size: clamp(0.8125rem, 0.749rem + 0.2033vw, 0.875rem);
    }
}

/* Product lists outside our card (.dy-products): the 404 page's and the cart's cross-sells. */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px;
}

.woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .woocommerce ul.products li.product img {
        display: block;
        width: 60% !important;
        margin: 0 auto;
    }
}

@media (min-width: 992px) {
    .dy-topbar-inner .textwidget {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

@media (max-width: 992px) {
    .dy-header-bar,
    .site-branding {
        height: 50px;
    }

    .site-header .custom-logo-link img {
        height: 30px;
    }
}

/* === Section titles === */

/*
 * The home page's section title, a short maroon bar before the text, on product sections (the reviews'
 * title is inside #reviews), the medical reviewer card and the h2s of posts and info pages.
 */
.single-product .woocommerce-Tabs-panel.panel > h2:first-child,
.single-product .woocommerce-Tabs-panel.panel .yikes-custom-woo-tab-title,
.single-product .dy-reviews__title,
.medical-reviewer-card__header,
.single-post .entry-content h2,
.dy-info .entry-content h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 0;
    border-bottom: 0;
}

.single-product .woocommerce-Tabs-panel.panel > h2:first-child::before,
.single-product .woocommerce-Tabs-panel.panel .yikes-custom-woo-tab-title::before,
.single-product .dy-reviews__title::before,
.medical-reviewer-card__header::before,
.single-post .entry-content h2::before,
.dy-info .entry-content h2::before {
    content: "";
    flex: none;
    width: 4px;
    height: 1.1em;
    background: var(--e-global-color-maroon);
    border-radius: 2px;
}

/* === Lists === */

/* Bullet inline padding */
ul {
    list-style: disc;
    padding-inline-start: 1.5em;
}

/* === Product card === */

/*
 * The home page's product card (.dy-products), also on the shop, category, brand and search pages
 * (.dy-shop), in the product page's alternatives and similar sections (.dy-relations) and in posts.
 * Colours are the Palette's; type sizes and the 8px spacing scale are set on .dy-home (css/home.css)
 * and here for .dy-relations and .dy-shop, the same values: change both together.
 */
.dy-relations,
.dy-shop {
    --dy-space-1: 8px;
    --dy-space-2: 16px;
    --dy-space-3: 24px;
    --dy-radius: 12px;
    --dy-radius-sm: 8px;
    --e-global-typography-title-font-size: 16px;
    --e-global-typography-caption-font-size: 13px;
}

@media (max-width: 767px) {
    .dy-relations,
    .dy-shop {
        --dy-space-3: 16px;
        --e-global-typography-title-font-size: 15px;
        --e-global-typography-caption-font-size: 12px;
    }
}

.dy-products .woocommerce ul.products li.product {
    color: inherit;
    text-decoration: none;
    background: var(--e-global-color-white);
    border: 1px solid var(--e-global-color-line);
    border-radius: var(--dy-radius);
    transition: box-shadow .2s, transform .2s;
}

.dy-products .woocommerce ul.products li.product:hover {
    border-color: color-mix(in srgb, var(--e-global-color-line), var(--e-global-color-warmgrey) 20%);
    box-shadow: var(--dy-shadow-hover);
    transform: translateY(-2px);
}

.dy-products .woocommerce ul.products li.product img {
    width: 100% !important;
    height: auto;
    margin: 0;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--dy-radius-sm);
}

/*
 * Image, title, then the price with a small "+" that adds to the cart over AJAX. The title's
 * link is stretched over the card, so the rest of the card opens the product.
 */

/*
 * The parent theme widens ul.products by 30px (for negative side margins) and our global ul rule
 * pads its start side by 1.5em. Together they pushed the grid 30px out on the left and left
 * 24px + 30px empty on the right. !important and this specificity beat the Customizer's
 * Additional CSS, which also sets the grid columns.
 */
.dy-products .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--dy-space-3) !important;
    width: auto;
    margin: 0 !important;
    padding: 0;
}

.dy-products .woocommerce ul.products::before,
.dy-products .woocommerce ul.products::after {
    display: none;
}

.dy-products .woocommerce ul.products li.product {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--dy-space-1);
    float: none;
    width: auto !important;
    margin: 0 !important;
    padding: var(--dy-space-2);
}

.dy-products .woocommerce ul.products li.product .dy-card-photo {
    margin: 0;
}

/*
 * Shoptimizer's hover card: a white ::before box 31px taller than the card, with its own shadow,
 * painted over the title, and the image shrunk to 98%. The card's own hover replaces both.
 */
.dy-products .woocommerce ul.products li.product::before {
    display: none;
}

.dy-products .woocommerce ul.products li.product:hover .dy-card-photo {
    transform: none;
}

.dy-products .woocommerce ul.products li.product .dy-card-cats,
.dy-products .woocommerce ul.products li.product .added_to_cart {
    display: none;
}

.dy-products .woocommerce ul.products li.product .dy-card-text {
    container-type: inline-size;
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: var(--dy-space-1);
    padding: 0;
}

.dy-products .woocommerce-loop-product__title {
    position: static;
    grid-column: 1 / -1;
    align-self: start;
    margin: 0;
    padding: 0;
}

/*
 * Two lines, reserved even for short names, so prices line up across a row. Static, so the
 * stretched ::after below measures from the card (Shoptimizer makes the header's children relative).
 */
.dy-products ul.products li.product .woocommerce-loop-product__title a {
    position: static;
    display: -webkit-box;
    min-height: 3.2em;
    overflow: hidden;
    color: var(--e-global-color-ink);
    font-size: var(--e-global-typography-title-font-size);
    font-weight: 600;
    line-height: 1.6;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.dy-products .woocommerce-loop-product__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.dy-products .woocommerce-loop-product__title a:focus-visible {
    outline: none;
}

.dy-products .woocommerce ul.products li.product:has(.woocommerce-loop-product__title a:focus-visible) {
    outline: 2px solid var(--e-global-color-green);
    outline-offset: 2px;
}

.dy-products .woocommerce ul.products li.product .price {
    display: block;
    margin: 0;
    color: var(--e-global-color-green);
    font-size: var(--e-global-typography-title-font-size);
    font-weight: 600;
    white-space: nowrap;
}

/*
 * The add-to-cart link as a 36px "+": the label is hidden (its aria-label names the product),
 * and 4px of transparent padding keeps a 44px tap area without taking space from the row.
 * Shoptimizer hides it on desktop until hover (absolute, opacity 0); here it is always shown.
 */
.dy-products .woocommerce ul.products li.product .button {
    position: relative;
    bottom: auto;
    z-index: 2;
    grid-column: 2;
    grid-row: 2;
    width: 44px;
    height: 44px;
    min-height: 0;
    margin: -4px;
    opacity: 1;
    padding: 4px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background:
        linear-gradient(var(--e-global-color-white) 0 0) center / 14px 2px no-repeat content-box,
        linear-gradient(var(--e-global-color-white) 0 0) center / 2px 14px no-repeat content-box,
        var(--e-global-color-green) content-box;
    border: 0;
    border-radius: 12px;
    transition: background-color .2s;
}

.dy-products .woocommerce ul.products li.product .button:hover,
.dy-products .woocommerce ul.products li.product .button:focus-visible {
    background-color: var(--dy-green-hover);
}

.dy-products .woocommerce ul.products li.product .button.loading {
    opacity: .6;
}

/* On a narrow card the currency goes under the amount, clear of the "+". */
@container (max-width: 170px) {
    .dy-products li.product .price .woocommerce-Price-currencySymbol {
        display: block;
        color: var(--e-global-color-warmgrey);
        font-size: var(--e-global-typography-caption-font-size);
        font-weight: 400;
    }
}

@media (max-width: 767px) {
    .dy-products .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--dy-space-1) !important;
    }

    .dy-products .woocommerce ul.products li.product {
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dy-products .woocommerce ul.products li.product {
        transition: none;
    }

    .dy-products .woocommerce ul.products li.product:hover {
        transform: none;
    }
}

/* === Product badges === */

/*
 * inc/product-badges.php, with the looks of what they replace (CommerceKit's «جدید», Shoptimizer's
 * discount and out-of-stock label). Cards: the discount above «جدید» in the photo's top right corner,
 * «ناموجود» in the top left one. Product page: «جدید» on the gallery, the discount after the price.
 */
.dy-badges {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    pointer-events: none;
}

.dy-badge--new {
    padding: 3px 9px;
    color: var(--e-global-color-maroon);
    font-size: 11px;
    line-height: 15px;
    text-align: center;
    background: var(--e-global-color-peach);
    border-radius: 999px;
    opacity: .8;
}

/* The product page's cards had CommerceKit's 12px (div.product), the gallery its blue square tag. */
div.product .dy-badge--new {
    font-size: 12px;
}

.dy-gallery .dy-badge--new {
    color: var(--e-global-color-white);
    background: #1e73be;
    border-radius: 3px;
}

.dy-badge--sale {
    padding: 3px 6px;
    color: var(--e-global-color-white);
    font-size: 11px;
    line-height: 15px;
    letter-spacing: .4px;
    background: #3bb54a;
    border-radius: 3px;
}

.summary .dy-badge--sale {
    position: relative;
    top: -1px;
    left: -10px;
    display: inline-block;
    margin-right: 8px;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 700;
}

/* Out of stock: a grey pill (Shoptimizer's was a white strip across the bottom of the photo). */
.dy-badge--oos {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 2px 10px;
    color: var(--e-global-color-warmgrey);
    font-size: 12px;
    line-height: 1.8;
    background: var(--e-global-color-line);
    border-radius: 999px;
    pointer-events: none;
}

/* === Medical reviewer card === */

.medical-reviewer-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    margin-top: 0;
}

.medical-reviewer-card__body {
    display: flex;
    align-items: center;
    gap: 16px;
}

.medical-reviewer-card__photo-link {
    flex-shrink: 0;
}

.medical-reviewer-card__photo,
.medical-reviewer-card__photo-link img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.medical-reviewer-card__credential {
    font-size: 13px;
    color: var(--e-global-color-warmgrey);
}

.medical-reviewer-card__name {
    font-weight: 700;
    font-size: 16px;
    color: var(--e-global-color-ink);
    text-decoration: none;
    display: block;
}

.medical-reviewer-card__name:hover {
    color: var(--e-global-color-green);
}

.medical-reviewer-card__bio {
    font-size: 14px;
    color: var(--e-global-color-warmgrey);
    line-height: 1.7;
}

.medical-reviewer-card__footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--e-global-color-line);
    font-size: 12px;
    color: var(--e-global-color-warmgrey);
    line-height: 1.8;
}

/* === Archive titles and page numbers === */

/*
 * Page titles of the shop, product categories and search, the blog index and post archives, in
 * the home page's style: no box, a maroon bar before the title (as the home section headings),
 * Palette colours (ink, warmgrey, line, maroon, green).
 */
.site-main header.woocommerce-products-header,
.blog header.entry-header.dy-blog-header,
.archive:not(.woocommerce) .page-header {
    margin: 8px 0 24px;
    padding: 0;
    background: none;
    border-radius: 0;
}

.site-main header.woocommerce-products-header .woocommerce-products-header__title,
.blog header.entry-header.dy-blog-header h1,
.archive:not(.woocommerce) .page-header .page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--e-global-color-ink);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
}

.site-main header.woocommerce-products-header .woocommerce-products-header__title::before,
.blog header.entry-header.dy-blog-header h1::before,
.archive:not(.woocommerce) .page-header .page-title::before {
    content: "";
    flex: none;
    width: 4px;
    height: 1.1em;
    background: var(--e-global-color-maroon);
    border-radius: 2px;
}

.woocommerce-pagination ul.page-numbers,
.site-main .navigation.pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.woocommerce-pagination ul.page-numbers li,
.site-main .navigation.pagination ul.page-numbers li {
    display: flex;
    margin: 0;
    padding: 0;
    border: 0;
}

/* li .page-numbers: one step above the parent's own rules (its inline colour, its phone squares) */
.woocommerce-pagination ul.page-numbers li .page-numbers,
.site-main .navigation.pagination ul.page-numbers li .page-numbers {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0 8px;
    font-size: 14px;
    line-height: 1;
    color: var(--e-global-color-ink);
    background: var(--e-global-color-white);
    border: 1px solid var(--e-global-color-line);
    border-radius: 999px;
    box-shadow: none;
    transition: border-color 0.2s, color 0.2s;
}

.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.site-main .navigation.pagination ul.page-numbers li a.page-numbers:hover {
    color: var(--e-global-color-green);
    border-color: var(--e-global-color-green);
}

.woocommerce-pagination ul.page-numbers li .page-numbers.current,
.site-main .navigation.pagination ul.page-numbers li .page-numbers.current {
    font-weight: 600;
    color: var(--e-global-color-white);
    background: var(--e-global-color-green);
    border-color: var(--e-global-color-green);
}

.woocommerce-pagination ul.page-numbers li .page-numbers.dots,
.site-main .navigation.pagination ul.page-numbers li .page-numbers.dots {
    min-width: 0;
    background: none;
    border: 0;
}

@media (max-width: 767px) {
    .site-main header.woocommerce-products-header,
    .blog header.entry-header.dy-blog-header,
    .archive:not(.woocommerce) .page-header {
        margin: 0 0 16px;
    }

    .site-main header.woocommerce-products-header .woocommerce-products-header__title,
    .blog header.entry-header.dy-blog-header h1,
    .archive:not(.woocommerce) .page-header .page-title {
        font-size: 20px;
    }

    /* Nine items (arrows, first, last, three pages, two gaps) in one phone row */
    .woocommerce-pagination ul.page-numbers,
    .site-main .navigation.pagination ul.page-numbers {
        gap: 4px;
    }

    .woocommerce-pagination ul.page-numbers li .page-numbers,
    .site-main .navigation.pagination ul.page-numbers li .page-numbers {
        min-width: 34px;
        height: 34px;
        padding: 0 6px;
        font-size: 13px;
    }
}

/* === Header navigation === */

/*
 * The cart button (inc/cart.php), the same on phones and desktop: a Lucide basket (stroke 1.75) with
 * a green count badge. The icon is inline, so nothing is fetched.
 */
#masthead .dy-cart-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--e-global-color-ink);
    line-height: 1;
    border-radius: 12px;
    transition: color 0.15s, background-color 0.15s;
}

#masthead .dy-cart-btn::before {
    flex: none;
    width: 22px;
    height: 22px;
    content: "";
    background-color: currentColor;
    -webkit-mask: var(--dy-i-basket) center / contain no-repeat;
            mask: var(--dy-i-basket) center / contain no-repeat;
    --dy-i-basket: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 11-1 9M19 11l-4-7M2 11h20M3.5 11l1.6 7.4a2 2 0 0 0 2 1.6h9.8a2 2 0 0 0 2-1.6l1.7-7.4M4.5 15.5h15M5 11l4-7M9 11l1 9'/%3E%3C/svg%3E");
}

#masthead .dy-cart-btn:is(:hover, :focus-visible) {
    color: var(--e-global-color-green);
    background-color: var(--e-global-color-cream);
}

#masthead .dy-cart-count {
    position: absolute;
    top: 1px;
    left: 0;
    min-width: 20px;
    height: 20px;
    margin: 0;
    padding: 0 5px;
    color: var(--e-global-color-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0;
    background-color: var(--e-global-color-green);
    border: 2px solid var(--e-global-color-white);
    border-radius: 10px;
}

/* Phones: the customizer centres the parent's 28px counter in the header; centre the 40px button */
@media (max-width: 992px) {
    #masthead .dy-header-bar .dy-header-cart {
        top: calc(50% - 20px);
    }
}

/*
 * Desktop header: one row like shopino.app. Right to left: logo, «دسته‌بندی‌ها» (.dy-catnav,
 * inc/site-header.php), search, icon buttons (the secondary menu, dy-ico-* classes; their labels
 * are tooltips), cart. The «دسته‌بندی‌ها» box is the full row height, so the pointer never leaves
 * it on the way down into the panel, which opens from the bottom of the row.
 */

@media (min-width: 993px) {
    body {
        --dy-row: 72px;
        --dy-logo: 146px; /* images/brand/daroyavar-logo.svg (146x40) at 40px tall */
        --dy-cats: 152px; /* the «دسته‌بندی‌ها» button */
        --dy-gap: 20px;
        /* Icons: Lucide shapes, stroke 1.75 (the small chevron 2) */
        --dy-i-list: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4.5 6h.01M4.5 12h.01M4.5 18h.01' stroke-width='2.5'/%3E%3C/svg%3E");
        --dy-i-chevron: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        --dy-i-search: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20.5 20.5-4.2-4.2'/%3E%3C/svg%3E");
        --dy-i-store: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E");
        --dy-i-blog: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18h-5M18 14h-8'/%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2'/%3E%3Crect width='8' height='4' x='10' y='6' rx='1'/%3E%3C/svg%3E");
        --dy-i-help: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E");
        --dy-i-user: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E");
    }

    /* -- The header row -- */
    /* The page below starts on the line, as it did under Shoptimizer's (now hidden) navigation layer */
    #page > #masthead {
        margin-bottom: -1px;
        border-bottom: 1px solid var(--e-global-color-line);
    }

    .dy-sticky-header #page > #masthead {
        position: sticky;
        top: 0;
    }

    .dy-sticky-header.admin-bar #page > #masthead {
        top: 32px;
    }

    /* A shadow fades in as the top bar scrolls away (browsers without scroll timelines keep the line) */
    @supports (animation-timeline: scroll()) {
        .dy-sticky-header #page > #masthead {
            animation: dy-header-shadow linear both;
            animation-timeline: scroll();
            animation-range: 0 40px;
        }
    }

    @keyframes dy-header-shadow {
        to {
            box-shadow: 0 8px 16px -10px rgba(34, 34, 34, 0.18);
        }
    }

    #masthead .dy-header-bar {
        flex-wrap: nowrap;
        height: var(--dy-row);
        padding-top: 0;
        padding-bottom: 0;
    }

    #masthead .site-branding {
        flex: none;
        width: var(--dy-logo);
    }

    #masthead .custom-logo-link img {
        display: block;
        width: auto;
        height: 40px;
    }

    .rtl #masthead .dy-header-search {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        margin: 0 0 0 var(--dy-gap);
    }

    #masthead .dy-header-search input[type="search"] {
        height: 44px;
        padding: 0 44px 0 16px;
        color: var(--e-global-color-ink);
        font-size: 14px;
        background-color: var(--e-global-color-cream);
        border: 1px solid var(--e-global-color-line);
        border-radius: 12px;
        transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
    }

    #masthead .dy-header-search input[type="search"]:hover {
        border-color: var(--e-global-color-line);
    }

    #masthead .dy-header-search input[type="search"]:focus {
        background-color: var(--e-global-color-white);
        border-color: var(--e-global-color-green);
        outline: 0;
        box-shadow: 0 0 0 3px rgba(47, 113, 28, 0.12);
    }

    #masthead .dy-header-search input[type="search"]::placeholder {
        color: var(--e-global-color-warmgrey);
    }

    /* The magnifier, on the right where the text starts */
    #masthead .dy-header-search form::before {
        right: 14px;
        left: auto;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        background-color: var(--e-global-color-warmgrey);
        -webkit-mask: var(--dy-i-search) center / contain no-repeat;
                mask: var(--dy-i-search) center / contain no-repeat;
    }

    #masthead .dy-header-search form:focus-within::before {
        background-color: var(--e-global-color-green);
    }

    /* -- Icon buttons: the secondary menu, then the cart -- */
    .rtl #masthead .dy-iconnav {
        flex: none;
        float: none;
        margin: 0;
        padding: 0;
    }

    #masthead .dy-iconnav .menu {
        display: flex;
        gap: 4px;
        margin: 0;
    }

    #masthead .dy-iconnav .menu-item {
        padding: 0;
        border: 0;
    }

    #masthead .dy-iconnav .dy-icon {
        display: none;
    }

    #masthead .dy-iconnav .menu-item > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        color: var(--e-global-color-ink);
        line-height: 1;
        border-radius: 12px;
        transition: color 0.15s, background-color 0.15s;
    }

    #masthead .dy-iconnav .menu-item > a::before {
        flex: none;
        width: 22px;
        height: 22px;
        content: "";
        background-color: currentColor;
        -webkit-mask: var(--dy-icon) center / contain no-repeat;
                mask: var(--dy-icon) center / contain no-repeat;
    }

    #masthead .dy-ico-shop {
        --dy-icon: var(--dy-i-store);
    }

    #masthead .dy-ico-blog {
        --dy-icon: var(--dy-i-blog);
    }

    #masthead .dy-ico-faq {
        --dy-icon: var(--dy-i-help);
    }

    #masthead .dy-ico-user {
        --dy-icon: var(--dy-i-user);
    }

    #masthead .dy-iconnav .menu-item > a:is(:hover, :focus-visible) {
        color: var(--e-global-color-green);
        background-color: var(--e-global-color-cream);
    }

    /* Tooltips: the menu labels, below the button after a short rest */
    #masthead .dy-iconnav .dy-label {
        position: absolute;
        z-index: 1;
        top: calc(100% + 10px);
        left: 50%;
        padding: 5px 10px;
        color: var(--e-global-color-white);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        white-space: nowrap;
        background-color: var(--e-global-color-ink);
        border-radius: 8px;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -4px);
        transition: opacity 0.15s, transform 0.15s;
    }

    #masthead .dy-iconnav .dy-label::before {
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        content: "";
        border: 5px solid transparent;
        border-bottom-color: var(--e-global-color-ink);
    }

    #masthead .dy-iconnav .menu-item > a:is(:hover, :focus-visible) .dy-label {
        opacity: 1;
        transform: translate(-50%, 0);
        transition-delay: 0.2s;
    }

    /* The cart, last on the left after a thin divider; the parent shows it only in the bar below */
    .rtl #masthead .dy-header-cart {
        position: relative;
        display: block;
        flex: none;
        float: none;
        height: 40px;
        margin: 0 12px 0 0;
        padding-right: 12px;
        line-height: 1;
    }

    .rtl #masthead .dy-header-cart::before {
        position: absolute;
        top: 50%;
        right: 0;
        width: 1px;
        height: 24px;
        margin-top: -12px;
        content: "";
        background-color: var(--e-global-color-line);
    }

    /* -- «دسته‌بندی‌ها»: the button, and the panel that hangs from the bottom of the row -- */
    #masthead .dy-header-bar {
        position: relative;
    }

    .dy-catnav {
        display: flex;
        flex: none;
        align-items: center;
        height: var(--dy-row);
        margin: 0 var(--dy-gap);
    }

    .dy-catnav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: var(--dy-cats);
        height: 40px;
        padding: 0 12px;
        color: var(--e-global-color-ink);
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        border-radius: 12px;
        transition: color 0.15s, background-color 0.15s;
    }

    .dy-catnav-btn:is(:hover, :focus-visible),
    .dy-catnav.is-open .dy-catnav-btn {
        color: var(--e-global-color-green);
        background-color: var(--e-global-color-cream);
    }

    .dy-catnav-btn::before,
    .dy-catnav-btn::after {
        flex: none;
        width: 20px;
        height: 20px;
        content: "";
        background-color: currentColor;
        -webkit-mask: var(--dy-i-list) center / contain no-repeat;
                mask: var(--dy-i-list) center / contain no-repeat;
    }

    .dy-catnav-btn::after {
        width: 14px;
        height: 14px;
        -webkit-mask-image: var(--dy-i-chevron);
                mask-image: var(--dy-i-chevron);
        transition: transform 0.2s;
    }

    .dy-catnav.is-open .dy-catnav-btn::after {
        transform: rotate(180deg);
    }
}

/* Phones have the menu button and drawer instead */
@media (max-width: 992px) {
    .dy-catnav {
        display: none;
    }
}

/*
 * The «دسته‌بندی‌ها» panel (js/site-header.js fills it from the menu file): three panes, right to
 * left, laid out like shopino.app: the departments (dy-dept) as a rail, the hovered department's
 * groups (dy-group), and the hovered group's categories in a grid. CSS only: a department's list is
 * the absolute box left of the rail, and a group's list sits absolute inside it, left of the
 * groups. With nothing hovered, the first department and its first group are open.
 * Colours are the Palette's ink, warmgrey, line, cream and green.
 */
@media (min-width: 993px) {
    /*
     * A card the width of the container, its right edge under «دسته‌بندی‌ها»: the header row's
     * padding (.dy-wrap's 2.617924em), the logo and the gap.
     */
    .dy-catnav-panel {
        position: absolute;
        z-index: 21;
        top: 100%;
        right: calc(2.617924em + var(--dy-logo) + var(--dy-gap));
        width: min(940px, 100% - 2 * 2.617924em - var(--dy-logo) - var(--dy-gap));
        height: 480px;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        background: linear-gradient(to left, var(--e-global-color-cream) 232px, var(--e-global-color-white) 232px);
        border: 1px solid var(--e-global-color-line);
        border-radius: 0 0 16px 16px;
        box-shadow: 0 10px 24px rgba(34, 34, 34, 0.12);
        transition: opacity 0.2s, visibility 0s 0.2s;
    }

    /* Opens at once; only closing fades. Empty until the menu file has come. */
    .dy-catnav.is-open .dy-catnav-panel:not(:empty) {
        visibility: visible;
        opacity: 1;
        transition: none;
    }

    .dy-catnav-panel ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .dy-catnav-panel li {
        margin: 0;
    }

    .dy-catnav-panel .dy-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        color: var(--e-global-color-ink);
        font: inherit;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.6;
        text-align: right;
        text-decoration: none;
        background: none;
        border: 0;
        cursor: pointer;
    }

    /* Departments: the rail */
    /*
     * The rows fill their column (padding on the rows, the last one stretched to the bottom), so
     * every point of the card is on some row. A gap would count as "nobody points at the list"
     * and jump back to the first item while the pointer travels.
     */
    .dy-catnav-panel > ul {
        display: flex;
        flex-direction: column;
        width: 232px;
        height: 100%;
    }

    .dy-catnav-panel > ul > li {
        flex: none;
        padding: 0 12px 4px;
    }

    .dy-catnav-panel > ul > li:first-child {
        padding-top: 16px;
    }

    .dy-catnav-panel > ul > li:last-child {
        flex: 1 0 auto;
    }

    .dy-catnav-panel li.dy-dept > .dy-link {
        padding: 10px 16px;
        color: #111;
        font-weight: 600;
        border-radius: 12px;
    }

    /* Groups: the middle pane, a 240px column */
    .dy-catnav-panel li.dy-dept > ul {
        position: absolute;
        top: 0;
        right: 232px;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        visibility: hidden;
        opacity: 0;
        border-right: 1px solid var(--e-global-color-line);
        transition: visibility 0s 0.2s, opacity 0s 0.2s;
    }

    .dy-catnav-panel li.dy-group {
        flex: none;
        width: 240px;
        padding: 0 12px;
    }

    .dy-catnav-panel li.dy-group:first-child {
        padding-top: 12px;
    }

    .dy-catnav-panel li.dy-group:last-child {
        flex: 1 0 auto;
        padding-bottom: 12px;
    }

    .dy-catnav-panel li.dy-group > .dy-link {
        padding: 4px 14px;
        border-radius: 10px;
    }

    /* Categories: the grid on the left */
    .dy-catnav-panel li.dy-group > ul {
        position: absolute;
        top: 0;
        right: 240px;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        gap: 4px 24px;
        padding: 20px 24px;
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        border-right: 1px solid var(--e-global-color-line);
        transition: visibility 0s 0.2s, opacity 0s 0.2s;
    }

    .dy-catnav-panel li.dy-group li > .dy-link {
        padding: 8px 0;
        transition: color 0.2s;
    }

    .dy-catnav-panel li.dy-group li > .dy-link:hover {
        color: var(--e-global-color-green);
    }

    /*
     * A group with no categories (a plain link, like «ماسک صورت») gets an empty stand-in for the
     * categories pane, so moving the pointer there keeps the group selected. It appears on the
     * same 120ms rest as a real pane, so a group only passed over can't take the pointer.
     */
    .dy-catnav-panel li.dy-group:not(.dy-has)::after {
        position: absolute;
        visibility: hidden;
        top: 0;
        right: 240px;
        bottom: 0;
        left: 0;
        content: "";
    }

    .dy-catnav.is-open li.dy-group:not(.dy-has):hover::after {
        visibility: visible;
        transition: visibility 0s 120ms;
    }

    /*
     * The chevron on the active row points left, toward the next pane. It is a mask, since arrow
     * characters mirror on RTL pages. It takes the link's colour and fades with the pill.
     */
    .dy-catnav-panel li:is(.dy-dept, .dy-group).dy-has > .dy-link::after {
        flex: none;
        width: 16px;
        height: 16px;
        content: "";
        opacity: 0;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /*
     * Open panes and the active rows. A list nobody points at (the pointer is outside the card)
     * opens its first item.
     * A group's pane also needs its department open: a child's "visible" beats its parent's "hidden".
     * Nothing changes until the pointer has stayed on a row for 120ms; then the panes swap in one
     * frame and the pills crossfade for 100ms (a transition takes the delay of the state it moves
     * to). So passing over rows, or a short detour off the active one, changes nothing. The default
     * first item waits too, except while the pointer is outside the card, so the panel opens at
     * once. A closed panel hides the panes once the card has faded.
     */
    .dy-catnav.is-open li:is(.dy-dept, .dy-group) > ul {
        transition: visibility 0s 120ms, opacity 0s 120ms;
    }

    .dy-catnav.is-open li:is(.dy-dept, .dy-group) > .dy-link {
        transition: color 100ms ease 120ms, background-color 100ms ease 120ms, box-shadow 0s 120ms;
    }

    .dy-catnav.is-open li:is(.dy-dept, .dy-group) > .dy-link::after {
        transition: opacity 100ms ease 120ms;
    }

    /* The group under the pointer is outlined, on the same 120ms rest as the selection */
    .dy-catnav-panel li.dy-group:hover > .dy-link {
        box-shadow: inset 0 0 0 1px var(--e-global-color-green);
    }

    /* Until the pointer enters the card (on opening, or back on the button) it shows the first
       department and group at once */
    .dy-catnav.is-open .dy-catnav-panel:not(:hover) li:is(.dy-dept, .dy-group) > ul,
    .dy-catnav.is-open .dy-catnav-panel:not(:hover) li:is(.dy-dept, .dy-group) > .dy-link,
    .dy-catnav.is-open .dy-catnav-panel:not(:hover) li:is(.dy-dept, .dy-group) > .dy-link::after {
        transition: none;
    }

    .dy-catnav.is-open :is(li.dy-dept:is(:hover, :has(:focus-visible)), ul:not(:hover):not(:has(:focus-visible)) > li.dy-dept:first-child) > ul,
    .dy-catnav.is-open :is(li.dy-dept:is(:hover, :has(:focus-visible)), ul:not(:hover):not(:has(:focus-visible)) > li.dy-dept:first-child) :is(li.dy-group:is(:hover, :has(:focus-visible)), ul:not(:hover):not(:has(:focus-visible)) > li.dy-group:first-child) > ul {
        visibility: visible;
        opacity: 1;
    }

    .dy-catnav-panel li.dy-dept:is(:hover, :has(:focus-visible)) > .dy-link,
    .dy-catnav-panel ul:not(:hover):not(:has(:focus-visible)) > li.dy-dept:first-child > .dy-link {
        color: var(--e-global-color-white);
        background-color: var(--e-global-color-green);
    }

    .dy-catnav-panel li.dy-group:is(:hover, :has(:focus-visible)) > .dy-link,
    .dy-catnav-panel ul:not(:hover):not(:has(:focus-visible)) > li.dy-group:first-child > .dy-link {
        color: var(--e-global-color-green);
        background-color: var(--e-global-color-cream);
    }

    .dy-catnav-panel li.dy-dept:is(:hover, :has(:focus-visible)) > .dy-link::after,
    .dy-catnav-panel ul:not(:hover):not(:has(:focus-visible)) > li.dy-dept:first-child > .dy-link::after,
    .dy-catnav-panel li.dy-group:is(:hover, :has(:focus-visible)) > .dy-link::after,
    .dy-catnav-panel ul:not(:hover):not(:has(:focus-visible)) > li.dy-group:first-child > .dy-link::after {
        opacity: 1;
    }

    /* Phones only */
    .dy-menu-btn {
        display: none;
    }
}

/*
 * Phones: the menu button (three bars, where Shoptimizer's was) and the drawer, a <dialog> that
 * js/site-header.js builds on the first tap. The panel slides in from the right over a grey
 * backdrop, with a white ✕ beside it; the menu is an accordion, every level aligned right.
 */
@media (max-width: 992px) {
    .dy-menu-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        display: block;
        width: 60px;
        height: 30px;
    }

    .dy-menu-btn span {
        position: absolute;
        top: 13px;
        left: 38px;
        width: 22px;
        height: 2px;
        background-color: #212121;
        box-shadow: 0 -6px 0 #212121, 0 6px 0 #212121;
    }
}

.dy-drawer {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
}

.dy-drawer::backdrop {
    background-color: rgba(52, 53, 55, 0.4);
    transition: opacity 0.6s;
}

body:has(> .dy-drawer[open]) {
    overflow: hidden;
}

.dy-drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    padding: 16px 15px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #000;
    font-size: 15px;
    line-height: 1.5;
    text-align: right;
    background-color: var(--e-global-color-white);
    transition: transform 0.35s 0.1s;
}

.dy-drawer-close {
    position: fixed;
    top: 10px;
    right: 310px;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--e-global-color-white);
    background: none;
    border: 0;
    transition: opacity 0.3s;
}

.dy-drawer-close svg {
    display: block;
    width: 40px;
    height: 40px;
}

@starting-style {
    .dy-drawer[open] .dy-drawer-panel {
        transform: translateX(100%);
    }

    .dy-drawer[open]::backdrop,
    .dy-drawer[open] .dy-drawer-close {
        opacity: 0;
    }
}

.dy-drawer.is-closing .dy-drawer-panel {
    transform: translateX(100%);
    transition-delay: 0s;
}

.dy-drawer.is-closing::backdrop,
.dy-drawer.is-closing .dy-drawer-close {
    opacity: 0;
    transition-duration: 0.35s;
}

.dy-drawer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dy-drawer .dy-menu {
    padding-right: 1.5em;
}

.dy-drawer li {
    position: relative;
    margin: 0;
}

/* Top level: 600 weight with roomier rows; below it rows leave 40px for the chevron */
.dy-drawer .dy-link {
    display: block;
    width: calc(100% - 40px);
    margin: 0;
    padding: 2.4px 0;
    color: #212121;
    font: inherit;
    font-weight: 400;
    text-align: right;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.dy-drawer .dy-menu > li > .dy-link {
    width: 100%;
    padding: 5.6px 0;
    font-weight: 600;
}

.dy-drawer ul ul .dy-has > .dy-link {
    color: #111;
    font-weight: 600;
}

.dy-drawer .dy-menu > li.is-open {
    margin-bottom: 12px;
}

/* The chevron, on the left of the row; up when open */
.dy-drawer .dy-has > button::after,
.dy-drawer .dy-caret {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 24px;
}

.dy-drawer .dy-has > button::after {
    content: "";
    opacity: 0.5;
    background-color: #212121;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 9L12 16L5 9' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
            mask: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 9L12 16L5 9' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
    transition: transform 0.4s;
}

.dy-drawer .dy-menu > li > button::after {
    height: 35px;
    opacity: 1;
}

.dy-drawer .dy-caret {
    padding: 0;
    background: none;
    border: 0;
}

.dy-drawer .dy-has.is-open > button::after {
    transform: rotate(180deg);
}

/* Lists open below their row, sliding in from the left as they fade in */
.dy-drawer .dy-has > ul {
    display: none;
    margin-top: 4px;
    padding-bottom: 8px;
    transition: opacity 0.3s, transform 0.3s;
}

.dy-drawer .dy-has.is-open > ul {
    display: block;
}

@starting-style {
    .dy-drawer .dy-has.is-open > ul {
        opacity: 0;
        transform: translateX(-10px);
    }
}

.dy-drawer .dy-menu > .dy-has > ul {
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

/* === Header search === */

/*
 * The search dropdown (inc/site-search.php, js/site-search.js), in CommerceKit's ajax search look: a
 * white box under the box, as wide as it, rows split by grey lines, «مشاهده همه» on a dark bar, then
 * «نتیجه‌های دیگر». The script sets its max-height (down to 10px above the bottom of the screen).
 */
form[data-dy-search] {
    position: relative;
}

.dy-search {
    position: absolute;
    z-index: 9999;
    top: 100%;
    right: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: right;
}

.dy-search[hidden] {
    display: none;
}

.dy-search::-webkit-scrollbar {
    width: 5px;
}

.dy-search::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.dy-search::-webkit-scrollbar-thumb {
    background: #888;
}

.dy-search__list {
    background: #fff;
    border: 1px solid #d6d6d6;
}

.dy-search__item {
    display: flex;
    padding: 10px;
    color: #323232;
    border-bottom: 1px solid #d6d6d6;
    transition: background-color 0.2s;
}

.dy-search__item:has(+ .dy-search__all) {
    border-bottom: 0;
}

html .dy-search__item:hover,
.dy-search__item.is-active {
    color: #323232;
    background-color: #f8f8f8;
}

.dy-search__img {
    display: inline-flex;
    flex-shrink: 0;
    align-self: start;
    max-width: 60px;
}

.dy-search__img img {
    margin: 0;
    padding: 5px 5px 5px 0;
}

.dy-search__desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0 10px;
}

.dy-search__product .dy-search__title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.dy-search__price {
    overflow: hidden;
    color: var(--e-global-color-green);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dy-search__price del {
    margin-left: 5px;
    color: #999;
    font-weight: 400;
}

.dy-search__price.is-out {
    color: var(--e-global-color-warmgrey);
}

.dy-search__match {
    text-decoration: underline;
}

.dy-search__other {
    align-items: center;
    font-size: 13px;
    line-height: 1.4;
}

.dy-search__type {
    flex: none;
    margin-right: auto;
    padding-right: 10px;
    color: #999;
    font-size: 11px;
}

.dy-search__all {
    display: block;
    height: 40px;
    margin: 0 -1px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 0.02em;
    text-align: center;
    background: #373636;
}

html .dy-search__all:hover {
    color: #fff;
}

/* Picked with the arrow keys (CommerceKit showed nothing there) */
.dy-search__all.is-active {
    background: #111;
}

.dy-search__head {
    height: 33px;
    padding: 0 10px;
    color: #555;
    font-size: 11px;
    line-height: 33px;
    letter-spacing: 0.02em;
    background: #f5f3f3;
}

.dy-search__none {
    font-size: 13px;
    line-height: 40px;
    text-align: center;
}

/* === Cart drawer === */

/*
 * The cart drawer (inc/cart.php, js/cart.js): a <dialog> whose panel slides in from the left, 420px
 * wide (the whole width up to 480px) over a grey backdrop, as Shoptimizer's drawer did. The list of
 * items scrolls; the subtotal and the two buttons stay at the bottom.
 */
.dy-cart {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #000;
    background: transparent;
    border: 0;
}

.dy-cart::backdrop {
    background-color: rgba(52, 53, 55, 0.5);
    transition: opacity 0.35s;
}

/* Up to 992px Shoptimizer's phone overlay was lighter (production; Step 5 removed that overlay) */
@media (max-width: 992px) {
    .dy-cart::backdrop {
        background-color: rgba(52, 53, 55, 0.4);
    }
}

body:has(.dy-cart[open]) {
    overflow: hidden;
}

.dy-cart__panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 420px;
    padding-top: 50px;
    font-size: 16px;
    text-align: right;
    background-color: var(--e-global-color-white);
    outline: 0;
    transition: transform 0.35s;
}

/* The page's text size: 15px up to 768px */
@media (max-width: 768px) {
    .dy-cart__panel {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .dy-cart__panel {
        width: 100%;
    }
}

@starting-style {
    .dy-cart[open] .dy-cart__panel {
        transform: translateX(-100%);
    }

    .dy-cart[open]::backdrop {
        opacity: 0;
    }
}

.dy-cart.is-closing .dy-cart__panel {
    transform: translateX(-100%);
}

.dy-cart.is-closing::backdrop {
    opacity: 0;
}

.dy-cart__title {
    position: absolute;
    top: 12px;
    right: 20px;
    margin: 0;
    color: #111;
    font-size: 17px;
    line-height: 26px;
}

.dy-cart__close {
    position: absolute;
    top: 12.5px;
    left: 16px;
    display: flex;
    width: 26px;
    height: 26px;
    padding: 0;
    color: #111;
    background: none;
    border: 0;
    cursor: pointer;
}

.dy-cart__close:hover {
    color: #111;
    background: none;
}

.dy-cart__close svg {
    width: 26px;
    height: 26px;
}

.dy-cart__body {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 0 20px;
    overflow-x: hidden;
    overflow-y: auto;
    transition: opacity 0.2s;
}

.dy-cart.is-loading .dy-cart__body {
    opacity: 0.5;
}

.dy-cart__content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dy-cart__notice {
    margin: 0 0 10px;
    padding: 10px 12px;
    color: var(--e-global-color-maroon);
    font-size: 13px;
    line-height: 1.6;
    background-color: var(--e-global-color-cream);
    border-radius: 6px;
}

/* The list scrolls on its own; 18px on the left keeps its scroll bar off the items. */
.dy-cart__items {
    flex: 1;
    width: auto;
    margin: 0 -20px 0 0;
    padding: 0 20px 0 18px;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    scrollbar-color: gray transparent;
    scrollbar-width: thin;
}

.dy-cart__items::before {
    position: absolute;
    display: inline-block;
    width: 100%;
    margin-left: -20px;
    content: "";
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.dy-cart__item {
    position: relative;
    margin: 0;
    padding: 13px 35px 13px 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.4;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dy-cart__item:last-child {
    border: 0;
}

.dy-cart__link {
    display: block;
    margin-bottom: 0.25rem;
    color: #222;
}

a.dy-cart__link:hover {
    color: #111;
}

.dy-cart__link img {
    float: left;
    width: 55px;
    max-width: 55px;
    height: auto;
    margin: 3px 10px 0 0;
}

.dy-cart__remove {
    position: absolute;
    top: 15px;
    right: 0;
    display: flex;
    width: 14px;
    height: 14px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.dy-cart__remove::before {
    display: inline-block;
    width: 14px;
    height: 14px;
    content: "";
    background-color: #444;
    -webkit-mask: var(--dy-i-trash) center / contain no-repeat;
            mask: var(--dy-i-trash) center / contain no-repeat;
    transition: opacity 0.2s;
    --dy-i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

.dy-cart__remove:hover::before {
    opacity: 0.6;
}

.dy-cart__remove:disabled::before {
    opacity: 0.3;
}

.dy-cart__qty {
    display: block;
    margin-top: 2px;
    color: #888;
    font-size: 12px;
}

.dy-cart__item .amount {
    color: #111;
    font-weight: 700;
}

.dy-cart__item del {
    text-decoration: none;
}

.dy-cart__item del .amount {
    text-decoration: line-through;
}

.dy-cart__total {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 18px 0 0;
    color: #111;
    font-size: 15px;
    font-weight: 700;
    line-height: 23px;
    border-top: 1px solid #e2e2e2;
}

.dy-cart__buttons {
    margin: 0;
    padding: 13px 0 14px;
    text-align: center;
}

.dy-cart__buttons a {
    display: block;
    height: 50px;
    padding: 0 20px;
    color: #333;
    font-size: 14px;
    line-height: 50px;
    background-color: var(--e-global-color-white);
    border: 1px solid #ddd;
    border-radius: 6px;
    outline-offset: -0.2rem;
    transition: background-color 0.3s, border-color 0.3s;
}

.dy-cart__buttons a:hover {
    color: #333;
    background-color: #f8f8f8;
}

.dy-cart__buttons .dy-cart__view {
    margin-bottom: 10px;
}

.dy-cart__buttons .dy-cart__checkout,
.dy-cart__buttons .dy-cart__checkout:hover {
    color: var(--e-global-color-white);
    font-size: 15px;
    background-color: var(--e-global-color-green);
    border-color: var(--e-global-color-green);
}

.dy-cart__buttons .dy-cart__checkout:hover {
    background-color: var(--dy-green-hover);
    border-color: var(--dy-green-hover);
}

/* A padlock before «تسویه حساب» */
.dy-cart__checkout::before {
    position: relative;
    top: 1px;
    display: inline-flex;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    content: "";
    background-color: currentColor;
    -webkit-mask: var(--dy-i-lock) center / contain no-repeat;
            mask: var(--dy-i-lock) center / contain no-repeat;
    --dy-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M20 12c0-1.103-.897-2-2-2h-1V7c0-2.757-2.243-5-5-5S7 4.243 7 7v3H6c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-8zM9 7c0-1.654 1.346-3 3-3s3 1.346 3 3v3H9V7z'/%3E%3C/svg%3E");
}

/* Empty: a large basket over the message */
.dy-cart__empty {
    position: relative;
    width: 100%;
    margin: 0;
    padding-top: 115px;
    color: #222;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid #eee;
}

.dy-cart__empty::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100px;
    height: 100px;
    margin-top: 5px;
    content: "";
    background: #d4d3d3;
    transform: translate(-50%, -50%);
    -webkit-mask: var(--dy-i-empty-cart) center / contain no-repeat;
            mask: var(--dy-i-empty-cart) center / contain no-repeat;
    --dy-i-empty-cart: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 32 40"><path d="M6.783 25.703a2.264 2.264 0 0 0-2.262 2.262 2.263 2.263 0 1 0 2.262-2.262Zm11.4 0a2.264 2.264 0 0 0-2.262 2.262 2.263 2.263 0 1 0 2.262-2.262Zm-11.4 1a1.263 1.263 0 1 1-.001 2.525 1.263 1.263 0 0 1 .001-2.526Zm11.4 0a1.263 1.263 0 1 1-.001 2.525 1.263 1.263 0 0 1 .001-2.526Zm2.566-5.095v1.69a.39.39 0 0 1-.39.39H3.718a.5.5 0 0 0 0 1h16.641a1.39 1.39 0 0 0 1.39-1.39v-2.055l.005-.02 3.621-15.39H30a.5.5 0 0 0 0-1h-5.021a.5.5 0 0 0-.487.385l-1.056 4.49H2a.5.5 0 0 0-.493.583l1.863 10.9a.5.5 0 0 0 .493.417h16.886Zm2.452-10.9H2.593l1.691 9.9h16.587l2.33-9.9Zm-6.549-3.71 2.25-3.66a.501.501 0 0 0-.852-.523L15.8 6.474a.5.5 0 0 0 .852.524Zm-7.485-.524-2.25-3.66a.501.501 0 0 0-.852.525l2.25 3.659a.501.501 0 0 0 .852-.524Zm3.816-.541v-3.66a.5.5 0 0 0-1 0v3.66a.5.5 0 0 0 1 0Z"/></svg>');
}

/*
 * Free-shipping bar (inc/cart.php), in the drawer and in the cart page's table: an 8px track, the
 * share of the minimum in green, and a line of text under it.
 */
.dy-fsn {
    width: 100%;
    text-align: center;
}

.dy-fsn--drawer {
    margin-bottom: 10px;
}

.dy-fsn__track {
    height: 8px;
    margin-bottom: 3px;
    background: #ddd;
    border-radius: 5px;
}

.dy-fsn__track span {
    display: block;
    height: 8px;
    background: #3bb54a;
    border-radius: 5px;
}

.dy-fsn__text {
    display: inline-block;
    font-size: 12px;
    line-height: 1.4;
}

.dy-fsn__text .amount {
    color: #3bb54a;
    font-weight: 700;
}

.dy-fsn__shop {
    margin-right: 5px;
    color: #111;
    font-weight: 700;
    text-decoration: underline;
}

.dy-fsn--done .dy-fsn__text {
    position: relative;
    padding-right: 23px;
}

.dy-fsn--done .dy-fsn__text::before {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    content: "";
    background: #3bb54a;
    -webkit-mask: var(--dy-i-check) center / contain no-repeat;
            mask: var(--dy-i-check) center / contain no-repeat;
    --dy-i-check: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* === Footer === */

/*
 * inc/site-footer.php: a cream footer (style.md, Footer). On top a white panel with four of the pharmacy's
 * facts, then the logo, description and contact, two link columns and the trust badges, then the copyright
 * line under a beige divider. Links warm grey, green on hover. None on the checkout.
 */
.site-footer {
    --dy-i-phone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    --dy-i-pin: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    --dy-i-pharmacist: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 2v2M5 2v2M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1'/%3E%3Cpath d='M8 15a6 6 0 0 0 12 0v-3'/%3E%3Ccircle cx='20' cy='10' r='2'/%3E%3C/svg%3E");
    --dy-i-licence: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    --dy-i-clock: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
    --dy-i-genuine: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    clear: both;
    padding-top: 48px;
    color: var(--e-global-color-ink);
    font-size: 14px;
    line-height: 1.9;
    background-color: var(--e-global-color-cream);
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer p {
    margin: 0;
}

.site-footer a {
    color: var(--e-global-color-warmgrey);
    text-decoration: none;
    transition: color .15s;
}

.site-footer a:is(:hover, :focus-visible) {
    color: var(--e-global-color-green);
}

.site-footer .dy-fi-pharmacist { --dy-icon: var(--dy-i-pharmacist); }
.site-footer .dy-fi-licence { --dy-icon: var(--dy-i-licence); }
.site-footer .dy-fi-clock { --dy-icon: var(--dy-i-clock); }
.site-footer .dy-fi-genuine { --dy-icon: var(--dy-i-genuine); }
.site-footer .dy-fi-phone { --dy-icon: var(--dy-i-phone); }
.site-footer .dy-fi-pin { --dy-icon: var(--dy-i-pin); }

/* The facts: a white panel, four items with a green icon in a cream circle, beige dividers between them. */
.dy-footer-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--e-global-color-white);
    border-radius: 20px;
}

.dy-footer-facts li,
.dy-footer-facts li > a {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 12px;
    align-items: center;
    line-height: 1.6;
}

.dy-footer-facts li {
    --dy-pad: 24px;
    --dy-circle: 44px;
    position: relative;
    padding: 20px var(--dy-pad);
}

.dy-footer-facts li + li {
    border-right: 1px solid var(--e-global-color-line);
}

/* The cream circle is the first grid cell; the icon sits on its centre. */
.dy-footer-facts li::before,
.dy-footer-facts li > a::before {
    grid-row: span 2;
    width: var(--dy-circle);
    height: var(--dy-circle);
    content: "";
    background: var(--e-global-color-cream);
    border-radius: 50%;
}

.dy-footer-facts li::after {
    position: absolute;
    top: 50%;
    right: calc(var(--dy-pad) + var(--dy-circle) / 2 - 11px);
    width: 22px;
    height: 22px;
    margin-top: -11px;
    content: "";
    background-color: var(--e-global-color-green);
    -webkit-mask: var(--dy-icon) center / contain no-repeat;
            mask: var(--dy-icon) center / contain no-repeat;
}

/* The linked fact: the link is the grid, so the whole item is the link. */
.dy-footer-facts li:has(> a) {
    display: block;
}

.dy-footer-facts li:has(> a)::before {
    display: none;
}

.dy-footer-facts strong {
    align-self: end;
    color: var(--e-global-color-ink);
    font-size: 15px;
    font-weight: 600;
}

.dy-footer-facts span {
    align-self: start;
    color: var(--e-global-color-warmgrey);
    font-size: 13px;
}

.dy-footer-facts a:is(:hover, :focus-visible) strong {
    color: var(--e-global-color-green);
}

/* Logo, description and contact; two link columns; the trust badges. */
.dy-footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr)) auto;
    gap: 48px;
    padding: 48px 0;
}

.dy-footer-logo {
    display: inline-block;
    margin-bottom: 14px;
}

.dy-footer-logo img {
    display: block;
    width: 117px;
    height: 32px;
}

.dy-footer-about > p {
    max-width: 400px;
    color: var(--e-global-color-warmgrey);
}

.dy-footer-contact {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.dy-footer-contact li {
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: 10px;
    line-height: 1.8;
}

.dy-footer-contact li::before {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    content: "";
    background-color: var(--e-global-color-green);
    -webkit-mask: var(--dy-icon) center / contain no-repeat;
            mask: var(--dy-icon) center / contain no-repeat;
}

.dy-footer-contact .dy-fi-phone a {
    color: var(--e-global-color-ink);
    font-size: 17px;
    font-weight: 600;
}

.dy-footer-contact .dy-fi-phone a:is(:hover, :focus-visible) {
    color: var(--e-global-color-green);
}

.dy-footer-contact address {
    grid-column: 2;
    margin: 0;
}

.dy-footer-maps {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2;
    gap: 8px;
    margin-top: 8px;
}

/* Map links: chips (style.md, Chips). */
.dy-footer-maps a {
    padding: 2px 12px;
    color: var(--e-global-color-ink);
    font-size: 13px;
    background: var(--e-global-color-white);
    border: 1px solid var(--e-global-color-line);
    border-radius: 999px;
}

.dy-footer-maps a:is(:hover, :focus-visible) {
    color: var(--e-global-color-green);
    border-color: var(--e-global-color-green);
}

/* Column titles: bold ink with the short maroon bar of the section titles. */
.dy-footer-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--e-global-color-ink);
    font-size: 15px;
    font-weight: 600;
}

.site-footer .dy-footer-title {
    margin-bottom: 14px;
}

.dy-footer-title::before {
    flex: none;
    width: 4px;
    height: 1.1em;
    content: "";
    background: var(--e-global-color-maroon);
    border-radius: 2px;
}

.dy-footer-links li + li {
    margin-top: 6px;
}

.dy-footer-badges {
    display: flex;
    gap: 12px;
}

.dy-footer-badges a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 112px;
    background: var(--e-global-color-white);
    border: 1px solid var(--e-global-color-line);
    border-radius: 16px;
    transition: box-shadow .15s, transform .15s;
}

.dy-footer-badges a:is(:hover, :focus-visible) {
    box-shadow: var(--dy-shadow-hover);
    transform: translateY(-2px);
}

.dy-footer-badges img {
    width: auto;
    max-width: 84px;
    height: auto;
    max-height: 92px;
}

/* Copyright. */
.dy-footer-bottom {
    border-top: 1px solid var(--e-global-color-line);
}

.dy-footer-bottom .dy-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 24px;
    padding-top: 16px;
    padding-bottom: 16px;
    color: var(--e-global-color-warmgrey);
    font-size: 13px;
}

@media (max-width: 992px) {
    .dy-footer-facts {
        grid-template-columns: repeat(2, 1fr);
    }

    .dy-footer-facts li:nth-child(3) {
        border-right: 0;
    }

    .dy-footer-facts li:nth-child(n+3) {
        border-top: 1px solid var(--e-global-color-line);
    }

    .dy-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
    }

    .dy-footer-about,
    .dy-footer-trust {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .site-footer {
        padding-top: 24px;
    }

    .dy-footer-facts li {
        --dy-pad: 12px;
        --dy-circle: 38px;
        padding: 14px var(--dy-pad);
    }

    .dy-footer-facts li,
    .dy-footer-facts li > a {
        grid-template-columns: 38px 1fr;
        column-gap: 8px;
    }

    .dy-footer-facts strong {
        font-size: 13px;
    }

    .dy-footer-facts span {
        font-size: 12px;
    }

    .dy-footer-main {
        padding: 32px 0;
    }

    .dy-footer-bottom .dy-wrap {
        justify-content: center;
        text-align: center;
    }
}

/* The narrowest phones (360px): smaller circles and padding, so each fact's line keeps to one line. */
@media (max-width: 380px) {
    .dy-footer-facts li {
        --dy-pad: 8px;
        --dy-circle: 32px;
    }

    .dy-footer-facts li,
    .dy-footer-facts li > a {
        grid-template-columns: 32px 1fr;
        column-gap: 6px;
    }
}

/* === From Shoptimizer: right to left === */

/* The rules of Shoptimizer's rtl.css that our pages use (Step 12a); last, where its file came. */

.rtl select {
    padding-left: 40px;
    padding-right: 0.7em;
    background-position: 7px center;
}

.rtl fieldset legend {
    padding-right: 0;
}

.rtl,
.rtl table td,
.rtl table th,
.rtl input {
    text-align: right;
}

.rtl ul.products {
    margin-right: -15px;
    margin-left: auto;
}

.rtl ul.products li.product {
    text-align: right;
}

.rtl .content-area blockquote:before {
    right: -40px;
    left: auto;
}

@media (min-width: 993px) {
    .rtl .dy-header-cart {
        order: 99;
    }
}

.rtl .star-rating > span:before {
    transform: scaleX(-1);
}

@media (min-width: 993px) {
    .rtl .site-header .dy-header-search {
        margin-right: 3em;
        margin-left: 0;
    }

    .rtl .dy-iconnav ul ul {
        right: -9999px;
        left: auto;
    }

    .rtl .dy-header-cart {
        margin-left: 0;
        margin-right: auto;
        text-align: left;
    }

    .rtl .site-header .dy-iconnav {
        padding-left: 0;
        padding-right: 1.2em;
    }

    .dy-iconnav .menu {
        margin-left: -15px;
        margin-right: 0;
    }

    .rtl .dy-iconnav .menu-item:first-child {
        border-left: 1px solid #eee;
    }

    .rtl .dy-iconnav .menu-item:last-child {
        border: none;
    }

    .rtl .site-header .dy-header-cart {
        float: left;
    }
}

.rtl .site-content select {
    padding-right: 10px;
    padding-left: 31px;
    background-position: 8px center;
}

.rtl .dy-iconnav ul li {
    text-align: right;
}

.rtl .site-header .dy-iconnav {
    padding-right: 1.2em;
    padding-left: 0;
}

.rtl ul.products li.product .price ins {
    float: right;
}

.rtl .summary details summary {
    padding-left: 2rem;
    padding-right: 0;
}

.rtl .summary details summary:after {
    left: 0px;
    right: auto;
}

.rtl .summary details ul {
    margin-right: 13px;
    margin-left: 0;
}

.rtl .dy-product-widget ul li {
    margin-right: 22px;
    margin-left: 0;
}

.rtl .dy-product-widget ul li:before {
    right: -22px;
    left: auto;
}

.rtl .price del {
    margin-right: 0px;
    margin-left: 8px;
}

.rtl li.product .price del {
    margin-right: 8px;
    margin-left: 0;
}

.rtl .summary table td {
    padding-left: 1rem;
    padding-right: 0;
}

@media (max-width: 992px) {
    .rtl .site-header .dy-header-cart {
        right: auto;
        left: 15px;
    }

    .rtl ul.products {
        margin-left: inherit;
        margin-right: inherit;
    }

    .rtl.single-product .woocommerce-message a {
        border: none;
    }
}