<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
/* ============================================================
   Perfect Cup 33 — scoped styles (.pc namespace)
   Safe to load alongside Luma. Nothing here leaks to the
   catalog, checkout, or admin.
   ============================================================ */
.pc {
  --pc-bg: #f6f1ea;
  --pc-fg: #1e1611;
  --pc-muted: #6b5b4d;
  --pc-primary: #552f22;
  --pc-primary-fg: #f6f1ea;
  --pc-accent: #b5651d;
  --pc-border: rgba(30, 22, 17, 0.12);
  --pc-secondary: #ece3d7;
  --pc-shadow: 0 30px 60px -30px rgba(30, 22, 17, 0.35);
  --pc-display: "Fraunces", Georgia, serif;
  --pc-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--pc-body);
  color: var(--pc-fg);
  background: var(--pc-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.pc *, .pc *::before, .pc *::after { box-sizing: border-box; }
.pc img { max-width: 100%; height: auto; display: block; }
.pc a { color: inherit; text-decoration: none; }
.pc h1, .pc h2, .pc h3, .pc h4 { font-family: var(--pc-display); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
.pc p { margin: 0; }
.pc ol, .pc ul { margin: 0; padding: 0; list-style: none; }
.pc-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pc-eyebrow { font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--pc-accent); }
.pc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: background-color .2s, color .2s, border-color .2s; cursor: pointer; border: 0; }
.pc-btn-primary { background: var(--pc-primary); color: var(--pc-primary-fg) !important; }
.pc-btn-primary:hover { background: var(--pc-accent); color: #fff; }
.pc-btn-ghost { background: transparent; border: 1px solid rgba(30,22,17,.3); color: var(--pc-fg); }
.pc-btn-ghost:hover { border-color: var(--pc-accent); color: var(--pc-accent); }
.pc-btn-block { width: 100%; }
/* Reveal-on-scroll */
.pc-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.pc-reveal.is-visible { opacity: 1; transform: none; }
/* ---------- Header ---------- */
.pc-header { border-bottom: 1px solid var(--pc-border); }
.pc-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; max-width: 1200px; margin: 0 auto; }
.pc-logo { font-family: var(--pc-display); font-size: 24px; letter-spacing: -0.01em; display: inline-flex; align-items: baseline; gap: 6px; }
.pc-logo-mark { font-size: 14px; color: var(--pc-accent); }
.pc-nav { display: none; gap: 36px; font-size: 14px; }
.pc-nav a { transition: color .2s; }
.pc-nav a:hover { color: var(--pc-accent); }
@media (min-width: 900px) { .pc-nav { display: flex; } }
/* ---------- Hero ---------- */
.pc-hero { overflow: hidden; }
.pc-hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; padding: 80px 24px; max-width: 1200px; margin: 0 auto; }
@media (min-width: 900px) { .pc-hero-grid { grid-template-columns: 1fr 1fr; padding: 112px 24px; gap: 64px; } }
.pc-hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.pc-hero-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--pc-accent); }
.pc-hero h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.05; }
.pc-hero h1 em { font-style: italic; color: var(--pc-accent); }
.pc-hero-lead { margin-top: 24px; max-width: 520px; font-size: 18px; color: var(--pc-muted); }
.pc-hero-actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }
.pc-hero-image-wrap { position: relative; }
.pc-hero-image-glow { position: absolute; inset: -16px; border-radius: 32px; background: rgba(181, 101, 29, .12); filter: blur(40px); }
.pc-hero-image { position: relative; aspect-ratio: 1/1; width: 100%; border-radius: 32px; object-fit: cover; box-shadow: var(--pc-shadow); }
.pc-hero-badge { position: absolute; bottom: -24px; left: -24px; background: var(--pc-bg); padding: 16px 24px; border-radius: 16px; box-shadow: var(--pc-shadow); display: none; }
@media (min-width: 900px) { .pc-hero-badge { display: block; } }
.pc-hero-badge-num { font-family: var(--pc-display); font-size: 32px; }
.pc-hero-badge-num span { color: var(--pc-accent); }
.pc-hero-badge-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pc-muted); margin-top: 4px; }
/* ---------- Values Bar ---------- */
.pc-values { border-top: 1px solid var(--pc-border); border-bottom: 1px solid var(--pc-border); background: rgba(236, 227, 215, .5); }
.pc-values-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .pc-values-grid { grid-template-columns: repeat(4, 1fr); } }
.pc-value { padding: 32px 24px; text-align: center; border-right: 1px solid var(--pc-border); }
.pc-value:last-child { border-right: 0; }
.pc-values-grid > .pc-value:nth-child(2n) { border-right: 0; }
@media (min-width: 700px) { .pc-values-grid > .pc-value:nth-child(2n) { border-right: 1px solid var(--pc-border); } .pc-values-grid > .pc-value:last-child { border-right: 0; } }
.pc-value-t { font-family: var(--pc-display); font-size: 18px; }
.pc-value-s { margin-top: 4px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pc-muted); }
/* ---------- Story ---------- */
.pc-story { max-width: 1200px; margin: 0 auto; padding: 96px 24px; }
.pc-story-grid { display: grid; grid-template-columns: 1fr; gap: 64px; }
@media (min-width: 900px) { .pc-story-grid { grid-template-columns: 5fr 7fr; gap: 80px; } }
.pc-story-img { aspect-ratio: 4/5; border-radius: 20px; object-fit: cover; box-shadow: var(--pc-shadow); }
.pc-story h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.15; margin-top: 16px; }
.pc-story-body { margin-top: 32px; display: grid; gap: 20px; color: var(--pc-muted); font-size: 18px; }
.pc-story-quote { border-left: 2px solid var(--pc-accent); padding-left: 20px; font-style: italic; color: var(--pc-fg); }
/* ---------- Origins ---------- */
.pc-origins { background: var(--pc-primary); color: var(--pc-primary-fg); }
.pc-origins-inner { max-width: 1200px; margin: 0 auto; padding: 96px 24px; }
.pc-origins-head { display: flex; flex-direction: column; gap: 24px; justify-content: space-between; }
@media (min-width: 800px) { .pc-origins-head { flex-direction: row; align-items: flex-end; } }
.pc-origins-head h2 { font-size: clamp(30px, 4vw, 48px); max-width: 520px; color:white;}
.pc-origins-lead { max-width: 320px; color: rgba(246, 241, 234, .7); }
.pc-origins-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .pc-origins-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pc-origins-grid { grid-template-columns: repeat(4, 1fr); } }
.pc-origin-card { border: 1px solid rgba(246, 241, 234, .1); background: rgba(246, 241, 234, .05); border-radius: 20px; padding: 24px; transition: border-color .2s; display: block; }
.pc-origin-card:hover { border-color: rgba(181, 101, 29, .6); }
.pc-origin-thumb { aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; margin-bottom: 24px; background: rgba(246, 241, 234, .05); }
.pc-origin-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .7s; }
.pc-origin-card:hover .pc-origin-thumb img { transform: scale(1.05); }
.pc-origin-region { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pc-accent); }
.pc-origin-name { font-family: var(--pc-display); font-size: 22px; margin-top: 8px; color:white;}
.pc-origin-notes { margin-top: 8px; font-size: 14px; color: rgba(246, 241, 234, .7); }
.pc-origin-foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(246, 241, 234, .1); display: flex; justify-content: space-between; font-size: 14px; }
.pc-origin-foot span:last-child { color: var(--pc-accent); }






