.collection-layout{margin:0 0.5rem;padding:1rem;} .collection-grid{margin:0 auto;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));justify-items:center;align-items:start;} .product-card{background:#fff;border:1px solid #c5c4c4;border-radius:0.625rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);cursor:pointer;overflow:hidden;padding:0.5rem;position:relative;transition:box-shadow 0.2s ease-in-out;} .product-card:is([disabled]){cursor:not-allowed;position:relative;} .product-card:is([disabled])::before{background-color:rgba(255,255,255,0.5);content:'';height:100%;left:0;position:absolute;top:0;width:100%;z-index:1;} .product-card:is([disabled])::after{content:'Sold out';position:absolute;top:40%;left:0;width:100%;height:100%;color:#000000;font-size:1.125rem;font-weight:700;text-align:center;z-index:2;} .product-card:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);} .product-card[disabled] .product-card__hover-button{display:none;} .product-card__image-container{border-radius:0.625rem;min-height:300px;overflow:hidden;width:100%;} @media (min-width:1024px){.product-card__image-container{aspect-ratio:auto;height:20rem;}} .product-card__image-container img{border-radius:8px;display:block;object-fit:contain;object-position:center;transition:transform 0.3s ease-in-out;width:100%;max-width:100%;height:auto;} .product-card:hover .product-card__image-container img{transform:scale(1.1);opacity:0.75;max-width:100%;height:auto;} .product-card__details{display:flex;justify-content:space-between;padding:20px;} .product-card__title{color:#405047;font-size:1rem;font-weight:500;margin:0;} .product-card__title:hover{text-decoration:underline;} .product-card__category{color:#6b7280;font-size:0.75rem;margin:0 0 0.25rem 0;} .product-card__price{color:#111827;font-size:0.875rem;font-weight:500;} button{background:#fff;border-radius:50px;color:#000;cursor:pointer;font-weight:800;text-transform:uppercase;transition:background-color 0.3s ease,color 0.3s ease;} button:hover{background:#000;color:#fff;} .product-card__hover-button{align-items:center;background-color:#000;border:2px solid #000;bottom:27%;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);display:flex;font-size:1.5rem;gap:0;justify-content:center;outline:none;opacity:0;padding:0.5rem;pointer-events:auto;position:absolute;right:7%;transform:translateY(20px);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);z-index:10;} .product-card__hover-button::before{content:'';width:16px;height:16px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>');background-size:contain;background-repeat:no-repeat;} .product-card:is([disabled]) .product-card__hover-button{opacity:0;} .product-card__hover-button[disabled]:hover{cursor:not-allowed;} .product-card__hover-button svg{filter:invert(95%) sepia(67%) saturate(1%) hue-rotate(326deg) brightness(116%) contrast(101%);height:16px;width:16px;} .product-card__hover-button span{color:#fff;font-size:12px;font-weight:800;letter-spacing:0.025em;text-transform:uppercase;} .product-card:hover .product-card__hover-button{opacity:1;transform:translateY(0);} .product-card__hover-button:hover .product-card__hover-button__button__text{margin:0 0.5rem;max-width:15rem;transition:max-width 0.5s ease,margin-left 0.2s ease;} .product-card__hover-button__button__text{max-width:0;overflow:hidden;transition:max-width 0.5s ease,margin-left 0.2s ease 0.3s;white-space:nowrap;} .product-modal{border:0;border-radius:0.75rem;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);padding:0;outline:none;} @media (max-width:768px){.product-modal{width:100%;}} .product-modal::backdrop{background-color:rgba(156,163,175,0.5);} .product-modal__container{overflow-x:hidden;padding:0;position:relative;} .product-modal__close-container{display:grid;justify-content:end;justify-items:end;padding:2rem;position:absolute;right:0;z-index:1;} .product-modal__close{border:1px solid #cccccc;border-radius:12px;cursor:pointer;height:32px;width:32px;} .product-modal__content{background-color:#ffffff;border-radius:0.75rem;max-width:56rem;width:100%;} .product-modal__layout{display:flex;flex-direction:column;} @media (min-width:768px){.product-modal__layout{flex-direction:row;}} .product-modal__media{align-items:center;background:#f3f3f3;display:flex;flex-direction:column;justify-content:center;min-width:400px;padding:1rem;} .product-modal__media img{border-radius:4px;height:100%;width:100%;height:auto;} .product-modal__details{display:flex;flex-direction:column;gap:2rem;padding:2rem;} .product-modal__header{display:flex;flex-direction:column;gap:0.25rem;} .product-modal__vendor{opacity:0.5;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;font-size:0.75rem;} .product-modal__title{font-size:2.25rem;font-weight:700;margin:0;} .product-modal__price-container{display:flex;gap:0.5rem;font-weight:500;font-size:1.25rem;} .product-modal__compare-price{text-decoration:line-through;opacity:0.5;} .product-modal__buttons{display:flex;flex-direction:column;gap:0.5rem;} .product-modal__buttons button{font-size:0.875rem;font-weight:800;transition:background-color 0.3s ease,color 0.3s ease;cursor:pointer;border:2px solid black;text-transform:uppercase;} .product-modal__add-button{background-color:#000000;color:#ffffff;border-radius:0.75rem;padding:1rem;font-size:18px;font-weight:500;width:100%;} .product-modal__add-button:hover{background:#ffffff;color:#000000;border:2px solid black;} .product-modal__add-button:disabled{opacity:0.3;} .product-modal__buy-button{background-color:#ffffff;color:#000000;border-radius:0.75rem;padding:1rem;font-size:18px;font-weight:500;width:100%;} .product-modal__buy-button:disabled{opacity:0.3;} .product-modal__buy-button:hover{opacity:0.3;} .product-modal__description{display:flex;justify-content:space-between;} .product-modal__description-text{font-weight:400;color:#717171;font-size:0.875rem;} .product-modal__description-text p{margin:0;}