<!-- run string https://www.npmjs.com/package/jquery.marquee -->
<p class="marquee" style="overflow:hidden">
  <span>Text</span>
</p>
                
              

                         
<figure>
  <img src="./img.png" alt="">
  <figcaption>Text</figcaption>
</figure>
                
              

                
{% if template contains 'collection' %}
  {% section 'popup-geolocation' %}
{% endif %}
                
              

                
# get product metafield data
{%- if product.metafields.custom.m_name != blank -%}
  {{ product.metafields.custom.m_name | metafield_tag }}
{%- endif -%}
                
              

                
# get from link menu image collection
{{ childlink.object.image }}
                
              

                
{% assign my_variable = false %}
{% render 'filename' %}
{{ 'file.css' | asset_url | stylesheet_tag }}
                
              

                
{
  "type": "image_picker",
  "id": "account_image",
  "label": "Image for account"
}
{{
  section.settings.account_image
  | image_url: width: 364
  | image_tag: class: 'account__image', loading: 'lazy'
}}
                
              

                            
{%- for order_item in order.line_items -%}
  {%- for prod_image in order_item.product.images -%}
    {{ prod_image | image_url: width: 150 | image_tag: class: 'order-item__image', loading: 'lazy' }}
  {%- endfor -%}
{%- endfor -%}
                
              

                            
{%- for address in customer.addresses -%}
  {{ forloop.index }}
{%- endfor -%}
                
              

                            
{% for article in blogs.news.articles %}
  {{- article.title | link_to: article.url }}
{% endfor %}
                
              

                            
{% form 'customer_login', return_to: routes.root_url %}
  <!-- form content -->
{% endform %}
                
              

                            
{%- if customer.orders_count == 0 -%}
  
