/*
Theme Name: URARTU
Theme URI: https://urartu.group/
Author: URARTU
Author URI: https://urartu.group/
Description: URARTU — flexible WooCommerce theme for online stores, built with Elementor and the WordPress block editor. Includes portfolio, product filters, wishlist, compare, quick view and 3D/360° product viewer.
Version: 4.92.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: urartu
Domain Path: /languages
Tags: e-commerce, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

URARTU is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Font Awesome @font-face moved to inline style in inc/parts-enqueue.php (urartu-main-styles). */

* {
    font-optical-sizing: auto;
    font-style: normal;
}

.elementor-page .site-main {
    padding: 0;
}

/*
 * The rule that used to sit here read:
 *
 *     .site-header, .container, .woocommerce { font-family: 'system-ui', sans-serif; }
 *
 * Three selectors that between them cover the header, every container and the
 * whole of WooCommerce -- so it overrode the Montserrat set on body across
 * practically the entire site. Worse, it did not even deliver what it asked
 * for: system-ui is a generic family keyword, and quoting it turns it into a
 * request for a font *named* "system-ui", which does not exist. The browser
 * fell through to sans-serif, i.e. Arial on Windows. The theme self-hosts
 * Montserrat and declares it on body; letting that inherit is the whole point.
 */

/*
 * Also removed: .blog-page article .entry-content * { font-style: italic; }
 *
 * A universal selector inside post content set every element italic -- body
 * copy, lists, headings, code, captions. An entire article in italics is
 * markedly harder to read, and no editorial intent survives being applied to
 * everything at once. Emphasis belongs on <em>, which already provides it.
 */

.container {
    padding: 0 !important;
}

body.single.single-post.post-template-default .site-main.container {
    margin: 30px auto;
    max-width: 80vw;
}

.as-px-10{
	padding: 0 10%;
	width: 100%;
	max-width: 100%;
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

body {
    overflow-x: clip;
}

/* Main tokens
-----------------------------------------------
   Single source of truth for the default palette.
   NOTE: Redux (inc/redux/dynamic-styles.php) re-declares these same variables
   inline on :root, so they override this block at runtime when the buyer picks
   a color in Theme Options. This block only supplies the fallback defaults.
   --color-main-green / --color-second-green / --color-stock-green are kept as
   aliases of the primary color so legacy selectors keep working; the canonical
   token is --color-main-green.
--------------------------------------------- */
:root {
    /*
     * These are fallbacks, and a fallback should never be a brand colour.
     *
     * dynamic-styles.php overrides all six from Theme Options on every page
     * load, so on a healthy site nobody ever sees the values below. The
     * trouble is what happens when that inline block does not arrive — a page
     * served from a cache filled before the demo import, a plugin that strips
     * inline CSS, an install where the options row is empty. Then these show,
     * and they were #1CBF65 and #01892E: a bright green and a dark green from
     * a palette this theme retired.
     *
     * The result was a shop that looked mostly correct with green prices, a
     * green price slider and green stock labels — the exact parts whose only
     * colour source is this block. Charcoal instead: if the override is ever
     * missing the page is quietly monochrome rather than wearing two palettes
     * at once, and nobody has to work out which half is real.
     *
     * The names stay green because a hundred legacy selectors use them, and
     * renaming those is a separate job from making them the right colour.
     */
    --color-main-green: #241F1C;
    --color-second-green: var(--color-main-green);
    --color-stock-green: var(--color-main-green);
    --color-third-green: #3F3B37;
    --color-main-red: #9C3B2A;
    --color-price-green: #241F1C;
    /* Primary CTA gradient — single-sourced so buyers can rebrand every button
       from :root.

       The stops are deliberately darker than --color-main-green. The gradient
       carries white label text on "Add to cart" and "Place order", and against
       the old #1CBF9C → #1CBF65 that measured 2.34:1 and 2.42:1 — far below the
       4.5:1 minimum, on the two most important buttons in the shop. These stops
       keep the same hue and reach 4.51:1 and 4.52:1. --color-main-green itself
       is untouched and still available for badges, icons and fills, where no
       text sits on top. */
    --color-button-gradient-start: #241F1C;
    --color-button-gradient-end: #3F3B37;
    --button-gradient: linear-gradient(90deg, var(--color-button-gradient-start) 0%, var(--color-button-gradient-end) 100%);
    /* Was #001C55 — the navy this theme was originally built on. Like the
       greens above it, nobody sees it while the dynamic block arrives, and
       everybody sees it when that block does not: a shop whose body text
       turned blue on the pages where the inline CSS went missing, and grey
       everywhere else. A fallback should be the quietest correct answer,
       never a brand colour from a palette that has been retired. */
    --color-text: #241F1C;
    /* #40bf52 was 2.39:1 on white and used as a text colour. */
    --main-text-color: #2D8639;
    --main-bg-color: #202328;
    --buttons-border-radius: var(--r-md);
    /* Radius + base spacing tokens, synced with --urartu-radius from options. */
    --urartu-radius: 12px;
    --urartu-spacing: 16px;
    --background-transparrent-black: rgba(0, 0, 0, 0.7);
    --background-transparrent: rgba(0, 0, 0, 0.7);
    --background-transparrent-light: rgba(255, 255, 255, 0.5);
    --main-blur: blur(5px);

    /* ---------------------------------------------------------------
       Design tokens
       ---------------------------------------------------------------
       The theme previously carried 17 shadow values, 22 radii and ~30
       transition timings, all written out by hand at the point of use. These
       scales replace them so a buyer can rebrand from one place and so
       elements at the same depth actually look the same.
       --------------------------------------------------------------- */

    /* Elevation. Every level is offset on Y: the old symmetric
       `0 0 15px rgba(0,0,0,.1)` read as a glow, not as a lit surface. */
    --elev-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --elev-2: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .06);
    --elev-3: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
    --elev-4: 0 20px 24px -4px rgba(16, 24, 40, .10), 0 8px 8px -4px rgba(16, 24, 40, .04);

    /* Radius scale. --urartu-radius stays the buyer-facing knob. */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: var(--urartu-radius, 12px);
    --r-xl: 16px;
    --r-full: 999px;

    /* Spacing, 4pt grid. Replaces the parallel 5/10/15/20 and 4/8/12/16 sets. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 28px;
    --sp-8: 32px;

    /* Borders. Four different greys used to mean "hairline". */
    --border-subtle: #E9EAEC;
    --border-default: #D0D5DD;
    --border-strong: #98A2B3;

    /* Motion. One standard curve instead of three bespoke back-eases whose
       negative control points made elements travel backwards first. */
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);

    /* Type scale, mirrored in theme.json so block presets and theme
       templates finally agree. */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 32px;
    --fs-3xl: 40px;

    /* Accessible text colours. The brand green is 2.42:1 on white, so it can
       carry a fill but never body text or a focus ring. */
    /* Was #148848 — a green kept for accessible text on a palette the theme
       no longer ships. Basalt clears 15.5:1 on bone, which is what this was
       for. */
    --color-green-text: #241F1C;
    --color-muted-text: #5A5A5A;
    --color-focus-ring: #0B5FFF;
    /* Error red for validation wording and field borders. Deliberately not
       --color-main-red (#E25F4B), which is a large-format sale accent and only
       reaches ~3.1:1 on white — below AA for a 14px error message. */
    --color-error: #B42318;
    --color-error-bg: #FEF3F2;
}

/* Preloader
--------------------------------------------- */
/*
 * The preloader retires on its own.
 *
 * It used to be visible until JavaScript took it away, which makes a full-page
 * cover — 200% of the viewport, at z-index 1100 — depend on a script running.
 * If that script is blocked, errors, is cached stale, or simply never sees the
 * one event it was waiting for, the entire shop sits behind a dark panel with
 * no way out but a reload, and the reload does the same thing.
 *
 * A cover must never be able to outlive what it covers. The animation below
 * ends at opacity 0 with pointer-events off, so the site becomes reachable
 * after five seconds no matter what any script does or fails to do. js/
 * preloader.js still removes it as soon as the page is genuinely ready — this
 * is the floor beneath that, not a replacement for it.
 */
.preloader {
    position: fixed;
    opacity: 1;
    visibility: visible;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: rgba(32, 35, 40, 0.7);
    z-index: 1100;
    animation: urartu-preloader-retire 5s linear forwards;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader-hidden{
    opacity: 0;
    visibility: hidden;
}

@keyframes urartu-preloader-retire {
    /* Fully opaque for the first four seconds: the normal case, where the
       script hides it long before this matters. */
    0%, 80% {
        opacity: 1;
        pointer-events: auto;
    }

    /* Then it lets go, whatever else is happening. */
    100% {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

/* Someone who prefers reduced motion still needs the floor — it is not
   decoration, it is the way out. Shortened rather than removed. */
@media (prefers-reduced-motion: reduce) {

    .preloader {
        animation-duration: 2s;
    }
}

/* 
--
--Contact Form 7
--
*/

/* Screen reader hidden
--------------------------------------------- */
.screen-reader-response {
    display: none !important;
}

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

html {
    overflow-x: hidden;
    overflow-y: auto;
}

html::-webkit-scrollbar {
    width: 20px;
}

/* Track */
.city-selector-container::-webkit-scrollbar-track,
html::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

.city-selector-container::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
    background: rgba(0, 28, 85, 0.5);
    border: 7px solid transparent;
    /* Creates visible "margin" effect via transparent border */
    background-clip: padding-box;
    /* Clip background under the transparent border area */
    border-radius: var(--r-lg);
    width: 5px;
    transition: var(--dur-base) var(--ease-standard);
}

/* Handle on hover */
.city-selector-container::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 28, 85, 0.8);
    border: 7px solid transparent;
    /* Creates visible "margin" effect via transparent border */
    background-clip: padding-box;
    /* Clip background under the transparent border area */
    border-radius: var(--r-lg);
    width: 5px;

}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 * Note: display: flex is intentionally NOT set globally — it breaks
 * Elementor, Gutenberg and standard page layouts. The flex layout
 * is applied only where needed via context-specific classes
 * (blog-page, search-page, .site-main.error404, etc.).
 */

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
    border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
	border: none;
    outline: none;
    background: none;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal;
    padding: 0px 5px;
    margin: 0 5px;
    text-transform: uppercase;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