/* ---------- Brew ---------- */
.pc-brew { max-width: 1200px; margin: 0 auto; padding: 96px 24px; }
.pc-brew-grid { display: grid; grid-template-columns: 1fr; gap: 64px; align-items: center; }
@media (min-width: 900px) { .pc-brew-grid { grid-template-columns: 1fr 1fr; } }
.pc-brew h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.15; margin-top: 16px; }
.pc-brew-lead { margin-top: 24px; max-width: 520px; font-size: 18px; color: var(--pc-muted); }
.pc-brew-steps { margin-top: 40px; display: grid; gap: 24px; }
.pc-brew-step { display: flex; gap: 24px; }
.pc-brew-step-num { font-family: var(--pc-display); font-size: 24px; color: var(--pc-accent); min-width: 36px; }
.pc-brew-step-t { font-family: var(--pc-display); font-size: 20px; }
.pc-brew-step-d { margin-top: 4px; color: var(--pc-muted); }
.pc-brew-img { aspect-ratio: 4/5; border-radius: 20px; object-fit: cover; box-shadow: var(--pc-shadow); width: 100%; }
/* ---------- Shop CTA ---------- */
.pc-shop { border-top: 1px solid var(--pc-border); background: rgba(236, 227, 215, .5); }
.pc-shop-inner { max-width: 780px; margin: 0 auto; padding: 96px 24px; text-align: center; }
.pc-shop h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.1; }
.pc-shop h2 em { font-style: italic; color: var(--pc-accent); }
.pc-shop-lead { max-width: 520px; margin: 24px auto 0; color: var(--pc-muted); font-size: 18px; }
.pc-shop .pc-btn { margin-top: 40px; padding: 16px 40px; }
/* ---------- Contact ---------- */
.pc-contact { border-top: 1px solid var(--pc-border); background: rgba(236, 227, 215, .5); }
.pc-contact-inner { max-width: 640px; margin: 0 auto; padding: 96px 24px; }
.pc-contact-head { text-align: center; }
.pc-contact-head h2 { font-size: clamp(30px, 4vw, 48px); margin-top: 16px; }
.pc-contact-lead { max-width: 520px; margin: 16px auto 0; color: var(--pc-muted); }
.pc-contact-lead a { color: var(--pc-accent); }
.pc-contact-lead a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pc-form { margin-top: 40px; display: grid; gap: 20px; }
.pc-form-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .pc-form-row { grid-template-columns: 1fr 1fr; } }
.pc-field { display: grid; gap: 8px; }
.pc-field label { font-size: 13px; font-weight: 500; }
.pc-field input, .pc-field textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--pc-border); border-radius: 10px; background: #fff; color: var(--pc-fg); outline: none; transition: border-color .2s, box-shadow .2s; width: 100%; }
.pc-field input:focus, .pc-field textarea:focus { border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(181,101,29,.15); }
.pc-field textarea { resize: vertical; min-height: 120px; }
.pc-field-err { font-size: 12px; color: #b3261e; min-height: 1em; }
.pc-form-msg { text-align: center; font-size: 14px; color: var(--pc-accent); min-height: 1em; }
/* ---------- Footer ---------- */
.pc-footer { border-top: 1px solid var(--pc-border); }
.pc-footer-inner { max-width: 1200px; margin: 0 auto; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; font-size: 14px; color: var(--pc-muted); }
@media (min-width: 800px) { .pc-footer-inner { flex-direction: row; justify-content: space-between; } }
.pc-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.pc-footer-links a { transition: color .2s; display: inline-flex; align-items: center; gap: 6px; }
.pc-footer-links a:hover { color: var(--pc-accent); }
.pc-icon { width: 16px; height: 16px; }


/* ============================================================
   GLOBAL LUMA OVERRIDES — Perfect Cup as the default theme
   Applies to every page (catalog, product, cart, checkout, CMS).
   NOT scoped to .pc — restyles Luma's native chrome.
   ============================================================ */
:root {
  --pcg-bg: #ffffff;
  --pcg-surface: #fafaf7;
  --pcg-fg: #14110f;
  --pcg-muted: #6b6660;
  --pcg-primary: #14110f;
  --pcg-accent: #b5651d;
  --pcg-border: rgba(20, 17, 15, 0.08);
  --pcg-border-strong: rgba(20, 17, 15, 0.16);
  --pcg-display: "Fraunces", Georgia, serif;
  --pcg-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Base typography + background */
body {
  font-family: var(--pcg-body) !important;
  color: var(--pcg-fg);
  background: var(--pcg-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6,
.page-title, .product-info-main .page-title, .block-title strong {
  font-family: var(--pcg-display) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em;
  color: var(--pcg-fg);
}
a { color: var(--pcg-fg); }
a:hover { color: var(--pcg-accent); }
/* Header */


@media (min-width: 769px), print {
        .block-search .action.search {
            display: none !important;
          }
}

@media only screen and (max-width: 768px) {
.header.content {
           padding-left: 0px;
        padding-right: 0px;
}
    .logo {

        margin-left: 30px;
    }
}

 /* close min cart */
.minicart-wrapper .action.close {
    background-color: white !important;
    border: none !important;
}


tbody.cart.item .item-actions td .actions-toolbar a.action.action-edit,
tbody.cart.item .item-actions td .actions-toolbar a.action.action-delete {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important; /* Remove border completely */
    box-shadow: none !important; /* Remove any shadows if present */
}


/* Buttons */
button, .action.primary, .cart.table-wrapper .actions-toolbar > .action,
.action-primary {
  background: var(--pcg-primary) !important;
  border: 1px solid var(--pcg-primary) !important;
  color: #fff !important;
  border-radius: 2px !important;
  font-family: var(--pcg-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 28px !important;
  transition: background-color .25s ease, border-color .25s ease;
  box-shadow: none !important;
}
button:hover, .action.primary:hover, .action-primary:hover {
  background: var(--pcg-accent) !important;
  border-color: var(--pcg-accent) !important;
  color: #fff !important;
}
.action.secondary, .action.default {
  background: transparent !important;
  border: 1px solid var(--pcg-border-strong) !important;
  color: var(--pcg-fg) !important;
  border-radius: 2px !important;
  padding: 13px 26px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.action.secondary:hover, .action.default:hover {
  background: var(--pcg-fg) !important;
  color: #fff !important;
  border-color: var(--pcg-fg) !important;
}
/* Inputs */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
select, textarea {
  border: 0 !important;
  border-bottom: 1px solid var(--pcg-border-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 12px 0 !important;
  color: var(--pcg-fg) !important;
  font-family: var(--pcg-body) !important;
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--pcg-accent) !important;
  outline: none !important;
}
/* Category / product listing */
.page-main, .columns { background: var(--pcg-bg); }

.page-title-wrapper .page-title { font-size: clamp(32px, 4.4vw, 56px); }

.swatch-option.text {
    padding: 2px 14px 21px 12px !important;
}

.admin__control-select , .sorter-options, #shipping-zip-form .field select, #limiter.limiter-options
 {
    padding: 0px !important;
}
body.checkout-index-index .page-wrapper {
    padding-top: 100px !important;
}


.product-item-name, .product-item-link {
  font-family: var(--pcg-display) !important;
  font-weight: 400 !important;
  color: var(--pcg-fg) !important;
  font-size: 18px;
}
.product-item-link:hover { color: var(--pcg-accent) !important; }
.price-box .price {
  color: var(--pcg-accent) !important;
  font-family: var(--pcg-display) !important;
  font-weight: 500;
}
/* Sidebar filters */
.sidebar .block .block-title,
.sidebar .block .filter-title {
  border-bottom: 1px solid var(--pcg-border);
  padding-bottom: 12px;
}
.sidebar .filter-options-title {
  font-family: var(--pcg-body);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pcg-muted);
}
/* Product page */
.product-info-main .product-info-price .price {
  font-family: var(--pcg-display) !important;
  color: var(--pcg-accent) !important;
  font-size: 32px;
  font-weight: 400;
}
.product.attribute.overview,
.product.attribute.description { color: var(--pcg-muted); line-height: 1.7; }


/* Cart & checkout */
.cart-container .cart-summary,
.opc-block-summary,
.opc-sidebar {
  background: var(--pcg-surface) !important;
  border: 1px solid var(--pcg-border) !important;
}
.checkout-index-index .opc-progress-bar-item._active > span { color: var(--pcg-accent); }
.checkout-index-index .opc-progress-bar-item._active:before,
.checkout-index-index .opc-progress-bar-item._active > span:before { background: var(--pcg-accent); }
/* Breadcrumbs */
.breadcrumbs {
  padding: 20px 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pcg-muted);
}
.breadcrumbs a { color: var(--pcg-muted); }
.breadcrumbs a:hover { color: var(--pcg-accent); }
/* Footer */
.page-footer {
  background: var(--pcg-primary) !important;
  color: rgba(255,255,255,.7);
  border-top: 1px solid var(--pcg-border);
  padding-top: 48px;
}
.page-footer a { color: rgba(255,255,255,.7); }
.page-footer a:hover { color: var(--pcg-accent); }
.copyright { background: var(--pcg-primary); color: rgba(255,255,255,.5); }
/* Messages / notices */
.message.info, .message.success, .message.warning, .message.error {
  border-radius: 2px;
  border: 1px solid var(--pcg-border);
  background: var(--pcg-surface);
  color: var(--pcg-fg);
}
.message.success { border-color: var(--pcg-accent); }
.message.error { border-color: #b3261e; color: #b3261e; }


/* ---------- Desktop layout---------- */
.columns .column.main {
    padding: 0;
}

.page-wrapper {
    background-color: var(--pc-bg);
}

@media (min-width: 769px), print {
        .footer.content {
            border-top: none;
            padding: 0;
        }
    }
.footer.content
{
    padding-top: 0px !important;
}

@media (min-width: 1000px) {
    .page-header {
        padding:  0px !important;
    }
}

 .navigation {
            background: white;
}

.block-static-block.widget {
    margin-bottom: 0px !important;
}

/* ---------- Mboile layout---------- */
.nav-toggle {
    top: 28px !important;
}

.checkout-index-index main#maincontent {
    margin-top: 100px !important;
    display: block !important;
}


#shopping-cart-table .actions-toolbar 
{
padding-bottom: 38px !important;

}


.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .block.block-search {
        position: relative;
        display: inline-block; // or flex, but keep small
        width: auto;
        height: 44px; // reserve icon space only – prevents shift
        overflow: visible;
    }

    // Hide checkbox visually
    .search-toggle-checkbox {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    // Icon label always visible
    .search-toggle-label {
        display: block;
        width: 44px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        cursor: pointer;
        font-size: 22px;
        color: #000;
    }

    // Hidden search form
    .search-form-wrapper {
        position: absolute;
        top: 100%;
        right: 0;
        width: 280px; // or 100vw; left: 50%; transform: translateX(-50%);
        background: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        padding: 12px;
        border-radius: 4px;
        margin-top: 4px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
        z-index: 999;
    }

    // When checked → show!
    .search-toggle-checkbox:checked ~ .search-form-wrapper {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition-delay: 0s;
    }

    // Input styling inside
    .search-form-wrapper .control,
    .search-form-wrapper input#search {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        font-size: 16px !important;
        border: 1px solid #ccc !important;
        box-sizing: border-box !important;
    }

    // Override any Luma hiding
    .search-form-wrapper .control[style*="display: none"],
    .search-form-wrapper input[style*="display: none"] {
        display: block !important;
    }
}




@media (max-width: 767px) {
    .block.block-search {
        position: relative;
        z-index: 10;                    /* make sure container is above other elements */
    }

    .search-form-wrapper {
        position: absolute;
        top: 100%;
        right: 0;
        width: 280px;
        background: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        padding: 12px;
        z-index: 1000;                  /* very important */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;           /* hidden = no interaction */
        transition: opacity 0.25s ease;
    }

    /* When open */
    #mobile-search-toggle:checked ~ .search-form-wrapper {
        opacity: 1;
        visibility: visible;
        pointer-events: all;            /* ← critical: allow interaction */
    }

    /* The input itself */
    .search-form-wrapper input#search {
        display: block !important;
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 16px !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;  /* ← make sure input can be clicked/typed */
        position: relative;
        z-index: 1001;                    /* above everything else */
        background: white !important;
        color: black !important;
    }

    /* Remove problematic rules you had before */
    .block-search input {
        left: auto !important;           /* remove negative left */
        margin: 0 !important;
        position: static !important;     /* don't use absolute on input itself */
    }
}

</style>