You haven`t placed any orders yet
  Go Shopping
{% else %}
{%- endif -%}

{%- if order.line_items -%}
  {% else %}
{%- endif -%}
                
              

                            
{{ 'about-us.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<div class="about-us__wrapper page-width section-{{ section.id }}-padding">
  <h1>{{ section.settings.title }}</h1>
  <p>{{ section.settings.content_1 }}</p>
  <div>
    {%- if section.settings.image_1 != blank and section.settings.image_2 != blank -%}
    {{ section.settings.image_1 | image_url: width: 100 | image_tag: class: '__image', loading: 'lazy' }}
    {{ section.settings.image_2 | image_url: width: 100 | image_tag: class: '__image', loading: 'lazy' }}
    {%- endif -%}
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => { });
</script>

{% schema %}
  {
    "name": "About us",
    "tag": "section",
    "class": "page__about-us",
    "settings": [
      {
        "type": "header",
        "content": "t:sections.all.padding.section_padding_heading"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_top",
        "default": 36
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_bottom",
        "default": 36
      },
      {
        "type": "text",
        "id": "nav_logout",
        "label": "Menu item for the logout",
        "default": "Sign Out"
      },
      {
        "type": "image_picker",
        "id": "account_image",
        "label": "Image for account"
      },
      {
        "id": "blog",
        "type": "blog",
        "label": "Blog"
      }
    ]
  }
{% endschema %}
                
              

                            
{% if template contains 'timetable' %}
  {% section 'popup-geolocation' %}
{% endif %}

{{ 'popup-geolocation.css' | asset_url | stylesheet_tag }}

<article class="popup-wrapper">
  <span class="icon-close-wrapper">{% render 'icon-close' %}</span>
  <div class="wrapper__content">
    <h2>TEST</h2>
  </div>
</article>

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    let popup_wrapper = document.querySelector('.popup-custom');
    let popup_iconClose = document.querySelector('.icon-close-wrapper');

    if (popup_wrapper && popup_iconClose) {
      if (true) {
        popup_wrapper.classList.remove('is-hide-popup');
      }

      popup_wrapper?.addEventListener('click', (event) => {
        if (event.target.classList.contains('popup-custom')) {
          popup_wrapper.classList.add('is-hide-popup');
        }
      });

      popup_iconClose?.addEventListener('click', () => {
        popup_wrapper.classList.add('is-hide-popup');
      });
    }
  });
</script>

{% schema %}
  {
    "name": "Popup",
    "class": "popup-custom is-hide-popup",
    "tag": "section",
    "settings": []
  }
{% endschema %}

:root {
  --timer-animate: 500ms;
}
body {
  position: relative;
}
.popup-custom.is-hide-popup {
  display: none;
}
.popup-custom {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
  background-color: rgba(38, 38, 38, 0.5);
}
.popup-wrapper {
  background-color: var(--color-text-header);
  padding: 112px;
  height: fit-content;
  margin-top: 5%;
  position: fixed;
  width: 984px;
}
@media (max-width: 1024px) {
  .popup-wrapper {
    width: 90%;
    margin-top: 15%;
  }
}
@media (max-width: 768px) {
  .popup-wrapper {
    flex-direction: column;
    padding: 40px 16px 16px 16px;
  }
  .popup-wrapper button {
    margin: 0 auto;
  }
}
.popup-wrapper .icon-close-wrapper {
  width: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 8px;
  cursor: pointer;
  transition-duration: var(--timer-animate);
}
.popup-wrapper .icon-close-wrapper:hover svg {
  stroke: var(--color-background-header);
}
                
              

                     
git init
git branch
git checkout -b new-branch-name
git checkout branch-name
git merge master
git fetch
git fetch origin main
git pull origin main
git pull origin branch-name
git add .
git status
git commit -m 'text'
git log
git push origin branch-name
git branch -D branch-name
git reset --hard
git remote -v
git remote add origin https://github.com/Aleksej579/project_name.git
git config --global user.email "aleksej.eremenko579@gmail.com"
git config --global user.name "Aleksej579"
git clone https://github.com/path_to_file.git
git clone --single-branch --branch branch_name git@github.com:Aleksej579/project_name.git
            
          

                            
document.addEventListener('DOMContentLoaded', () => {});
setTimeout(() => {}, 500);

setTimeout(() => {
  let btnString = document.querySelector('.product_main .product-form__buttons span.swym-wishlist-cta');
  let btnStringData = document.querySelector('.product_main .product-form__buttons span.swym-wishlist-cta')?.innerText;
  let btnStringNew = btnStringData?.replace('To', 'to');
  btnString.innerText = btnStringNew;
}, 3000);

if (document.getElementById("main-collection-filters")) {
  window.addEventListener('scroll', function () {
    let elem = document.getElementById("main-collection-filters");
    let topCoord = elem.getBoundingClientRect().top;
    if (topCoord < 56) { elem.style.opacity=0; } if (topCoord> 50) {
      elem.style.opacity = 1;
    }
  });
}
                
              

                            
window.addEventListener("orientationchange", function() {}, false);
                
              

                            
//hide megamenu when scroll
let megamenuDetails = document.querySelectorAll("header-menu details");
  window.onscroll = () => {
    megamenuDetails.forEach((item) => {
    item.open = false;
  });
}

element.scrollIntoView();
                
              

                            
const element = document.querySelector("#box");
element.addEventListener("mouseover", event => {
  console.log("Mouse in (over)");
});
element.addEventListener("mouseout", event => {
  console.log("Mouse out");
});
                
              

                            
node.closest('.next-node');
node.classList.add("active");
node.classList.remove("active");
node.classList.toggle("active");
node.className = node.className.replace(" active", "");
                
              

                            
//if elment is insert to DOM
document.addEventListener('DOMContentLoaded', () => {
  let i = setInterval(function() {
    if (document.querySelector("#insta-feed")){
      clearInterval(i);
    }
  }, 1000);
  setTimeout(function(){
    //code when element is insrt to DOM
  },1000)

  //when screen rotated
  window.addEventListener("orientationchange", function() {
    let i = setInterval(function() {
      if (document.querySelector("#insta-feed")){
        clearInterval(i);
      }
    }, 1000);
    setTimeout(function(){
      //code if screen rotated
    },1000)
  }, false);
});
                
              

                            
// remove if click not an element
window.addEventListener('click', e => {
  const target = e.target
  if (!target.closest('.hero__content-form')
      && !target.closest('.btn-form')
      && !target.closest(`a[href="#${anchor}"]`)
      && !target.closest(`.footer__quicklinks a[href="#${anchor}"]`)
    ) {
    if (homeContactForm) {
      homeContactForm.classList.remove('show')
      btnOverlay.classList.remove('active');
    }
  }
})
                
              

                            
form.reset();
input.blur();
                
              

                            
item.nextElementSibling.classList.toggle('is-hidden');

let arr = document.querySelectorAll('.selector');
arr.forEach((item, index) => {
  let itemChaild = item.querySelector('.sub-selector');
  item.addEventListener('mouseover', () => {});
  item.addEventListener('mouseout', () => {});
});
                
              

                            
//clear input
let popupWrapField = document.querySelectorAll('.popup__field-wrap');
popupWrapField.forEach((item) => {
  let fieldClear = item.querySelector('input');
  let btnClear = item.querySelector('.popup__btn-clear');
  btnClear.addEventListener('click', () => {
    fieldClear.value = '';
  });
});
                
              

                            
//--- DATA STRUCTURES --------------------------------------
const arrEmp = [];
const arrNum = [1, 2, 3, 4, 5]
const arrFlt = [1, 2, 3, [4, 5]]
const str = 'test'
const str_ = 'test qa'
const arrTxt = ['text_1', 'text_2', 'text_3'];
const obj = {
name: 'Viki',
age: 30,
};
const arrObj = [
{id: 1, name: 'Mari'},
{id: 2, name: 'Viki'},
{id: 3, name: 'Jane'}
];

//---МЕТОДЫ---------------------------------------------------------------------
arr.unshift('item1', 'item2') // add to start
arr.shift() // delete from start
arr.push('text_4', 'text_5') // add to end
arr.pop(); // delete from end
arr.indexOf("text_1") // показывает индекс "Ананас" отсчет с начала
arr.lastIndexOf("text_1") // показывает индекс "Ананас" отсчет с конца
arr.length; // количество элементов
arr.slice(1,3) // копирует новый массив с 1 по 3 без 3
arr.splice(2, 1, 'tree') // с индекса 2 на количество 1 заменить на tree
arr.concat(newArr, nextArr) // обьеденяет в новый массив
arr.includes("text_1") // если есть "text_1" то true
arrNum.filter(item => item > 3) // [4, 5]
arrTxt.map(item => item.length) // [6, 6, 6]
arrNum.map(n => 'text ' + n) // [ "text 1", "text 2", "text 3", "text 4", "text 5" ]
arrNum.map(Math.pow) // [1, 2, 9, 64, 625]
arrTxt.sort((a, b) => a.localeCompare(b)) // ['text_1', 'text_2', 'text_3'] order abc...
arrNum.sort((a, b) => a - b); // [1, 2, 3, 4, 5] order sort from min to max
arrNum.sort((a, b) => a - b); // [5, 4, 3, 2, 1] order sort from max to min
arrNum.at(-1) // 5
arrNum.reduce((sum, current) => sum + current) // 15 Sum all number
arrNum.reduce((sum, current) => sum > current ? sum : current) // max number
arrNum.reduce((sum, current) => sum < current ? sum : current) // min number arrObj.find(item=> item.id == 3) //console.log(user.name);
arrNum.forEach(item => console.log(item)) //1, 2, 3, 4, 5
arrNum.forEach(item => acumArr.push(item * 2)) //2, 4, 6, 8, 10
arrNum.some(item => item === 3) // true (есть ли хоть один эл.)
arrNum.every(item => item > 0) // true (соотв. ли каждый эл.)
arrFlt.flat() // [1, 2, 3, 4, 5]
str.split('').reverse().join('');
str.toUpperCase() // TEST
str.toLowerCase() // test
str.length // 4
str.charAt(3) // i
str.repeat(3) // 'testtesttest'
str.substring(1, 4) // tri
str.substr(1, 3) // tri
str_.indexOf('qa') // 5
str_.replace('qa', 'good') // test good
str_.slice(2) // st qa
str_.split(' ') // [ "test", "qa" ]
str.padStart(10, '~') // "~~~~~~test"
str.padEnd(10, '~') // "test~~~~~~"
str.trim() // .trimStart() & .trimEnd() удалить пробелы с конца и начала
JSON.stringify(obj) // to string '{"name":"Viki","age":30}'
Array.from('Media') // [ "M", "e", "d", "i", "a" ]
Object.is({}, {}) // false (different object) strict object comparison | === the best
Object.assign({}, obj_1, obj_2); // CREATE OBJECT: copy all property to one object
typeof arrNum // object
const str = arrNum.toString() // 1,2,3,4,5
eval('5+6') // 11
2.56789.toPrecision(3) // 2.56
2.56789.toFixed(3) // 2.567
parseInt("45", 10) // 45 в 10-й стст.счисл.
parseFloat("45.5") // 45.5
10 ** 2 // 100
Math.sqrt(25) // 5
Math.pow(10, 2) // 100
console.log( "%cHello %cWorld%c!!", "color: blue;", "font-size: xx-large;", "/* no CSS rule*/" ); // color style
console
console.table(arrObj, ['id', 'name']);
console.warn();
console.err();
console.assert('one' === 1);
document.write(); //вывести на страницу
window.open(); //открыть новое окно в браузере
location.reload(); // перегрузить вкладку
`text ${5+5} text` // template string
[...arrNum, ...arrTxt] //[1, 2, 3, 4, 5, 'text_1', 'text_2', 'text_3']
const [one, two] = arrNum // console.log(one, two)
[a, b] = [b, a] // a = 10; b = 20; a = 20; b = 10;
false || 10 // 10 (default parameters)
null ?? 10 // null or undefined ?? right!
10 > 5 ? 'true' : 'false' // true

var today = new Date().toLocaleDateString('en-GB', {
day : 'numeric',
month : 'short',
year : 'numeric'
});

//--- ES+2024 ------------------------------------------------

const array = [1, 2, 3, 4, 5];
Object.groupBy(array, (num, index) => {
return num % 2 === 0 ? 'even': 'odd';
}); // { odd: [1, 3, 5], even: [2, 4] }

//--- FUNCTION------------------------------------------------
function nameFun(n){return n};
const nameFun = function(){};
const nameFun = (x, y) => x + y; //console.log(nameFun(25)); (50)
;(function(){}());

//--- CURRY ----------------------------------------------
const curry = (a) => (b) => (c) => a + b + c
console.log(curry(2)(4)(6)) //12

let regexp = /w+/g;

//--- WHILE ----------------------------------------------
while(){}; // while(1 < 5){console.log(); i++;} 

//--- DO WHILE ------------------------------------------- 
do{}while();

//--- FOR ------------------------------------------------ 
for (let item=0; item<10; item++) {console.log(`Same
text ${item} !`)} 

//--- FOR IN --------------------------------------------- 
for (let key in obj)
{console.log(key)}; // name age 

//--- FOR OF --------------------------------------------- 
for (const item of arr) {
  console.log(`This text ${item}`)
} 
for (let [key, value] of m) {
  console.log(`${key} ${value}`)
} 
for (const [i, v] of ['a', 'b' , 'c' ].entries()) { 
  console.log(i, v) 
} 

//--- IF -------------------------------------------------
if(){}else{}; 

//--- SWITCH --------------------------------------------- 
switch(выр){case выр: инстр; case выр:
инстр; default: инстр}; 

//--- OBJECT + ITERATOR --------------------------------- 
Object.keys(obj).forEach(item=> {
  console.log(`Key is ${item}`)
});
Object.values(obj).forEach(item => {
  console.log(`Key is ${item}`)
});

//--- MAP ----------------------------------------
const m = new Map();
.set(); // m.set('x', 'foo').set('y', 'bar');
.get(); // m.get(x); взять значение по ключю
.delete(); // m.delete(x); удалить значение
.clear(); // m.clear(); очистить карту
.size; // m.size; количество ключей
.has(); // m.has(x); наличие ключа

//--- SET -------------------------------------------------
const s = new Set(arr); // создать set из массива
const s = new Set(); // var s = new Set(["апельсины", "яблоки", "бананы"]);
.add(); // s.add("some text").add(1).add(2).add(3);
.has(); // s.has(1);
.size; // s.size;
.delete(); // s.delete(5)
// ---пример 2
const text = 'Inndiaa';
const s = new Set(text); // Set ['I', 'n', 'd', 'i', 'a']
// ---пример 3 (обьединение множества)
const a = new Set([1,2,3]);
const b = new Set([4,3,2]);
const union = new Set([...a, ...b]);
// ---пример 4 (итерировать)
let arr = [1,2,3,4,5];
let numbers = new Set(arr);
console.log(numbers);

// наследование ----------------------------------
var animal = {
eats: 'ham ham'
}
var dog = {
say: 'gav'
}
dog.__proto__ = animal;
console.log('dog do -', dog.eats);

//копирование обьектов -----------------------
const personeParse = JSON.parse(JSON.stringify(obj)) //{ name: 'Viki', age: 30 } 
const personeParse = { ...obj } //{ name: 'Viki', age: 30 }

//вывести по this ------------------------------
var user_1 = {
name: 'jhon',
this_Name: thisName
};
var user_2 = {
name: 'smit',
this_Name: thisName
};
function thisName() {
return this.name;
}
console.log(user_2.this_Name());

// массив из обьектов --------------------------------------------------
var user = {
  data: [
    {name: "jhon"},
    {name: "Smith"}
  ]
};
console.log(user.data[0].name);

//----------------------------------------------------------------------
class Human {
  constructor(language){
    this.language = language;
  }
  lan(){
    console.log(this.language);
  }
}

// наследование -----------------------
class Person extends Human {
  constructor(name, age, language){
    super(language);
    this.name = name;
    this.age = age;
  }
  sayName(){
    console.log(this.name);
  }
  sayAge(){
    console.log(this.age);
  }
}
const user_1 = new Person(`Nico`, 30, `en`);
user_1.sayName();
user_1.sayAge();
user_1.lan();

//---НАСЛЕДОВАНИЕ ОБЬЕКТА---------------------------------------------
var protoMan = {name: "protoMan", color: "red"};
var man = {name: "Man"};
man.__proto__ = protoMan;
console.log(man.color);

//---------- .setTimeout()
setTimeout(() => {console.log('for 1 sec')}, 5000) // запустить через 5 сек
setInterval(() => {console.log('for 1 sec')}, 5000) //запускать каждые 5 сек
//------------------------------------

if (window.matchMedia('(max-width: 425px)').matches) {
  console.log(true);
} else {
  console.log(false);
}

//------------------------------------
const objMain = {
name: 'Mari',
age: 30
};
const objSub = {
subName: "liki",
subAge: 29
};
objMain['anoutheObj'] = objSub;
console.log(objMain.anoutheObj.subName)

//---увеличить пиксели в 2 раза
about:config
layout.css.devPixelsPerPx
-1.0
//---npm
npm -g list --depth=0 //список npm пакетов

//---ПРИМЕР-----DOM---------------------------------------------------------------
const name_var = document.querySelector('#name_node');
name_var.addEventListener('click'() => {
  name_var.innerText = 'Qwert';
  name_var.innerHTML = "<b>qwert</b>";
  name_var.style.color = "green";
  name_var.style.display ='none';
  name_var.style.border = '1px solid black';
  name_var.style.fontWeight = '700';
  name_var.style.textTransform = 'uppercase';
  name_var.classList.add('myClass');
  name_var.classList.contains('myClass');
  name_var.classList.replace('oldClass', 'newClass');
  name_var.classList.remove('myClass');
  name_var.classList.toggle("add_class");
  name_var.setAttribute('src', 'new-image.jpg');
  name_var.getAttribute('src');
  name_var.removeAttribute('src');
  name_var.append(document.createElement('p'));
  name_var.insertBefore(document.createElement('h1'), document.createElement('h2'));
  name_var.remove();
})

//---if checkbokx checked----------------------------------------------------
var name_var_chbox = document.querySelector('input');
if (name_var_chbox.checked) { // если чекс бокс выбран;
  name_var.style.display='none'; // то name_var присвоить "скрыть";
} else { // иначе;
  name_var.style.display='block'; // name_var присвоить "показать";
};

//--- check to exist ----------------
if(document.querySelector('#name_node')) {
  document.querySelector('#name_node').value = 'Показать';
}
//--- if (условие1 && условие2) {}; -------------------------------------
if (let a > 0 && a<10 && a % 2==0) { console.log('а чётное, больше нуля, меньше десяти'); } 

//--- scroll page ------------------------------------- 
document.body.scrollTop=document.documentElement.scrollTop=305; 

//--- теxt to speech ------------------------------------- 
let msg=new SpeechSynthesisUtterance(); msg.text='Text' ;
window.speechSynthesis.speak(msg); 
<a href="javascript:history.go(-1)">back</a>

=
+= // let i = 2; i+=1; (i=3)
-= // let i = 2; i-=1; (i=1)
== // равно
=== // строгое равно
!= //неравно
> // меньше
<// больше>= // больше или равно
<= // меньше или равно + // 1+1 (2) + // 'first' +'last' ('firstlast') + // +'2' (2) - // 2-1 (1) 
++i // let two=2; ++two (3) 
--i // let two=2; --two (1) 
i++ 
i-- 
// логические 
|| // 0||0=0; 1||0=1; 0||1=1; (OR) 
&& // 0&&1=0; 1&&1=1; 1&&0=0; (AND) 
! // !true; (false) 
// побитовые 
^ // 0^1=1; 1^1=0; 1^0=1; (XOR) 
~ // ~0=1;
~1=0; (NOT) унарный НЕ 
<< // 101<<010; (сдвиг битов влево)
>> // 101>>010; (сдвиг битов вправо)
>>> //сдвиг битов вправо с заполнением старшего бита нулем
                
              

                                
    1920 1440 1250 768 576 430
    
    @media (max-width: 1024px) and (min-width: 769px) {}
    
    @supports not (inset: 10px) {}
    
    @keyframes animateAmbient {
      0% {}
      100% {}
    }
    
    .class {
      gap: 100px;
      @media screen and (max-width: 1250px) {
        gap: 50px;
      }
    }
                
              

                
/*first letter in string*/        
p::first-letter {
  text-transform: uppercase;
}

font-family: 'Righteous';
font-family: 'BrunoAce-Regular';
font-family: 'Archivo';
font-family: 'Archivo-bold';
font-family: 'Archivo-ExtraBold';
font-family: 'Archivo-300';
font-family: 'Gilroy';
font-size: 14px;
line-height: 22px;
font-weight: 300;

p {
  font: italic 700 20px/25px "Roboto";
}

white-space: nowrap;
                
              

                
text-decoration: underline #3366cc solid 5px;
text-underline-offset: 1px;
text-decoration: underline wavy hotpink;
                
              

                
.class[data-position=default]
:nth-child(1)
                
              

                
:after {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  background-image:
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACGSURBVHgBlZExDoAgDEWpLiwkhoTdkdEreFLP4eTsDRg9AAM3QGqiIYq0dKHh//8aaG+tHbXWizFm994H0VB3Vim1dlLKAABTjHFDoQWCGcwmxgD5JfZJmJ1zBweS+6EmciFXzzFxdOBOpIZ8QKUQntSzi6A37DFX/u4XJET7NgUFSzVQvhPzUm/JJTTvJQAAAABJRU5ErkJggg==);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
                
              

                
.container {
  background: #101010 url('img.png') no-repeat fixed right top / cover;
}

.img {
  filter: drop-shadow(20px 7px 5px #302E2E);
}

background: linear-gradient(to bottom, #66c13e, #0f941a);

/*box-shadow as a single line border*/
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
                
              

                
input[type=checkbox] {
  accent-color: white;
}
input[type=checkbox]:checked {
  border: none;
  outline: 1px solid var(--color-black);
}
                
              

                            
.field__input:not(:placeholder-shown) ~ .field__label {
  /*code*/
}
                
              

                
var();
calc();
min();
max();
clamp();
                
              

                
details summary::after {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  background-image:
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACGSURBVHgBlZExDoAgDEWpLiwkhoTdkdEreFLP4eTsDRg9AAM3QGqiIYq0dKHh//8aaG+tHbXWizFm994H0VB3Vim1dlLKAABTjHFDoQWCGcwmxgD5JfZJmJ1zBweS+6EmciFXzzFxdOBOpIZ8QKUQntSzi6A37DFX/u4XJET7NgUFSzVQvhPzUm/JJTTvJQAAAABJRU5ErkJggg==);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 6px;
  transition: .2s;
}
details[open] > summary::after {
  transform: rotate(180deg);
}

/* https://www.base64-image.de */
                
              

                
ul {
  list-style-type: none
}
                
              

                
transition: all 1s;
                
              

                
.grid__two-four {
  display: grid;
  grid-template: repeat(2, auto) / repeat(4, 1fr);
  gap: 1.5rem;
}
                
              

                
.wishlist__wrapper {
  display: flex;
  flex-wrap: wrap;

  .wish-list__card {
    width: 33.333333333%;
    img {
    width: 100%;
    height: auto;
    }
  }

  .wish-list__card:not(:nth-child(3n+0)) {
    padding-right: 12px;
  }
}
                
              

                
.coll-card-image__wrapp {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 18px;
  align-items: center;
  display: flex;
}
@supports (-webkit-hyphens: none) {
  .coll-card-image__wrapp {
    width: 100%;
    height: calc(100% * 1/1);
  }
}

picture[data-square="1.5"] {
  width: calc(50% - 12px);
  aspect-ratio: 1.25 / 1;
  @supports not (aspect-ratio: 1.25 / 1) {
    &::before {
      float: left;
      padding-top: 80%;
      content: "";
    }
    &::after {
      display: block;
      content: "";
      clear: both;
    }
  }
  @media screen and (max-width: 576px) {
    width: 100%;
  }
}
                
              

                
/*support only safari*/
aside#main-collection-filters {
  position: sticky;
  position: -webkit-sticky;
  z-index: 10000;
  top: 157px;
  background: white;
  z-index: 1;
}
@supports (-webkit-hyphens: none) {
  aside#main-collection-filters {
    top: 0;
  }
}
                
              

                
.account__orders-item:has(.orders-item__detail.is-hidden) .btn-open__order-detail {
  transform: rotate(-180deg);
}
                
              

                
:link
:visited
:hover
:active
:target
:first-child
:last-child
:nth-child(2)