button,
input,
select,
optgroup,
textarea {
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    color: var(--color-text);
    font-weight: 500;
}

h2 {
    font-size: var(--fs-lg);
}

h3 {
    font-size: var(--fs-md);
    margin: 0;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", courier, monospace;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

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

mark,
ins {
    text-decoration: none;
}

.woocommerce-MyAccount-content mark {
    background: rgba(28, 191, 101, 1);
    color: #fff;
    padding: 3px 5px;
}

big {
    font-size: 125%;
}

.index-page~.site-footer {
    margin-top: 0 !important;
}

/* Elements
--------------------------------------------- */
body {
    background: #fff;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0;
    padding: 0 0 0 15px;
}

li {
    list-style: none;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

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

dt {
    font-weight: 700;
}

dd {
    margin: 0 1.5em 1.5em;
}

tr,
th,
td {
    color: var(--color-text);
}

:where(.wp-block-calendar table:not(.has-background) th) {
    background: #f9f9f9;
}

p {
    font-size: var(--fs-sm);
}

.site-main p,
.shop-page p,
strong,
li {
    color: var(--color-text);
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

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

figure {
    margin: 1em 0;
}

table {
    width: 100%;
    border-spacing: 0 1px;
}

/* Links
--------------------------------------------- */

a {
    color: var(--color-text);
    /* -webkit-tap-highlight-color: transparent; */
}

a:visited {
    color: inherit;
}

a:hover,
a:focus,
a:active {
    /* Not --color-main-green: it measures 2.42:1 on white, well under the 4.5:1
       needed for text. The darker token keeps the brand hue at 4.52:1. */
    color: var(--color-green-text);
    border: none;
}

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

/* Forms
--------------------------------------------- */
.wc-block-mini-cart__button {
    background: none !important;
    border: none;
}

.urartu_wc_mini_cart .woocommerce-mini-cart__buttons .button,
.wp-element-button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    padding: 0.6em 1em 0.6em;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: var(--color-text);
    border: 1px solid #ccc;
    border-radius: var(--r-md);
    padding: 3px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- */
    -webkit-appearance: none;
    margin: 0;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: var(--color-text);
    /* Was `border-color: transparent !important` alongside `outline:none`, so a
       focused field lost every visual cue for pointer and touch users — only
       keyboard users got a ring back via :focus-visible. */
    box-shadow: 0 0 0 3px rgba(11, 95, 255, .18);
    border-color: var(--color-focus-ring);
}

select {
    border: 1px solid #ccc;
    width: 150px;
    font-size: var(--fs-xs);
    padding: 3px;
    background: #fff;
}

textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    max-height: 300px;
    min-height: 50px;
}

.disabled {
    pointer-events: none;
}

#wp-calendar a {
    color: var(--color-main-green);
    font-weight: 600;
}

.wp-block-calendar {
    padding: 15px;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Wordpress search form
--------------------------------------------------------------*/
.search-form {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #999;
    border-radius: var(--r-lg);
    width: 100%;
    padding: 7px 3px;
}

.wp-block-search__button svg {
    height: 1.35em;
    min-height: 28px;
    min-width: 28px;
    width: 1.35em;
    fill: currentColor;
    vertical-align: text-bottom;
}

.search-form label input {
    height: 100%;
    background: none;
    border: none;
    color: #fff;
}

.search-submit {
    background: none;
    border: none;
    padding-right: 5px;
}

.wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
    position: relative;
}

.wp-block-search.wp-block-search__button-only .wp-block-search__input {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translate(0, -50%);
    width: 54vw;
    padding: 10px;
    outline: none;
    font-weight: 600;
    border-color: var(--main-bg-color);
    transition-duration: .5s;
}

.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__input {
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    flex-basis: 0;
    flex-grow: 0;
    margin: 0;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 0 !important;
}

/*--------------------------------------------------------------
# Pages settings
--------------------------------------------------------------*/
.main-content {
    width: 100%;
}

/*--------------------------------------------------------------
# Top Header
--------------------------------------------------------------*/

.top__header {
    height: 50px;
    z-index: 1004 !important;
}

.top__header span,
.top__header p,
.top__header a,
.top__header i {
    font-weight: 700;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    line-height: 5px;
}

.as-white-header .top__header span,
.as-white-header .top__header p,
.as-white-header .top__header a,
.as-white-header .top__header i {
    text-shadow: none;
}


.top__header>section,
.top-header__item {
    display: flex;
    justify-content: space-between;
    position: relative;
    height: 100%;
}

.top-header__item a {
    display: flex;
    justify-content: right;
    align-items: center;
    font-size: var(--fs-xs);
    line-height: 9px;
    text-transform: uppercase;
    text-decoration: none;
}

.top-header__item a:hover {
    color: var(--color-second-green);
}

.top-header__item a img,
.top-header__item .city-selector-widget img,
.urartu_wc_mini_cart__button img,
.main-navigation .menu-toggle img {
    filter: invert(100%) brightness(1.5) drop-shadow(0px 0px 1px #000);
}

.as-white-header .top-header__item a img,
.as-white-header .top-header__item .city-selector-widget img,
.as-white-header .urartu_wc_mini_cart__button img,
.as-white-header .main-navigation .menu-toggle img {
    filter: none;
}

.user {
    font-size: var(--fs-xs);
}

.user img {
    margin-right: 5px;
}

.top-header__item:last-child p {
    margin-right: 5px;
    display: flex;
    align-items: center;
}

.top-header__item p {
    margin: 0;
    font-size: var(--fs-xs);
}

.top-nav-phone,
.top-nav-date {
    margin-left: 20px !important;
}

.top-nav-mail i,
.top-nav-date i {
    margin-right: 5px;
}

.my-account-header-bg {
    visibility: hidden;
    opacity: 0;
    height: 0;
}

.top-header__item,
.login-register {
    display: flex;
    height: 100%;
    align-items: center;
}

.top-header__item>* {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
}

.login-register>.my-account-header-bg {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 60%;
    transition: 0s;
    z-index: 101;
    padding: 0;
    background: var(--main-bg-color);
    min-width: 220px;
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.login-register:hover>.my-account-header-bg {
    visibility: visible;
    opacity: 1;
    top: 100%;
    right: 0;
    color: #fff;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    outline: none;
    border-radius: var(--r-md);
    transition: 0.3s ease;
}

.login-register>.my-account-header-bg .my-account-avatar {
    display: flex;
    justify-content: center;
    padding-top: 15px;
}

.login-register>.my-account-header-bg .my-account-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    outline: 1px solid var(--color-main-green);
}

.login-register .woocommerce-MyAccount-navigation-author {
    display: none;
}

.login-register ul {
    margin: 0;
    padding: 10px 15px;
}

.login-register ul li {
    list-style: none;
    text-align: left;
    margin: 0 0 5px 0;
    padding: 7px 0;
}

.login-register ul li a {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.7);
    justify-content: left;
    color: #fff !important;
    transition: var(--dur-base) var(--ease-standard);
}

.login-register ul li a:hover {
    color: var(--color-second-green);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

.top__header .container{
    margin: 0 10%;
    width: auto;
    max-width: 100% !important;
}

.home .site-header__container{
    max-width: 100vw !important;
}

.mobile-menu {
    display: none !important;
}

/* Hide Header Builder mobile menu container on desktop (shown as sidebar on mobile) */
.main-navigation > .menu-container,
#site-navigation-sidebar {
    display: none;
}

/* Sub-menus are initially hidden in the mobile sidebar;
   toggled via JS (main.js) when a parent link is tapped. */
#site-navigation-sidebar .sub-menu {
    display: none;
}
#site-navigation-sidebar .sub-menu.is-open {
    display: block;
}

.header-section {
    height: 70px;
}

.header-index .header-section {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 11;
}

.admin-bar .header-index .header-section {
    top: 50px;
}

.site-header__general {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    z-index: 100;
    position: relative;
    margin: 0;
    border-radius: 20px;
}

.fixed-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 101;
    transition: top 0.5s ease-in-out;
}

.fixed-menu .site-header__container:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    width: auto;
    height: 70px;
    background: var(--background-transparrent);
    backdrop-filter: var(--main-blur);
    border-radius: 20px;
    transition: var(--dur-slow) var(--ease-standard);
    transition-delay: 0.3s;
}

.as-white-header .fixed-menu .site-header__container:after {
    background: none;
}

.fixed-menu .site-header__container:after {
    box-shadow: var(--elev-2);
}

.as-white-header .fixed-menu:after {
    background: var(--background-transparrent-light);
}

.fixed-menu .site-header__container {
    background: none !important;
    box-shadow: none !important;
}

.site-header__general.fixed-menu {
    animation: slide-in 0.5s forwards;
}

.admin-bar .fixed-menu {
    top: 32px;
    animation: admin-slide-in 0.5s forwards;
}

@keyframes slide-in {
    from {
        top: -100px;
    }

    to {
        top: 10px;
    }
}

@keyframes admin-slide-in {
    from {
        top: -100px;
    }

    to {
        top: 32px;
    }
}

.site-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
    background-color: var(--main-bg-color);
    animation: fixed_menu 0.6s;
    position: relative;
	z-index: 1001;
}

.site-header>* {
    z-index: 2;
}

.site-header:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.as-white-header:before,
.header-index:before {
    display: none;
}

