/*
Theme Name: Nanika Theme
Theme URI: https://nanika.pl
Author: Pawel Kapera
Description: Dedykowany, minimalistyczny motyw WooCommerce dla NANIKA.
Version: 2.0.0
Text Domain: nanika-theme
*/
:root
{
    --color-bg:#f5f4f1;
    --color-bg2:#EFECE7;
    --color-surface:#faf9f7;
    --color-text:#1a1a1a;
    --color-text2:#666;
    --color-line:#e5e2dc;
    --color-acc:#c6a756;
    --color-button:#1a1a1a;
    --container:1250px;
    --serif:'Cormorant Garamond',serif;
    --sans:'Inter',sans-serif;
}
@font-face
{
    font-family:Inter;
    src:url('assets/fonts/Inter/Inter-VariableFont_opsz,wght.woff2') format('woff2');
    font-weight:100 900;
    font-display:swap;
}
@font-face
{
    font-family:'Cormorant Garamond';
    src:url('assets/fonts/Cormorant_Garamond/CormorantGaramond-VariableFont_wght.woff2') format('woff2');
    font-weight:100 900;
    font-display:swap;
}
*,*::before,*::after
{
    box-sizing:border-box;
}

html
{
    scroll-behavior:smooth;
}

body
{
    margin:0;
    background:var(--color-bg);
    color:var(--color-text);
    font-family:var(--sans);
    font-size:16px;
    overflow-x:hidden;
}

@media (max-width: 768px)
{
    input,
    select,
    textarea
    {
        font-size: 16px !important;
    }
}

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

a
{
    color:inherit;
    text-decoration:none;
}

button,input,select,textarea
{
    font:inherit;
}

h1,h2,h3,h4,p
{
    margin:0;
}

h1, h2
{
	font-family: var(--serif);
	font-weight: 400;
    line-height: 100%;
}

/* cookies */

.jxcc > .jxcc__card, .jxcc__actions > .jxcc__button, .jxcc__setting-row > .jxcc__switch, body > .jxcc-manage
{
    border-radius:5px;
    border: 1px solid #111;

}

.nanika-container
{
    width:min(calc(100% - 40px),var(--container));
    margin-inline:auto;
    padding-top:220px;
}

@media (max-width:930px)
{
    .nanika-container
    {
        padding-top:150px;
    }
}

.commerce-heading
{
    padding: 20px 0px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.nanika-eyebrow
{
    color:var(--color-acc);
    font-size:11px;
    font-weight:500;
    letter-spacing:.2em;
    text-transform:uppercase;
}

.nanika-title
{
    font-family:var(--serif);
    font-size:clamp(42px,5vw,72px);
    font-weight:400;
    line-height:.95;
    text-transform:uppercase;
}

.nanika-button,.button,button[type=submit],input[type=submit]
{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:48px;
    padding:13px 23px;
    border:1px solid var(--color-text);
    border-radius:3px;
    background:var(--color-text);
    color:#fff;
    cursor:pointer;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:.08em;
    transition:transform .25s,background .25s,color .25s;
}

.nanika-button:hover,.button:hover,button[type=submit]:hover,input[type=submit]:hover
{
    transform:translateY(-2px);
}

.nanika-breadcrumbs
{
    font-size:11px;
    color:var(--color-text2);
    margin-bottom:30px;
    width:100%;
}

.nanika-breadcrumbs span
{
    margin:0 8px;
    color:#aaa;
}

.woocommerce-message,.woocommerce-info,.woocommerce-error
{
    list-style:none;
    margin:0 0 25px;
    padding:16px 18px;
    border:1px solid var(--color-line);
    background:var(--color-surface);
    font-size:13px;
}

.woocommerce-error
{
    border-left:2px solid var(--color-acc);
}

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


@media(max-width:767px)
{
    .nanika-container
    {
        width:min(calc(100% - 28px),var(--container));
    }

}

/* =========================================================
   NANIKA — skala głównych nagłówków na podstronach
   ========================================================= */
:root
{
    --nanika-page-title-size: clamp(34px, 4vw, 42px);
}


/* WooCommerce: kontrolki formularzy i metody wysyłki */
.woocommerce-shipping-methods
{
    list-style:none;
    margin-left:0;
    padding-left:0;
}

.woocommerce .password-input
{
    position:relative;
    display:block;
}

.woocommerce .password-input input
{
    padding-right:48px;
}


.woocommerce .show-password-input
{
    position:absolute;
    top:50%;
    right:14px;
    width:24px;
    height:24px;
    transform:translateY(-50%);
    cursor:pointer;
    opacity:.65;
}

.woocommerce .show-password-input:hover
{
    opacity:1;
}

.woocommerce .show-password-input::after
{
    content:"";
    position:absolute;
    inset:0;
    background-color:currentColor;

    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:22px;

    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:22px;
}

.woocommerce .show-password-input.display-password::after
{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");

    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
}