/* ----------------------------------------------------
   島牧拾草 - 官方網站自訂樣式表 (style.css)
   設計風格：永續農創、日系清新、高端綠色美學
---------------------------------------------------- */

/* ─── Vamtam Theme Options ─── */
body {
    --vamtam-body-link-regular: #2E3031;
    --vamtam-body-link-visited: #2E3031;
    --vamtam-body-link-hover: #000000;
    --vamtam-body-link-active: #000000;
    --vamtam-body-background-color: #FBFBFB;
    --vamtam-input-border-radius: 12px 12px 12px 12px;
    --vamtam-input-border-color: #000000;
    --vamtam-btn-text-color: #FFFFFF;
    --vamtam-btn-hover-text-color: #FFFFFF;
    --vamtam-btn-bg-color: #002842;
    --vamtam-btn-hover-bg-color: #000000;
    --vamtam-btn-border-radius: 100px 100px 100px 100px;
    --vamtam-site-max-width: 1280px;
    --vamtam-loading-animation: url('/wp-content/themes/vamtam-petmania/vamtam/assets/../images/loader-ring.gif');
}

/* ─── 首頁核心自訂 UI 樣式 ─── */
html,
body {
    overflow-x: hidden !important;
}

.elementor-element-f582ce3 {
    overflow: hidden !important;
    background-image: url("../images/HomepageMainImageBackground.webp") !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}

.elementor-13 .elementor-element.elementor-element-f582ce3>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-image: url("../images/HomepageMainImageBackground.webp") !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}

.elementor-13 .elementor-element.elementor-element-f582ce3 .elementor-background-overlay {
    background-color: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
}

/* 頂部橫幅文字顏色調整為深藍色/暗色以配合淺色背景圖 */
.elementor-13 .elementor-element.elementor-element-f582ce3 .elementor-heading-title,
.elementor-13 .elementor-element.elementor-element-f582ce3 .e-text-path svg text,
.elementor-13 .elementor-element.elementor-element-f582ce3 .e-text-path svg textPath,
.elementor-13 .elementor-element.elementor-element-f582ce3 .elementor-widget-text-editor,
.elementor-13 .elementor-element.elementor-element-f582ce3 .elementor-widget-text-editor p {
    color: #002842 !important;
    fill: #002842 !important;
    --text-color: #002842 !important;
}

.elementor-13 .elementor-element.elementor-element-f582ce3 .e-text-path svg path {
    stroke: none !important;
}