.site-header-background {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.header-section {
    position: relative;
    z-index: 1002;
}

.as-white-header {
    min-height: auto;
    background-color: transparent;
}

.site-header.header-index {
    justify-content: unset;
    position: relative;
    height: 100vh;
    max-height: 100vh;
    background: none;
}

.header-index__slider {
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

.header-index__slider>*,
.header-index__slider>*>* {
    max-height: 100vh;
}

.header-index .top__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/*
 * Was `.site-header * { color:#fff; fill:#fff; }`.
 *
 * The header's twin of the footer bug. It survived only because a second rule
 * below repaints everything with var(--color-text) when the header carries
 * .as-white-header — so a light header without that class rendered white on
 * white. The colour is a Theme Option, and an option that can make the header
 * unreadable depending on an unrelated class is not a setting, it is a trap.
 *
 * Derived from the header background instead, by the same rule the footer and
 * the badges use. .as-white-header still works and still wins, so an existing
 * site keeps exactly the header it had.
 */
.site-header {
    color: var(--u-header-fg, #241F1C);
}

.site-header svg {
    fill: currentColor;
}

.site-header.as-white-header * {
    color: var(--color-text);
    fill: var(--color-text);
    font-weight: 600;
}

.urartu_wc_mini_cart__button .cart-count {
    font-weight: 700;
}

.site-header.as-white-header .menu-item-has-children:after {
    color: var(--color-text);
}

.wp-block-search.wp-block-search__button-only .wp-block-search__button {
    background: none;
    font-size: var(--fs-xl);
    padding: 0;
    margin: 0 0 0 15px;
    border: none;
    outline: none;
}

.wc-block-mini-cart {
    display: inline-block;
    font-size: var(--fs-xs);
}

.site-branding,
.main-navigation,
.site-header>.mini-cart-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.main-navigation * {
    height: auto;
}

.site-header .mini-cart-wrapper .wp-block-woocommerce-customer-account {
    margin: 0;
}

.site-header .site-header__container,
.site-header .mini-cart-container,
.site-header .mini-cart-container .mini-cart-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    position: relative;
}

.site-header .mini-cart-container {
    justify-content: right;
}

.site-header .site-header__container {
    height: 100%;
	max-width: 100% !important;
    margin: 0 10%;
    z-index: 0;
    background: var(--background-transparrent);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    padding: 0 30px !important;
    border-radius: 20px !important;
    transition: var(--dur-slow) var(--ease-standard);
    transition-delay: 0.3s;
}

.site-header .site-header__container.hover-active,
.site-header .site-header__container.hover-active:after {
    border-radius: 20px 20px 0 0 !important;
    transition-delay: 0s;
}

.site-header .site-header__container.toggled {
    backdrop-filter: none;
}

.as-white-header .site-header__container {
    display: flex;
    box-shadow: var(--elev-1);
    background: transparent;
    border-radius: var(--r-md);
}

.as-white-header .vertical_menu .sub-menu * {
    background-color: rgba(0, 0, 0, 0) !important;
    color: var(--color-text) !important;
}

.as-white-header .vertical_menu>.sub-menu {
    background-color: var(--background-transparrent-light);
}

.as-white-header .main-navigation li.vertical_menu li.wc-category-item.hover {
    box-shadow: var(--elev-1);
}

.site-header__container .urartu_wc_mini_cart__button {
    display: flex;
    align-items: center;
    margin: 0 0 0 10px;
    padding: 0 0 0 20px;
    height: 100%;
    cursor: pointer;
}

.page-title {
    font-size: var(--fs-xl);
    text-transform: uppercase;
    text-align: center;
}

.site-header_title__container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    height: 250px;
    font-size: var(--fs-2xl);
}

.single-product .site-header {
    justify-content: unset;
}

.single-product .site-header_title__container {
    height: auto;
    min-height: unset;
    justify-content: left;
    flex-direction: unset;
}

.site-header_title__breadcrumbs {
    height: auto;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.6);
    --bs-gutter-x: 1.5rem;
    margin-right: calc(var(--bs-gutter-x)* .5);
    margin-left: calc(var(--bs-gutter-x)* .5);
    font-size: var(--fs-sm);
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: var(--r-md) 5px 0 0;
}

.as-white-header .site-header_title__breadcrumbs {
    padding: 12px 15px 0;
    border-radius: var(--r-md);
    margin: 10px auto 0;
    width: 80vw;
    position: static;
    background: none;
}

.breadcrumbs__separator {
    margin: 0 8px;
    font-size: var(--fs-xs);
    line-height: 5px;
}

.breadcrumbs a:hover,
.site-header_title__breadcrumbs>i,
.breadcrumbs__separator i {
    color: var(--color-main-green);
}

.single-product .site-header__title {
    display: flex;
    height: 230px;
    align-items: end;
}

.breadcrumbs {
    display: inline-block;
    line-height: 20px;
    font-size: var(--fs-xs);
}

.breadcrumbs>span:first-child:before {
    font-family: Fontawesome;
    content: '\f015';
    color: var(--color-main-green);
    margin-right: 10px;
}

.site-header_title__breadcrumbs a {
    text-decoration: none;
    font-weight: 500;
}

/* Main Logo
--------------------------------------------- */

.site-branding .site-title,
.site-branding .site-title a {
    display: flex;
    align-items: center;
}

.site-branding .site-title a picture {
    display: flex;
}

.site-header__container.header-menu>div.site-branding>h2>a>img {
    max-width: 150px;
    min-width: 150px;
    width: 150px;
}

.site-branding .site-title a img {
    max-height: 38px;
    width: auto;
}

/* Navigation
--------------------------------------------- */

nav>div>ul>.menu-item-has-children:after {
    font-family: Fontawesome;
    content: '\f078';
    color: #fff;
    font-size: var(--fs-xs);
    margin-left: 7px;
    transition: var(--dur-base) var(--ease-standard);
}

