/* ------------------------------------------------------------------
   main.css (processed by Tailwind)
------------------------------------------------------------------ */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 1⃣️  Small Global Tweak */
@layer base {
  body {
    @apply bg-white text-gray-800 font-serif;
  }
}

/* 2⃣️  Swiper Theming */
@layer components {
  .swiper-button-next,
  .swiper-button-prev {
    @apply w-10 h-10 flex items-center justify-center rounded-full transition-colors duration-300 transform hover:scale-105;
    background-color: white;
    border: 1px solid #a08b62;
    position: relative;
  }

  .swiper-button-next::after,
  .swiper-button-prev::after {
    content: '';
    width: 1rem;
    height: 1rem;
    background-color: #a08b62;
    mask: url("data:image/svg+xml,%3Csvg fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
    mask-repeat: no-repeat;
    display: block;
  }

  .swiper-button-prev::after {
    transform: rotate(180deg);
  }

  .swiper-button-next:hover,
  .swiper-button-prev:hover {
    background-color: white;
    border-color: #4c4538;
  }

  .swiper-button-next:hover::after,
  .swiper-button-prev:hover::after {
    background-color: #4c4538;
  }

  .swiper-pagination-bullet {
    width: 24px !important;
    height: 4px !important;
    background: #a08b62 !important;
    border-radius: 2px !important;
    margin: 0 4px !important;
  }

  .swiper-pagination-bullet-active {
    background-color: #4c4538 !important;
    opacity: 1 !important;
    width: 32px !important;
  }
}

/* 3⃣️  Flourish Heading Decoration */
@layer utilities {
  .flourish-heading {
    @apply relative block pt-14 text-center;
  }

  .flourish-heading::before {
    content: '';
    @apply absolute left-1/2 -translate-x-1/2 -top-10 w-40 h-8 bg-center bg-no-repeat bg-contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 120'%3E%3Cpath d='M67 53c11-7 22-11 35-12 9-1 18 1 25 7 5 4 8 11 11 16 1-10-2-20-6-29 18 3 34 16 40 34 11-15 25-26 42-33-6 9-11 18-12 29 8-10 16-19 26-27 2 14-6 28-15 38s-22 18-35 23l-30 12-30-12C99 100 82 87 73 70l-2-4c-2-4-4-8-4-13z' fill='%23221F1B'/%3E%3C/svg%3E");
  }
}

/* 4⃣️  WooCommerce Product Image Styling */
@layer components {
  .woocommerce ul.products li.product img {
    @apply object-cover w-full rounded-lg transition-opacity duration-300;
  }

  .woocommerce ul.products li.product img:hover {
    @apply opacity-90;
  }
}

/* 5⃣️  Buttons */
@layer components {
  .btn-primary {
    @apply text-white font-serif text-base 
           px-6 py-2.5 rounded-full mb-6 shadow-md 
           transform transition-all duration-200 hover:scale-105 w-max;
    background-color: #a08b62;
    border: 1px solid #a08b62;
  }

  .btn-primary:hover {
    background-color: #4c4538; /* slightly darker on hover */
    border-color: #4c4538;
    @apply shadow-lg;
  }
}


/* 6⃣️  Bundle Offers */
@layer components {
  .bundle-offer {
    @apply bg-yellow-700 bg-gradient-to-tr from-yellow-800 to-yellow-500;
  }

  .bundle-offer:hover {
    @apply bg-yellow-600;
  }
}

@layer components {
  .hover-coffee {
    @apply hover:text-coffee;
  }
}

@layer components {
  .hover-orange {
    @apply hover:text-orange-400;
  }
}

@layer components {
  .hover-biscuit {
    @apply hover:text-biscuit;
  }
}

@layer components {
  #main.site-main {
    @apply bg-white max-w-screen-xl mx-auto px-6;
  }

  .page-template-default .site-main {
    @apply bg-white max-w-screen-md mx-auto px-6 pb-6;
  }
}

@layer components {
  .alignwide, .woocommerce-order {
    @apply !max-w-screen-xl !mx-auto !px-6;
  }
}