/* 特色區整區改為滿版奶油白，對齊最左最右 */
.elementor-13 .elementor-element.elementor-element-721bf80 {
    background-color: #FDFBF5 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 25px !important;
    padding-bottom: 25px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 引入 GenRyuMin2TW-R.otf 字體 */
@font-face {
    font-family: 'GenRyuMin2TW';
    font-display: swap;
    src: url('../fonts/GenRyuMin2TW-R.otf') format('opentype');
}

/* 將 [台灣在地牧草友善永續領導品牌] 與 [島牧拾草] 的字體更換 */
.elementor-13 .elementor-element.elementor-element-f582ce3 .e-text-path svg text,
.elementor-13 .elementor-element.elementor-element-f582ce3 .e-text-path svg textPath {
    font-family: 'GenRyuMin2TW', sans-serif !important;
}

/* =========================================================
   調整這個區塊的紅色線，左右間距 (數據拾草月配箱等區塊)
   要調整左右間距，請修改下方的 padding-left 與 padding-right 數值。
========================================================= */
.elementor-13 .elementor-element-3d41812 .elementor-container,
.elementor-13 .elementor-element-6b4b306 .elementor-container {
    max-width: 1280px !important;
    padding-left: 20px !important;
    /* 修改這裡調整左側間距 */
    padding-right: 20px !important;
    /* 修改這裡調整右側間距 */
}

/* 好物推薦區左上角加上優雅小葉圖案 */
.elementor-13 .elementor-element.elementor-element-4e43f41 {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDIwMCA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEwMCA0MDBDMTAwIDMwMCAxNTAgMjAwIDE4MCAxNTBDMjEwIDEwMCAxODAgNTAgMTAwIDBDMjAgNTAgLTEwIDEwMCAyMCAxNTBDNTAgMjAwIDEwMCAzMDAgMTAwIDQwMFoiIAogICAgICAgIGZpbGw9IiMxQTUzMUYiIAogICAgICAgIGZpbGwtb3BhY2l0eT0iMC4xNSIvPgogIDxwYXRoIGQ9Ik0xMDAgMzgwVjUwIiBzdHJva2U9IiMxQTUzMUYiIHN0cm9rZS1vcGFjaXR5PSIwLjIiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTEwMCAzMjBMMTUwIDI1MCIgc3Ryb2tlPSIjMUE1MzFGIiBzdHJva2Utb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgogIDxwYXRoIGQ9Ik0xMDAgMjgwTDUwIDIxMCIgc3Ryb2tlPSIjMUE1MzFGIiBzdHJva2Utb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4=") !important;
    background-repeat: no-repeat !important;
    background-position: top 0 left -20px !important;
    background-size: 120px 240px !important;
    position: relative !important;
}

/* 拉寬好物推薦區至與 Banner 一致 (1400px)，使商品圖片變大 */
.elementor-13 .elementor-element.elementor-element-4e43f41 .elementor-container {
    max-width: 1400px !important;
    width: 100% !important;
}

/* 毛孩好物推薦！標題放大置中與隱藏 View All */
.elementor-13 .elementor-element.elementor-element-a0bf2c5 {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-bottom: 35px !important;
    /* 增加與下方兔子、天竺鼠、龍貓分類按鈕的距離 */
    display: flex !important;
    justify-content: center !important;
}

/* =========================================================
   調整 [島牧熱銷推薦！] 卡片區塊，將紅色框框部分往左邊調大概 5px
   您可以在此處修改 transform: translateX(-5px) 中的數值。
========================================================= */
@media (min-widhth:768px) {
    .elementor-13 .elementor-element.elementor-element-d1dbb7e .elementor-tabs-content-wrapper {
        transform: translateX(-10px) !important;
    }
}


.elementor-13 .elementor-element.elementor-element-a0bf2c5 .elementor-heading-title {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    color: #2F4F2F !important;
}

/* 隱藏右側的 View All Delicious 按鈕 */
.elementor-13 .elementor-element.elementor-element-e89ee83 {
    display: none !important;
}

/* 好物推薦 Tab 標籤樣式優化 */
.elementor-13 .elementor-element.elementor-element-d1dbb7e .elementor-tabs-wrapper {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    border-bottom: none !important;
    margin-bottom: 30px !important;
}

.elementor-13 .elementor-element.elementor-element-d1dbb7e .elementor-tab-desktop-title {
    padding: 8px 24px !important;
    border-radius: 100px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
}

/* 未選中狀態：白底黑字 */
.elementor-13 .elementor-element.elementor-element-d1dbb7e .elementor-tab-desktop-title:not(.elementor-active) {
    background-color: #ffffff !important;
    color: #444444 !important;
}

/* 選中狀態：黃色背景 */
.elementor-13 .elementor-element.elementor-element-d1dbb7e .elementor-tab-desktop-title.elementor-active {
    background-color: #FFC107 !important;
    color: #222222 !important;
    border-color: #FFC107 !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.35) !important;
}

.elementor-13 .elementor-element.elementor-element-d1dbb7e .elementor-tab-desktop-title:hover {
    opacity: 0.9 !important;
}

/* 商品圖上新增 logo */
.woocommerce ul.products li.product>a.woocommerce-LoopProduct-link {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

.woocommerce ul.products li.product>a.woocommerce-LoopProduct-link img {
    border-radius: 12px !important;
}

.woocommerce ul.products li.product>a.woocommerce-LoopProduct-link::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 116px !important;
    height: 34px !important;
    background-image:
        url("/images/2022_03_logo-1280x311.png"),
        url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjQyIiB2aWV3Qm94PSIwIDAgMTQ2IDQyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxmaWx0ZXIgaWQ9InNoYWRvdyIgeD0iLTEwJSIgeT0iLTEwJSIgd2lkdGg9IjEyMCUiIGhlaWdodD0iMTIwJSI+CiAgICA8ZmVEcm9wU2hhZG93IGR4PSIwIiBkeT0iMiIgc3RkRGV2aWF0aW9uPSIyIiBmbG9vZC1jb2xvcj0iIzAwMDAwMCIgZmxvb2Qtb3BhY2l0eT0iMC4wNiIvPgogIDwvZmlsdGVyPgogIDxwYXRoIGQ9Ik0gMCAwIFEgMTUgMCAxNSAxNSBMIDE1IDI1IFEgMTUgNDAgMzAgNDAgTCAxMTYgNDAgUSAxMzEgNDAgMTMxIDI1IEwgMTMxIDE1IFEgMTMxIDAgMTQ2IDAgWiIgZmlsbD0iI2ZmZmZmZiIgZmlsdGVyPSJ1cmwoI3NoYWRvdygiLz4KPC9zdmc+") !important;
    background-size:
        80px auto,
        116px 34px !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position:
        center 7px,
        center !important;
    background-color: transparent !important;
    box-shadow: none !important;
    z-index: 10 !important;
    pointer-events: none !important;
    padding: 0 !important;
}

/* 毛孩主題商品區放大 */
.elementor-13 .elementor-element.elementor-element-2af762f {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    display: flex !important;
    justify-content: center !important;
}

.elementor-13 .elementor-element.elementor-element-2af762f .elementor-heading-title {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #2F4F2F !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

/* 毛孩主題商品區卡片放大與去邊框去陰影 */
.elementor-13 .elementor-element.elementor-element-a6ae6a7 .product-category.product {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: visible !important;
}

.elementor-13 .elementor-element.elementor-element-a6ae6a7 .product-category.product a,
.elementor-13 .elementor-element.elementor-element-a6ae6a7 .vamtam-product-cat-thumb-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.elementor-13 .elementor-element.elementor-element-a6ae6a7 img {
    width: 100% !important;
    max-width: 230px !important;
    height: auto !important;
    transform: none !important;
    transition: transform 0.3s ease !important;
}

.elementor-13 .elementor-element.elementor-element-a6ae6a7 img:hover {
    transform: scale(1.05) !important;
}

.elementor-13 .elementor-element.elementor-element-a6ae6a7 .woocommerce-loop-category__title {
    font-size: 1.25rem !important;
    /* 稍微縮小字型以容納較長的中文字，保持單行不換行 */
    font-weight: 700 !important;
    color: #333333 !important;
    margin-top: 15px !important;
    text-align: center !important;
    white-space: nowrap !important;
    /* 強制單行不換行，確保對齊 */
}

/* 增加底部內距防遮擋，並讓草叢從底線長出 */
.elementor-13 .elementor-element.elementor-element-e7532ed>.elementor-element-populated {
    padding-block-end: 55px !important;
}

/* 調整特色區區塊寬度以與 Banner 一致，對齊綠色背景最左最右 (滿版) */
.elementor-13 .elementor-element.elementor-element-721bf80 .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 全局 WooCommerce 產品卡片等高與對齊優化 */
.woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
}

.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 10px !important;
}

.woocommerce ul.products li.product .vamtam-product-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 12px !important;
}

.woocommerce ul.products li.product .vamtam-product-content .price {
    margin-top: auto !important;
    padding-top: 8px !important;
}

/* 強制將「選擇規格」按鈕維持在右下角且不遮擋文字 */
.woocommerce ul.products li.product {
    position: relative !important;
    overflow: hidden !important;
}

.woocommerce ul.products li.product .vamtam-add-to-cart-wrap {
    margin-top: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    width: auto !important;
    min-height: 40px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.woocommerce ul.products li.product .vamtam-add-to-cart-wrap a.button {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    border-radius: 100px !important;
}

/* 隱藏重複的行動端購物車元件，解決雙0與圖示重疊問題 */
.elementor-element-cab24e2 {
    display: none !important;
}

/* ─── WP Image Auto Sizes Contain ─── */
img:is([sizes=auto i], [sizes^="auto," i]) {
    contain-intrinsic-size: 3000px 1500px;
}

/* ─── WP Smiley Emoji Styles ─── */
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

/* ─── Classic WordPress Button Styles ─── */
.wp-block-button__link {
    color: #fff;
    background-color: #32373c;
    border-radius: 9999px;
    box-shadow: none;
    text-decoration: none;
    padding: calc(.667em + 2px) calc(1.333em + 2px);
    font-size: 1.125em;
}

.wp-block-file__button {
    background: #32373c;
    color: #fff;
    text-decoration: none;
}

/* ─── Jetpack Sharing Buttons ─── */
.jetpack-sharing-buttons__services-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    list-style-type: none;
    margin: 5px;
    padding: 0;
}