nav>div>ul>.menu-item-has-children:hover:after {
    transform: rotate(180deg);
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation ul ul {
    box-shadow: var(--elev-1);
    float: left;
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 99;
    background: var(--background-transparrent);
    backdrop-filter: var(--main-blur);
}

.site-header.as-white-header .main-navigation ul ul {
    background-color: var(--background-transparrent-light);
}

.nav-menu>.menu-item:nth-last-child(-n+2):hover>ul {
    right: 0 !important;
    left: unset !important;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
    top: 100%;
    left: auto;
    opacity: 1;
    visibility: visible;
}

.site-loading .main-navigation ul li>ul {
    display: none !important;
}

.main-navigation ul li ul:after {
    content: '';
    background: var(--color-main-green);
    height: 2px;
    border-radius: var(--r-lg);
    position: absolute;
    bottom: 0;
    left: -1%;
    right: -1%;
    z-index: 100;
}

.main-navigation ul .not-have-ul a:nth-last-child(-n+2):before,
ul.menu>.not-have-ul a:before {
    position: absolute;
    content: '';
    left: 0 !important;
    right: 100%;
    bottom: -1px;
    height: 2px;
    transition: 0.15s;
    background-color: var(--color-main-green);
}

ul.menu>.not-have-ul:hover a:before {
    right: 0 !important;
}

.main-navigation ul li.menu-item-has-children:before {
    content: '';
    background: var(--color-main-green);
    height: 2px;
    width: 0;
    border-radius: var(--r-lg);
    position: absolute;
    bottom: -1px;
    left: auto;
    margin-left: -2px;
    z-index: 100;
    transition: 0.15s ease;
}

.main-navigation ul li.menu-item-has-children.vertical_menu:before {
    left: -2px;
    margin: 0;
}

.main-navigation ul li.menu-item-has-children:hover:before {
    width: var(--submenu-width, 0);
}

.main-navigation>div>ul>li:nth-last-child(-n+2):hover>ul,
.main-navigation>div>ul>li:nth-last-child(-n+2).focus>ul,
.main-navigation>div>ul>li:nth-last-child(-n+2) li:hover>ul {
    left: auto;
    right: 100%;
}

.main-navigation ul li:nth-last-child(-n+2):before,
.main-navigation>div>ul>li:nth-last-child(-n+2):hover>ul li:before {
    left: auto;
    right: -2px;
}

.main-navigation>div>ul>li:nth-last-child(-n+2):hover>ul li:before {
    right: calc(100% - 2px) !important;
}

.main-navigation ul li.full_width_megamenu.menu-item-has-children:before,
.main-navigation ul li.full_width_megamenu .menu-item-has-children:before {
    left: 50%;
    right: 50%;
}

.main-navigation ul li.full_width_megamenu.menu-item-has-children:hover:before {
    width: var(--submenu-width, 0);
    left: -2px;
    right: 2px;
}

.main-navigation ul ul li.menu-item-has-children:before {
    content: '';
    background: var(--color-main-green);
    height: 2px;
    border-radius: var(--r-lg);
    position: absolute;
    bottom: unset;
    left: calc(100% - 2px);
    top: -1px;
    right: unset;
    z-index: 100;
}

.main-navigation ul li:hover ul li.menu-item-has-children:before {
    left: 100%;
    right: unset
}

.main-navigation ul li.full_width_megamenu li:before {
    display: none;
}

.main-navigation ul ul ul {
    left: 95%;
    top: 0;
    z-index: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
    display: block;
    left: 100%;
    top: 0;
}

.main-navigation ul a {
    display: flex;
    align-items: center;
    position: relative;
    padding: 15px 0;
    height: 100%;
}

.main-navigation ul li ul a {
    margin: 0 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: var(--fs-xs);
    width: 100%;
}

.main-navigation ul li ul a:hover {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.main-navigation a:hover {
    /*
     * Was #fff !important, twice.
     *
     * That assumes every header is dark. On a light one — which is what this
     * theme's own demo ships — a hovered menu link turned white on white and
     * simply disappeared, taking the mega menu's parent item with it. There is
     * even a `.as-white-header` override below that patches the same mistake
     * for one case; the accent works for both.
     */
    color: var(--color-main-green, currentColor);
}

.main-navigation ul ul a {
    position: relative;
    z-index: 2 !important;
    min-width: 200px;
}

.main-navigation .menu>li {
    position: relative;
    margin: 0;
    padding: 0 10px;
}

.main-navigation .menu li {
    display: flex;
    align-items: center;
}

.main-navigation .menu li li {
    transition: var(--dur-base) var(--ease-standard);
}

.main-navigation .menu li li:hover {
    background: rgba(0, 0, 0, 0.5);
}

.as-white-header .main-navigation .menu li li:hover {
    background: rgba(255, 255, 255, 0.4);
}

.main-navigation li>ul>li {
    position: relative;
    padding: 0;
    margin: 0;
}

.main-navigation li>ul li.menu-item-has-children:after {
    font-family: Fontawesome;
    content: '\f078';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-xs);
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 3;
}

.main-navigation li {
    position: relative;
}

.main-navigation li .sub-menu {
    display: flex;
    flex-direction: column;
}

.main-navigation a {
    display: block;
    height: auto;
    text-decoration: none;
    border: none;
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
}

.main-navigation a:hover {
    /*
     * Was #fff !important, twice.
     *
     * That assumes every header is dark. On a light one — which is what this
     * theme's own demo ships — a hovered menu link turned white on white and
     * simply disappeared, taking the mega menu's parent item with it. There is
     * even a `.as-white-header` override below that patches the same mistake
     * for one case; the accent works for both.
     */
    color: var(--color-main-green, currentColor);
}

.as-white-header .main-navigation a:hover {
    color: var(--color-green-text) !important;
}


.main-navigation ul li ul li ul li ul li ul li ul {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 985px) {

    /*
     * Scoped to the menu's own links, and no longer !important.
     *
     * This was `.main-navigation a`, forced, so every link anywhere inside the
     * navigation was pinned to the smallest size in the scale — including the
     * contents of a mega panel, which is a block of page content that happens
     * to live inside a <nav>. No rule could enlarge it, whatever its
     * specificity, and the panel's copy stayed at 12px.
     */
    .main-navigation > div > ul > li > a,
    .main-navigation > ul > li > a,
    .main-navigation .menu > li > a {
        font-size: var(--fs-xs);
    }

    .main-navigation .menu>li {
        margin: 0;
    }

    .site-branding .site-title a picture {
        display: flex
    }

    .site-branding,
    .mini-cart-container {
        width: 10%;
    }

    .wp-block-search.wp-block-search__button-only .wp-block-search__button {
        margin: 0;
    }

    .site-header__container .urartu_wc_mini_cart__button {
        margin: 0;
        padding: 0 0 0 5px;
    }

    .site-header__container .mini-cart-container svg,
    .site-header__container .mini-cart-container img {
        max-width: 20px;
    }

    .site-header .mini-cart-container {
        justify-content: space-between;
    }

}

@media (min-width: 985px) {

    /*
     * Scoped to the menu's own links, and no longer !important.
     *
     * This was `.main-navigation a`, forced, so every link anywhere inside the
     * navigation was pinned to the smallest size in the scale — including the
     * contents of a mega panel, which is a block of page content that happens
     * to live inside a <nav>. No rule could enlarge it, whatever its
     * specificity, and the panel's copy stayed at 12px.
     */
    .main-navigation > div > ul > li > a,
    .main-navigation > ul > li > a,
    .main-navigation .menu > li > a {
        font-size: var(--fs-xs);
    }

}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul.menu {
    display: block;
    width: 100%;
    overflow: hidden;
    padding-right: 10px;
}

@media screen and (min-width: 37.5em) {

    .menu-toggle {
        display: none;
    }

    .main-navigation ul {
        display: flex;
    }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    text-align: end;
    flex: 1 0 50%;
}

.vertical_menu {
    position: static !important;
}

.vertical_menu li {
    transition: 0.5s !important
}

.main-navigation li.vertical_menu li a {
    margin: 0 !important;
    padding: 7px 10px;
}

.vertical_menu .sub-menu {
    left: 0;
    right: 0;
    width: 100%;
    background: none;
}

.vertical_menu>.sub-menu .sub-menu {
    position: absolute;
    left: 230px;
    width: 230px;
}

.vertical_menu li.menu-item-has-children:after {
    right: unset;
    left: 215px;
}

.main-navigation li.vertical_menu>ul>li {
    display: inline !important;
    width: 230px;
}

.vertical-submenu-container {
    display: flex;
    justify-content: space-between;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
}

.vertical-submenu-level2 ul {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
}

.vertical-submenu-level3 {
    position: static !important;
    width: 100% !important;
}

.vertical-submenu-level3 ul {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mini Cart Container
--------------------------------------------- */

.mini-cart-wrapper>form.wp-block-search__button-only {
    margin: 0;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
    display: block;
}

.updated:not(.published) {
    display: none;
}

.page-content,
.entry-summary {
    margin: 3em 0 0;
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

/* Sample Page
--------------------------------------------- */

.wp-block-quote {
    border-left: 0.4em double var(--color-second-green);
    margin: 0 0 1.75em;
    padding-left: 1em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

/* Widgets
--------------------------------------------- */

.widget {
    margin: 0 0 1.5em;
}

.shop-widget {
    border-radius: var(--r-md);
    padding: 10px;
    box-shadow: var(--urartu-shadow, 0 0 15px rgba(0, 0, 0, 0.1));
}

.wp-block-group__inner-container h2,
.widget h2 {
    font-size: var(--fs-sm) !important;
    margin: 10px 0 15px !important;
    padding-bottom: 15px;
    border-bottom: 1px solid #e1e1e1;
    color: var(--color-text);
}

.widget select {
    max-width: 100%;
}

/* Recent comments
--------------------------------------------- */

.wp-block-latest-comments .wp-block-latest-comments__comment a {
    font-size: var(--fs-sm);
}

/* Search Widget
--------------------------------------------- */

.widget-area .wp-block-search__inside-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    margin-top: 5px;
}

.widget-area .wp-block-search__inside-wrapper input {
    box-shadow: var(--elev-2);
    border: none !important;
    padding: 3px 12px;
}

.widget-area .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon {
    padding: 8px 15px;
}

/* My Account Widget
--------------------------------------------- */
.widget_urartu_wc_my_account,
.wishlist_compare__tools {
    display: flex;
}

.wishlist_compare__tools {
    margin-right: 22px;
}

.wishlist_tool,
.compare_tool {
    display: flex;
    align-items: center;
}

.wishlist_tool {
    margin-right: 15px;
}

.wishlist_compare__tools a {
    display: block;
    position: relative;
    font-size: var(--fs-sm);
    margin: 0 10px;
}

.wishlist_compare__number {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -21%;
    top: -27%;
    background: var(--color-main-green);
    width: 14px;
    height: 14px;
    border-radius: 100%;
    font-size: var(--fs-xs);
    color: #fff !important;
}

.tools-item a {
    position: relative;
}

.tools-item a .wishlist_compare__number {
    display: flex;
    align-items: center;
    justify-content: space-around;
    right: 28%;
    top: -15%;
    width: 18px;
    height: 18px;
    background: var(--color-main-green);
    border-radius: 100%;
    font-weight: 700;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
    display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.wp-caption-text {
    text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
    margin-bottom: 1.5em;
    display: grid;
    grid-gap: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
    grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
    grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
    grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
    display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
    display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

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

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: var(--r-md);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
    outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

    /*rtl:ignore*/
    float: left;
    margin: 0 1em 0 0;
}

.alignright {

    /*rtl:ignore*/
    float: right;
    margin: 0 0 0 1em;

}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Blog Page
--------------------------------------------------------------*/
.site-main {
    min-height: 50vh;
}

.blog-page {
    display: grid;
    min-height: 500px;
    gap: 30px;
    margin: 30px auto;
}

/*
 * Blog cards centre their chrome -- date badge, category, title, byline.
 *
 * This was `.blog-page article *`, a universal selector that also pinned every
 * element to line-height: 18px. A 20px title therefore had less leading than
 * its own type size, so any headline that wrapped collided with itself. It also
 * centred the article body, and centred running text gives the eye no reliable
 * left edge to return to on each line.
 *
 * Leading is proportional now, and the centring is listed out by part instead
 * of applied to everything that happens to be inside an article.
 */
.blog-page article .post-thumbnail,
.blog-page article .post-date,
.blog-page article .post-category,
.blog-page article .entry-header,
.blog-page article .entry-meta,
.blog-page article .entry-footer {
    text-align: center;
}

.blog-page article {
    line-height: 1.6;
}

.blog-page article .entry-title {
    line-height: 1.3;
    letter-spacing: -.01em;
}

/* The card excerpt stays centred. A later rule in this file sets it explicitly,
   so that is a deliberate choice by the theme's author rather than fallout from
   the universal selector above -- and with the title, date and category all
   centred, pulling only the excerpt left would read as a mistake. */

.single-post .entry-meta {
    text-align: center;
    margin-top: 15px;
}

.single-post .post-category .post-categories {
    padding: 0;
}

.single-post .post-category .post-categories a {
    color: #fff;
    font-weight: 600;
    padding: 8px 15px;
    display: block;
    font-size: var(--fs-sm);
    line-height: normal;
}

.single-post .post-category {
    margin-top: -20px;
}

.blog-page article .entry-title,
.blog-page article .entry-content,
.archive .site-main .archive-page .entry-header .entry-title {
    margin: 10px 0;
}

article .entry-meta a {
    color: var(--color-text);
    transition: var(--dur-base) var(--ease-standard);
}

article .entry-meta a:hover {
    color: var(--color-main-green);
}

.blog-page article .entry-content {
    text-align: center;
    color: var(--color-text);
    font-size: var(--fs-sm);
}

.post-category {
    display: flex;
    justify-content: center;
    margin-top: -15px;
    z-index: 10;
    position: relative;
}

.post-category .post-categories {
    padding: 5px 8px;
    font-size: var(--fs-xs);
	line-height: 16px;
    background: var(--color-main-green);
    border-radius: var(--r-md);
    box-shadow: 0 0 15px var(--color-main-green);
    transition: var(--dur-base) var(--ease-standard);
}

.post-category .post-categories:hover {
    transform: scale(1.1);
}

.single-post .entry-meta .post-category .post-categories {
    padding: 7px 20px;
}

.post-category .post-categories a {
    color: #fff;
    font-weight: 600;
}

.post-comments {
    position: relative;
    margin-left: 10px;
}

.post-comments-number {
    position: absolute;
    right: -44%;
    top: -58%;
    font-size: var(--fs-xs);
    background: #fff;
    border-radius: 50%;
    padding: 3px;
}

.entry-footer a {
    margin: 0 5px;
}

/* To Up */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#topBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 70px;
    right: -40px;
    padding: 0;
    width: 40px;
    height: 40px;
    font-size: var(--fs-lg);
    color: var(--color-second-green);
    border: 3px solid var(--color-second-green);
    border-radius: 100%;
    cursor: pointer;
    animation: fadeIn 0.3s;
    transition: var(--dur-base) var(--ease-standard);
    box-shadow: var(--elev-1);
    background: none;
}

#topBtn.hide {
    right: -40px;
    animation: fadeOut 0.3s;
}

#topBtn.show {
    right: 30px;
}

/** * ------------------------------------------------------------------------------------------------ * Footer * ------------------------------------------------------------------------------------------------ */
.site-footer {
    width: 100%;
    height: auto;
    /* Painted from the Theme Option by inc/redux/dynamic-styles.php; this is
       the fallback for a shop that has cleared the setting. */
    background: var(--u-footer-bg, #F7F3EE);
}

.site-footer a {
    border: none;
}

.footer-privacy-policy:hover {
    color: var(--color-second-green) !important;
    transition: var(--dur-base) var(--ease-standard);
}

.footer__site-info {
    display: flex;
    flex-direction: column;
    padding: 35px 0 20px !important;
}

.footer__main {
    display: flex;
    justify-content: space-between;
}

.Column-start {
    max-width: 28%;
    width: 28%;
}

.Column-end,
.Column-center {
    display: flex;
    flex-direction: column;
    max-width: 18%;
    width: 18%;
    padding: 0 10px;
    text-align: left;
}

/*
 * Was `.footer__main * { color: rgba(255,255,255,.85); padding: 0; margin: 0; ... }`.
 *
 * The third universal selector of its kind in this theme, and the one that
 * kept the footer invisible after the other two were fixed: it repainted every
 * descendant white regardless of the background the shop had chosen, and while
 * it was at it, stripped the padding and margin from every element inside — so
 * the widgets had no internal rhythm and the column read as a list of stranded
 * lines.
 *
 * Colour is inherited from the footer, which is painted from the option and
 * held above a legibility floor. The list and link resets are kept, because
 * those were the parts worth having, and applied to the elements they concern.
 */
.footer__main a {
    color: inherit;
    text-decoration: none;
}

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

.footer__main .widget {
    border: none;
}

.footer__main .urartu_share_links_item,
.footer__main .urartu_share_links_item:hover {
    border-color: rgba(255, 255, 255, 0.7) !important;
    filter: brightness(0) saturate(100%) invert(100%);
}

.footer__main .urartu_share_links_item:hover {
    opacity: 0.5;
}

.footer__main h2,
.footer__main .widgettitle {
    /* Every declaration here is !important because the widget markup this sits
       on brings its own. The colour used to be a flat #fff, written when the
       footer was dark, and it outranked everything that tried to correct it
       once the background became a setting. It carries the token now, so the
       heading follows the footer instead of overriding it. */
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    margin: 0 !important;
    padding: 0 0 15px !important;
    background: none !important;
    color: var(--u-footer-heading, var(--u-basalt, #241F1C)) !important;
    border: none !important;
}

.footer__main a {
    transition: var(--dur-base) var(--ease-standard);
    color: rgba(255, 255, 255, 0.7);
    font-size: inherit !important;
    text-transform: uppercase;
    padding: 5px 0;
    font-size: var(--fs-xs) !important;
}

.footer__main li {
    font-size: var(--fs-xs);
    padding: 0;
    margin: 3px 0;
    display: flex;
    flex-direction: column;
    justify-content: left;
}

.footer__main .Column-end li a {
    color: #fff;
}

.footer__main li:last-child {
    padding-bottom: 0;
}

.footer__main li ul {
    margin-left: 10px;
}

.footer__main li ul li {
    padding: 5px 0 0;
}

.footer__main a:hover {
    color: #fff;
}

.footer__main a:before {
    display: none;
}

.footer__main ul li a:hover {
    padding-left: 10px;
    opacity: 0.8;
}

.footer__main .woocommerce-MyAccount-navigation ul,
.footer__main .footer__main.woocommerce-MyAccount-navigation>ul .menu-item-active {
    padding: 0;
    margin: 0;
}

.Column-start a,
.Column-start a:hover,
.footer__main .menu-item-active {
    border: none;
}

.footer__main .wp-block-latest-posts__list>li>a {
    transition: var(--dur-base) var(--ease-standard);
    border: none;
    color: var(--background-transparrent);
}

.footer__main>div {
    padding: 0 10px;
    margin: 15px 0;
}

.footer__main>div:first-child {
    padding-left: 0;
}

.footer__main>div:first-child .widget_block {
    display: flex;
    line-height: 14px;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.footer__main>div:last-child {
    padding-right: 0;
}

.Column-start {
    font-size: var(--fs-xs);
}

.Column-start>div>p {
    margin-top: 0;
    padding-right: 25px;
}

.Column-center * {
    text-align: left;
}

.under_footer_1>div {
    display: flex;
    font-size: var(--fs-xs);
}

.wp-block-latest-posts__list {
    display: block;
}

.wp-block-categories-list.wp-block-categories li a,
.wp-block-archives-list.wp-block-archives li a,
.wp-block-latest-posts__list>li a {
    display: inline-block;
    width: 100%;
    font-size: var(--fs-sm);
    padding: 5px;
    transition: var(--dur-base) var(--ease-standard);
}

.wp-block-categories-list.wp-block-categories li a:hover,
.wp-block-archives-list.wp-block-archives li a:hover,
.wp-block-latest-posts__list>li a:hover {
    padding-left: 15px;
}

.Column-center>div>ul.wp-block-latest-posts__list>li>a {
    transition: var(--dur-base) var(--ease-standard);
    border: none;
    color: rgba(255, 255, 255, 0.7);
}

.Column-center>div>ul.wp-block-latest-posts__list>li:hover a {
    color: #fff;
    transition: var(--dur-base) var(--ease-standard);
    border: none;
}

.footer__bottom {
    /* Was #1a1d22 flat: a near-black bar under every shop whatever its
       palette, which on a warm ivory page is a strip of somebody else's
       design. The token is emitted from the footer ground, and the literal
       stays as the value a theme with no tokens falls back to. */
    background: var(--u-footer-bar-bg, #1a1d22);
    padding: 15px 0;
    /* No height. The bar wraps to two rows — the widget area and the meta
       line — and 60px cropped whichever one came second. */
    display: flex;
    align-items: center;
}

.footer__bottom-columns {
    display: flex;
    justify-content: space-between;
    color: var(--u-footer-bar-fg, #fff);
    font-size: var(--fs-xs);
}

.footer__bottom-columns>div {
    max-width: 50%;
    width: 50%;
}

.under_footer_1>div>span>a {
    color: #e1e1e1;
}

.copyright-container {
    display: flex;
}

.copyright * {
    margin-right: 5px;
}

.footer__bottom-columns>div {
    display: flex;
    align-items: center;
}

.footer__bottom-columns>.under_footer_2>div,
.footer__bottom-columns>.under_footer_1>div {
    margin: 0;
    padding: 0;
    color: gray;
}

.footer__bottom-columns>.under_footer_1 {
    justify-content: left;
}

.footer__bottom-columns>.under_footer_2 {
    justify-content: right;
}

/*
 * Was `.site-footer * { color: #fff; }`.
 *
 * A blanket white on every descendant, written when the footer was dark
 * (rgb(26 28 30), still set below). The footer colour is a Theme Option now,
 * and on the default light ground that rule put white text on cream at 1.1:1 —
 * present in the markup, invisible on screen. Colour is inherited from the
 * footer itself, which the generator paints from the option, and the ink is
 * derived from the background so it stays legible whatever a shop chooses.
 */
.site-footer {
    color: var(--u-footer-fg, #68605A);
}

.site-footer .wp-block-image {
    margin: 0;
}

.label {
    text-align: left;
}

/* Comments Area */

.comments-area .comment-respond form .logged-in-as {
    line-height: 30px;
}

.comments-area .comment-respond form .logged-in-as a {
    transition: var(--dur-base) var(--ease-standard);
    border-bottom: 2px solid #e1e1e1;
    padding: 5px 0;
}

.comments-area .comment-respond form .logged-in-as a:hover {
    border-color: var(--color-main-green);
}

.comments-area .comment-respond form .logged-in-as .required-field-message {
    display: block;
    width: 100%;
}

/* Swatches */
.value .swatch {
    position: relative;
    float: left;
    border: 2px solid #fff;
    outline: 1px solid #e1e1e1;
    cursor: pointer;
    margin: 5px 10px 5px 0;
    transition: var(--dur-base) var(--ease-standard);
}

.text-container {
    border-radius: var(--r-md);
    line-height: normal;
}

.value .swatch:hover {
    outline-color: #999;
}

.value .swatch::before {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    font-family: Fontawesome;
    content: '\f00c';
    font-size: var(--fs-xs);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    width: 24px;
    height: 24px;
}

.value .swatch.selected::before {
    opacity: 1;
}

.text-container {
    cursor: pointer;
    text-align: center;
    float: left;
    font-size: var(--fs-xs);
    background: none;
    padding: 3px 5px;
    margin-right: 15px;
    border: 2px solid #fff;
    outline: 1px solid #e1e1e1;
}

.value .text-container.selected {
    outline: 1px solid var(--color-text);
}

.swatch {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.attribute-value img {
    width: 100%;
    height: 100%;
}


/* 404 Page */
.error404 .site-main {
    width: 100%;
    justify-content: center;
    min-height: 50vh;
}

.error404 .site-main * {
    text-align: center;
}

.error404 .site-main .page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.error404 .site-main .search-form {
    width: 65%;
}

.error404 .search-form label {
    width: 95%;
}

.error404 .site-main .search-form input {
    width: 90%;
    border: none;
    text-align: left;
}

.error404 .search-form label input {
    text-align: left;
    width: 100%;
    outline: none;
}

/* Search Page */

.search-page .site-main {
    display: flex;
    flex-direction: column;
}

.search-page .site-main article {
    display: inline-flex;
    position: relative;
    margin: 0;
}

.search-page .site-main .blog-posts.columns-1 article{
	gap: 20px;
}

.search-page .site-main .blog-posts.columns-1 article .entry-summary,
.search-page .site-main .blog-posts.columns-1 article .entry-footer .footer-meta {
	margin: 0 0 20px;
}

.search-page .site-main .blog-posts.columns-1 article .entry-header a{
	font-size: var(--fs-lg);
}

.search-page .site-main .blog-posts.columns-1 article .entry-summary p,
.search-page .site-main .blog-posts.columns-1 article a{
	font-size: var(--fs-sm);
}

.search-page .site-main .blog-posts.columns-1 article .entry-summary p{
	-webkit-line-clamp: 5;
}

.search-page .site-main .blog-posts.columns-1 article .post-thumbnail{
	width: 40%;
	margin: 0;
}

.search-page .site-main .blog-posts.columns-3 article,
.search-page .site-main .blog-posts.columns-4 article{
	flex-direction: column;
}

.search-page .site-main .blog-posts.columns-3 article .post-thumbnail,
.search-page .site-main .blog-posts.columns-4 article .post-thumbnail{
	width: 100%;
	margin: 0;
}

.search-page .site-main .blog-posts.columns-3 article .post-thumbnail img,
.search-page .site-main .blog-posts.columns-4 article .post-thumbnail img{
	border-radius: 15px 15px 0 0;
}

.search-page .site-main article * {
    text-align: left;
}

.search-page .site-main article a {
	display: inline-block;
    margin: 0;
    font-size: var(--fs-sm);
	line-height: 16px;
}

.search-page .site-main article .article-content {
    width: 100%;
}

.search-page .site-main article h2,
.search-page .site-main article h2 a {
    font-size: var(--fs-md);
}

/* Search results grid removed - use load-more button instead */

.search-no-results .site-main .search-results {
    display: flex;
    justify-content: center;
    text-align: center;
}

.site-main .search-results .article-content .entry-header {
    padding-bottom: 10px;
}

.site-main .search-results .article-content .entry-header a {
    display: inline-block;
    width: 100%;
    font-size: var(--fs-md);
    margin: 0 auto;
    border-left: 3px solid var(--color-main-green);
    padding: 8px 10px;
    transition: var(--dur-base) var(--ease-standard);
}

.site-main .search-results .article-content .entry-header a:hover {
    box-shadow: var(--urartu-shadow, 0 0 15px rgba(0, 0, 0, 0.1));
}

.search-page .site-main article .article-content .entry-summary .woocommerce-product-details__short-description,
.search-page .site-main article .article-content .entry-summary p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-xs);
}

.search-page .site-main article h2,
.search-page .site-main article .article-content .entry-summary p {
    margin: 0;
}

.search-page .site-main article .article-content .entry-summary {
    margin: 0 0 10px;
}

.search-page .site-main article>a {
    margin-right: 20px;
    width: 85%;
}

.search-page .site-main article .article-content .entry-meta {
    display: inline-flex;
}

.search-page .site-main article .article-content .entry-meta .byline.with-avatar {
    display: inline-flex;
    align-items: center;
}

.search-page .site-main article .article-content .entry-meta .byline.with-avatar img {
    margin: 0 5px 0 0;
    width: 20px;
    height: 20px;
}

.search-page .site-main article .article-content i {
    font-size: var(--fs-xs);
}

.search-page .site-main article .article-content i,
.search-page .site-main article .article-content a,
.search-page .site-main article .article-content {
    color: var(--color-text);
    transition: var(--dur-base) var(--ease-standard);
}

.search-page .site-main article .article-content .meta-item a:hover,
.search-page .site-main article .article-content .entry-meta a:hover,
.search-page .site-main article .article-content .meta-item:hover i {
    color: var(--color-main-green);
}

.search-page .site-main article .article-content .meta-item.woocommerce-categories i {
    margin-right: 3px;
}

.search-page .site-main article .article-content a.comments-link {
    position: relative
}

.search-page .site-main article .article-content a.comments-link span,
.post-comments-number {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -10px;
    top: -9px;
    z-index: 10;
    color: var(--color-text);
    background: #fff;
    width: 17px;
    height: 17px;
    border-radius: var(--r-lg);
    box-shadow: var(--elev-1);
    font-size: var(--fs-xs);
}

.search-page .site-main article .article-content .entry-meta .byline.with-avatar span {
    line-height: 1px;
    font-weight: 600;
}

.search-page .site-main article .article-content .entry-footer .footer-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.entry-card .read-more {
    position: relative;
    padding: 0 0 7px 0;
    font-weight: 600;
}

.entry-card .read-more span {
    margin-left: 3px;
    transition: var(--dur-base) var(--ease-standard);
}

.entry-card .read-more:hover span {
    margin-left: 5px;
}

.entry-card .read-more:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 2px;
    background: #e1e1e1;
}

.entry-card .read-more:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 100%;
    height: 2px;
    background: var(--color-main-green);
    z-index: 1;
    transition: var(--dur-base) var(--ease-standard);
}

.entry-card .read-more:hover:before {
    right: 0;
}

.search-page .site-main article .post-date {
    width: 45px;
    height: 45px;
}

.search-page .site-main article .post__date-day {
    font-size: var(--fs-md) !important;
}

.search-page .site-main article .post__date-month {
    font-size: var(--fs-xs) !important;
}

/* Template Parts / content.php */

article .entry-header .entry-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

article .entry-header .entry-meta .byline.with-avatar {
    display: inline-flex;
    align-items: center;
}

article .entry-header .entry-meta .byline.with-avatar img {
    width: 20px;
    height: 20px;
    margin: 0 5px 0 0;
}

/* Archive Page */

.archive .site-main {
    margin: 30px 0;
}

.archive .site-main .archive-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    width: 100%;
}

.site-main .archive-page .entry-title,
.site-main .archive-page .entry-content {
    margin: 0;
}

.site-main .archive-page .entry-title a,
.site-main .archive-page .entry-meta a {
    transition: var(--dur-base) var(--ease-standard);
}

.site-main .archive-page .entry-meta i {
    font-size: var(--fs-md);
}

.site-main .archive-page>* {
    padding-bottom: 25px;
    border-bottom: 1px solid #e1e1e1;
}

.site-main .archive-page .page-header {
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.archive .site-main .archive-page .entry-header .entry-title,
.archive .site-main .archive-page .entry-header .entry-meta {
    text-align: center;
}

/* Post Thumbnail */

.post-thumbnail {
    position: relative;
}

.post-thumbnail img {
    width: 100%;
    border-radius: var(--r-lg);
    aspect-ratio: 16 / 11;
    object-fit: cover;
    box-shadow: var(--elev-1);
}

/*
 * Scoped to the thumbnail it is pinned to.
 *
 * This was a bare `.post-date`, and WordPress's Recent Posts widget prints a
 * <span class="post-date"> of its own. With no positioned ancestor in a footer
 * column, each of those dates was lifted out of the flow and pinned 10px from
 * the top-left of the PAGE — so the shop opened with three loose dates stacked
 * over the header, and nothing on screen said where they came from.
 */
.post-thumbnail .post-date {
    position: absolute;
    left: 10px;
    top: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    width: 50px;
    height: 50px;
    font-weight: 600;
    box-shadow: var(--elev-2);
    gap: 1px;
    border-radius: var(--r-md);
    color: var(--color-text);
}

.post-thumbnail .post-date p {
    margin: 0;
}

.post__date-day {
    font-size: var(--fs-lg);
}

.post__date-month {
    font-size: var(--fs-xs);
}

.urartu-nav-links {
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    padding: 15px 0;
    margin: 15px 0;
}

.urartu-nav-links,
.nav-center {
    display: flex;
    align-items: center;
}

.nav-subtitle>span {
    display: flex;
    align-items: center;
}

.nav-subtitle>span.nav-title {
    margin: 15px 0;
}

.nav-next .nav-subtitle>span {
    justify-content: right;
}

.urartu-nav-links {
    justify-content: space-between;
}

.urartu-nav-links>* {
    width: 20%;
}

.urartu-nav-links>.nav-previous,
.urartu-nav-links>.nav-next {
    width: 40%;
}

.urartu-nav-links i {
    font-size: var(--fs-2xl);
}

.urartu-nav-links>.nav-previous i {
    margin-right: 10px;
}

.urartu-nav-links>.nav-next {
    text-align: right;
}

.urartu-nav-links>.nav-next i {
    margin-left: 10px;
}

.nav-center {
    justify-content: center;
}

.urartu-nav-links a {
    font-size: var(--fs-md);
    color: var(--color-text);
    font-weight: 600;
}

.urartu-nav-links .nav-center a,
.urartu-nav-links a span.nav-title {
    transition: var(--dur-base) var(--ease-standard);
}

.urartu-nav-links .nav-center a:hover,
.urartu-nav-links a:hover span.nav-title {
    color: var(--color-main-green);
}

/* ---- Search page grid responsive ---- */

/* 900px matches the dynamic-styles.php breakpoint — keep 1-2 cols for 3/4. */
@media (max-width: 900px) {
	.blog-layout-grid .blog-posts.columns-3,
	.blog-layout-grid .blog-posts.columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	
    /*
     *
	 * Blog page
	 * 
	 */	
	
	.blog-layout-grid .blog-posts.columns-1 > article {
		flex-direction: column;
	}
	.blog-layout-grid .blog-posts.columns-1 > article > a.post-thumbnail {
		width: 100% !important;
	}

	/* 600px matches the dynamic-styles.php breakpoint — single column for all. */
	.blog-layout-grid .blog-posts.columns-1,
	.blog-layout-grid .blog-posts.columns-2,
	.blog-layout-grid .blog-posts.columns-3,
	.blog-layout-grid .blog-posts.columns-4 {
		grid-template-columns: 1fr;
	}

    /*
     *
	 * Search Page
	 * 
	 */

    .search-page .site-main {
        max-width: 90vw;
        margin: 0 auto;
    }

    .search-page-page-title {
        margin: 2em 0;
    }

    /* Search results use load-more button instead of grid - content flows naturally */

    .search-page .site-main .search-results article {
        display: flex;
        padding: 0;
        margin: 0 0 20px 0;
    }
	
    .search-page .site-main article > a {
        margin-right: 0;
        width: 100%;
    }	
	
	.search-page .site-main .search-results .columns-1 article{
		flex-direction: unset !important
	}
	
	.search-page .site-main .search-results .columns-1 article a{
		width: 40% !important;
	}
	
	.search-page .site-main .search-results .columns-2{
		grid-template-columns: 1fr 1fr;
	}
	
	.search-page .site-main .search-results .columns-2 article{
		flex-direction: column;
	}	

	.search-page .site-main .search-results .columns-2 article a.post-thumbnail img{
		height: 100%;
		border-radius: 15px 15px 0 0;
	}	
	
	.search-page .site-main .search-results .columns-2 article .article-content .entry-card{
		gap: 15px;
	}
	
    .site-main .search-results .article-content .entry-title {
        margin: 0;
    }

	.site-main .search-results .article-content .entry-header a{
		font-size: var(--fs-lg);
	}

	.search-page .site-main article .article-content .entry-summary p{
		font-size: var(--fs-sm);
	}
	
    .site-main .search-results .article-content .entry-summary p {
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: var(--fs-sm);
    }

    .site-main .search-results .article-content .entry-meta,
    .site-main .search-results .article-content .entry-footer {
        display: flex;
        flex-direction: column;
    }

    .site-main .search-results .article-content .entry-footer *,
    .site-main .search-results .article-content .entry-meta * {
        font-size: var(--fs-sm);
    }

    .site-main .search-results .article-content .entry-meta .byline {
        margin: 5px 0;
    }

    .site-main .search-results .article-content .entry-header {
        padding: 0;
        margin: 0 0 10px;
    }

    .search-page .site-main article .article-content .entry-meta .byline.with-avatar span {
        line-height: 2px;
        font-weight: 600;
    }

    .search-page .site-main article .article-content .entry-footer .footer-meta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0;
		line-height: 18px;
    }

    .search-page .site-main article .article-content .entry-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .search-page .site-main article .article-content .entry-summary {
        margin: 0;
    }

	/* Hide grid view toggle on search page at mobile breakpoint */
	.search-page__toolbar .urartu-view-toggle .grid-button:nth-child(3),
	.search-page__toolbar .urartu-view-toggle .grid-button:nth-child(4){
		display: none;
	}
    .nojq {
        position: fixed;
    }

    /** 
	 * Mobile Paddings
	 * */
    footer {
        padding: 0 0 80px !important;
    }

    .site-main,
    .shop-page {
        padding: 0 10px;
    }

    /*
     * 
	 * Header
	 * 
	 */

    .home .site-header__general{
        padding: 0 !important;
    }

    .as-white-header .site-header_title__breadcrumbs {
        width: unset;
        padding: 15px 15px 0;
        margin: 10px 0;
    }

    .site-header_title__container {
        font-size: 6vw;
        height: 180px;
    }

    .page-title {
        font-size: var(--fs-md);
        margin-bottom: 36px;
    }

    .site-header_title__breadcrumbs {
        padding: 8px 15px;
    }

    .mini-cart-wrapper>form.wp-block-search__button-only {
        display: none;
    }

    /** 
     * Footer
     * */
    .footer__main {
        display: flex;
        flex-direction: column;
        justify-content: unset;
    }

    .site-footer {
        padding-bottom: 60px;
    }

    .privacy-policy-link {
        margin-left: 0 !important;
        margin-top: 5px !important;
        padding: 5px;
    }

    /*YANDEX METRIKA*/

    .footer__main>div:first-child .widget_block:last-child {
        margin: 0 !important;
        padding: 0 !important;
    }

    /**/

    .footer__bottom-columns {
        flex-direction: column;
    }

    .footer__bottom-columns>div {
        max-width: 100%;
        width: 100%;
        justify-content: center !important;
    }

    .privacy-policy-container {
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .privacy-policy-link {
        margin-top: 5px;
    }

    .footer__main>div {
        margin: 15px 0;
    }

    .Column-start {
        max-width: 100%;
        width: 100%;
    }

    .Column-end,
    .Column-center {
        max-width: 100%;
        width: 100%;
    }

    /** 
	 * To Up Button
	 * */
    #topBtn.show {
        right: 15px;
    }

    #topBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 100px;
        right: -40px;
        padding: 0;
        width: 40px;
        height: 40px;
        font-size: var(--fs-lg);
        background: none;
        color: var(--color-second-green);
        border: 3px solid var(--color-second-green);
        border-radius: 100%;
        cursor: pointer;
        transition: opacity 0.3s;
        animation: fadeIn 0.3s;
        z-index: 10;
        transition: var(--dur-base) var(--ease-standard);
    }

    .sidebar,
    .header-menu,
    .top__header {
        display: none !important;
    }

    .mobile-menu {
        display: flex !important;
        position: relative;
        z-index: 1100;
    }

    /* Mobile menu panel: slides in from the left as a fixed sidebar */
    .mobile-menu > .menu-container {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 320px;
        max-width: 85vw;
        z-index: 1099;
        background: #fff;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
        transform: translateX(-100%);
        transition: transform .3s ease;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-menu.toggled > .menu-container {
        transform: translateX(0);
    }

    /* Dark overlay behind the sidebar */
    .mobile-menu.toggled::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1098;
    }

    .admin-bar .mobile-menu > .menu-container,
    .admin-bar #site-navigation-sidebar {
        padding-top: 46px;
    }

    /* Sidebar inner elements */
    .mobile-menu > .menu-container .menu-container__content {
        flex: 1;
        padding: 0;
    }

    .admin-bar .fixed-menu {
        top: 46px !important;
    }

    .admin-bar .header-index .header-section,
    .header-index .header-section {
        top: 0;
    }

    .menu-container__content>div {
        width: 80%;
        max-height: 55vh;
        overflow-y: auto;
    }

    .menu-container__content ul {
        backdrop-filter: none;
    }

    .search-form {
        width: 80%;
        margin: 0 10px 25px 10px;
    }

    .search-form {
        width: 85%;
    }

    .search-form input,
    .search-form button {
        background: none;
        border: none;
        outline: none;
        height: 30px;
    }

    .search-form input,
    .search-form input[type="text"]:focus {
        width: 85%;
        color: #fff;
    }

    .main-navigation .menu li a {
        height: auto;
        font-size: var(--fs-xs);
        margin: 0;
    }

    .site-header.as-white-header .menu-container h2,
    .site-header.as-white-header .menu-container button,
    .site-header.as-white-header .menu-container a,
    .site-header.as-white-header .menu-container i {
        color: #fff;
    }

    .site-header.as-white-header .main-navigation ul ul {
        background-color: rgba(0, 0, 0, 0);
    }

    .main-navigation ul li ul:after,
    .menu>.menu-item>a::after {
        display: none;
    }

    .menu-item-has-children:after {
        position: absolute;
        right: 0;
        top: 0 !important;
        width: 70%;
        height: 45px !important;
        transform: none !important;
        display: flex;
        align-items: center;
        justify-content: right;
        font-family: Fontawesome;
        content: '\f078' !important;
        font-size: var(--fs-xs) !important;
        color: var(--color-muted-text) !important;
        transition: var(--dur-base) var(--ease-standard);
    }

    .menu-item-has-children.active:after {
        transform: rotate(180deg);
    }

    .main-navigation li .sub-menu {
        padding: 0 5%;
        background: none;
        backdrop-filter: none;
    }

    .main-navigation li .sub-menu a {
        text-transform: none;
        border: none !important;
        padding: 15px 0;
    }

    .main-navigation ul ul {
        border-bottom: none;
        box-shadow: none;
        position: static;
        opacity: 1;
        visibility: visible;
        float: unset;
        transition: unset;
    }

    ul ul ul {
        left: unset;
        top: unset;
        transition: unset;
        display: unset;
    }

    ul li:hover>ul,
    ul li.focus>ul {
        display: flex;
        flex-direction: column;
        top: unset;
        left: unset;
        transition: unset;
    }

    li .sub-menu {
        display: none;
    }

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

    .site-header .header-section {
        top: 10px;
    }

    .site-header .site-header__container {
        display: flex;
        justify-content: space-between;
        border-radius: 0;
        padding: 0 15px !important;
        margin: 0 5% !important;
    }

    .site-header .site-header__container .main-navigation,
    .site-header .site-header__container .mini-cart-container {
        width: 20%;
    }

    .site-header .site-header__container .site-branding {
        width: 80%;
        justify-content: center;
    }

    section>div>div>div.site-branding>a>img {
        max-width: 160px;
    }

    .site-header .site-header__container .mini-cart-container {
        justify-content: right;
    }

    .urartu_wc_mini_cart__button {
        margin: 0 !important;
    }

    .main-navigation * {
        height: unset;
    }

    .main-navigation .menu>li {
        margin: 0;
    }

    .main-navigation .search-form {
        width: 80%;
        margin: 0 auto 16px;
        align-items: start;
    }

    .main-navigation .menu li {
        display: inline;
        position: relative !important;
        padding: 4px 0;
    }

    .main-navigation .menu li li:hover {
        background: transparent;
    }

    .sub-menu {
        transition: 0.5s;
    }

    .sub-menu.opened {
        border-left: 2px dashed rgba(255, 255, 255, 0.6);
    }

    .main-navigation .menu li:before,
    .main-navigation ul li.menu-item-has-children:before {
        position: absolute;
        content: '';
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px !important;
        width: 100% !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
    }

    .main-navigation .menu li li:before {
        display: none;
    }

    .shop-page__sidebar.closed .mobile-menu-title-container,
    .menu-container .close-menu-title {
        position: static;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 16px 16px 0;
        padding: 0 0 16px;
        border-bottom: 1px solid #e1e1e1;
    }

    .admin-bar .menu-container .close-menu-title {
        top: 62px;
    }

    .mobile-menu-title-container .sidebar-button-container,
    .menu-container .close-menu-toggle {
        display: flex;
        justify-content: right;
        align-items: center;
        padding: 0;
        background: none;
        width: 50px;
        height: 40px;
        border: none;
        font-size: var(--fs-xl);
        color: var(--color-text);
    }

    .shop-page__sidebar.closed .mobile-menu-title-container {
        margin: 16px 16px 0;
        padding: 0;
        background: #fff;
        z-index: 10;
    }

    .Mobile-menu-title,
    .close-menu-title h2 {
        font-size: 1.2em;
        margin: 0;
        font-weight: bold;
    }

    .admin-bar .shop-page__sidebar {
        padding-top: 46px;
    }

    .shop-page__sidebar.closed>*:nth-child(2) {
        margin-top: 30px;
    }

    .mobile-menu-title-container .Close-menu:before {
        font-family: Fontawesome;
        content: '\f00d';
    }

    button.menu-toggle {
        background: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile: keep inline menu hidden — the sidebar handles navigation.
       The HB's builder-front.css overrides the theme's .main-navigation ul
       with .urartu-hb-widget--menu ul { display:flex; }, and the theme's
       .main-navigation.toggled ul.menu { display:block; } at line 1879
       would also show it on toggle. Override both with !important. */
    .main-navigation ul.menu {
        display: none !important;
    }
    .main-navigation.toggled ul.menu {
        display: none !important;
    }

    /* Mobile menu sidebar — teleported to <body> by main.js so position:fixed
       is immune to html overflow-x:hidden, body overflow-x:clip, and any
       ancestor transform that would create a containing-block.
       The .main-navigation selectors are kept as fallback so the menu works
       even if the JS move does not run.                                     */
    .main-navigation > .menu-container,
    #site-navigation-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85vw;
        max-width: 85vw;
        z-index: 1099;
        background: #fff;
        box-shadow: 4px 0 15px rgba(0,0,0,0.2);
        transform: translateX(-100%);
        transition: transform .3s ease;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .main-navigation>.menu-container .menu-container__content,
    #site-navigation-sidebar .menu-container__content {
        flex: 1;
        padding: 0;
    }

    .main-navigation.toggled>.menu-container,
    #site-navigation-sidebar.is-active {
        transform: translateX(0);
    }

    .main-navigation.toggled::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1098;
    }

    #site-navigation-sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1098;
    }

    #site-navigation-sidebar-backdrop.is-visible {
        display: block;
    }
    /* /fallback: .main-navigation.toggled::before and the backdrop coexist;
       one or the other renders depending on whether the JS move ran. */

    .menu-container__search input:focus {
        margin-bottom: 0;
        padding: 10px;
    }

    /* 404 Page */
    .error404 .site-main h1 {
        font-size: var(--fs-md);
    }

    .error404 .page-content {
        font-size: var(--fs-xs);
    }

	/* Sidebar transform — outside @media so .is-active always takes effect.
	   On desktop (>768px) #site-navigation-sidebar has display:none, so the
	   transform is inert. On mobile it has display:flex and this slides it in. */
	#site-navigation-sidebar.is-active {
		transform: translateX(0) !important;
	}

    .search-form {
        width: auto;
    }

    .error404 .site-main .search-form {
        width: 80%;
    }

    /* Post Page */
    .urartu-nav-links>* {
        width: 10%;
    }

    .urartu-nav-links>.nav-previous,
    .urartu-nav-links>.nav-next {
        width: 45%;
    }

    .urartu-nav-links>* a {
        font-size: var(--fs-xs);
    }

    .single textarea {
        height: 70px;
        max-height: 200px;
    }

    article {
        padding: 0;
    }

}

