/* =========================================================
   Minimal Tailwind Mimic – ONLY the classes used in snippet
   Breakpoints: sm = 640px
   Color tokens & shadows mirror Tailwind defaults closely
   ========================================================= */

:root{
  --white:#ffffff;
  --black:#000000;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-300:#d1d5db;
  --gray-500:#6b7280;
  --gray-700:#374151;
  --gray-800:#d3d3d3;
  --red-500:#383838;
  --yellow-500:#f59e0b;
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
}

/* ---------- Layout widths ---------- */
.max-w-6xl{max-width:72rem;}
.max-w-3xl{max-width:48rem;}
.w-full{width:100%;}
.w-52{width:13rem;}
.w-40{width:10rem;}
.w-48{width:12rem;}
.w-32{width:8rem;}
.w-28{width:7rem;}
.w-16{width:4rem;}
.w-6{width:1.5rem;}
.w-5{width:1.25rem;}
.w-4{width:1rem;}
.w-1\/3{width:33.333333%;}
.h-auto{height:auto;}
.h-16{height:4rem;}
.h-6{height:1.5rem;}
.h-5{height:1.25rem;}

/* ---------- Display & Flex ---------- */
.block{display:block;}
.inline-block{display:inline-block;}
.flex{display:flex;}
.flex-col{flex-direction:column;}
.flex-row{flex-direction:row;}
.flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.justify-start{justify-content:flex-start;}

/* ---------- Positioning ---------- */
.relative{position:relative;}
.absolute{position:absolute;}
.top-1\/2{top:50%;}
.left-3{left:0.75rem;}
.right-3{right:0.75rem;}
.transform{transform:translate(0,0);}
.-translate-y-1\/2{transform:translateY(-50%);}

/* ---------- Overflow / Object fit ---------- */
.overflow-hidden{overflow:hidden;}
.object-cover{object-fit:cover;}
.object-contain{object-fit:contain;}

