/*
Theme Name: Pedro de Sousa
Theme URI: https://pedrodesousa.it
Description: Pedro de Sousa's personal theme.
Text Domain: pedrodesousa
Author: Stra Studio
Author URI: https://stra.studio
Version: 1.1.0
Requires at least: 6.3
Requires PHP: 7.4
*/

/* general */
body {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: inherit;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
    display: block;
}

input {
    background: inherit;
}

.wp-element-button {
    background: white;
    color: black;
    transition: .5s;
    padding: 0;
    text-transform: capitalize;
    font-variation-settings: 'wght' 400;
}

.wp-element-button:hover {

    font-variation-settings: 'wght' 900;
}

::selection {
    background: none;
    color: rgb(57, 135, 35);
}

del {
    text-decoration: line-through
}

.onsale {
    position: absolute;
    top: 1rem;
    left: 1rem;
}

/* home */
div.cup-animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    margin: 0;
    pointer-events: none;
}

h1.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    font-size: 1rem;

    display: none;
}

img.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 6rem;
}

div.handcrafted-container>h1 {
    margin: 0;
    font-weight: normal;
    text-transform: capitalize;

    font-size: min(calc(var(--i) / 12 * 4rem), 9vw);
    letter-spacing: calc(var(--i) / 12 * -8px);
    white-space: nowrap;
    overflow: hidden;

}

div.handcrafted-container>h1>sup {
    font-weight: thin;
    font-size: calc(var(--i) / 12 * 1rem);
    text-indent: calc(var(--i) / 12 * 10px);
    letter-spacing: 0;
}

video.insta-video {
    position: absolute;
    right: 10%;
    width: 300px;
    max-width: 50%;
}

div.home-scroll-container {
    margin-top: 100vh;

    flex-wrap: wrap;
    font-weight: 100;

}

div.home-scroll-container>*>* {
    max-width: 50%;
    box-sizing: border-box;
}

div.home-scroll-container .section-1 {
    display: flex;
    align-items: stretch;
    margin-bottom: 200px;
}

.pj-typo {

    display: flex;
    flex-direction: column;
}

.pj-typo>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pj-typo>h1 {
    font-weight: normal;
    font-size: 4vw;
    text-transform: capitalize;

    letter-spacing: -0.5vw;
    margin: 0;
    flex: 1;
    line-height: calc(100%-8px);
    display: flex;
    align-items: center;

}

.pj-typo>h1>sup {
    font-weight: thin;
    font-size: 1vw;

    text-indent: 10px;
    letter-spacing: 0;
}

.pj-typo p {
    margin: 0;
    font-size: 1rem;
    line-height: 80%;
}

div.loading-screen {
    position: fixed;
    inset: 0;
    margin: 0;
    background: white;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 1s linear;
}

div.loading-screen.loaded {
    opacity: 0;
    pointer-events: none;
}

/* header */
header {
    z-index: 100;
}

header .header>* {
    position: fixed;
    color: black;
    z-index: 1;
    font-size: 2rem;
    font-weight: normal;
    text-transform: capitalize;
}

header .header>a:hover {
    text-decoration: underline !important;
}

header .header .wp-block-site-logo {
    left: 1rem;
    top: .5rem;
}

header .header .header-items {
    right: 1rem;
    top: .5rem;
}

header .header .header-cart {
    right: 1rem;
    bottom: 0.5rem;
    font-size: 1.5rem;
}

header .header .header-cart p {
    display: inline;
}

header .header .header-collaborator {
    left: 1rem;
    bottom: 0.5rem;
    font-size: 1.5rem;
}

/* footer */

/* wc */
div.woocommerce-notices-wrapper {
    box-sizing: border-box;
    position: absolute;
    top: 4rem;
    right: 0;
    left: 0;
    border: 1px solid black;
    border-width: 1px 0;
    z-index: 10;
    background: white;
}

div.woocommerce-notices-wrapper:empty {
    border: 0;
}

form.tag-form {
    position: fixed;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: center;
    top: 1.5rem;
}

