<?php defined('ABSPATH') || exit; ?>

<!-- ANNOUNCEMENT -->
<div class="lux-announcement">
  Free delivery on orders above $90
</div>

<!-- HEADER -->
<header class="lux-header">
  <div class="lux-header-inner">

    <!-- LEFT -->
    <div class="lux-left">
      <button class="lux-btn lux-menu-toggle" aria-label="Menu">
        <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
      </button>

      <button class="lux-btn lux-search-toggle" aria-label="Search">
        <svg viewBox="0 0 24 24">
          <circle cx="11" cy="11" r="7"/>
          <line x1="21" y1="21" x2="16.5" y2="16.5"/>
        </svg>
      </button>
    </div>

    <!-- LOGO -->
    <a href="<?php echo esc_url(home_url('/')); ?>" class="lux-logo">OTCHERA</a>

    <!-- RIGHT -->
    <div class="lux-right">
      <a href="<?php echo esc_url(wc_get_cart_url()); ?>" class="lux-btn lux-cart">
        <svg viewBox="0 0 24 24">
          <path d="M6 6h15l-2 10H8z"/>
          <circle cx="9" cy="20" r="1"/>
          <circle cx="18" cy="20" r="1"/>
        </svg>
        <span class="lux-cart-count">
          <?php echo WC()->cart->get_cart_contents_count(); ?>
        </span>
      </a>

      <a href="<?php echo esc_url(site_url('/wishlist')); ?>" class="lux-btn">
        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.4-7-10a4 4 0 018-2 4 4 0 018 2c0 5.6-7 10-7 10z"/></svg>
      </a>

      <a href="<?php echo esc_url(wc_get_page_permalink('myaccount')); ?>" class="lux-btn">
        <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 22c0-4 4-6 8-6s8 2 8 6"/></svg>
      </a>
    </div>

  </div>
</header>

<div class="lux-overlay"></div>

<!-- MENU -->
<aside class="lux-menu">

  <button class="lux-menu-close">✕ close</button>

  <div class="lux-menu-actions">
    <a href="<?php echo esc_url(wc_get_page_permalink('myaccount')); ?>">Account</a>
    <a href="<?php echo esc_url(site_url('/wishlist')); ?>">Wishlist</a>
    <a href="<?php echo esc_url(wc_get_cart_url()); ?>">Cart</a>
  </div>

  <!-- SEARCH -->
  <div class="lux-menu-search">
    <?php get_search_form(); ?>
  </div>

  <!-- CATEGORIES -->
  <div class="lux-menu-cats">
    <h4>Categories</h4>
    <ul>
      <?php
      $parents = get_terms([
        'taxonomy' => 'product_cat',
        'hide_empty' => true,
        'parent' => 0
      ]);

      foreach ($parents as $parent):
        $children = get_terms([
          'taxonomy' => 'product_cat',
          'hide_empty' => true,
          'parent' => $parent->term_id
        ]);
      ?>
      <li class="lux-cat">
        <button class="lux-cat-toggle">
          <span><?php echo esc_html($parent->name); ?></span>
          <?php if ($children): ?><i></i><?php endif; ?>
        </button>

        <?php if ($children): ?>
        <ul class="lux-sub">
          <?php foreach ($children as $child): ?>
          <li>
            <a href="<?php echo esc_url(get_term_link($child)); ?>">
              <?php echo esc_html($child->name); ?>
            </a>
          </li>
          <?php endforeach; ?>
        </ul>
        <?php endif; ?>
      </li>
      <?php endforeach; ?>
    </ul>
  </div>

  <div class="lux-contact">
    <a href="/contact">Contact us</a>
  </div>

  <div class="lux-menu-footer">
    <div class="lux-socials">
      <a href="#">Instagram</a>
      <a href="#">Facebook</a>
      <a href="#">TikTok</a>
    </div>
    <div class="lux-footer-logo">OTCHERA</div>
  </div>

</aside>

/* ANNOUNCEMENT */
.lux-announcement{
  position:fixed;top:0;width:100%;height:28px;
  background:#000;color:#fff;
  text-align:center;line-height:28px;
  font-size:12px;z-index:1000;
}

/* HEADER */
.lux-header{
  position:fixed;top:28px;width:100%;height:60px;
  background:#fffcfb;z-index:999;
  transition:transform .35s ease,background .35s ease;
}
.home .lux-header{background:transparent;}
.lux-header.scrolled{background:#fff;}
.lux-header.hide{transform:translateY(-100%);}

.lux-header-inner{
  height:60px;display:flex;align-items:center;
  justify-content:space-between;padding:0 20px;
  position:relative;
}

/* LOGO */
.lux-logo{
  position:absolute;left:50%;
  transform:translateX(-50%);
  font-size:22px;font-weight:500;
  text-decoration:none;color:#000;
}

/* ICONS */
.lux-left,.lux-right{display:flex;gap:14px;}
.lux-btn{background:none;border:none;cursor:pointer;padding:0;}
.lux-header svg{
  width:20px;height:20px;
  stroke:#000;fill:none;stroke-width:1.5;
}

/* OVERLAY */
.lux-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.4);
  opacity:0;pointer-events:none;
  transition:.3s;z-index:1100;
}
.lux-overlay.active{opacity:1;pointer-events:auto;}