.woocommerce-product-gallery__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
}

.woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fills the container while preserving aspect ratio */
}

/* Theme Options: footer social icons, copyright, and 404 image. */
.footer__bottom-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0;
}
.urartu-social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
}
.urartu-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    transition: var(--dur-base) var(--ease-standard);
}
.urartu-social-link:hover {
    background: var(--urartu-primary, #241F1C);
    color: #fff;
}
.urartu-footer-copyright {
    font-size: var(--fs-sm);
    opacity: 0.85;
}
.error-404-image {
    text-align: center;
    margin-bottom: 24px;
}
.error-404-image img {
    max-width: 100%;
    height: auto;
}

/* =========================================================================
   Accessibility — visible keyboard focus (WCAG 2.4.7 / Envato requirement)
   The theme removes the default outline on :focus for pointer users. These
   rules restore a clear focus ring for KEYBOARD navigation only. The ring
   uses --color-focus-ring, not the brand green: the green is 2.42:1 against
   white and a focus indicator must reach 3:1 (WCAG 1.4.11)
   (:focus-visible — pointer clicks do not trigger it). !important is used
   deliberately so the ring is never swallowed by the many outline:none
   declarations across the theme; buyers can still override it themselves.
   ========================================================================= */
:focus-visible {
    outline: 2px solid var(--color-focus-ring) !important;
    outline-offset: 2px !important;
}

/* Form controls & buttons also get a soft halo for extra contrast. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible,
.wp-element-button:focus-visible,
.single_add_to_cart_button:focus-visible,
.add_to_cart_button:focus-visible {
    outline: 2px solid var(--color-focus-ring) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(11, 95, 255, .22) !important;
}

/* The home-page CF7 submit sets outline:none!important at (0,4,1); this
   higher-specificity, later-placed rule restores its keyboard ring. */
.home-page input.wpcf7-form-control.wpcf7-submit.has-spinner:focus-visible {
    outline: 2px solid var(--color-focus-ring) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(11, 95, 255, .22) !important;
}

/* Per-page subtitle (Page Settings meta box). */
.page-subtitle {
    margin: 6px 0 0;
    font-size: var(--fs-md);
    line-height: 1.4;
    opacity: .75;
}


/* =========================================================================
   Layout and reading corrections
   ========================================================================= */

/* The header is position:fixed, and the theme set no scroll offset anywhere.
   Following the skip link, or tabbing to anything near the top of the page,
   parked the target underneath it — WCAG 2.4.11 (Focus Not Obscured). */
html {
    scroll-padding-top: 100px;
}

:target,
#primary {
    scroll-margin-top: 100px;
}