.jetpack-sharing-buttons__services-list.has-small-icon-size {
    font-size: 12px;
}

.jetpack-sharing-buttons__services-list.has-normal-icon-size {
    font-size: 16px;
}

.jetpack-sharing-buttons__services-list.has-large-icon-size {
    font-size: 24px;
}

.jetpack-sharing-buttons__services-list.has-huge-icon-size {
    font-size: 36px;
}

.editor-styles-wrapper .wp-block-jetpack-sharing-buttons {
    gap: 0;
    padding-inline-start: 0;
}

ul.jetpack-sharing-buttons__services-list.has-background {
    padding: 1.25em 2.375em;
}

/* ─── Global Styles & Presets ─── */
:root {
    --wp--preset--aspect-ratio--square: 1;
    --wp--preset--aspect-ratio--4-3: 4/3;
    --wp--preset--aspect-ratio--3-4: 3/4;
    --wp--preset--aspect-ratio--3-2: 3/2;
    --wp--preset--aspect-ratio--2-3: 2/3;
    --wp--preset--aspect-ratio--16-9: 16/9;
    --wp--preset--aspect-ratio--9-16: 9/16;
    --wp--preset--color--black: #000000;
    --wp--preset--color--cyan-bluish-gray: #abb8c3;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--pale-pink: #f78da7;
    --wp--preset--color--vivid-red: #cf2e2e;
    --wp--preset--color--luminous-vivid-orange: #ff6900;
    --wp--preset--color--luminous-vivid-amber: #fcb900;
    --wp--preset--color--light-green-cyan: #7bdcb5;
    --wp--preset--color--vivid-green-cyan: #00d084;
    --wp--preset--color--pale-cyan-blue: #8ed1fc;
    --wp--preset--color--vivid-cyan-blue: #0693e3;
    --wp--preset--color--vivid-purple: #9b51e0;
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%);
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgb(252, 185, 0) 0%, rgb(255, 105, 0) 100%);
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgb(255, 105, 0) 0%, rgb(207, 46, 46) 100%);
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
    --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
    --wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
    --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
    --wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
    --wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
    --wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
    --wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
    --wp--preset--font-size--small: 13px;
    --wp--preset--font-size--medium: 20px;
    --wp--preset--font-size--large: 36px;
    --wp--preset--font-size--x-large: 42px;
    --wp--preset--font-family--inter: "Inter", sans-serif;
    --wp--preset--font-family--cardo: Cardo;
    --wp--preset--spacing--20: 0.44rem;
    --wp--preset--spacing--30: 0.67rem;
    --wp--preset--spacing--40: 1rem;
    --wp--preset--spacing--50: 1.5rem;
    --wp--preset--spacing--60: 2.25rem;
    --wp--preset--spacing--70: 3.38rem;
    --wp--preset--spacing--80: 5.06rem;
    --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
    --wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
}

:where(.is-layout-flex) {
    gap: 0.5em;
}

:where(.is-layout-grid) {
    gap: 0.5em;
}

body .is-layout-flex {
    display: flex;
}

.is-layout-flex {
    flex-wrap: wrap;
    align-items: center;
}

.is-layout-flex> :is(*, div) {
    margin: 0;
}

body .is-layout-grid {
    display: grid;
}

.is-layout-grid> :is(*, div) {
    margin: 0;
}

:where(.wp-block-columns.is-layout-flex) {
    gap: 2em;
}

:where(.wp-block-columns.is-layout-grid) {
    gap: 2em;
}

:where(.wp-block-post-template.is-layout-flex) {
    gap: 1.25em;
}

:where(.wp-block-post-template.is-layout-grid) {
    gap: 1.25em;
}