/* ---------- Spacing (only used values) ---------- */
.mx-auto{margin-left:auto;margin-right:auto;}
.mb-10{margin-bottom:2.5rem;}
.mb-8{margin-bottom:2rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-4{margin-bottom:1rem;}
.mb-3{margin-bottom:0.75rem;}
.mb-2{margin-bottom:0.5rem;}
.mt-12{margin-top:3rem;}
.mt-10{margin-top:2.5rem;}
.mt-8{margin-top:2rem;}
.mt-6{margin-top:1.5rem;}
.mt-4{margin-top:1rem;}
.mt-3{margin-top:0.75rem;}
.mt-1{margin-top:0.25rem;}
.p-10{padding:2.5rem;}
.p-6{padding:1.5rem;}
.p-4{padding:1rem;}
.p-3{padding:0.75rem;}
.py-2{padding-top:1rem;padding-bottom:1rem;}
.py-05{padding-top: 0.5rem;
    padding-bottom: 0.5rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.pt-10{padding-top:2.5rem;}
.pb-1{padding-bottom:0.25rem;}
.gap-2{gap:0.5rem;}
.gap-4{gap:1rem;}

/* ---------- Typography ---------- */
.text-left{text-align:left;}
.text-center{text-align:center;}
.text-5xl{font-size:3rem;line-height:1;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-base{font-size:1rem;line-height:1.5rem;}
.text-sm{font-size:0.875rem;line-height:1.25rem;}
.text-xs{font-size:0.75rem;line-height:1rem;}
.text-\[24px\]{font-size:24px;line-height:1.25;}
.leading-relaxed{line-height:1.625;}
.font-extrabold{font-weight:800;}
.font-bold{font-weight:700;}
.font-semibold{font-weight:600;}
.uppercase{text-transform:uppercase;}
.tracking-wider{letter-spacing:.05em;}
.italic{font-style:italic;}
.whitespace-pre-line{white-space:pre-line;}

/* ---------- Colors ---------- */
.bg-white{background-color:var(--white);}
.bg-black{background-color:var(--black);}
.bg-gray-100{background-color:var(--gray-100);}
.bg-opacity-60{--bg-o:0.6;}
.bg-opacity-90{--bg-o:0.9;}
/* When used together with bg-white on buttons */
.bg-white.bg-opacity-60{background-color:rgba(255,255,255,0.6);}
.bg-white.bg-opacity-90{background-color:rgba(255,255,255,0.9);}

.text-white{color:var(--white);}
.text-black{color:var(--black);}
.text-gray-900{color:#111827;}
.text-gray-700{color:var(--gray-700);}
.text-gray-500{color:var(--gray-500);}
.text-red-500{color:var(--red-500);}
.text-yellow-500{color:var(--yellow-500);}

/* ---------- Borders & Radius ---------- */
.border{border-width:1px;border-style:solid;border-color:var(--gray-200);}
.border-b{border-bottom-width:1px;border-style:solid;border-color:var(--gray-200);}
.border-b-2{border-bottom-width:2px;border-style:solid;border-color:var(--black);}
.border-black{border-color:var(--black) !important;}
.border-gray-200{border-color:var(--gray-200);}
.border-gray-300{border-color:var(--gray-300);}
.rounded-md{border-radius:0.375rem;}
.rounded-lg{border-radius:0.5rem;}
.rounded-xl{border-radius:0.75rem;}
.rounded-full{border-radius:9999px;}
.border-2{border-width:2px;border-style:solid;}

/* ---------- Shadows ---------- */
.shadow-sm{box-shadow:var(--shadow-sm);}
.shadow-md{box-shadow:var(--shadow-md);}
.shadow-lg{box-shadow:var(--shadow-lg);}

/* ---------- Transitions ---------- */
.transition{transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4,0,0.2,1);}
.duration-200{transition-duration:200ms;}
.ease-in-out{transition-timing-function:cubic-bezier(0.4,0,0.2,1);}

/* ---------- Hover / Focus states used ---------- */
.hover\:bg-gray-800:hover{background-color:var(--gray-800);}
.hover\:bg-opacity-90:hover{background-color:rgba(255,255,255,0.9);}
.focus\:ring-red-500:focus{outline:2px solid var(--red-500);outline-offset:2px;}
.focus\:border-red-500:focus{border-color:var(--red-500);}

/* ---------- Forms ---------- */
input[type="checkbox"].accent-black{accent-color:var(--black);}

/* ---------- Images ---------- */
img.mx-auto{display:block;margin-left:auto;margin-right:auto;}

/* ---------- Utilities not in Tailwind core but used in markup ---------- */
.text-md{font-size:0.9375rem;line-height:1.375rem;} /* custom helper */

/* ---------- Buttons (composed utilities from your markup) ---------- */
button.bg-black.text-white.rounded-xl{cursor:pointer;}

/* ---------- “my-slider-*” wrappers (you control JS init) ---------- */
.my-slider-1,
.my-slider-2,
.my-slider-3{
  display:flex;
  scroll-snap-type:x mandatory;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.my-slider-1 img,
.my-slider-2 img,
.my-slider-3 img{
  flex:0 0 100%;
  scroll-snap-align:center;
}

/* ---------- Custom arrow buttons ---------- */
#custom-prev-1,#custom-next-1,
#custom-prev-2,#custom-next-2,
#custom-prev-3,#custom-next-3{
  line-height:0;
  border:none;
  cursor:pointer;
}

/* ---------- Swiper helpers (since you used Swiper classes) ---------- */
.swiper{width:100%;}
.swiper-slide{height:auto;}
.swiper-pagination{position:relative;margin-top:1rem;}

/* ---------- Small breakpoint overrides (sm:) ---------- */
@media (min-width:640px){
  .sm\:p-6{padding:1.5rem;}
  .sm\:text-base{font-size:1rem;line-height:1.5rem;}
  .sm\:gap-8{gap:2rem;}
  .sm\:w-32{width:8rem;}
  .sm\:w-8{width:2rem;}
  .sm\:h-8{height:2rem;}
  .sm\:w-48{width:12rem;}
  .sm\:flex-row{flex-direction: row;}
}


.pf-fixed-header{
  position: fixed;
  top: 0;              /* JS below will bump this if WP admin bar exists */
  left: 0;
  right: 0;
  z-index: 10050;      /* above theme header */
  background: #ffffff; /* make it opaque */
}


/* Hide scrollbar for Chrome, Safari, Edge */
.your-scroll-class::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
.your-scroll-class {
    scrollbar-width: none;
}

/* Hide scrollbar for IE, Edge Legacy */
.your-scroll-class {
    -ms-overflow-style: none;
}