#product_tag {
    border: 1px solid black;
    border-radius: 0;
    appearance: none;
    padding: 0 1rem;
    text-align: center;
    background: white;

}

#product_tag:focus-visible {
    outline: none;
}

.woocommerce {

}

/* wc-list */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title, .woocommerce ul.products li.product span.price {
	position: absolute;
    margin: 1rem;
	bottom: 0;
	left: 0;
}

ul.products {
    display: flex;
    flex-wrap: wrap;
}

li.product {
    box-sizing: border-box;
    width: calc(100% / 3);
    list-style-type: none;
    outline: 1px solid black;
    position: relative;
    cursor: pointer;
}

li.product-category {
    width: calc(100% / 2);
}

li.product a img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
}

li.product-category a img {
    aspect-ratio: 1;
    scale: .75;
}

li.product h2 {
    display: none;
}

li.product-category h2 {
    display: block;
    position: absolute;
    inset: 0;
    text-align: center;
    padding: 1rem 0;

    font-size: 2rem;
    font-weight: lighter;
}

ul.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    margin: 2rem;
}

ul.page-numbers li {
    list-style-type: none;
    padding: 0 .5rem;
}

ul.page-numbers li span {
    padding: 0 .5rem;
}

ul.page-numbers li span.current {
    border: 1px solid black;
}

.term-description {
    display: none;
}

.woocommerce ul.products li.product.outofstock span.price .amount {
    display: none;
}
.woocommerce ul.products li.product.outofstock span.price::after {
    content: 'out of stock';
}

/* wc-single */
div.product {
	display: flex;
	flex-wrap: wrap;
}

div.woocommerce-product-gallery {
	width: 50%;
	height: auto;
}

div.summary {
	padding: 4rem 0 4rem 1px;
	width: 50%;
	display: flex;
	flex-direction: column;

	margin-bottom: 2rem;
}

div.summary h1 {
	font-size: 4rem;
	text-transform: capitalize;
	font-variation-settings: 'wght' 400;
	transition: 2s;
}

div.summary h1:hover {
	font-variation-settings: 'wght' 900;
}

p.price,
form.cart {
	text-align: right;
}

div.summary>* {
	border-bottom: 1px solid black;

	padding: 1rem 1rem;
}

div.summary>p.price {
	border-bottom: 1px solid black;
	border-top: 1px solid black;
}

div.summary>p {
	border-bottom: 0;

	padding: 1rem 1rem;
}

div.flex-viewport,
.woocommerce-product-gallery {
	outline: 1px solid black;
}

.woocommerce-product-gallery__image img,
img.wp-post-image {
	box-sizing: border-box;
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1;
	height: auto;
}

.woocommerce-product-gallery ol {
	display: flex;
	justify-content: start;
	align-items: start;
}

.woocommerce-product-gallery ol li {
	max-width: 5rem;
	flex: 1;
	outline: 1px solid black;
	list-style-type: none;
}

.woocommerce-product-gallery ol li img {
	width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

p.stock {
	display: none;
}

div.quantity {
	display: none;
}

#ppcp-messages {
	display: none;
}

/* wc-cart */
.shop_table thead,
.shop_table .product-subtotal,
.shop_table .product-quantity,
td.actions,
.cart_totals h2 {
    display: none;
}

.shop_table img {
    max-width: 100px;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

table.shop_table {
    margin-top: 4rem;
    width: 100%;
}

table.shop_table tr td,
table.shop_table tr th {
    box-sizing: border-box;
    border-bottom: 1px solid black;
    padding: 2rem 0;
}

a.remove {
    padding: 1rem;
}

.cart-empty {
    margin: 4rem 1rem;
    margin-bottom: 0;
}

.return-to-shop {
    margin: 0 1rem;
}

tr.cart-subtotal {
    display: none;
}

ul#shipping_method {
    list-style-type: none;
    margin-bottom: 1rem;
}

ul#shipping_method li {
    display: flex;
    gap: .5rem;
}

ul#shipping_method input[type="radio"] {

    display: grid;
    place-content: center;
}

ul#shipping_method input[type="radio"]::before {
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em black;
}