@layer components {
  .product_title {
    @apply text-2xl font-seasons text-gray-800;
  }

  .woocommerce div.product div.summary.entry-summary {
    @apply w-full lg:w-80 mt-6 lg:mt-0 lg:shrink-0 border border-gray-200 rounded-xl p-6 text-center;
  }

  .woocommerce div.product div.woocommerce-product-gallery.images {
    @apply mb-0 w-full md:w-1/2 lg:w-1/3 lg:shrink-0 rounded-lg bg-coffee-100;
  }

  .product_meta {
    @apply text-left text-sm flex flex-col gap-4
  }

  .product_meta span {
    @apply block font-bold;
  }

  .product_meta span a {
    @apply inline-block font-normal text-xs bg-coffee-100 px-2 py-1 mr-1 mb-1 rounded-full;
  }

  .woocommerce div.product .entry-summary p.price {
    @apply text-4xl mb-6;
  }

  .woocommerce div.product .entry-summary form.cart {
    @apply flex flex-row justify-center gap-2;
  }
  .woocommerce div.product .entry-summary form.cart input.qty {
    @apply bg-coffee-200 pl-2 py-2.5 rounded-full;
  }

  .woocommerce div.product .entry-summary form.cart button[type="submit"] {
    @apply btn-primary;
  }
  
  .woocommerce-Reviews-title {
    @apply text-2xl font-seasons text-gray-800 mb-4;
  }

  .woocommerce-noreviews {
    @apply text-center text-sm bg-coffee-200 p-2 mb-4;
  }

  #review_form_wrapper {
    @apply border border-gray-200 bg-coffee-100 rounded-xl p-6;
  }

  #review_form .comment-reply-title {
    @apply block font-bold mb-4;
  }
  .woocommerce #review_form #respond p { 
    @apply m-0;
  }

  .comment-form {
    @apply flex flex-col gap-4;
  }

  .woocommerce .comment-form p.stars a {
    @apply text-coffee-600;
  }

  .comment-form textarea {
    @apply bg-coffee-200 pl-2 py-2.5 rounded-xl;
  }

  .comment-form input[type="submit"] {
    @apply btn-primary mb-0;
  }

  .woocommerce #reviews #comments ol.commentlist li img.avatar {
    @apply rounded-xl;
  }

  .woocommerce #reviews #comments ol.commentlist li .comment-text {
    @apply bg-coffee-100 p-4 rounded-xl;
  }

  .woocommerce .star-rating::before {
    @apply text-coffee-600;
  }

  .woocommerce .star-rating span {
    @apply text-coffee-600;
  }

  .woocommerce section.related.products {
    @apply max-w-7xl mx-auto px-0 sm:px-6 lg:px-8;
  }

  .woocommerce section.related.products > h2 {
    @apply text-6xl font-seasons text-center my-8;
  }

  body.woocommerce .products ul, body.woocommerce ul.products {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-10;
  }

  body.woocommerce ul.products[class*=columns-] li.product, 
  body.woocommerce-page ul.products[class*=columns-] li.product {
    width: auto;
    float: none;
  }

  body.woocommerce .products ul:before, .woocommerce ul.products:before,
  body.woocommerce .products ul:after, .woocommerce ul.products:after {
    display: none;
  }

  .woocommerce ul.products li.product {
    @apply flex flex-col justify-between items-center bg-white border border-gray-200 rounded-xl p-6 text-center hover:shadow-md transition-all duration-300 w-auto;
  }

  body.woocommerce ul.products li.product img {
    @apply w-2/3 md:w-36 md:h-36 object-contain mx-auto;
  }

  body.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    @apply text-xl font-seasons font-semibold text-black leading-snug;
  }

  body.woocommerce ul.products li.product .button {
    @apply btn-primary mt-4;
  }
}

@layer components {
  div.wc-block-components-sidebar-layout.wc-block-cart {
    @apply pt-4;
  }

  div.wc-block-cart .wc-block-cart__submit-container {
    @apply flex flex-row justify-center;
  }

  div.wc-block-cart .wc-block-cart__submit-button {
    @apply btn-primary;
  }

  div.wp-block-woocommerce-checkout-actions-block .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
    @apply btn-primary;
  }
}

@layer components {
  .woocommerce-MyAccount-navigation {
    @apply p-4 my-4 bg-coffee-100 rounded-xl border border-gray-200;
  }

  .woocommerce-MyAccount-content {
    @apply p-4 my-4 rounded-xl border border-gray-200;
  }

}