/* MENU */
.lux-menu{
  position:fixed;top:0;left:0;height:100%;
  width:100%;max-width:420px;
  background:#fff;padding:24px;
  transform:translateX(-100%);
  transition:.35s ease;z-index:1200;
  overflow-y:auto;
}
.lux-menu.active{transform:translateX(0);}

/* MENU ACTIONS */
.lux-menu-actions{
  display:flex;justify-content:center;
  gap:12px;margin:20px 0;
}
.lux-menu-actions a{
  padding:8px 14px;border:1px solid #ddd;
  border-radius:20px;font-size:13px;
}

/* SEARCH */
.lux-menu-search input{
  width:100%;padding:10px;border:1px solid #ddd;
}

/* CATEGORIES */
.lux-menu-cats ul{list-style:none;padding:0;}
.lux-cat-toggle,
.lux-sub-toggle{
  width:100%;display:flex;
  justify-content:space-between;
  padding:12px 0;border:none;
  background:none;font-size:14px;
  cursor:pointer;
}

.lux-cat-toggle i,
.lux-sub-toggle i{
  width:10px;height:10px;
  border-right:1.5px solid #000;
  border-bottom:1.5px solid #000;
  transform:rotate(45deg);
  transition:.25s;
}

.lux-cat.open > .lux-cat-toggle i,
.lux-sub-cat.open > .lux-sub-toggle i{
  transform:rotate(-135deg);
}

.lux-sub,
.lux-sub-sub{display:none;padding-left:14px;}

.lux-cat.open > .lux-sub{display:block;}
.lux-sub-cat.open > .lux-sub-sub{display:block;}

/* FOOTER */
.lux-menu-footer{text-align:center;margin-top:40px;}
.lux-socials{display:flex;justify-content:center;gap:16px;margin-bottom:12px;}

/* PAGE SPACING */
body:not(.home){padding-top:88px;}
/* CART COUNT */
.lux-cart {
  position: relative;
}

.lux-cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  background: #000;
  color: #fff;
  font-size: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lux-cart-count:empty {
  display: none;
}

document.addEventListener('DOMContentLoaded', () => {

  const menu = document.querySelector('.lux-menu');
  const overlay = document.querySelector('.lux-overlay');
  const menuBtn = document.querySelector('.lux-menu-toggle');
  const searchBtn = document.querySelector('.lux-search-toggle');
  const closeBtn = document.querySelector('.lux-menu-close');
  const searchInput = document.querySelector('.lux-menu-search input');

  function openMenu(focusSearch = false) {
    menu.classList.add('active');
    overlay.classList.add('active');
    document.body.style.overflow = 'hidden';

    if (focusSearch && searchInput) {
      setTimeout(() => {
        searchInput.focus();
        searchInput.scrollIntoView({ behavior: 'smooth' });
      }, 200);
    }
  }

  function closeMenu() {
    menu.classList.remove('active');
    overlay.classList.remove('active');
    document.body.style.overflow = '';
  }

  menuBtn?.addEventListener('click', () => openMenu());
  searchBtn?.addEventListener('click', () => openMenu(true));
  closeBtn?.addEventListener('click', closeMenu);
  overlay?.addEventListener('click', closeMenu);

  document.addEventListener('click', e => {
    const toggle = e.target.closest('.lux-cat-toggle');
    if (toggle) {
      e.preventDefault();
      toggle.closest('.lux-cat').classList.toggle('open');
    }
  });

  /* HEADER SCROLL */
  const header = document.querySelector('.lux-header');
  let lastScroll = 0;

  window.addEventListener('scroll', () => {
    const current = window.pageYOffset;

    if (current > lastScroll && current > 120) {
      header.classList.add('hide');
    } else {
      header.classList.remove('hide');
    }

    if (document.body.classList.contains('home')) {
      header.classList.toggle('scrolled', current > 80);
    }

    lastScroll = current;
  });

});
0
Account
Wishlist
Cart

Categories

Contact Us

Tights

Correction Tights Classic Tights Utopia Thin
Here goes your text ... Select any part of your text to access the formatting toolbar.

After Dark Heart Pattern Tights 20

$18.00

Veloure Tights 30

$18.00

Summer Ultra Thin Tights 8

$12.00

Protocol Silk Skin Tights 15

$15.00

Protocol Silk Skin Tights 8

$15.00

Tone Tights With Short 40

Tone Tights With Short 20

$14.00

Tone Tights With Short 15

$13.00

Essential Powder Matt Tights 40

$21.00

Essential Powder Matt Tights 20

$20.00

Signature Silk Skin Tights 40

$24.00

Signature Silk Skin Tights 20

$23.00

Signature Silk Skin Tights 12

$22.00

DermaSoft Contour Tights 40

$32.00

DermaSoft Contour Tights 20

$32.00

Sihlouette Tight 40

$35.00

Sihlouette Tight 20

$35.00

Login

To access your account

Privacy statement
Sign in with email
I forgot my password

Don't have an account yet?

Sign up now