/* normalize.css leaves line-height at 1.15 and nothing raised it for body
   copy; theme.json already assumes 1.7 for block content. */
body {
    line-height: 1.6;
}

/* At the 1240px content width a paragraph ran to roughly 180 characters. */
.entry-content>p,
.entry-content>ul,
.entry-content>ol {
    max-width: 70ch;
}

/* Focus was restored by :focus-visible further up, but this rule stripped the
   field border on plain :focus, leaving pointer and touch users with no
   indication at all. */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-focus-ring);
}

/* =========================================================================
   Submenu toggle
   -------------------------------------------------------------------------
   Sub-menus and mega panels opened on :hover alone, which left the catalogue
   unreachable for keyboard users and on touch, where the first tap follows the
   parent link instead. The walker now emits a real <button> next to each parent
   link; these rules give it a hit area and keep the caret behaviour consistent
   with the rest of the navigation.
   ========================================================================= */
.submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-left: 2px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: var(--fs-xs);
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    touch-action: manipulation;
    transition: transform var(--dur-fast) var(--ease-standard);
}

.submenu-toggle:focus-visible {
    outline: 2px solid var(--color-focus-ring) !important;
    outline-offset: 2px !important;
}

.submenu-toggle[aria-expanded="true"] {
    transform: rotate(180deg);
}

