/* ============================================================
   TYNCIL PRODUCT SHOWCASE WIDGET — v1.1 FIXED
   Columns are ALWAYS visible by default. JS handles animation.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');

.tyncil-product-showcase *,
.tyncil-product-showcase *::before,
.tyncil-product-showcase *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.tyncil-product-showcase {
    position: relative;
    background: #ffffff;
    border-top: 3px solid #c9a84c;
    border-bottom: 3px solid #c9a84c;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}

.tyncil-product-showcase::before {
    content: '';
    position: absolute;
    top: 3px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,.45) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.tyncil-logo { text-align: center; padding: 20px 28px 0; }
.tyncil-logo img { max-width: 160px; height: auto; object-fit: contain; display: inline-block; }

.tyncil-product-inner { display: flex; align-items: flex-start; gap: 0; }

/* ── LEFT: image column — NO animation here ── */
.tyncil-image-column {
    width: 55%;
    flex-shrink: 0;
    padding: 28px;
}

.tyncil-image-wrap {
    background: linear-gradient(145deg, #fdf6ec 0%, #f3e2c0 55%, #ede0c4 100%);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 460px;
}

.tyncil-image-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 58% 32%, rgba(255,255,255,.38) 0%, transparent 68%);
    pointer-events: none;
    z-index: 1;
}