ul#shipping_method input[type="radio"]:checked::before {
    transform: scale(1);
}

form.woocommerce-shipping-calculator {

}

.checkout-button {
    margin: 1rem;
    text-align: right;
}

.shipping-calculator-form>* {}

.select2-container--default .select2-selection--single {
    margin: .5rem 0 !important;
}

.form-row input {
    font-size: 1rem;
    padding: 4px 20px 4px 8px;
    width: 100%;
    border: 1px solid black;
    border-right: none;
    margin: .5rem 0;
}

.woocommerce-shipping-totals th {
    vertical-align: top;
}

.woocommerce-cart .wp-block-group {
    padding: 4rem 1rem;
}

.woocommerce-checkout-review-order thead,
.woocommerce-checkout-review-order tbody,
.woocommerce-checkout-review-order tfoot,
.cart_totals tbody {
    display: block;
}

.cart_totals table.shop_table tr.shipping,
.woocommerce-checkout-review-order table.shop_table tr,
.cart_totals table.shop_table tr.order-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid black;
}

.cart_totals table.shop_table tr.shipping td,
.woocommerce-checkout-review-order table.shop_table tr td,
.cart_totals table.shop_table tr.order-total td {
    flex: 1;
    border-bottom: none;
}

.cart_totals table.shop_table tr.shipping th,
.woocommerce-checkout-review-order table.shop_table tr th,
.cart_totals table.shop_table tr.order-total th {
    border-bottom: none;
}

/* wc-checkout */
form.checkout {
    margin-top: 4rem;
    margin-right: 2%;
    margin-left: 50%;
}

@media (max-width: 768px) {
    form.checkout {
        margin-top: 4rem;
        margin-right: 2%;
        margin-left: 2%;
    }
}

form.checkout h3 {
    font-size: 2rem;

}

.woocommerce-billing-fields__field-wrapper p {
    margin-top: 1rem;
}

form.checkout input:not([type="checkbox"]):not([type="radio"]),
form.checkout textarea {
    width: 100%;
    margin: 2rem 0;
    border: 1px solid black;

    padding: .3rem;
    margin-top: 0;
    font-weight: bold;
}

form.checkout input:focus-visible,
form.checkout textarea:focus-visible {
    outline: none;
}

table.woocommerce-checkout-review-order-table {
    margin: 0;
}

.select2-container--default .select2-selection--single {
    border: 0;
    outline: 1px solid black;
    border-radius: 0;
    margin: 2rem 0;
}

.select2-selection__arrow {
    display: none;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: #3a3b3c;
}

.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: row-reverse;
    gap: 1rem;
    padding: 1rem 0;
}

.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox span {
    font-size: 1rem;
}

#order_review_heading {
    margin-top: 10rem;
}

.woocommerce-checkout-review-order {
    margin-bottom: 5rem;
}

.ppc-button-wrapper {
    padding: 1rem;
    max-width: 5rem;
}

.woocommerce-checkout .wp-block-group {
    padding: 1rem 1rem;
}

.woocommerce-checkout-payment {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 0;
}

.woocommerce-checkout-payment a {
    display: inline;
}

ul.wc_payment_methods,
ul#shipping_method {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
}

.ppc-button-wrapper {
    max-width: 100%;
}

button#place_order {
    width: 100%;
    border: 1px solid black;
    height: 2rem;
    margin: 2rem 0;
}

/* mobile */
@media only screen and (max-width: 768px) {

    li.product {
        width: calc(100% / 2);
    }

    li.product-category {
        width: 100%;
    }

    div.product {
        flex-direction: column;
    }

    div.product > * {
        width: 100%;
    }
  }

/* collaborators */
.collaborators-wrapper {
    padding: 4rem 1rem;
}

.collaborator-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.collaborator-section h2 {
    font-size: 2rem;
}

.collaborator-section h2 a {
    text-decoration: none;
}

.collaborator-section h2 a:hover,
.collaborator-section h2 a:focus {
    text-decoration: underline;
}

.collaborator-title {
    padding-top: 4rem;
}

.woocommerce-product-gallery__trigger { display: none !important; }