.has-black-color {
    color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-color {
    color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.has-white-color {
    color: var(--wp--preset--color--white) !important;
}

.has-pale-pink-color {
    color: var(--wp--preset--color--pale-pink) !important;
}

.has-vivid-red-color {
    color: var(--wp--preset--color--vivid-red) !important;
}

.has-luminous-vivid-orange-color {
    color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.has-luminous-vivid-amber-color {
    color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.has-light-green-cyan-color {
    color: var(--wp--preset--color--light-green-cyan) !important;
}

.has-vivid-green-cyan-color {
    color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.has-pale-cyan-blue-color {
    color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.has-vivid-cyan-blue-color {
    color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.has-vivid-purple-color {
    color: var(--wp--preset--color--vivid-purple) !important;
}

.has-black-background-color {
    background-color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-background-color {
    background-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.has-white-background-color {
    background-color: var(--wp--preset--color--white) !important;
}

.has-pale-pink-background-color {
    background-color: var(--wp--preset--color--pale-pink) !important;
}

.has-vivid-red-background-color {
    background-color: var(--wp--preset--color--vivid-red) !important;
}

.has-luminous-vivid-orange-background-color {
    background-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.has-luminous-vivid-amber-background-color {
    background-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.has-light-green-cyan-background-color {
    background-color: var(--wp--preset--color--light-green-cyan) !important;
}

.has-vivid-green-cyan-background-color {
    background-color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.has-pale-cyan-blue-background-color {
    background-color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.has-vivid-cyan-blue-background-color {
    background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.has-vivid-purple-background-color {
    background-color: var(--wp--preset--color--vivid-purple) !important;
}

.has-black-border-color {
    border-color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-border-color {
    border-color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

.has-white-border-color {
    border-color: var(--wp--preset--color--white) !important;
}

.has-pale-pink-border-color {
    border-color: var(--wp--preset--color--pale-pink) !important;
}

.has-vivid-red-border-color {
    border-color: var(--wp--preset--color--vivid-red) !important;
}

.has-luminous-vivid-orange-border-color {
    border-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}

.has-luminous-vivid-amber-border-color {
    border-color: var(--wp--preset--color--luminous-vivid-amber) !important;
}

.has-light-green-cyan-border-color {
    border-color: var(--wp--preset--color--light-green-cyan) !important;
}

.has-vivid-green-cyan-border-color {
    border-color: var(--wp--preset--color--vivid-green-cyan) !important;
}

.has-pale-cyan-blue-border-color {
    border-color: var(--wp--preset--color--pale-cyan-blue) !important;
}

.has-vivid-cyan-blue-border-color {
    border-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}

.has-vivid-purple-border-color {
    border-color: var(--wp--preset--color--vivid-purple) !important;
}

.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
    background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;
}

.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
    background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;
}

.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
    background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;
}

.has-luminous-vivid-orange-to-vivid-red-gradient-background {
    background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;
}

.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
    background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;
}

.has-cool-to-warm-spectrum-gradient-background {
    background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;
}

.has-blush-light-purple-gradient-background {
    background: var(--wp--preset--gradient--blush-light-purple) !important;
}

.has-blush-bordeaux-gradient-background {
    background: var(--wp--preset--gradient--blush-bordeaux) !important;
}

.has-luminous-dusk-gradient-background {
    background: var(--wp--preset--gradient--luminous-dusk) !important;
}

.has-pale-ocean-gradient-background {
    background: var(--wp--preset--gradient--pale-ocean) !important;
}

.has-electric-grass-gradient-background {
    background: var(--wp--preset--gradient--electric-grass) !important;
}

.has-midnight-gradient-background {
    background: var(--wp--preset--gradient--midnight) !important;
}

.has-small-font-size {
    font-size: var(--wp--preset--font-size--small) !important;
}

.has-medium-font-size {
    font-size: var(--wp--preset--font-size--medium) !important;
}

.has-large-font-size {
    font-size: var(--wp--preset--font-size--large) !important;
}

.has-x-large-font-size {
    font-size: var(--wp--preset--font-size--x-large) !important;
}

:where(.wp-block-post-template.is-layout-flex) {
    gap: 1.25em;
}

:where(.wp-block-post-template.is-layout-grid) {
    gap: 1.25em;
}

:where(.wp-block-term-template.is-layout-flex) {
    gap: 1.25em;
}

:where(.wp-block-term-template.is-layout-grid) {
    gap: 1.25em;
}

:where(.wp-block-columns.is-layout-flex) {
    gap: 2em;
}

:where(.wp-block-columns.is-layout-grid) {
    gap: 2em;
}

:root :where(.wp-block-pullquote) {
    font-size: 1.5em;
    line-height: 1.6;
}

/* ─── WooCommerce layout & inline ─── */
.infinite-scroll .woocommerce-pagination {
    display: none;
}

.woocommerce form .form-row .required {
    visibility: visible;
}

.woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-bot .woosw-notice {
    background-color: #5fbd74;
}

.woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-bot .woosw-popup-content-bot-inner a:hover {
    color: #5fbd74;
    border-color: #5fbd74;
}

/* ─── Custom fonts ─── */
@font-face {
    font-family: 'Readex Pro';
    font-style: normal;
    font-weight: 200;
    font-display: auto;
    src: url('/wp-content/uploads/2022/03/ReadexPro-ExtraLight-1.ttf') format('truetype');
}

@font-face {
    font-family: 'Readex Pro';
    font-style: normal;
    font-weight: 300;
    font-display: auto;
    src: url('/wp-content/uploads/2022/03/ReadexPro-Light-1.ttf') format('truetype');
}

@font-face {
    font-family: 'Readex Pro';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url('/wp-content/uploads/2022/03/ReadexPro-Regular-1.ttf') format('truetype');
}

@font-face {
    font-family: 'Readex Pro';
    font-style: normal;
    font-weight: 500;
    font-display: auto;
    src: url('/wp-content/uploads/2022/03/ReadexPro-Medium-1.ttf') format('truetype');
}

@font-face {
    font-family: 'Readex Pro';
    font-style: normal;
    font-weight: 600;
    font-display: auto;
    src: url('/wp-content/uploads/2022/03/ReadexPro-SemiBold-1.ttf') format('truetype');
}

@font-face {
    font-family: 'Readex Pro';
    font-style: normal;
    font-weight: 700;
    font-display: auto;
    src: url('/wp-content/uploads/2022/03/ReadexPro-Bold-1.ttf') format('truetype');
}

@font-face {
    font-family: 'icomoon';
    src: url(/wp-content/themes/vamtam-petmania/vamtam/assets/fonts/icons/icomoon.woff2) format('woff2'),
        url(/wp-content/themes/vamtam-petmania/vamtam/assets/fonts/icons/icomoon.woff) format('woff'),
        url(/wp-content/themes/vamtam-petmania/vamtam/assets/fonts/icons/icomoon.ttf) format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'vamtam-theme';
    src: url(/wp-content/themes/vamtam-petmania/vamtam/assets/fonts/theme-icons/theme-icons.woff2) format('woff2'),
        url(/wp-content/themes/vamtam-petmania/vamtam/assets/fonts/theme-icons/theme-icons.woff) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ─── Elementor lazyloaded ../images fallback ─── */
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * {
    background-image: none !important;
}

img#wpstats {
    display: none;
}

.dgwt-wcas-ico-magnifier,
.dgwt-wcas-ico-magnifier-handler {
    max-width: 20px;
}

.woocommerce-product-gallery {
    opacity: 1 !important;
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 300 900;
    font-display: fallback;
    src: url('/wp-content/plugins/woocommerce/assets/fonts/Inter-VariableFont_slnt,wght.woff2') format('woff2');
    font-stretch: normal;
}

@font-face {
    font-family: Cardo;
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url('/wp-content/plugins/woocommerce/assets/fonts/cardo_normal_400.woff2') format('woff2');
}

#sb_instagram #sbi_images .sbi_item {
    border-radius: 16px;
}

/* Fix: Elementor tabs active content display for static site */
.elementor-widget-tabs .elementor-tab-content.elementor-active {
    display: block !important;
}

/* Fix: Tips & Advices post thumbnail height - remove extra padding-bottom that causes large gap */
/* 強制覆蓋：部落格文章卡片樣式 */
.elementor-element-3517d96 .elementor-posts-container.elementor-grid {
    display: grid !important;
    gap: 30px !important;
    grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 767px) {
    .elementor-element-3517d96 .elementor-posts-container.elementor-grid {
        grid-template-columns: 1fr !important;
    }
}

.elementor-element-3517d96 .elementor-posts-container .elementor-post__thumbnail {
    padding-bottom: 0 !important;
    height: auto !important;
    overflow: hidden !important;
}

.elementor-element-3517d96 .elementor-posts-container .elementor-post__thumbnail img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    border-radius: 18px 18px 0 0 !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}

.elementor-element-3517d96 .elementor-post__thumbnail__link {
    display: block !important;
    padding-bottom: 0 !important;
    height: auto !important;
}

.elementor-element-3517d96 .elementor-posts-container .elementor-post {
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.elementor-element-3517d96 .elementor-posts-container .elementor-post:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

.elementor-element-3517d96 .elementor-posts-container .elementor-post__text {
    padding: 24px !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.elementor-element-3517d96 .elementor-posts-container .elementor-post__title {
    font-family: 'Noto Sans TC', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

.elementor-13 .elementor-element.elementor-element-3517d96 .elementor-posts-container .elementor-post__title a {
    color: #002842 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.elementor-13 .elementor-element.elementor-element-3517d96 .elementor-posts-container .elementor-post__title a:hover {
    color: #987400 !important;
}

.elementor-13 .elementor-element.elementor-element-3517d96 .elementor-posts-container .elementor-post__excerpt p {
    font-family: 'Noto Sans TC', sans-serif !important;
    font-size: 14.5px !important;
    color: #5a5d60 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* 自訂字型 - 源流明體 */
@font-face {
    font-family: 'GenRyuMin';
    src: url('../fonts/GenRyuMin2TW-R.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* 套用源流明體字型於 島牧拾草 與 台灣在地牧草友善永續領導品牌 */
#e-text-path-91175fb,
#e-text-path-0ae990c,
#e-text-path-91175fb textPath,
#e-text-path-0ae990c textPath,
.elementor-element-f582ce3 svg text,
.elementor-element-f582ce3 svg textPath {
    font-family: 'GenRyuMin', 'Noto Sans TC', serif !important;
}

/* 逛逛無毒友善產品 自訂按鈕樣式 */
.btn-friendly-products {
    background-color: #987400 !important;
    background: #987400 !important;
    border-color: #987400 !important;
    color: #ffffff !important;
}

.btn-friendly-products:hover,
.btn-friendly-products:focus,
.btn-friendly-products:active {
    background-color: #7b5e00 !important;
    background: #7b5e00 !important;
    border-color: #7b5e00 !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
}

/* 部落格標題與描述區置中與優化 */
.elementor-13 .elementor-element.elementor-element-1ca0965 {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-bottom: 35px !important;
    display: block !important;
}

.elementor-13 .elementor-element.elementor-element-1ca0965 .elementor-heading-title {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #2F4F2F !important;
    font-family: 'GenRyuMin', 'Noto Sans TC', serif !important;
    text-align: center !important;
    margin-bottom: 12px !important;
}

.elementor-13 .elementor-element.elementor-element-1ca0965 .blog-subtitle {
    font-size: 15px !important;
    color: #555555 !important;
    line-height: 1.7 !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-weight: normal !important;
}

/* 增加部落格區塊與上方圓形分類按鈕區塊的間距 */
.elementor-13 .elementor-element.elementor-element-bb98bb1 {
    margin-top: 60px !important;
}

/* 部落格標題區與 View All 按鈕自訂佈局 */
.blog-header-container {
    position: relative !important;
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.blog-description-custom {
    font-family: 'Noto Sans TC', sans-serif !important;
    font-size: 15.5px !important;
    color: #5a5d60 !important;
    line-height: 1.6 !important;
    margin: 12px auto 30px auto !important;
    max-width: 800px !important;
    text-align: center !important;
    padding: 0 120px !important;
    /* 留出空間給 View All 按鈕 */
}

.view-all-blog-btn-container {
    position: absolute !important;
    right: 15px !important;
    bottom: 25px !important;
}

.view-all-blog-btn-container a {
    font-family: 'Noto Sans TC', sans-serif !important;
    font-weight: 700 !important;
    color: #002842 !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-decoration: none !important;
    font-size: 15px !important;
    transition: color 0.2s ease !important;
}

.view-all-blog-btn-container a:hover {
    color: #987400 !important;
}

/* 行動裝置響應式調整 */
@media (max-width: 767px) {
    .blog-description-custom {
        padding: 0 15px !important;
        margin-bottom: 50px !important;
        /* 留出空間給底部的 View All */
    }

    .view-all-blog-btn-container {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        margin: -20px auto 30px auto !important;
        display: inline-block !important;
    }
}

/* 將部落格 View All 按鈕精確定位到右上角，並與文章右側對齊 */
@media (min-width: 768px) {
    .elementor-13 .elementor-element.elementor-element-96c3936 {
        position: absolute !important;
        top: 95px !important;
        /* 移動到文章區塊上方、描述文字底下的橘色框框位置 */
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 10 !important;
    }
}

@media (max-width: 767px) {
    .elementor-13 .elementor-element.elementor-element-96c3936 {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        text-align: center !important;
        margin: 20px auto 0 auto !important;
        display: flex !important;
        justify-content: center !important;
    }
}

/* 自訂首頁 Banner 左右插圖定位與縮放，確保貼齊最下方且偏左/偏右 */
.custom-banner-side-img.left-img img {
    transform: scale(1.1) translateY(10px) !important;
    transform-origin: bottom left !important;
    margin-left: -40px !important;
    /* 靠左一點 */
}

.custom-banner-side-img.right-img img {
    transform: scale(1.1) translateY(10px) !important;
    transform-origin: bottom right !important;
    margin-right: -40px !important;
    /* 靠右一點 */
}

/* 毛孩主題商品區 4 分類排版優化 */
@media (min-width: 1025px) {
    .elementor-13 .elementor-element.elementor-element-a6ae6a7 .elementor-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 20px !important;
    }

    .elementor-13 .elementor-element.elementor-element-a6ae6a7 .elementor-column {
        width: 25% !important;
        max-width: 25% !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-13 .elementor-element.elementor-element-a6ae6a7 .elementor-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
    }

    .elementor-13 .elementor-element.elementor-element-a6ae6a7 .elementor-column {
        width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }
}

@media (max-width: 767px) {
    .elementor-13 .elementor-element.elementor-element-a6ae6a7 .elementor-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .elementor-13 .elementor-element.elementor-element-a6ae6a7 .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 其他草食伴侶插圖背景樣式與懸停黃色背景對齊優化 */
.elementor-13 .elementor-element.elementor-element-a6ae6a7 .elementor-element-custom-col-4 .vamtam-product-cat-thumb-wrap {
    background-color: transparent !important;
    /* 容器背景改透明以對齊其他分類 */
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 230px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 10px auto !important;
}

.elementor-13 .elementor-element.elementor-element-a6ae6a7 .elementor-element-custom-col-4 .vamtam-product-cat-thumb-wrap img {
    background-color: #EDEDED !important;
    /* 將灰色背景套用在圖片上 */
    border-radius: 48px !important;
    /* 將圓角套用在圖片上 */
    width: 75% !important;
    height: 75% !important;
    object-fit: contain !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

.elementor-13 .elementor-element.elementor-element-a6ae6a7 .elementor-element-custom-col-4:hover .vamtam-product-cat-thumb-wrap img {
    background-color: #FFCC00 !important;
    /* 懸停時變為黃色背景 */
    transform: scale(1.05) !important;
}

/* 將其他草食伴侶的文字往上移以對齊其他分類 */
.elementor-13 .elementor-element.elementor-element-a6ae6a7 .elementor-element-custom-col-4 .vamtam-product-cat-content {
    margin-top: -45px !important;
}

/* 確保所有分類卡片連結高度一致，以保持底部文字在同一直線上 */
.elementor-13 .elementor-element.elementor-element-a6ae6a7 .product-category.product a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important;
}

/* 調整插圖容器與標題間距 */
.elementor-13 .elementor-element.elementor-element-a6ae6a7 .vamtam-product-cat-thumb-wrap {
    margin-bottom: 10px !important;
}


/* ==========================================================================
   島牧熱銷推薦 - 自訂 3D 疊疊樂輪播與大圖卡片設計
   ========================================================================== */

/* 輪播容器設定 (使用 3D 透視效果) */
.product-carousel-container {
    position: relative !important;
    width: 100% !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    height: 520px !important;
    /* 固定高度容納 3D 堆疊卡片 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    perspective: 1200px !important;
    overflow: visible !important;
}

/* 輪播軌道 */
.product-carousel-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: grab !important;
    user-select: none !important;
}

.product-carousel-track:active {
    cursor: grabbing !important;
}

/* 商品卡片主體 (採用 3D 絕對定位) */
li.product-card-custom {
    position: absolute !important;
    width: 300px !important;
    height: 480px !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 1px !important;
    /* 縮小內距，使圖片更大，白色邊框只留一小圈 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #f0f0f0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease, filter 0.6s ease, z-index 0.6s ease !important;
    overflow: visible !important;
}

/* 3D 卡片位置樣式 (參考 subscription.html 月配箱效果) */
li.product-card-custom.card-center {
    transform: translateX(0) translateZ(120px) rotateY(0) scale(1) !important;
    opacity: 1 !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

li.product-card-custom.card-left {
    transform: translateX(-230px) translateZ(-160px) rotateY(15deg) scale(0.85) !important;
    opacity: 0.65 !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    filter: blur(1px) !important;
}

li.product-card-custom.card-right {
    transform: translateX(230px) translateZ(-160px) rotateY(-15deg) scale(0.85) !important;
    opacity: 0.65 !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    filter: blur(1px) !important;
}

li.product-card-custom.card-hidden-left {
    transform: translateX(-380px) translateZ(-280px) rotateY(25deg) scale(0.7) !important;
    opacity: 0.2 !important;
    /* 設為 0.2 隱約顯示左側預備卡片，達到左右對稱的 5 張卡片效果 */
    z-index: 1 !important;
    pointer-events: none !important;
    filter: blur(3.5px) !important;
}

li.product-card-custom.card-hidden-right {
    transform: translateX(380px) translateZ(-280px) rotateY(-25deg) scale(0.7) !important;
    opacity: 0.2 !important;
    /* 設為 0.2 隱約顯示右側下一張預備卡片（合計顯示 4 張） */
    z-index: 1 !important;
    pointer-events: none !important;
    filter: blur(3.5px) !important;
}

/* 上半部：大圖片區塊 (Card 1) */
.product-card-top {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: #f7f9f6 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-card-top .product-img-link {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
}

.product-card-top img.product-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

li.product-card-custom:hover img.product-main-img {
    transform: scale(1.06) !important;
}

/* =========================================================
   調整購物車按鈕範圍大小
   可以在此處修改 width 和 height 來調整按鈕的點擊範圍 (預設為 38px，已放大為 48px)
========================================================= */
.product-card-top .cart-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 56px !important;
    /* 修改這裡調整按鈕寬度 */
    height: 56px !important;
    /* 修改這裡調整按鈕高度 */
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 6 !important;
    transition: transform 0.2s ease !important;
    padding: 0 !important;
}

.product-card-top .cart-btn:hover {
    transform: scale(1.1) !important;
}

.product-card-top .cart-btn img {
    width: 32px !important;
    height: 32px !important;
}

/* =========================================================
   適用族群標籤樣式調整
========================================================= */
.target-group-label {
    color: #77796D !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.target-group-value {
    display: inline-block !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    background-color: #F0E6C1 !important;
    color: #2C2E24 !important;
    font-weight: bold !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    margin-left: 4px !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* 購物車籃子按鈕背景顏色設定 */
.product-card-top .cart-btn-normal {
    background-color: #C4CE8A !important;
}

.product-card-top .cart-btn-open {
    background-color: #9FB815 !important;
    /* 使用者要求的 #9FB815 草綠色背景 */
}

/* 下半部：資訊詳情 (Card 2) */
.product-card-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    /* 縮小間距，貼近商品名稱 */
    text-align: left !important;
    padding: 0 8px 8px 8px !important;
    /* 新增細微邊界以保護文字不貼卡片邊緣 */
    flex-grow: 1 !important;
    /* 使其佔滿卡片下半部所有空間，確保底部內容能對齊底部 */
}

/* 新增標題與品牌資訊包裹層，固定總高度解決卡片對齊問題 */
.product-title-brand-wrap {
    height: 4.8rem !important;
    /* 固定總高度，防止卡片錯位 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin: 0 !important;
}

/* 商品名稱 */
.product-title-custom {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #2b2b2b !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* 商品名稱連結樣式 */
a.product-title-link {
    color: #2b2b2b !important;
    text-decoration: none !important;
}

a.product-title-link:hover {
    color: #5b6e4e !important;
    /* 滑鼠懸停時顯示品牌綠色 */
    text-decoration: none !important;
}

/* 品牌名稱與大頭照 */
.product-brand-info {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    /* 從 8px 增加到 13px，使品牌文字往右移約 5px */
    margin: 0 !important;
    margin-left: 5px !important;
    /* 整個橘框框區塊（頭像+文字）往右移 5px */
}

.product-brand-info img.brand-avatar {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.product-brand-info .brand-text {
    font-size: 0.85rem !important;
    color: #5b6e4e !important;
    font-weight: 600 !important;
}

/* 已售出數量 */
.product-sales-volume {
    font-size: 0.85rem !important;
    color: #8c8c8c !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
    margin-top: auto !important;
    /* 自動推到底部，與卡片最下方貼齊 */
}

/* 已售數量 SVG 圖示 */
.product-sales-volume img.sales-icon-svg {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 卡片頁尾：價格 + 前往查看按鈕 */
.product-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 2px !important;
}

.product-price-custom {
    display: flex !important;
    flex-direction: column !important;
}

.product-price-custom .original-price {
    font-size: 0.85rem !important;
    color: #b5b5b5 !important;
    text-decoration: line-through !important;
    line-height: 1.2 !important;
}

.product-price-custom .sale-price {
    font-size: 1.2rem !important;
    color: #e27d1d !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.go-detail-btn {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #4e5b04 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    margin-right: 5px !important;
    /* 往左邊移 5px 距離 */
}

.go-detail-btn:hover {
    color: #987400 !important;
}

/* 響應式佈局：平版與手機的 3D 位置與卡片縮放調整 */
@media (max-width: 1024px) {
    .product-carousel-container {
        height: 500px !important;
    }

    li.product-card-custom {
        width: 280px !important;
        height: 460px !important;
    }

    li.product-card-custom.card-left {
        transform: translateX(-190px) translateZ(-160px) rotateY(15deg) scale(0.85) !important;
    }

    li.product-card-custom.card-right {
        transform: translateX(190px) translateZ(-160px) rotateY(-15deg) scale(0.85) !important;
    }
}

@media (max-width: 767px) and (orientation: portrait) {
    .product-carousel-container {
        height: 450px !important;
    }

    .product-carousel-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: none !important;
        scroll-padding-left: calc(50vw - 125px) !important;
        scroll-padding-right: calc(50vw - 125px) !important;
        gap: 16px !important;
        padding-left: calc(50vw - 125px) !important;
        padding-right: calc(50vw - 125px) !important;
        box-sizing: content-box !important;
    }

    /* 📱 手機端消除 3D transform 位移干擾，確保所有卡片 (含 Clone 複製卡片) 間距與寬度 100% 均勻對齊，達成完全無縫 Loop */
    li.product-card-custom,
    li.product-card-custom.card-center,
    li.product-card-custom.card-left,
    li.product-card-custom.card-right {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        flex-shrink: 0 !important;
        width: 250px !important;
        height: 410px !important;
        margin: 0 !important;
    }
}

/* 📱 橫向螢幕 (Landscape - 高度 <= 500px) 輪播卡片極致微型高度對齊 (對齊圖 4 規範：消除售價與已售數量遭切除) */
@media (max-height: 500px),
(orientation: landscape) and (max-width: 900px) {
    .product-carousel-container {
        height: 330px !important;
    }

    li.product-card-custom {
        width: 220px !important;
        height: 310px !important;
        padding: 2px !important;
        gap: 4px !important;
    }

    .product-card-top {
        aspect-ratio: 1 / 1 !important;
        height: 140px !important;
    }

    .product-card-bottom {
        padding: 0 4px 4px 4px !important;
        gap: 2px !important;
    }

    .product-title-brand-wrap {
        height: 3.2rem !important;
    }

    .product-title-custom {
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
    }

    .product-sales-volume {
        font-size: 0.75rem !important;
        margin-bottom: 0 !important;
    }

    .product-price-custom .sale-price {
        font-size: 1rem !important;
    }

    .go-detail-btn {
        font-size: 0.8rem !important;
    }
}

/* 隱藏熱銷推薦區塊的溢出以防止出現橫向拉框 */
.elementor-13 .elementor-element.elementor-element-eaed2a4 {
    overflow: hidden !important;
}

/* =========================================================
   聯絡島牧 Contact Us 彈窗樣式
========================================================= */
.contact-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 40, 66, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.contact-modal-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.contact-modal-container {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    width: 90% !important;
    max-width: 850px !important;
    padding: 35px 30px !important;
    box-shadow: 0 25px 60px rgba(0, 40, 66, 0.15) !important;
    position: relative !important;
    transform: scale(0.9) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-sizing: border-box !important;
}

.contact-modal-overlay.active .contact-modal-container {
    transform: scale(1) !important;
}

.contact-modal-close-btn {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    background: transparent !important;
    border: none !important;
    font-size: 32px !important;
    color: #C67C56 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: transform 0.2s, color 0.2s !important;
    z-index: 10 !important;
}

.contact-modal-close-btn:hover {
    color: #a05a38 !important;
    transform: scale(1.1) !important;
}

.contact-modal-header {
    margin-bottom: 25px !important;
    text-align: center !important;
}

.contact-modal-header h3 {
    font-family: 'GenRyuMin2TW-R', 'Noto Sans TC', sans-serif !important;
    font-size: 24px !important;
    color: #20201F !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
}

.contact-modal-body {
    display: flex !important;
    gap: 30px !important;
}

.contact-modal-left,
.contact-modal-right {
    flex: 1 !important;
    min-width: 0 !important;
}

.contact-column-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #555848 !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    border-left: 3px solid #b58d55 !important;
    padding-left: 8px !important;
    text-align: left !important;
}

.contact-qr-grid {
    display: flex !important;
    gap: 15px !important;
}

.contact-qr-card-link {
    text-decoration: none !important;
    flex: 1 !important;
    display: block !important;
    min-width: 0 !important;
}

.contact-qr-card {
    padding: 12px !important;
    border-radius: 12px !important;
    background: #fdfdfd !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    cursor: pointer !important;
    height: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.contact-line-card {
    border: 1.5px solid rgba(6, 199, 85, 0.2) !important;
}

.contact-qr-card-link:hover .contact-line-card {
    border-color: rgba(6, 199, 85, 0.8) !important;
    background-color: #f6fff9 !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(6, 199, 85, 0.15) !important;
}

.contact-ig-card {
    border: 1.5px solid rgba(225, 48, 108, 0.2) !important;
}

.contact-qr-card-link:hover .contact-ig-card {
    border-color: rgba(225, 48, 108, 0.8) !important;
    background-color: #fff5f7 !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(225, 48, 108, 0.15) !important;
}

.contact-qr-platform {
    font-weight: 700 !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

.contact-qr-img {
    width: 100% !important;
    max-width: 180px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    border: 1px solid #eaeaea !important;
}

.contact-qr-action {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

.line-color {
    color: #06C755 !important;
}

.ig-color {
    color: #E1306C !important;
}

.contact-brand-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 15px !important;
    height: 100% !important;
    justify-content: center !important;
}

.contact-brand-logo img {
    height: 65px !important;
    object-fit: contain !important;
}

.contact-brand-name {
    font-family: 'GenRyuMin2TW-R', 'Noto Sans TC', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #20201F !important;
    margin: 0 !important;
}

.contact-brand-subname {
    font-family: 'Noto Sans TC', sans-serif !important;
    font-size: 14px !important;
    color: #555848 !important;
    margin-top: 2px !important;
    display: block !important;
}

.contact-email-section {
    width: 100% !important;
    margin-top: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}

.contact-email-label {
    font-size: 14px !important;
    color: #555848 !important;
    font-weight: 600 !important;
}

.contact-email-copy-widget {
    background-color: #f7f9fb !important;
    border: 1.5px solid #edf2f7 !important;
    padding: 10px 16px !important;
    border-radius: 100px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    font-family: 'Noto Sans TC', sans-serif !important;
}

.contact-email-copy-widget:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-color: #b58d55 !important;
    background-color: #ffffff !important;
}

.contact-email-copy-widget .email-address {
    color: #b58d55 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.contact-email-copy-widget .copy-badge {
    font-size: 11px !important;
    color: #718096 !important;
    background: #edf2f7 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.3s ease !important;
}

.contact-email-copy-widget:hover .copy-badge {
    background: #b58d55 !important;
    color: #ffffff !important;
}

.copy-success-tooltip {
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-8px) !important;
    background-color: #2D3748 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    z-index: 10 !important;
}

.copy-success-tooltip::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-width: 5px !important;
    border-style: solid !important;
    border-color: #2D3748 transparent transparent transparent !important;
}

.copy-success-tooltip.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(-12px) !important;
}

.contact-email-actions {
    margin-top: 5px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.contact-email-link-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background-color: #2E5B4B !important;
    border-radius: 100px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(46, 91, 75, 0.2) !important;
}

.contact-email-link-btn:hover {
    background-color: #203f34 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(46, 91, 75, 0.3) !important;
    color: #ffffff !important;
}

/* Responsive */
@media (max-width: 767px) and (orientation: portrait) {
    .contact-modal-container {
        padding: 24px 14px !important;
        width: 95% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    .contact-modal-body {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .contact-column-title {
        margin-bottom: 12px !important;
    }

    .contact-qr-grid {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .contact-qr-card-link {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .contact-qr-card {
        padding: 8px 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .contact-qr-platform {
        font-size: 11px !important;
        gap: 2px !important;
        white-space: nowrap !important;
    }

    .contact-qr-img {
        max-width: 120px !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: contain !important;
    }

    .contact-qr-action {
        font-size: 10.5px !important;
    }
}

/* 📱 手機橫向 (Landscape - iPhone SE 375px / 12 Pro 390px 高度) 彈窗極致微型縮放對齊 (對齊圖 3 規範) */
@media (max-height: 500px),
(orientation: landscape) and (max-width: 900px) {
    .contact-modal-container {
        padding: 12px 18px !important;
        width: 92% !important;
        max-width: 580px !important;
        max-height: 94vh !important;
        overflow-y: auto !important;
    }

    .contact-modal-close-btn {
        top: 8px !important;
        right: 12px !important;
        font-size: 24px !important;
    }

    .contact-modal-header {
        margin-bottom: 8px !important;
    }

    .contact-modal-header h3 {
        font-size: 16px !important;
    }

    .contact-modal-body {
        flex-direction: row !important;
        /* 橫向時保持左右雙欄，防止上下衝破螢幕 */
        gap: 16px !important;
    }

    .contact-column-title {
        font-size: 12px !important;
        margin-bottom: 8px !important;
    }

    .contact-qr-grid {
        gap: 8px !important;
    }

    .contact-qr-card {
        padding: 6px 4px !important;
    }

    .contact-qr-platform {
        font-size: 10.5px !important;
        margin-bottom: 4px !important;
    }

    .contact-qr-img {
        max-width: 70px !important;
        width: 70px !important;
        height: 70px !important;
        margin-bottom: 4px !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: contain !important;
    }

    .contact-qr-action {
        font-size: 10px !important;
    }

    .contact-brand-content {
        gap: 8px !important;
    }

    .contact-brand-logo img {
        height: 36px !important;
    }

    .contact-brand-name {
        font-size: 15px !important;
    }

    .contact-brand-subname {
        font-size: 11px !important;
    }

    .contact-email-section {
        margin-top: 4px !important;
        gap: 6px !important;
    }

    .contact-email-label {
        font-size: 11px !important;
    }

    .contact-email-copy-widget {
        padding: 5px 12px !important;
    }

    .contact-email-copy-widget .email-address {
        font-size: 11.5px !important;
    }

    .contact-email-link-btn {
        padding: 5px 12px !important;
        font-size: 11.5px !important;
    }
}

/* =========================================================
   隱藏非啟動/預備範圍內之輪播卡片，防止其重疊在最左側
========================================================= */
li.product-card-custom.card-invisible {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =========================================================
   區塊間距微調與設定 (在此處可以直接修改數值以調整間距)
========================================================= */

/* 1. 「島牧熱銷推薦！」區塊的間距 */
.elementor-element-4e43f41 {
    margin-top: 250px !important;
    /* 調整上方外距 */
    margin-bottom: 50px !important;
    /* 調整下方外距 */
    padding-top: 0px !important;
    /* 調整上方內距 */
    padding-bottom: 0px !important;
    /* 調整下方內距 */
}

/* 2. 「毛孩主題商品區」區塊的間距 */
.elementor-element-9bcefe0 {
    margin-top: 250px !important;
    /* 調整上方外距 (預設為較大數值，可在此處調小或調大) */
    margin-bottom: 30px !important;
    /* 調整下方外距 */
    padding-top: 0px !important;
    /* 調整上方內距 */
    padding-bottom: 0px !important;
    /* 調整下方內距 */
}

/* 2. 「島牧部落格 拾草生活誌」區塊的間距 */
.elementor-element-bb98bb1 {
    margin-top: 250px !important;
    /* 調整上方外距 (預設為較大數值，可在此處調小或調大) */
    margin-bottom: 40px !important;
    /* 調整下方外距 */
    padding-top: 0px !important;
    /* 調整上方內距 */
    padding-bottom: 0px !important;
    /* 調整下方內距 */
}

/* 3. 頁尾 (Footer) 上方的間距 */
.main-footer,
#footer-placeholder {
    margin-top: 140px !important;
    /* 調整頁尾與上方區塊之間的間距 */
}