.tyncil-image-wrap::after {
    content: '';
    position: absolute;
    bottom: 8%; left: 50%;
    transform: translateX(-50%);
    width: 54%; height: 16%;
    background: radial-gradient(ellipse, rgba(201,168,76,.26) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.tyncil-main-image-container {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 2;
}

.tyncil-main-image {
    width: 62%; height: auto; max-height: 82%;
    object-fit: contain; display: block;
    filter: drop-shadow(0 22px 38px rgba(100,60,0,.18));
    transition: transform .55s cubic-bezier(.25,.46,.45,.94), opacity .25s ease;
}

.tyncil-float-active .tyncil-main-image { animation: tyncilFloat 4s ease-in-out infinite; }
@keyframes tyncilFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.tyncil-float-active .tyncil-image-wrap:hover .tyncil-main-image { animation-play-state: paused; transform: translateY(-10px) scale(1.04) !important; }

.tyncil-img-hover-zoom   .tyncil-image-wrap:hover .tyncil-main-image { transform: scale(1.08); }
.tyncil-img-hover-rotate .tyncil-image-wrap:hover .tyncil-main-image { transform: rotate(3deg) scale(1.04); }
.tyncil-img-hover-float  .tyncil-image-wrap:hover .tyncil-main-image { transform: translateY(-12px); }

.tyncil-img-hover-shine .tyncil-main-image-container::after {
    content: ''; position: absolute;
    top: -60%; left: -80%; width: 50%; height: 220%;
    background: rgba(255,255,255,0); transform: skewX(-22deg);
    pointer-events: none; z-index: 10;
}
.tyncil-img-hover-shine .tyncil-image-wrap:hover .tyncil-main-image-container::after {
    left: 130%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%);
    transition: left .65s ease;
}

.tyncil-zoom-btn {
    position: absolute; top: 14px; right: 14px;
    width: 40px; height: 40px;
    background: rgba(255,255,255,.92); border: none; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: #c9a84c; opacity: 0;
    transition: opacity .25s, transform .2s, background .2s;
    z-index: 6; box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.tyncil-image-wrap:hover .tyncil-zoom-btn { opacity: 1; }
.tyncil-zoom-btn:hover { background: #c9a84c; color: #fff; transform: scale(1.1); }
.tyncil-zoom-btn svg { width: 18px; height: 18px; }

.tyncil-thumbs-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.tyncil-thumb {
    width: 96px; height: 96px; border-radius: 10px;
    border: 2px solid transparent;
    background: linear-gradient(145deg, #fdf6ec, #f0e0c0);
    overflow: hidden; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.tyncil-thumb img { width: 80%; height: 80%; object-fit: contain; transition: transform .25s; }
.tyncil-thumb:hover { border-color: #e8d08a; transform: translateY(-3px); }
.tyncil-thumb:hover img { transform: scale(1.07); }
.tyncil-thumb.active { border-color: #c9a84c; box-shadow: 0 0 0 1px #c9a84c, 0 4px 16px rgba(201,168,76,.22); }

/* ── RIGHT: content column — NO animation here ── */
.tyncil-content-column {
    flex: 1; min-width: 0;
    padding: 36px 36px 36px 32px;
    border-left: 1px solid rgba(201,168,76,.12);
    display: flex; flex-direction: column;
}

.tyncil-review-label { font-family: 'Cormorant Garamond', serif; font-size: 14px; font-style: italic; color: #c9a84c; margin-bottom: 9px; letter-spacing: .03em; }
.tyncil-product-name { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 3.8vw, 56px); font-weight: 400; color: #1a1008; line-height: 1.1; margin-bottom: 14px; letter-spacing: -.01em; }
.tyncil-product-price { font-family: 'Montserrat', sans-serif; font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; color: #c9a84c; margin-bottom: 18px; letter-spacing: .02em; }

.tyncil-divider { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.tyncil-divider::before, .tyncil-divider::after { content: ''; flex: 1; max-width: 80px; height: 1px; opacity: .55; }
.tyncil-divider::before { background: linear-gradient(to right, #c9a84c, transparent); }
.tyncil-divider::after  { background: linear-gradient(to left,  #c9a84c, transparent); }
.tyncil-divider-diamond { color: #c9a84c; font-size: 13px; line-height: 1; }

.tyncil-product-desc { font-size: 14px; line-height: 1.82; color: #6b5d47; margin-bottom: 28px; }

.tyncil-buttons-wrap { display: flex; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; align-items: stretch; }

.tyncil-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700;
    letter-spacing: .13em; border-radius: 8px; border: none;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    position: relative; overflow: hidden;
    transition: all .28s cubic-bezier(.25,.46,.45,.94);
}

.tyncil-btn-whatsapp { background: #c9a84c; color: #fff; padding: 17px 26px; flex: 1 1 auto; }
.tyncil-btn-whatsapp:hover { background: #a8892e; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 28px rgba(201,168,76,.36); }

.tyncil-btn-call { background: transparent; color: #c9a84c; border: 2px solid #c9a84c; padding: 15px 22px; flex: 0 0 auto; }
.tyncil-btn-call:hover { background: #c9a84c; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 28px rgba(201,168,76,.3); }

.tyncil-btn-icon { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; display: block; }
.tyncil-btn-icon-stroke { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; display: block; }

.tyncil-btn-hover-lift:hover   { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(201,168,76,.34); }
.tyncil-btn-hover-glow:hover   { box-shadow: 0 0 22px rgba(201,168,76,.5), 0 0 46px rgba(201,168,76,.18); }
.tyncil-btn-hover-darken:hover { filter: brightness(.84); }
.tyncil-ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: tyncilRipple .65s linear; background: rgba(255,255,255,.24); pointer-events: none; }
@keyframes tyncilRipple { to { transform: scale(4); opacity: 0; } }

.tyncil-meta-divider { height: 1px; background: linear-gradient(to right, rgba(201,168,76,.38), transparent); margin-bottom: 16px; }
.tyncil-product-meta { display: flex; flex-direction: column; gap: 8px; }
.tyncil-meta-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tyncil-meta-label { color: #c9a84c; font-weight: 600; min-width: 82px; letter-spacing: .04em; }
.tyncil-meta-value { color: #7a6a52; }

.tyncil-lightbox { display: none; position: fixed; inset: 0; z-index: 999999; align-items: center; justify-content: center; }
.tyncil-lightbox.open { display: flex; }
.tyncil-lightbox-overlay { position: absolute; inset: 0; background: rgba(8,4,0,.87); cursor: pointer; backdrop-filter: blur(8px); }
.tyncil-lightbox-content { position: relative; z-index: 2; padding: 20px; transform: scale(.9); transition: transform .3s cubic-bezier(.25,.46,.45,.94); }
.tyncil-lightbox.open .tyncil-lightbox-content { transform: scale(1); }
.tyncil-lightbox-img { max-width: 80vw; max-height: 80vh; border-radius: 16px; display: block; filter: drop-shadow(0 28px 60px rgba(0,0,0,.5)); }
.tyncil-lightbox-close { position: absolute; top: 0; right: 0; width: 36px; height: 36px; background: #c9a84c; color: #fff; border: none; border-radius: 50%; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; z-index: 3; }
.tyncil-lightbox-close:hover { background: #a8892e; transform: rotate(90deg); }

/* ══════════════════════════════════════
   ENTRANCE ANIMATIONS
   Keyframes only. JS adds opacity:0 inline THEN adds animation class.
   Columns are NEVER hidden by CSS alone — always visible by default.
══════════════════════════════════════ */
@keyframes tyncilFadeLeft  { from { opacity:0; transform:translateX(-32px); } to { opacity:1; transform:none; } }
@keyframes tyncilFadeRight { from { opacity:0; transform:translateX(32px);  } to { opacity:1; transform:none; } }
@keyframes tyncilFadeUp    { from { opacity:0; transform:translateY(32px);  } to { opacity:1; transform:none; } }
@keyframes tyncilZoomIn    { from { opacity:0; transform:scale(.92);        } to { opacity:1; transform:none; } }

.tyncil-do-anim-left  { animation: tyncilFadeLeft  var(--tyncil-anim-duration, .8s) cubic-bezier(.25,.46,.45,.94) both !important; }
.tyncil-do-anim-right { animation: tyncilFadeRight var(--tyncil-anim-duration, .8s) cubic-bezier(.25,.46,.45,.94) both !important; }
.tyncil-do-anim-up    { animation: tyncilFadeUp    var(--tyncil-anim-duration, .8s) cubic-bezier(.25,.46,.45,.94) both !important; }
.tyncil-do-anim-zoom  { animation: tyncilZoomIn    var(--tyncil-anim-duration, .8s) cubic-bezier(.25,.46,.45,.94) both !important; }
.tyncil-do-anim-delay { animation-delay: .2s !important; }

/* ══════════════════════════════════════
   LAYOUT & RESPONSIVE
══════════════════════════════════════ */
.tyncil-layout-vertical .tyncil-product-inner { flex-direction: column; }
.tyncil-layout-vertical .tyncil-image-column  { width: 100%; padding: 20px 16px 0; }
.tyncil-layout-vertical .tyncil-content-column{ border-left: none; border-top: 1px solid rgba(201,168,76,.12); padding: 20px 16px 24px; }

@media (max-width: 1024px) {
    .tyncil-image-column   { width: 50%; }
    .tyncil-content-column { padding: 28px 24px; }
    .tyncil-image-wrap     { height: 380px; }
}

@media (max-width: 768px) {
    .tyncil-logo { padding: 16px 16px 0; }
    .tyncil-logo img { max-width: 130px; }
    .tyncil-product-inner { flex-direction: column; gap: 0; }
    .tyncil-image-column { width: 100%; padding: 20px 16px 0; }
    .tyncil-image-wrap { height: 320px; border-radius: 12px; }
    .tyncil-main-image { width: 66%; }
    .tyncil-zoom-btn { opacity: 1; }
    .tyncil-thumbs-row { gap: 8px; margin-top: 12px; }
    .tyncil-thumb { width: 74px; height: 74px; border-radius: 8px; }
    .tyncil-content-column { width: 100%; border-left: none; border-top: 1px solid rgba(201,168,76,.12); padding: 20px 16px 24px; }
    .tyncil-product-name  { font-size: 36px; }
    .tyncil-product-price { font-size: 24px; }
    .tyncil-buttons-wrap  { flex-direction: column; gap: 10px; }
    .tyncil-btn-whatsapp, .tyncil-btn-call { flex: 1 1 100%; justify-content: center; padding: 17px 20px; }
    .tyncil-lightbox-img  { max-width: 90vw; max-height: 90vw; }
}

@media (max-width: 400px) {
    .tyncil-image-wrap   { height: 270px; }
    .tyncil-product-name { font-size: 28px; }
    .tyncil-thumb        { width: 62px; height: 62px; }
}