/* Pointer devices keep the existing hover reveal; the button is supplementary
   there, so it does not need to take up room in a dense desktop menu. */
@media (hover: hover) and (pointer: fine) {
    .submenu-toggle {
        width: 24px;
        height: 24px;
    }
}

/* Touch: the button is the only way in, so it gets a full-size target. */
@media (hover: none) {
    .submenu-toggle {
        width: 44px;
        height: 44px;
        margin-left: 0;
    }
}

/* Open state, mirroring whatever the theme already does on :hover. */
.menu-item-has-children.is-open > .sub-menu,
.menu-item-has-children.is-open > .mega-menu__container,
.urartu-hb-widget--menu li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .submenu-toggle {
        transition: none;
    }
}

/* =========================================================================
   Typography rhythm
   -------------------------------------------------------------------------
   The theme carried no letter-spacing at all. Large type set at the default
   tracking looks loose, and uppercase micro-copy set at it looks cramped —
   the two need opposite corrections.
   ========================================================================= */

h1,
h2,
.product_title,
.woocommerce-thankyou-order-received {
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h3,
h4 {
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* Uppercase runs: badges, widget titles, buttons, table headers. */
.widget-title,
.urartu-product-badge,
.onsale,
th,
.button,
button.button,
.single_add_to_cart_button,
.woocommerce-tabs ul.tabs li a {
    letter-spacing: 0.03em;
}

/* Numerals in prices and quantities line up when they share a width. */
.price,
.woocommerce-Price-amount,
.quantity .qty,
.woocommerce-pagination .page-numbers {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* A comfortable measure for long-form copy. */
.entry-content > p,
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel p {
    max-width: 70ch;
}