/* Source: tpl/core/common/css/common.css */
/*
    MerchStudio version 0.01 - Core CSS File
    Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.
    Common CSS (both admin and client side) for MerchStudio App
    @version common/css/common.css - 0.01 - 05-01-2025 - totaltec

    # included by client/css_load.tpl, admin/css_load.tpl
*/

/* Main Styles */
html {
    margin: 0;
    padding: 0;
    line-height: 1.5rem;
    /*
     * This is the fundamental style to prevent the entire page from
     * scrolling horizontally when a child element overflows.
     */
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-size: 16px;
    font-family:
        'Manrope',
        'Open Sans',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        Arial,
        sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background: var(--bg);
    color: var(--text);
    transition: background 0.3s ease-out; /* Smooth appearance */
}

hr {
    margin: 1em 0;
    height: 1px;
    background-color: var(--line);
    border: none;
}

h1, h2, .merch_title {
    font-family:
        'DM Serif Display',
        Georgia,
        'Times New Roman',
        serif;
    font-weight: 400;
    font-style: normal;
}

h1 {
    margin: 0 0 10px;
    padding: 10px;
    font-size: 26px;
    text-align: center;
}

h2 {
    margin: 0;
    padding: 8px 0;
    font-size: 22px;
}

h3 {
    margin: 0;
    padding: 5px 0;
    font-size: 18px;
}

label[for] {
    cursor: pointer;
}

a,
a:link,
a:visited {
    text-decoration: underline;
    color: var(--link);
}

a:hover,
a:focus {
    text-decoration: none;
    color: var(--link_hover);
}

a:active {
  color: var(--link_active);
}

/* Reset for big margins and padding */
figure,
article {
    margin: 0;
    padding: 0;
}

.center {
    margin: 0 auto;
    text-align: center;
}

.pad_20 {
    padding: 20px;
}

.accent_bg {
    background: var(--subtle);
    border: 0;
    color: var(--text);
}

.color_accent {
    color: var(--accent);
}

.color_subtle {
    color: var(--subtle);
}

.highlight {
    color: var(--highlight);
}

.shadow {
    box-shadow: 2px 2px 4px 2px var(--shadow);
}

.inline {
    display: inline-block;
    vertical-align: middle;
}

/**
 * Header: Used in both admin and client
 * Our header background is now fully controlled by
 * --header_bg and --header_bg_gradient_end variables
 */
#merch_header {
    padding: 0 10px;
    font-size: 14px;
    background: linear-gradient(
        to bottom,
        var(--header_bg),
        var(--header_bg_gradient_end)
    );
    transition: background 0.3s ease-out;
}

#merch_header .merch_title {
    vertical-align: middle;
}

/**
 * Main Content container: Wrap around page content excluding header
 */
#merch_main {
    padding: min(30px, 7%);
    flex-grow: 1; /* Allow the main content to grow and push the footer */
}

#merch_main p {
    color: var(--text);
    margin: 10px 0;
}

.container{
  border: 1px solid var(--line);
  border-radius: 1em;
  margin-bottom: 20px;
  padding: min(3em, 15%);

  h2, p { margin-top: 1em }
}

/**
 * Footer: Used in both admin and client
 */
#merch_footer {
    padding: 0 10px;
    font-size: 14px;
    background: linear-gradient(
        to bottom,
        var(--footer_bg),
        var(--footer_bg_gradient_end)
    );
    transition: background 0.3s ease-out
}

/**
 * Form Inputs - Styling the defaults!
 *
 * Form inputs go wide in this App! Max is 400px or 96% of their container
 *
 * Example html for half width input:
<div class="inline_input">
    <input type="text" name="my_input">
</div>
 *
 */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="datetime-local"],
input[type="date"],
input[type="time"] {
    display: block;
    width: 96%;
    max-width: 400px;
    padding: 0.6em 0.8em;
    font-size: 16px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type="text"].med,
input[type="search"].med,
input[type="number"].med,
input[type="password"].med,
input[type="email"].med {
    max-width: 250px;
}

input[type="text"].small,
input[type="search"].small,
input[type="number"].small,
input[type="password"].small,
input[type="email"].small {
    max-width: 100px;
}

.inline_input {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10%;
    width: 96%;
    max-width: 400px;
}

.inline_input input[type="text"] {
    width: 43%;
}

.inline_controls .inline_input {
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.add_slug_ui .action_icon,
.inline_controls .action_icon {
    margin: 5px;
}

.inline_controls .inline_input input[type="text"] {
    width: 60%;
}

.password_wrap {
  position: relative;
  display: block;
}

.password_wrap .password_eyeball {
  position: absolute;
  top: 50%;
  right: 30px;
  width: 30px;
  transform: translateY(-50%);
  color: var(--line);
  cursor: pointer;
}

/* Wrapper for an input that contains an icon */
.input_wrapper.with_icon {
    position: relative;
}

.input_wrapper.with_icon .input_icon_prefix {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--middle_grey);
}

.input_wrapper.with_icon input {
    padding-left: 35px; /* Make space for the icon */
}

textarea {
    display: block;
    width: 96%;
    max-width: 500px;
    margin: 8px auto;
    padding: 5px;
    font-size: 16px;
    box-sizing: border-box;
    min-height: 150px;
}

.required.error {
  border-color: var(--accent_red);
  border-width: 2px;
  background-color: #ffe0e0;
}

/**
 * CHECKBOX: Elevating the standard!
 *
 * Example html to use this cool style:
<input type="checkbox" id="my_checkbox" name="my_checkbox">
<label for="my_checkbox">Your Checkbox Label</label>
 *
 */
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 24px;
    width: 24px;
}

input[type="checkbox"] + label {
    display: inline-block;
    position: relative;
    margin: 10px;
    vertical-align: middle;
    cursor: pointer;
    line-height: 24px;
    padding-left: 35px;
}

/* Target the custom visual next to the label on focus of the input */
input[type="checkbox"]:focus + label::before {
    outline: 2px solid var(--accent_blue);
    outline-offset: 2px;
}

/* The custom visual for the checkbox */
input[type="checkbox"] + label::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 24px;
    width: 24px;
    background-color: transparent;
    border: 2px solid var(--middle_grey);
    transition: all 0.3s ease-out;
}

/* When that box is checked! */
input[type="checkbox"]:checked + label::before {
    background-color: var(--base);
    transform: rotate(0deg) scale(1);
    opacity: 1;
    border: 2px solid var(--base);
}

/* The fancy checkmark */
input[type="checkbox"]:checked + label::after {
    position: absolute;
    content: "";
    left: 10px;
    top: 2px;
    height: 14px;
    width: 8px;
    border: solid var(--text);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(1);
    opacity: 1;
    transition: all 0.3s ease-out;
}

/**
 * Input Switch Styles
 *
 * Example:
<div class="input_switch_wrapper">
    <label class="input_switch" for="theme_toggle">
        <input type="checkbox" id="theme_toggle">
        <div class="slider round"></div>
    </label>
    <label for="theme_toggle">Dark Mode</label>
</div>
 *
 */
.input_switch_wrapper {
    display: flex;
    align-items: center; /* Vertically align the switch and label */
    margin: 10px; /* Consistent with our other input margins */
}

.input_switch_wrapper label {
    margin-left: 10px; /* Space between the switch and the label */
    font-size: 1em; /* Keep the label text readable */
    white-space: nowrap;
}

label.input_switch {
    position: relative;
    display: inline-block;
    margin-left: 0;
    width: 60px; /* Adjust width as needed */
    height: 34px; /* Adjust height as needed */
}

.input_switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--hover);
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--bg);
    transition: .4s;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

input:checked + .slider {
    background-color: var(--highlight);
}

input:focus + .slider {
    box-shadow: 0 0 5px var(--highlight);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider::after {
    /* Can be used for more complex visual cues if needed */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*
 * Icons for theme switch (applied when .theme class is on .input_switch)
 * ⚡️💪✅☰🐞
 * You can find more unicode icons here: https://symbl.cc/
 */
.input_switch.theme .slider:before {
    content: "☀️";
    color: var(--text);
}

.input_switch.theme input:checked + .slider:before {
    content: "🌙";
    background-color: #222;
    color: #fff;
}

/**
 * SELECT BOX - Super stylish MerchStudio select!
 *
<div class="select_wrapper">
    <select name="my_select">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </select>
</div>
 */
select {
    width: 100%;
    padding: 0.6em 0.8em;
    font-size: 16px;
    font-family: 'Manrope', sans-serif;
    font-weight: bold;
    line-height: 1.3;
    box-sizing: border-box;
    margin: 8px 0;
    border: 1px solid var(--line);
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
    appearance: none;
    background-repeat: no-repeat, repeat;
    background-position: right 0.7em top 50%, 0 0;
    background-size: 0.65em auto, 100%;
    cursor: pointer;
    transition: background-color 0.3s ease-out,
                color 0.3s ease-out,
                border-color 0.3s ease-out;
}

/* Container for potential arrow magic */
.select_wrapper,
.multi_wrapper {
    position: relative;
    display: block;
    width: 96%;
    max-width: 400px;
}

/* Our bespoke arrow */
.select_wrapper::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.7em;
    width: 0;
    height: 0;
    border-left: 0.4em solid transparent;
    border-right: 0.4em solid transparent;
    border-top: 0.4em solid var(--button_text);
    pointer-events: none;
    transform: translateY(-50%);
}

select:focus { /* When it's in focus */
    border-color: var(--accent_blue);
    outline: none;
    box-shadow: 0 0 0 0.2em rgba(138, 196, 255, 0.25); /* A subtle focus ring */
}

/**
 * BUTTONS & SUBMIT INPUTS - Interactive elements with MerchStudio flair!
 *
 * Default Button Example:
<button type="button" class="merch_button">Click Me</button>
 *
 * Submit Input Example:
<input type="submit" class="merch_button" value="Submit">
 *
 */
button {
    cursor: pointer;
}

input[type="file"]:not([hidden]),
button.merch_button,
input[type="submit"].merch_button,
a.merch_button {
    display: inline-flex;
    align-items: center;
    appearance: none;
    font-family: 'Manrope', sans-serif;
    font-weight: bold;
    font-size: 1em;
    border-radius: 2px;
    cursor: pointer;
    padding: 0.75em 1.5em;
    margin: 10px;
    min-width: 130px;
    height: auto;
    line-height: normal;
    text-decoration: none; /* Remove underline from <a> tags */
    color: var(--button_text);
    background-color: var(--button_bg);
    border: 1px solid var(--button_border);
    box-shadow: none;
    transition-property: background-color, border-color, color;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}

input[type="file"]:hover,
button.merch_button:hover,
input[type="submit"].merch_button:hover,
a.merch_button:hover {
    background-color: var(--button_hover_bg);
    border-color: var(--button_hover_border);
}

input[type="file"]:active,
button.merch_button:active,
input[type="submit"].merch_button:active,
a.merch_button:active {
    background-color: var(--button_active_bg);
    border-color: var(--button_active_border);
}

input[type="file"]:focus,
button.merch_button:focus,
input[type="submit"].merch_button:focus,
a.merch_button:focus {
    outline: none;
    box-shadow: 0 0 0 0.2em rgba(138, 196, 255, 0.5);
}

.merch_button.small {
    min-width: auto;
    padding: 0.4em 0.8em;
    margin: 0 0 0 5px;
    font-size: 0.9em;
}

input[type="file"]:disabled,
button.merch_button:disabled,
input[type="submit"].merch_button:disabled,
a.merch_button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--button_bg);
    border-color: var(--button_border);
}

#image_drop_zone input[type="file"] {
    display: none;
}

/* Go Button (Green used in Checkout) */
button.merch_button.go,
a.merch_button.go {
    background: var(--accent_green);
    color: var(--base);
}

/**
 * MerchStudio - Common UI Components
 */

/* Merch Button with icon */

/**
 * Common Component: Copy Button
 * A reusable, minimal button for copy-to-clipboard actions.
 */
/* A wrapper to give the parent element relative positioning */
.copy_button_wrapper {
    position: relative;
}
/* Generic styling for a small, icon-only copy button */
.copy_button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.5;
    transition: all 0.2s ease-in-out;
    z-index: 5; /* Ensures it's above the content */
}
.copy_button:hover {
    opacity: 1;
    background-color: var(--hover);
    border-color: var(--line);
}
.copy_button .merch_icon {
    color: var(--text);
    width: 20px;
    height: 20px;
    transition: color 0.2s;
}

/*
 *  Sticky Save Bar feature
 */
/* The .action_panel is the container for form submission buttons. */
.action_panel {
    transition: opacity 0.3s ease-out; /* For fade out */
}

/*
    When the .action_panel also has the .save_bar class,
    it becomes a fixed bar at the bottom of the viewport.
    JavaScript logic adds/removes this class.
*/
.action_panel.save_bar {
    position: fixed;
    bottom: 0;
    z-index: 10;

    background-color: var(--base);
    padding: 10px 20px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.08);

    opacity: 0.90; /* Target opacity from animation */

    animation-name: sticky_save_slide;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;

    box-sizing: border-box;

    transition: opacity 0.2s ease-in-out;
}

.action_panel.save_bar:hover {
    opacity: 1;
}

.sentinel {
    height: 1px;
    visibility: hidden;
    pointer-events: none;
    margin-bottom: -1px;
}

/**
 * Icons
 */
.merch_icon {
    display: inline-block;
    width: 36px;
    height: 36px;
    vertical-align: middle;
}

.merch_icon.small {
    width: 24px;
    height: 24px;
}

.merch_icon.large {
    width: 48px;
    height: 48px;
}

.merch_icon.huge {
    width: 96px;
    height: 96px;
}

/* Merch Button with icon */
.merch_button span {
    padding: 0 0 0 5px;
}

/**
 * Merch Message (merch_msg)
 */
#merch_msg {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 0 0 10px;
    z-index: 1000;
    overflow: hidden;
    pointer-events: none;
}

#merch_msg > div {
    width: 400px;
    padding: 15px 20px;
    text-align: center;
    position: relative;
    pointer-events: auto;
    max-width: 80%;
    color: var(--text);
    background-color: var(--base);
    border-radius: 0 0 10px 10px;
    box-shadow: var(--shadow);
    transform: translateY(-100%);
    transition: transform 0.2s ease-in-out, /* match merch_msg_slide_out */
                background-color 0.3s ease-out,
                color 0.3s ease-out,
                box-shadow 0.3s ease-out;
}

#merch_msg > div.success {
    background-color: #d1e7dd; /* A darker tint of green */
    color: #0f5132; /* A darker shade of green for text */
    border-bottom: 2px solid #0f5132;
}

#merch_msg > div.error {
    background-color: #f8d7da; /* A darker tint of red */
    color: #842029; /* A darker shade of red for text */
    border-bottom: 2px solid #842029;
}

#merch_msg > div.info {
    background-color: #e6f2ff;
    color: #0052cc;
    border-bottom: 2px solid #0052cc;
}

#merch_msg > div.show {
    transform: translateY(0);
}

.merch_msg_content {
    margin-right: 60px;
    text-align: center;
}

.merch_msg_close {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    min-width: 60px;
    background-color: inherit;
    color: inherit;
    border: none;
    padding: 8px;
    margin: 0;
    border-radius: 0 0 10px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.merch_msg_close:hover {
    opacity: 1;
}

#merch_msg > div.success .merch_msg_close:hover {
    background-color: #0f5132; /* Darker green for hover background */
    color: #fff; /* White text for contrast on hover */
}

#merch_msg > div.error .merch_msg_close:hover {
    background-color: #842029; /* Darker red for hover background */
    color: #fff; /* White text for contrast on hover */
}

#merch_msg > div.info .merch_msg_close:hover {
    background-color: #8ac4ff; /* Accent Blue (as before for info) */
    color: #222; /* Primary Dark text for contrast */
}

.merch_info {
    margin: 20px auto;
    padding: 20px;
    max-width: 420px;
    border-radius: 15px;
    background: var(--info_bg);
    color: var(--text);
    transition: background-color 0.3s ease-out,
                color 0.3s ease-out;
}

/**
 * Generic Dropdown Panel
 *
<div class="drop_panel_cont">
    <div class="drop_trigger">
        <span>Open Panel</span>
    </div>
    <div class="drop_panel">
        <p>This is the content of the dropdown panel.</p>
        <p>It can contain various elements.</p>
    </div>
</div>
 *
 */
.drop_panel_cont {
    position: relative;
    display: inline-block;
}

.drop_trigger {
    cursor: pointer;
    padding: 5px;
    border: 1px solid var(--line);
    background-color: var(--base);
    color: var(--text);
    transition: background-color 0.3s ease-in-out,
                border-color 0.3s ease-in-out,
                color 0.3s ease-in-out;
}

.drop_panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    padding: 10px;
    border: 1px solid var(--line);
    border-top: none;
    background-color: var(--bg);
    box-shadow: 0px 4px 8px 0px var(--shadow);
    z-index: 110;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-in-out,
                visibility 0.3s ease-in-out,
                transform 0.3s ease-in-out,
                background-color 0.3s ease-in-out,
                border-color 0.3s ease-in-out,
                color 0.3s ease-in-out,
                box-shadow 0.3s ease-in-out;
}
.drop_panel.right {
    left: auto;
    right: 0;
}
.drop_panel.center {
    left: 50%;
    /* We combine the horizontal centering with the existing vertical
       transform used for the open/close animation. */
    transform: translateX(-50%) translateY(-10px);
}
.drop_panel_cont:hover .drop_panel.center,
.drop_panel.center.open {
    /* When opened, we maintain the horizontal centering and
       set the vertical position to 0. */
    transform: translateX(-50%) translateY(0);
}
.drop_panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.drop_panel p {
    color: var(--text);
}
/* Hover to open */
.drop_panel_trigger:hover .drop_panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/*
 * Styles for buttons inside dropdown panels to ensure consistent alignment
 * of icons and text, and to prevent text wrapping. Button menus.
 */
.drop_panel .merch_button,
.drop_panel .menu_item_control,
.drop_panel button.merch_button:disabled {
    display: flex;
    color: var(--contrast);
    align-items: center;
    justify-content: flex-start; /* Align content to the left */
    width: 100%;
    margin: 0;
    padding: 0.75em;
    box-sizing: border-box;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--line);
    background-color: transparent;
}
.drop_panel .merch_button:last-child,
.drop_panel .menu_item_control:last-child {
    border-bottom: none; /* No border on the very last item */
}
.drop_panel .merch_button:hover,
.drop_panel .menu_item_control:hover {
    background-color: var(--hover);
}
.drop_panel .merch_button span {
    white-space: nowrap; /* This prevents the text from wrapping */
    margin-left: 10px; /* Adds space between the icon and text */
}

/**
 * Pages: Home page, Auth page, Cart page, etc
 */




/**
 * Merch Modal System Styles
 * Styles for the common modal dialog (merch_modal.tpl)
 */
.merch_modal_overlay {
    position: fixed; /* Stay in place even if page scrolls */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    z-index: 999; /* Below merch_msg (1000) but above most */
    display: flex; /* For centering the modal container */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.merch_modal_overlay.open {
    opacity: 1;
    visibility: visible;
}

.merch_modal_container {
    background-color: var(--bg); /* Uses theme background */
    color: var(--text); /* Uses theme text color */
    border-radius: 8px; /* Consistent rounded corners */
    box-shadow: 0 4px 15px 2px var(--shadow); /* Theme shadow */
    width: 95%; /* Responsive width */
    max-width: 600px; /* Max width for larger screens */
    max-height: 90vh; /* Max height to prevent overflow */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Handles internal scrolling */
    transform: scale(0.95); /* Initial state for open animation */
    transition: transform 0.3s ease-out,
                max-width 0.3s ease-out, /* Animate width changes */
                background-color 0.3s ease-out, /* Theme transitions */
                color 0.3s ease-out,
                box-shadow 0.3s ease-out;
}

/* Class for a wider modal */
.merch_modal_container.wide {
    max-width: 1000px;
}

/* Class for an even wider modal */
.merch_modal_container.extra_wide {
    max-width: 1850px;
}

.merch_modal_overlay.open .merch_modal_container {
    transform: scale(1); /* Animate to full size */
}

.merch_modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--line); /* Theme line color */
    background-color: var(--base); /* Slightly different bg? */
    transition: border-color 0.3s ease-out,
                background-color 0.3s ease-out;
}

.merch_modal_title_text {
    font-size: 1.25em; /* Larger than default h3 */
    font-family: 'DM Serif Display', Georgia, serif; /* Title font */
    font-weight: 400;
    color: var(--text); /* Ensure it uses theme text */
    margin: 0; /* Remove default h2 margin */
    padding: 0; /* Remove default h2 padding */
    text-align: left; /* Override centered h2 if needed */
}

.merch_modal_close_x {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin: -5px; /* Offset padding for alignment */
    color: var(--text); /* Ensure icon uses theme color */
    opacity: 0.8;
    transition: opacity 0.2s ease-out, color 0.3s ease-out;
}

.merch_modal_close_x:hover {
    opacity: 1;
    color: var(--highlight);
}

.merch_modal_content {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.merch_modal_content p:first-child {
    margin-top: 0; /* Consistent spacing */
}

.merch_modal_content p:last-child {
    margin-bottom: 0; /* Consistent spacing */
}

/* Styling for forms within modal content */
.merch_modal_content form .form_field {
    margin-bottom: 15px;
}

.merch_modal_content form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Inputs in modal will use general input styling from common.css
   but we can add modal specific adjustments if needed here */
.merch_modal_content input[type="text"],
.merch_modal_content input[type="password"],
.merch_modal_content input[type="datetime-local"],
.merch_modal_content input[type="date"],
.merch_modal_content input[type="time"],
.merch_modal_content textarea,
.merch_modal_content .select_wrapper > select {
    /* Ensure they don't go wider than modal content area */
    /* General input styles already handle max-width, this is fine */
    margin-left: 0; /* Align with label */
    margin-right: 0;
}

/* Styles for our new simple file input component */
.file_input_simple {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 10px 0;
}

.file_input_simple .file_name_display {
    font-style: italic;
    color: var(--middle_grey);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* We add a max-width to prevent it from pushing other elements */
    max-width: 250px;
}

.merch_modal_footer {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 10px; /* Space between buttons */
    padding: 15px 20px;
    border-top: 1px solid var(--line); /* Theme line color */
    background-color: var(--base); /* Match header or distinct */
    transition: border-color 0.3s ease-out,
                background-color 0.3s ease-out;
}

/* Ensure merch_button styling applies correctly in footer */
.merch_modal_footer .merch_button {
    margin: 0; /* Override default button margin if needed */
}

/* Styles for content opened in a new window */
body.modal_window_body {
    padding: 20px;
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.modal_window_content {
    background-color: var(--base);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--line);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevents this wrapper from scrolling */
}

/* Make the modal content a flex container */
.merch_modal_content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/**
 * Sortable styling
 */
.sortable_item {
    transition: transform 0.2s ease-in-out,
                opacity 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out;
}

.sortable_placeholder {
    background-color: var(--info_bg);
    border: 2px dashed var(--accent);
    opacity: 0.6;
    border-radius: 4px;
    box-sizing: border-box;
    flex-shrink: 0; /* Prevents shrinking during animation */
}

/* We apply the correct animation based on a JS-added class. */
.sortable_placeholder.placeholder_horizontal {
    animation: grow_in_placeholder_horizontal 0.15s ease-out;
}

.sortable_placeholder.placeholder_vertical {
    animation: grow_in_placeholder_vertical 0.15s ease-out;
}

.sortable_item.is_dragging {
    opacity: 0.75;
    box-shadow: 0 5px 15px var(--shadow);
    transform: scale(1.03) rotate(1deg);
    z-index: 100;
}

.drag_handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 24px;
    height: 36px;
    margin-right: 10px;
    cursor: grab;
    background-color: var(--info_bg);
    border: 1px solid var(--line);
    border-radius: 3px;
    transition: color 0.2s ease-out,
                background-color 0.3s ease-out;
}

.drag_handle:hover {
    color: var(--base);
    background-color: var(--highlight);
}

.is_dragging .drag_handle,
.drag_handle:active {
    cursor: grabbing;
}

/**
 * System-wide Notices
 */
.system_warning {
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px dashed var(--text);
    background-color: var(--accent_red);
    color: var(--contrast);
    border-radius: 4px;
    font-weight: bold;
}

/**
 * Pagination Controls
 * Styles for our reusable pagination component.
 */
.pagination {
    display: grid; /* We use Grid for a robust column layout. */
    grid-template-columns: auto 1fr auto; /* Prev | flexible space | Next */
    align-items: center;
    gap: 5px;
    width: 100%;
}

.page_numbers {
    display: flex; /* This element remains a flex container for the links. */
    align-items: center;
    gap: 5px;
    overflow-x: auto; /* It handles its own internal scrolling. */
    justify-content: flex-start;
    /* Hide the scrollbar for a clean look */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    /* Enable smooth, momentum-based scrolling on iOS */
    -webkit-overflow-scrolling: touch;
}
.page_numbers::-webkit-scrollbar {
    display: none;
}

.page_nav,
.page_number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid var(--line);
    background-color: var(--base);
    color: var(--text);
    border-radius: 4px;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    font-weight: 600;
    transition: all 0.2s ease-out;
}

.page_nav:hover,
.page_number:hover {
    background-color: var(--hover);
    border-color: var(--highlight);
    color: var(--highlight);
}

.page_number.current {
    background-color: var(--highlight);
    border-color: var(--highlight);
    color: var(--bg);
    pointer-events: none; /* The current page is not clickable */
}

.page_nav.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    background-color: var(--info_bg);
}

.page_ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--middle_grey);
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    font-weight: 600;
}

/* Responsive Considerations */
@media (max-width: 800px) {
    body.no_scroll {
        overflow: hidden;
    }

    .merch_modal_container {
        width: 95%; /* More width on small screens */
        max-height: 95vh;
    }
    .merch_modal_header,
    .merch_modal_content,
    .merch_modal_footer {
        padding: 15px; /* Slightly less padding */
    }
    .merch_modal_title_text {
        font-size: 1.1em;
    }
    .merch_modal_footer {
        flex-direction: column-reverse; /* Stack buttons vertically */
    }
    .merch_modal_footer .merch_button {
        width: 100%; /* Make buttons full width */
        margin-bottom: 10px; /* Space when stacked */
    }
    .merch_modal_footer .merch_button:last-child {
        margin-bottom: 0;
    }
}

/**
 * Effects - kick up the style!
 * CSS effects are designed to work on colored elements and will not show
 * well against lighter colors
 * Example usage:
<button class="shine">Shiny Button</button>
 *
 */
.shine {
  position: relative;
  overflow: hidden;
}

.shine::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -150%; /* Start further off-screen to accommodate the pause */
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-25deg);
  animation: shine_pause 4s infinite linear;
  /* Total cycle: 2s pause + 1s animation = 3s */
}

@keyframes shine_pause {
  0% {
    left: -150%; /* Still off-screen at the beginning */
  }
  25% {
    left: -150%; /* Hold the position for the 2-second pause */
  }
  50% {
    left: 100%; /* Animate across during the next 1 second */
  }
  100% {
    left: 150%; /* Keep it off-screen at the end of the cycle */
  }
}

/**
 * Spinning SVG
 * Example usage:
<svg class="merch_icon is_spinning">
    <use href="#spinner_icon"></use>
</svg>
 */
svg.is_spinning {
    animation: merch_spinner_rotate_kf 0.8s linear infinite;
    transform-origin: 50% 50%;
    display: inline-block;
}

@keyframes merch_spinner_rotate_kf {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*
    Animation keyframes sticky save bar sliding in from the bottom.
*/
@keyframes sticky_save_slide {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0%);
    }
}

/**
 * MerchStudio Sortable Placeholder animation
 */
@keyframes grow_in_placeholder_horizontal {
    from {
        max-width: 0;
        opacity: 0;
    }
    to {
        max-width: 150px; /* Good default for horizontal tabs */
        opacity: 0.6;
    }
}

@keyframes grow_in_placeholder_vertical {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        /* JS sets the height, so we just need a max-height */
        max-height: 100px; /* Good default for vertical items */
        opacity: 0.6;
    }
}

/*
 * Animation for a "dirty" modal when a close is attempted without saving.
 * This provides a clear visual cue to the user that something requires
 * their attention before they can proceed with closing the modal.
*/
@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.merch_modal_container.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/*
 * Badges for Type and Status
 */
.item_type_badge,
.status_badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid;
}

.status_badge.status_A {
    color: #198754;
    border-color: #198754;
    background-color: #d1e7dd;
}
.status_badge.status_H {
    color: #6c757d;
    border-color: #6c757d;
    background-color: #e9ecef;
}
.status_badge.status_D {
    color: #dc3545;
    border-color: #dc3545;
    background-color: #f8d7da;
}

.item_type_badge {
    color: var(--accent_blue);
    border-color: var(--accent_blue);
    background-color: var(--info_bg);
}

/* --- Animation Keyframes --- */

@keyframes fade_in {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

@keyframes scroll_out_up {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}
@keyframes scroll_in_up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes scroll_out_down {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}
@keyframes scroll_in_down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}


/* Source: tpl/core/common/css/image.css */
/* 
    MerchStudio version 0.01 - Core CSS File
    Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.
    Common CSS (both admin and client side) for MerchStudio App
    @version common/css/image.css - 0.01 - 05-24-2025 - totaltec
    
    # included by client/css_load.tpl, admin/css_load.tpl
*/

/* MerchStudio - Image Input Grid Styling (Final Colors) */

/* Styles for the grid container itself */
.thumbnail_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between grid items */
}

/* Base style for ALL items in the grid 
   (thumbnails & the "add new" drop zone button) */
.image_grid_item {
    position: relative;
    width: 120px;
    height: 120px;
    background-color: var(--base);
    border-radius: 8px; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* L-shaped corners for ALL grid items */
.image_grid_item::before,
.image_grid_item::after {
    content: '';
    position: absolute;
    width: 40px;  /* Size of the L-arm */
    height: 40px; /* Size of the L-arm */
    border-color: var(--contrast);
    border-style: solid;
    transition: border-color 0.2s ease;
    z-index: 1;
}

/* Top-left L-shape for all grid items */
.image_grid_item::before {
    top: 0;
    left: 0;
    border-width: 4px 0 0 4px; 
}

/* Bottom-right L-shape for all grid items */
.image_grid_item::after {
    bottom: 0;
    right: 0;
    border-width: 0 4px 4px 0;
}

/* Specific styles for the "add new" drop zone item */
/* This element will also have the .image_grid_item class */
#image_drop_zone { 
    /* Inherits background and L-corners from .image_grid_item */
    border: 2px dashed var(--contrast); 
    cursor: pointer;
    transition: border-color 0.2s ease, 
                background-color 0.2s ease;
}

/* Icon within the drop zone */
#image_drop_zone .drop_zone_icon {
    width: 48px; 
    height: 48px;
    fill: var(--contrast); /* Icon color matches L-corners */
    transition: fill 0.2s ease;
    pointer-events: none; 
    z-index: 2; 
}

/* Highlight state when dragging over the drop zone */
#image_drop_zone:hover,
#image_drop_zone.highlight {
    /* Uses border-color for the dashed border */
    border-color: var(--highlight);
    background-color: var(--info_bg);
}

/* L-corners on the drop zone also highlight */
#image_drop_zone.highlight::before,
#image_drop_zone.highlight::after {
    border-color: var(--highlight);
}

/* Icon on the drop zone also highlights */
#image_drop_zone.highlight .drop_zone_icon {
    fill: var(--highlight);
}

/* Styling for actual image thumbnails (img tag itself) */
.image_grid_item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: inherit;
}

/* Note below the grid (e.g., "Multiple images allowed") */
.image_manager small {
    display: block; 
    text-align: left; 
    margin-top: 8px;
    padding-left: 5px;
}

/* Styles for action buttons on existing image thumbnails */
/* (from image_input_thumb.tpl, within .thumb_actions) */
.image_thumb .thumb_actions {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3; /* Above L-corners and image */
}
.image_drag_handle,
.image_thumb .action_icon {
    background-color: rgba(0,0,0,0.4);
    color: var(--text);
    border-radius: 4px;
    padding: 2px;
    border: none;
    cursor: pointer;
}
/* Drag handle for thumb */
.image_drag_handle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3; /* Above L-corners and image */
    cursor: grab;
}
.image_drag_handle:hover,
.image_thumb .action_icon:hover .merch_icon {
    color: var(--highlight);
}

/* Container for the progress bar and text */
.image_thumb .thumb_progress {
    position: absolute; 
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3px 5px; 
    background-color: rgba(0, 0, 0, 0.65); /* Dark overlay */
    box-sizing: border-box;
    z-index: 5; 
}

/* The progress bar itself */
.image_thumb .progress_bar {
    height: 6px;                       /* Thickness of the bar */
    background-color: var(--highlight, #f0c040); /* Color of the bar */
    width: 0%;                         /* Starts empty, JS updates this */
    margin-bottom: 3px;                /* Space below bar, above text */
    border-radius: 2px;                /* Slightly rounded corners */
    transition: width 0.1s ease-out;   /* Smooths width changes */
}

/* Styling for the progress text */
.image_thumb .progress_text {
    display: block;
    width: 100%; 
    font-size: 0.7em; 
    color: #f0f0f0;        /* Light text on dark overlay */
    white-space: nowrap;   
    overflow: hidden;      
    text-overflow: ellipsis;
    line-height: 1.3;      
    text-align: center;    /* Center the percentage */
    font-weight: bold;     
}

/* Styling for individual node images within the node template (sections) */
.node_image { /* This is the <figure> element */
    display: inline-block;
    padding: 4px;
    margin: 5px;
    line-height: 0;
    width: 100%;
    box-sizing: border-box;
}

.node_image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.image_placeholder svg {
    width: 100%; 
    height: 100%;
    color: var(--middle_grey); 
}


/* Source: tpl/core/common/css/merch_tabs.css */
/*
    MerchStudio version 0.01 - Core CSS File
    Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.
    Responsive tab system for MerchStudio App.
    @version tpl/core/common/css/merch_tabs.css - 0.01 - 05-10-2025 - totaltec
    # included by admin/css_load.tpl
*/

.merch_tabs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    border-bottom: 1px solid var(--line);
}

.merch_tabs li {
    margin-right: 10px;
    margin-bottom: 0;
}

.merch_tabs li:last-child {
    margin-right: 0;
}

.merch_tabs a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text);
    background-color: var(--base);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.merch_tabs a:hover {
    background-color: var(--hover);
}

.merch_tabs a.active {
    background-color: var(--bg);
    color: var(--highlight);
    border-bottom: 1px solid var(--bg);
}

.merch_tab_content {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background-color: var(--bg);
}

.merch_tab_content > div {
    display: none;
}

.merch_tab_content > div.active {
    display: block;
}

.merch_tab_content .nexus_item {
    margin: 10px 0;
    padding: 5px;
    background-color: var(--info_bg);
}

.merch_tab_content .nexus_separator {
    background-color: var(--bg);
}

@media (max-width: 800px) {
    .merch_tabs {
        flex-direction: column;
        border-bottom: none;
    }

    .merch_tabs li {
        margin-right: 0;
        margin-bottom: 5px;
    }

    .merch_tabs li:last-child {
        margin-bottom: 0;
    }

    .merch_tabs a {
        border-radius: 5px;
        border-bottom: 1px solid var(--line);
    }

    .merch_tabs a.active {
        border-bottom: 1px solid var(--highlight);
    }
}



/* Source: tpl/core/common/css/notify.css */
/* 
    MerchStudio version 0.01 - Core CSS File
    Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.
    Common CSS (both admin and client side) for MerchStudio App
    @version common/css/notify.css - 0.01 - 06-18-2025 - totaltec
    
    # included by client/css_load.tpl, admin/css_load.tpl
*/
/*
 * MerchStudio Admin Notifications
 * Styles for the header notification bell and dropdown.
 */

.notification_bell {
    position: relative;
    margin-right: 10px;
}

.notification_count {
    position: absolute;
    top: -4px;
    right: -6px;
    background-color: var(--accent_red);
    color: #fff;
    border-radius: 50%;
    width: 19px;
    height: 19px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--bg);
    text-align: center;
    line-height: 19px;
    padding-right: 1px;
}

.notification_list {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 280px;
    max-width: 350px;
}

.notification_item {
    padding: 10px 15px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.notification_item:last-child {
    border-bottom: none;
}

.notification_item.type_danger {
    background-color: hsla(0, 80%, 50%, 0.1);
    font-weight: 500;
}

.notification_item.type_warning {
    background-color: hsla(45, 100%, 50%, 0.1);
}

.notification_item a {
    text-decoration: none;
    color: inherit;
}

.notification_item a:hover {
    text-decoration: underline;
}

button.dismiss_notification {
    background: none;
    border: none;
    color: var(--text);
    opacity: 0.5;
    cursor: pointer;
    font-size: 20px;
    padding: 0 5px;
}

button.dismiss_notification:hover {
    opacity: 1;
    color: var(--accent_red);
}


/* Source: tpl/core/common/css/user.css */
/*
    MerchStudio Common - Shared User Element Styles
    Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.
    Shared styles for user-related components like the edit modal.

    @package      MerchStudio
    @subpackage   CommonCSS
    @author       Michael L. White <mike@bestsignsupply.com>
    @version      common/css/user.css - 0.01 - 2025-06-23 - totaltec

    #included-by: admin/css_load.tpl
*/

/*
    Styles for the user edit/create modal form are defined here.
    This ensures the form looks the same whether it's triggered from
    the `admin/users.php` page or the "My Account" header link.
*/

/* Styles the icon that appears at the top of the modal. */
.modal_header_icon {
    text-align: center;
    margin-bottom: 15px;
    color: var(--highlight);
}

.modal_header_icon .merch_icon.large {
    width: 48px;
    height: 48px;
}

/* This creates our two-column layout for form groups. */
#user_modal_form .form_row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

#user_modal_form .form_row .form_group {
    flex: 1 1 200px; /* Allows fields to grow but have a base size. */
}

/* Adds consistent spacing between stacked form groups. */
#user_modal_form .form_group {
    margin-bottom: 15px;
}

#user_modal_form hr {
    margin: 15px 0;
    border-color: var(--line);
}

#user_modal_form .form_note {
    font-size: 0.9em;
    color: var(--middle_grey);
    text-align: center;
    margin-top: -5px;
    margin-bottom: 20px;
}

/*
=========================================
User Address Management Styles
=========================================
*/

.user_address_manager {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.address_column {
    flex: 1 1 300px; /* Each column can grow, base width 300px */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.address_column h3 {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.address_list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 100px; /* Give it some space even when empty */
}

.address_card {
    background-color: var(--base);
    border: 1px solid var(--line);
    border-radius: 4px;
    transition: box-shadow 0.2s ease-out;
}

.address_card.primary {
    border-left: 3px solid var(--highlight);
}

.address_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
}

.address_card_header strong {
    color: var(--highlight);
}

.address_actions {
    display: flex;
    gap: 5px;
}

.address_actions .merch_icon {
    padding: 3px;
    border-radius: 3px;
}

.address_card_body {
    padding: 12px;
    font-size: 0.9em;
    line-height: 1.5;
}

.empty_space {
    font-style: italic;
    color: var(--middle_grey);
    padding: 20px;
    text-align: center;
    background-color: var(--base);
    border-radius: 4px;
}

.order_cards_container {
    display: grid;
    /* Auto-fill columns: fits as many columns as possible.
       minmax(320px, 1fr): Cards are at least 320px wide, but grow to fill space.
       This automatically handles the "Stack on mobile, Grid on desktop" requirement.
    */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 15px;
    /* Ensure container takes up space but scrolls if needed */
    min-height: 200px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 5px; /* Increased padding slightly for shadow clearance */
}

.order_card {
    background-color: var(--base);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    /* Force the card to have layout */
    display: flex;
    flex-direction: column;
    /* Remove width: 100% so it listens to the Grid container */
    height: 100%; /* Ensures all cards in a row are the same height */
    color: var(--text); /* Explicit text color */
}

.order_card:hover {
    border-color: var(--highlight);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px); /* Slight lift effect */
}

.order_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: var(--bg); /* Darker header for contrast */
    border-bottom: 1px solid var(--line);
    font-size: 0.9em;
    font-weight: 600;
}

.order_meta {
    display: flex;
    gap: 15px;
}

.order_date {
    color: var(--middle_grey);
    font-weight: 400;
}

.order_ref {
    color: var(--highlight);
}

.order_card_body {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: var(--base); /* Ensure body has background */
    flex-grow: 1; /* Pushes the footer to the bottom */
}

.order_thumbnails {
    display: flex;
    gap: 8px;
    align-items: center;
}

.thumb_wrapper {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    border: 1px solid var(--line);
    overflow: hidden;
    background-color: #fff; /* Always white for product images */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.thumb_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb_wrapper.empty {
    background-color: var(--line);
    color: var(--middle_grey);
}

.thumb_more {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    background-color: var(--info_bg);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: 600;
    border: 1px dashed var(--line);
}

.order_summary_text {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item_count {
    display: block;
    font-size: 0.85em;
    color: var(--middle_grey);
    margin-bottom: 4px;
}

.order_total {
    display: block;
    font-weight: 700;
    font-size: 1.2em;
    color: var(--text);
}

.order_card_footer {
    display: flex;
    justify-content: space-between; /* Pushes buttons to opposite sides */
    align-items: center;
    padding: 10px 15px;
    border-top: 1px solid var(--line);
    text-align: right;
    background-color: var(--bg); /* Match header */
    margin-top: auto; /* Double check footer alignment */
    position: relative;
    z-index: 2;
}

/* --- Status Badges (Specific to Orders) --- */
/* P = Paid, S = Shipped, C = Cancelled, R = Refunded, X = Pending */

.status_badge.status_P { /* Paid */
    background-color: #d1e7dd;
    color: #0f5132;
    border-color: #0f5132;
}

.status_badge.status_S { /* Shipped */
    background-color: #cfe2ff;
    color: #084298;
    border-color: #084298;
}

.status_badge.status_C { /* Cancelled */
    background-color: #f8d7da;
    color: #842029;
    border-color: #842029;
}

.status_badge.status_R { /* Refunded */
    background-color: #e2e3e5;
    color: #41464b;
    border-color: #41464b;
}

.status_badge.status_X,
.status_badge.status_O { /* Pending/Processing */
    background-color: #fff3cd;
    color: #664d03;
    border-color: #664d03;
}

/* --- Inline Order Details (Accordion) --- */

.order_details_container {
    border-top: 1px dashed var(--line); /* Distinct separator */
    background-color: #fafafa; /* Very light grey to distinguish from card body */
    animation: fade_in 0.3s ease-out;
    padding: 15px; /* Add padding inside the container */
}

/* --- Embedded Receipt Styling Overrides --- */
.order_details_container .merch_receipt.embedded {
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    background-color: transparent;
    font-size: 16px; /* Ensure base font is readable */
    color: #333333; /* Force theme text color */
}

/* Hide non-essential print elements in inline view */
.order_details_container .receipt_header,
.order_details_container .receipt_footer .receipt_notes {
    display: none;
}

/* Make grid rows wrap nicely on smaller widths */
.order_details_container .grid_row {
    background-color: #fff; /* White background for items against grey container */
    margin-bottom: 5px;
    border-radius: 4px;
    border: 1px solid var(--line);
    padding: 15px;
}

/* Force text colors for readability */
.order_details_container .grid_col {

}
.order_details_container .col_total {
    font-weight: 800;
    color: var(--contrast);
    font-size: 1.1em;
}

/* Adjust totals section alignment */
.order_details_container .receipt_totals {
    width: 100%; /* Full width totals */
    margin-top: 20px;
    padding-top: 10px;
    border-top: 2px solid var(--line);
}

.order_details_container .total_row {
    padding: 5px 0;
    font-size: 1.1em;
}

/* Ensure the Close button area looks like a footer */
.order_card_footer {
    color: var(--text);
    position: relative;
    z-index: 2;
    background-color: var(--bg); /* Match card background */
}

/* --- Order Tracker Component --- */
.order_tracker {
    display: flex;
    align-items: center;       /* Vertically align text and arrows */
    justify-content: flex-start; /* Keep items in a line on the left */
    gap: 15px;                 /* Space between steps and arrows */
    padding: 15px;             /* Breathing room */
    background-color: var(--base);
    border-top: 1px solid var(--line);
    font-size: 0.9em;          /* Slightly smaller than body text */
    font-weight: 400;          /* Semi-bold for readability */
}

/* --- Base State (Inactive / Future Steps) --- */
.track_step,
.track_sep {
    color: #b0b0b0; /* Light Gray for remaining steps */
    transition: color 0.3s ease;
}

/* --- Active State (Completed Steps) --- */
.track_step.active,
.track_sep.active {
    color: #ff9800; /* Orange */
}

/* --- Separator Icon Styling --- */
.track_sep {
    display: flex;
    align-items: center;
    justify-content: center;
}

.track_sep .merch_icon.tiny {
    width: 12px;
    height: 12px;
    /* Ensure the icon takes the text color (Orange/Gray) */
    fill: currentColor;
}

/* --- Mobile Adjustments --- */
@media (max-width: 400px) {
    .order_tracker {
        font-size: 0.8em;
        gap: 8px; /* Tighter spacing on small screens */
        justify-content: space-between; /* Spread out if space is tight */
    }
}
/* Empty State */
.empty_state {
    text-align: center;
    padding: 40px 20px;
    color: var(--middle_grey);
    border: 2px dashed var(--line);
    border-radius: 8px;
    margin-top: 20px;
}

.empty_icon svg {
    width: 64px;
    height: 64px;
    margin-bottom: 15px;
    opacity: 0.5;
}


/* Source: tpl/core/client/css/banner.css */
/*
    MerchStudio version 0.01 - Core File
    Copyright (c) 2025 MerchStudio Inc.
    Client-side CSS for banner carousel animations and styling.
    @author      MerchStudio Admin
    @version     tpl/core/common/css/banner.css - 0.01 - 11-05-2025 - merchstudio

    # include by client/css_load.tpl
*/

/**
 * Banner Carousel
 * The carousel supports multiple animation types via a data-animation
 * attribute.
 */
.banner_carousel {
	position: relative;
	width: 100%;
	margin: auto;
	overflow: hidden; /* This is our "mask" */
	border-radius: 8px;
	box-shadow: 0 4px 10px var(--shadow);
}

.banner_slides {
	position: relative;
    /*@media (min-width: 991px) {
		height: 418px;
	}
    @media (min-width: 601px) and (max-width: 990px) {
		height: 242px;
	}
    @media (min-width: 300px) and (max-width: 600px) {
		height: 155px;
	}*/
}

.banner_slide {
	display: none; /* Hide slides by default (for FADE) */
	width: 100%;
}

.banner_slide.active {
	display: block; /* Show active slide */
    position: relative;
}

/* --- 1. Fade Animation (Default) --- */
/* This logic remains the same, as it works well. */
.banner_carousel[data-animation="fade"] .banner_slide.active {
	animation: fade_in 0.8s ease-in-out;
}

.banner_carousel[data-animation="fade"] .banner_slide.exiting {
	animation: fade_out 0.8s ease-in-out forwards;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}

/* --- 2. Slide (Horizontal) & Scroll (Vertical) Animations --- */
/*
 * For these animations, all slides are stacked, always block,
 * and we control visibility with opacity and z-index.
*/
.banner_carousel[data-animation="slide"] .banner_slide,
.banner_carousel[data-animation="scroll"] .banner_slide {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0; /* All slides are invisible by default */
	z-index: 5; /* Base stack */
	/*
	 * We add a will-change hint to let the browser optimize
	 * transform and opacity animations.
	 */
	will-change: transform, opacity;
}

.banner_carousel[data-animation="slide"] .banner_slide.active,
.banner_carousel[data-animation="scroll"] .banner_slide.active {
    position: relative;
	opacity: 1; /* The active slide is visible */
	z-index: 10; /* And on top */
}

.banner_carousel[data-animation="slide"] .banner_slide.exiting,
.banner_carousel[data-animation="scroll"] .banner_slide.exiting {
	z-index: 12; /* Exiting slide is above active */
	opacity: 1; /* Ensure it's visible to animate out */
}

.banner_carousel[data-animation="slide"] .banner_slide.entering,
.banner_carousel[data-animation="scroll"] .banner_slide.entering {
	z-index: 15; /* Entering slide is on top of everything */
	opacity: 0; /* Start invisible */
}

/* --- 2a. Slide (Horizontal) --- */
.banner_carousel[data-animation="slide"] .banner_slide.exiting.next {
	animation: slide_out_to_left 0.8s ease-in-out forwards;
}
.banner_carousel[data-animation="slide"] .banner_slide.entering.next {
	animation: slide_in_from_right 0.8s ease-in-out forwards;
}
.banner_carousel[data-animation="slide"] .banner_slide.exiting.prev {
	animation: slide_out_to_right 0.8s ease-in-out forwards;
}
.banner_carousel[data-animation="slide"] .banner_slide.entering.prev {
	animation: slide_in_from_left 0.8s ease-in-out forwards;
}

/* --- 2b. Scroll (Vertical) --- */
.banner_carousel[data-animation="scroll"] .banner_slide.exiting.next {
	animation: slide_out_to_top 0.8s ease-in-out forwards;
}
.banner_carousel[data-animation="scroll"] .banner_slide.entering.next {
	animation: slide_in_from_bottom 0.8s ease-in-out forwards;
}
.banner_carousel[data-animation="scroll"] .banner_slide.exiting.prev {
	animation: slide_out_to_bottom 0.8s ease-in-out forwards;
}
.banner_carousel[data-animation="scroll"] .banner_slide.entering.prev {
	animation: slide_in_from_top 0.8s ease-in-out forwards;
}


/* --- Common Slide Content --- */
.banner_slide img {
	width: 100%;
	display: block;
	object-fit: cover;
	max-height: 500px; /* Sensible default max height */
    height: auto;
}

.banner_caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 15px;
	text-align: center;
	font-size: 1.1em;
}

/* --- Navigation Controls --- */
.banner_nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	cursor: pointer;
	padding: 10px 15px;
	font-size: 24px;
	z-index: 20; /* Above all slides */
	border-radius: 4px;
	transition: background-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	min-width: unset;
}

.banner_nav:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.banner_nav.prev {
	left: 10px;
}

.banner_nav.next {
	right: 10px;
}

.banner_dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 20; /* Above all slides */
	/*
	 * If there's a caption, move the dots up to be on top of it.
	 * We select dots that are siblings of a caption.
	 */
	.banner_caption + & {
		bottom: 60px; /* Adjust as needed based on caption height */
	}
}

.banner_dot {
	width: 12px;
	height: 12px;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.banner_dot:hover,
.banner_dot.active {
	background-color: white;
}

/* --- Animation Keyframes --- */
/* These already include opacity, which is perfect. */

@keyframes fade_in {
	from { opacity: 0.4; }
	to { opacity: 1; }
}

@keyframes fade_out {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* --- Vertical Scroll Keyframes --- */
@keyframes slide_out_to_top {
	from { transform: translateY(0); opacity: 1; }
	to { transform: translateY(-100%); opacity: 0; }
}
@keyframes slide_in_from_bottom {
	from { transform: translateY(100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
@keyframes slide_out_to_bottom {
	from { transform: translateY(0); opacity: 1; }
	to { transform: translateY(100%); opacity: 0; }
}
@keyframes slide_in_from_top {
	from { transform: translateY(-100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* --- Horizontal Slide Keyframes --- */
@keyframes slide_out_to_left {
	from { transform: translateX(0); opacity: 1; }
	to { transform: translateX(-100%); opacity: 0; }
}
@keyframes slide_in_from_right {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes slide_out_to_right {
	from { transform: translateX(0); opacity: 1; }
	to { transform: translateX(100%); opacity: 0; }
}
@keyframes slide_in_from_left {
	from { transform: translateX(-100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}



/* Source: tpl/core/client/css/client.css */
/*
    MerchStudio version 0.01 - Core CSS File
    Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.
    Client Side CSS for MerchStudio App
    @version client/css/client.css - 0.01 - 05-14-2025 - totaltec

    # included by client/css_load.tpl
*/

/**
 * Header Section
 */
#logo_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#logo_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Remove default link styling for the logo area */
a.logo_link,
a.logo_link:link,
a.logo_link:visited,
a.logo_link:active,
a.logo_link:focus {
    text-decoration: none;
    color: inherit;
}

#logo {
    display: inline-block;
    margin: 5px 5px 0 0;
    padding: 3px;
    width: auto;
    height: 90px;
    vertical-align: middle;
}

#logo > svg,
#logo > img {
    display: block;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.phone {
    margin: 0 15px;
    align-self: center;
    white-space: nowrap;
}

/* Control link styling for login and phone links */
#login_link,
#login_link:link,
#login_link:visited,
.phone a,
.phone a:link,
.phone a:visited {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}

#login_link:hover,
#login_link:focus,
.phone a:hover,
.phone a:focus {
    color: var(--link_hover);
    text-decoration: underline;
}

#header_user_column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.drop_trigger {
    transition: all 0.2s ease-out;
}

.drop_trigger:hover {
    background-color: var(--hover);
    border-color: var(--highlight);
}

/*
=========================================
Footer Links (from Nexus Menu)
=========================================
*/

/* Container for the footer links navigation within #merch_footer */
#merch_footer .footer_links {
    text-align: center; /* Center the list of links */
    padding: 10px 0;
    /* Optional: a subtle line above these links */
    border-top: 1px solid var(--base);
    margin-top: 10px;
}

#merch_footer .footer_links ul {
    list-style-type: none; /* Remove default bullets */
    padding: 0;
    margin: 0;
    display: inline-block; /* Allows centering via parent's text-align */
}

#merch_footer .footer_links li {
    display: inline-block; /* Arrange links horizontally */
    margin: 0 10px;       /* Spacing between link items */
}

/* Styling for the actual anchor tags in the footer links menu */
#merch_footer .footer_links a,
#merch_footer .footer_links a:visited {
    color: var(--text); /* Using theme's base text color for subtlety */
    text-decoration: none;
    font-size: 0.9em;    /* Slightly smaller than main footer text */
    padding: 3px 0;      /* Small vertical padding for click area */
}

#merch_footer .footer_links a:hover,
#merch_footer .footer_links a:focus {
    color: var(--link_hover); /* Use theme's link hover color */
    text-decoration: underline;
}

/* Styling for the existing bottom row of the footer */
#merch_footer .footer_bottom {
    text-align: center;
    padding: 10px 0 15px 0; /* Ensure enough padding at the very bottom */
    font-size: 0.85em;     /* Keep this text small */
}

#merch_footer .footer_bottom .powered_by,
#merch_footer .footer_bottom .copyright {
    display: inline;
    margin: 0 5px; /* Space if they are side-by-side or wrap */
}

/* --- Sub-Path Navigation (Node Kids) --- */
.sub_path_nav {
    margin-top: 30px;    /* Space above this navigation block */
    margin-bottom: 30px; /* Space below this navigation block */
    padding-bottom: 20px;
    border-bottom: 1px solid var(--base);
}

.sub_path_nav.bottom {
    padding-top: 20px;
    border-top: 1px solid var(--base);
}

.sub_path_list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* Creates responsive columns: each takes 1fr of space,
       but won't shrink below 180px, and will wrap. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px; /* Spacing between the navigation items */
}

.sub_path_item a,
.sub_path_item a:link,
.sub_path_item a:visited {
    display: block; /* Makes the entire area clickable */
    text-decoration: none;
    color: var(--text);
    padding: 15px;
    border-radius: 6px;
    background-color: transparent;
    transition: background-color 0.2s ease-in-out,
                transform 0.2s ease-in-out;
    text-align: center; /* Centers the image and text below it */
}

.sub_path_item a:hover,
.sub_path_item a:focus {
    background-color: var(--base);
    color: var(--link_hover);
    transform: translateY(-2px); /* Subtle lift effect */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Subtle shadow */
}

.sub_path_item svg,
.sub_path_image {
    display: block;
    width: 160px;
    height: 160px;
    object-fit: cover;
    margin: 0 auto 10px auto;
    border-radius: 4px;
    border: 1px solid var(--line); /* Subtle border */
}

.sub_path_name {
    display: block;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.3;
}

/* Mobile Size */
@media (max-width: 800px) {
    .phone {
        margin: 5px 0 0 0;
        font-size: 0.8em;
    }
}


/* Source: tpl/core/client/css/cart.css */
/*
    MerchStudio version 0.01 - Core CSS File
    Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.
    Client Side Cart CSS
    @version client/css/cart.css - 0.01 - 2025-11-05 - totaltec

    # included by client/css_load.tpl
*/

.cart_page_container .page_title {
    text-align: left;
    padding: 0 0 15px 0;
    margin: 0 0 20px 0;
    border-bottom: 1px solid var(--line);
}

.cart_empty_message {
    text-align: center;
    padding: 40px;
    background-color: var(--base);
    border-radius: 4px;
}

/* Cart Grid Layout */
.cart_header_row,
.cart_item_row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 50px;
    gap: 15px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}

.cart_header_row {
    font-weight: bold;
    color: var(--middle_grey);
    text-transform: uppercase;
    font-size: 0.9em;
    padding-top: 0;
}

.cart_col_product {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cart_item_image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--line);
}

.cart_item_name {
    font-weight: bold;
    text-decoration: none;
    display: block;
    color: var(--text);
}
.cart_item_name:hover {
    color: var(--link_hover);
}

.cart_item_sku {
    font-size: 0.9em;
    color: var(--middle_grey);
    display: block;
    margin-top: 4px;
}

.cart_col_price,
.cart_col_total {
    font-weight: 500;
}

.cart_qty_input {
    max-width: 80px;
    text-align: center;
    padding: 0.4em 0.6em; /* Smaller padding */
    margin: 0;
}

.btn_cart_remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--middle_grey);
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s ease-out;
}
.btn_cart_remove:hover {
    color: var(--accent_red);
    background-color: var(--base);
}

.cart_summary {
    margin-top: 20px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.summary_subtotal span {
    display: inline-block;
    min-width: 65px;
    text-align: right;
}

.summary_actions .merch_button {
    margin: 0; /* Remove default button margin */
}

/*
=========================================
Desktop Header Mini Cart
=========================================
*/
/*
 * This is the main container for our new desktop-only cart
 * in the header. It's a dropdown container.
 */
#desktop_cart_wrap {
    display: inline-flex; /* Use flex for alignment */
    align-items: center;
}

/*
 * This styles the clickable trigger area that contains
 * the icon and text.
 */
#desktop_cart_wrap .drop_trigger {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 4px;
    color: var(--text);
    cursor: pointer;
}

/*
 * This container holds the item count and subtotal,
 * stacking them vertically.
 */
.desktop_cart_details {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

/* Styles for the "X item(s)" text */
#desktop_cart_count {
    font-size: 1em;
}

/* Styles for the "$XX.XX" subtotal text */
#desktop_cart_total {
    font-weight: bold;
    color: var(--text);
}

/* Generic Mini Cart CSS */
.cart_items {
    font-size: 0.8em;
    background-color: var(--accent_red);
    color: white;
    padding: 6px 5px; /* Adjusted padding for small badge */
    border-radius: 14px; /* For pill shape */
    line-height: 1;
    margin-bottom: 4px;
    min-width: 18px; /* For single digit */
    text-align: center;
}

/*
=========================================
Menu Mini Cart
=========================================
*/
/* Cart Icon Container - Initially hidden on desktop non-sticky */
#mm_cart_wrap {
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateX(30px); /* Start off-screen for animation */
    width: 0; /* Start with no width, will expand */
    height: 30px;
    flex-shrink: 0;
    justify-content: flex-end;
    transition: opacity 0.3s ease-in-out,
                transform 0.3s ease-in-out,
                width 0.3s ease-in-out;
}

#merch_menu.sticky #mm_cart_wrap {
    opacity: 1;
    transform: translateX(0);
    width: auto; /* Let it size to content (icon + badge) */
    margin-left: 10px; /* Space before cart, after list_wrap */
}

#mm_cart_wrap .drop_trigger {
    padding: 0;
    border: 0;
}

#mm_cart_wrap .cart_items {
    display: inline-block;
    padding: 4px 4px;
    font-size: 0.8em;
    width: 18px; /* Fixed width */
    height: 18px; /* Fixed height (equal to width) */
    line-height: 18px; /* Same as height to center text */
    margin: 0;
    border-radius: 50%; /* Make it circular */
    text-align: center; /* Center the number */
}

#mm_cart_wrap .merch_icon {
    width: 30px;
    height: 30px;
}

/*
=========================================
Mini Cart Dropdown Panel Styles
=========================================
*/
/*
 * This is the main content wrapper for the dropdown panels
 * used by both the desktop and sticky menu carts.
 */
.mini_cart_content {
    width: 320px;
    max-height: 70vh; /* Prevents long carts from going off-screen */
    display: flex;
    flex-direction: column;
}

/* This makes the list of items scrollable */
.mini_cart_items_list {
    overflow-y: auto;
    flex-grow: 1;
}

.mini_cart_empty {
    padding: 20px;
    text-align: center;
    color: var(--middle_grey);
}

/* A single item row in the mini cart */
.mini_cart_item_row {
    display: grid;
    /* We create 3 columns: Image, Details, Controls */
    grid-template-columns: 50px 1fr 80px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--base);
}

.mini_cart_item_image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--line);
}

.mini_cart_item_details {
    display: flex;
    flex-direction: column;
}

.mini_cart_item_name {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--text);
    text-decoration: none;
    line-height: 1.3;
}
.mini_cart_item_name:hover {
    color: var(--link_hover);
}

.mini_cart_item_price {
    font-size: 0.9em;
    color: var(--highlight);
}

/* Wrapper for the Qty input and Remove button */
.mini_cart_item_controls {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 5px;
}

/* Our new, smaller quantity input for the mini cart */
input[type="number"].mini_cart_qty_input {
    width: 50px;
    padding: 0.3em 0.5em; /* Smaller padding */
    font-size: 0.9em;
    text-align: center;
    margin: 0;
}

/* Our new, icon-only remove button */
.btn_mini_cart_remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--middle_grey);
    padding: 0;
    line-height: 1;
}
.btn_mini_cart_remove:hover {
    color: var(--accent_red);
}

/* The summary section at the bottom (Subtotal, Buttons) */
.mini_cart_summary {
    padding: 10px;
    border-top: 2px solid var(--line);
    background-color: var(--base);
}

.mini_cart_summary .summary_subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Container for the "View Cart" and "Checkout" buttons */
.mini_cart_actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.mini_cart_actions .merch_button {
    border-bottom: none;
}

.mini_cart_actions .merch_button.highlight {
    color: var(--highlight);
}

/* Styling for the buttons inside the mini cart */
.mini_cart_actions .merch_button {
    flex-grow: 1;
    text-align: center;
    justify-content: center;
    padding: 0.5em;
    margin: 0;
    min-width: auto;
}

/* Responsive styles for cart */
@media (max-width: 800px) {
    #desktop_cart_wrap {
        display: none;
    }

    .cart_header_row {
        display: none; /* Hide headers on mobile */
    }

    .cart_item_row {
        grid-template-columns: 1fr 1fr; /* 2-column grid */
        gap: 10px 20px;
        padding: 20px 0;
    }

    /* Product spans full width */
    .cart_col_product {
        grid-column: 1 / -1;
    }

    .cart_col_price,
    .cart_col_qty,
    .cart_col_total {
        grid-column: 1 / 2; /* Stack left */
        position: relative;
        padding-left: 100px; /* Label space */
        min-height: 40px; /* Ensure alignment */
        display: flex;
        align-items: center;
    }

    .cart_col_remove {
        grid-column: 2 / -1; /* Stack right */
        grid-row: 2 / span 3; /* Span 3 rows */
        justify-self: flex-end;
        align-self: center;
    }

    /* Add pseudo-element labels */
    .cart_col_price::before,
    .cart_col_qty::before,
    .cart_col_total::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        color: var(--middle_grey);
        font-weight: bold;
    }

    .cart_col_price::before { content: 'Price'; }
    .cart_col_qty::before { content: 'Qty'; }
    .cart_col_total::before { content: 'Total'; }

    .cart_summary {
        align-items: center; /* Center summary on mobile */
    }
}

/*
=========================================
Shipping Estimator and Totals
=========================================
*/
.cart_content {
    display: flex;
    flex-wrap: wrap; /* Allows sections to wrap on smaller screens */
    gap: 30px;
    margin-top: 20px;
}

.cart_items_list {
    flex: 1 1 60%; /* Take 60% of width, minimum */
    min-width: 300px;
}

.cart_summary {
    flex: 1 1 30%; /* Take remaining space */
    min-width: 250px;

    /* We align the summary items on the right side */
    align-items: stretch;
    padding: 0;
}

.shipping_estimator_wrap {
    flex: 1 1 30%; /* Position estimator beside the list */
    min-width: 250px;
    padding: 20px;
    background-color: var(--base);
    border: 1px solid var(--line);
    border-radius: 4px;
    margin-top: 20px;

    /* Small h3 style for estimator */
    h3 {
        padding: 0;
        margin-top: 0;
        font-size: 1.1em;
        font-weight: 700;
        text-align: left;
    }
}

.rates_display {
    padding: 10px 0;
}

.shipping_option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 1em;
}

.shipping_option input[type="radio"] {
    /* Custom styling for radio if needed, otherwise rely on default */
    margin: 0;
}

.summary_shipping,
.summary_grand_total,
.summary_subtotal {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 5px 0;
    font-size: 1.1em;
    font-weight: normal;
    color: var(--text);
}

.summary_grand_total {
    font-size: 1.5em;
    font-weight: bold;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

#cart_shipping_rate,
#cart_grand_total {
    font-weight: bold;
    color: var(--highlight);
}

/* Discount Line Styles */
.summary_discount {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 5px 0;
    font-size: 1.1em;
    font-weight: normal;
    color: var(--accent_green); /* Highlights savings */
}

.summary_discount.hidden {
    display: none;
}

/* Coupon Section */
.coupon_section {
    width: 100%;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--line);
}

.coupon_input_group {
    display: flex;
    gap: 5px;
}

.coupon_input_group.hidden {
    display: none;
}

.coupon_input_group input {
    flex-grow: 1;
    min-width: 0; /* Allows shrinking */
    padding: 6px 10px;
    margin: 0;
}

.coupon_input_group .merch_button {
    margin: 0;
}

.coupon_active_display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--info_bg);
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--line);
}

.coupon_active_display.hidden {
    display: none;
}

.text_link_btn {
    background: none;
    border: none;
    color: var(--accent_red);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9em;
    padding: 0;
}
.text_link_btn:hover {
    text-decoration: none;
}

/* Discount Breakdown Styles */
.summary_discount.applied_row {
    color: var(--accent_green);
    align-items: center;
}

.summary_discount .discount_badge {
    display: inline-block;
    font-size: 0.8em;
    background-color: var(--accent_green);
    color: var(--button_text);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: bold;
    vertical-align: middle;
}

/* Ensure strong tags inherit color context */
.summary_discount strong {
    color: inherit;
}




/* Source: tpl/core/client/css/merch_menu.css */
/* 
    MerchStudio version 0.01 - Core CSS File
    Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.
    MerchStudio Client Navigation Menu CSS
    @version client/css/merch_menu.css - 0.01 - 05-14-2025 - totaltec
    
    # included by client/css_load.tpl
*/

/* Sentinel for IntersectionObserver - helps detect when the menu is sticky */
#mm_sentinel {
    height: 1px;
    margin-bottom: -1px;
}

/* Logo Icon Container - Initially hidden on desktop non-sticky */
#mm_logo_icon {
    margin: 5px 0;
    opacity: 0;
    transform: translateX(-30px);
    width: 0; /* Start with no width, will expand */
    height: 40px;
    overflow: hidden; /* Clip content during width animation */
    flex-shrink: 0;
    transition: opacity 0.3s ease-in-out,
                transform 0.3s ease-in-out, 
                width 0.3s ease-in-out;
}
/*#mm_logo_icon a {*/
/*    display: block;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/
#mm_logo_icon .merch_icon,
#mm_logo_icon svg {
    display: block;
    height: 100%; /* Fill height of #mm_logo_icon */
    width: auto;  /* Maintain aspect ratio */
}

/* Hamburger Button - Hidden on desktop */
#mm_hamburger {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: inherit; /* Inherit color from nav for the SVG */
}
#mm_hamburger .merch_icon {
    width: 36px;
    height: 36px;
    fill: currentColor;
}

/* Main Menu Navigation container */
#merch_menu {
    background-color: var(--base);
    border-bottom: 1px solid var(--line);
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color 0.3s ease-out,
                border-color 0.3s ease-out,
                padding 0.3s ease-out;
}

/* When STICKY: Show logo and cart, adjust their width and transform */
#merch_menu.sticky {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#merch_menu.sticky #mm_logo_icon {
    opacity: 1;
    transform: translateX(0);
    width: 53px; /* Animate to actual logo width */
    margin-right: 10px; /* Space after logo, before list_wrap */
}

/* mm_list: Main Menu unordered List */
.mm_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* mm_item: Main Menu List Item */
.mm_item {
    position: relative; /* For positioning dropdowns */
    display: inline-block; /* Keeps items in a row */
}

/* Styling for links and buttons in the menu */
/* mm_link: Main Menu static Link */
/* mm_button: Main Menu toggle Button */
.mm_link,
.mm_link:link,
.mm_link:visited,
.mm_button {
    display: block;
    padding: 15px 20px; /* Generous clickable area */
    text-decoration: none;
    color: var(--text);
    font-family: 'Manrope', sans-serif; /* Body font */
    font-weight: bold; /* Make nav items stand out */
    font-size: 1em; /* Standard text size */
    background-color: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.3s ease-out,
                background-color 0.3s ease-out;
}

.mm_link:hover,
.mm_button:hover,
.mm_link:focus,
.mm_button:focus {
    color: var(--link_hover);
    background-color: var(--hover);
    outline: none; /* We will use other focus indicators */
}

/* Active state for button when its panel is open */
.mm_button[aria-expanded="true"] {
    background-color: var(--subtle); /* Indicate open state */
    color: var(--accent);
}

/* mm_chevron: Chevron icon for dropdowns */
.mm_chevron {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    vertical-align: middle;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor; /* Inherits button text color */
    transition: transform 0.3s ease-out;
}

.mm_button[aria-expanded="true"] .mm_chevron {
    transform: rotate(180deg);
}

/* Common panel styling (dropdown and mega) */
/* mm_dropdown_panel: Panel for standard dropdowns */
/* mm_mega_panel: Panel for mega menus */
.mm_dropdown_panel,
.mm_mega_panel {
    position: absolute;
    top: 100%;
    background-color: var(--bg);
    border: 1px solid var(--line);
    border-top: none;
    box-shadow: 0 4px 8px var(--shadow);
    z-index: 90;
    min-width: 220px;
    padding: 10px;
    visibility: hidden; /* Hidden by default */
    opacity: 0;
    transform: translateY(10px); /* Slight animation for slide-down */
    transition: opacity 0.2s ease-out,
                visibility 0.2s ease-out,
                transform 0.2s ease-out,
                background-color 0.3s ease-out,
                border-color 0.3s ease-out,
                box-shadow 0.3s ease-out;
}

/* Default orientation for mega panels if no specific class,
   or explicitly for .orient_left.
   Dropdowns are assumed to always be left-aligned by default. */
.mm_mega_panel.orient_left,
.mm_dropdown_panel { /* Applying default left-align to dropdowns too */
    left: 0;
    right: auto; /* Be explicit */
}

.mm_mega_panel.orient_right {
    left: auto; /* Remove any left positioning */
    right: 0;   /* Align to the right of the parent .mm_item */
}

.mm_mega_panel.orient_middle {
    left: 50%;
    /* Temporarily remove translateY from base to avoid conflict,
       will re-add it in the .open state for this specific orientation */
    transform: translateX(-50%);
}

.mm_dropdown_panel.open,
.mm_mega_panel.orient_left.open,
.mm_mega_panel.orient_right.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* Slide down into view */
}

/* Specific open state for middle-oriented mega panels */
.mm_mega_panel.orient_middle.open {
    visibility: visible;
    opacity: 1;
    /* Combine centering with the slide-down effect */
    transform: translateX(-50%) translateY(0);
}

/* Submenu lists and links styling */
/* mm_submenu_list: List within dropdown/mega panels */
.mm_submenu_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* mm_submenu_item: List item within submenu */
.mm_submenu_item {
    /* Spacing for submenu items if needed */
}

/* mm_submenu_link: Link within submenu */
.mm_submenu_link,
.mm_submenu_link:link,
.mm_submenu_link:visited {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text);
    font-size: 0.95em;
    white-space: nowrap;
    transition: color 0.3s ease-out,
                background-color 0.3s ease-out;
}

.mm_submenu_link:hover,
.mm_submenu_link:focus {
    color: var(--link_hover);
    background-color: var(--hover);
    outline: none;
}

/* Mega Menu Specifics */
.mm_mega_panel {
    min-width: inherit; /* Removed 450px due to wild behavior on IOS */
    padding: 20px;
}

/* mm_mega_content: Container for columns in mega menu */
.mm_mega_content {
    display: flex;
    gap: 20px; /* Space between columns */
}

/* mm_mega_column: Column within mega menu */
.mm_mega_column {
    flex: 1; /* Distribute space among columns */
    min-width: 150px; /* Minimum width for a column */
}

/* mm_mega_heading: Heading for a mega menu column */
.mm_mega_heading {
    font-family: 'DM Serif Display', serif;
    font-size: 1.1em;
    color: var(--text);
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--line);
    transition: color 0.3s ease-out,
                border-color 0.3s ease-out;
}

.mm_mega_heading a:link,
.mm_mega_heading a:visited,
.mm_mega_heading a:active {
    color: var(--text);
    text-decoration: none;
}

.mm_mega_heading a:hover,
.mm_mega_heading a:focus {
    text-decoration: underline;
    color: var(--link_hover);
}

/* Responsive Considerations */
@media (max-width: 800px) {
    #merch_menu.sticky {
        padding: 0 10px;
    }
    
    #mm_logo_icon,
    #mm_cart_wrap {
        transform: translateX(0); 
        width: 62px;
    }
    
    /* Display logo icon when menu is sticky */
    .sticky #mm_logo_icon {
        opacity:1;
    }
    
    #mm_cart_wrap {
        opacity:1;
    }

    #mm_hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    #mm_list_wrap {
        display: none; /* Hide the main list by default on mobile */
        /* When .open, it will become the panel */
        position: absolute;
        top: 100%; /* Position below the nav bar (assumes nav bar height is consistent) */
        left: 0;
        right: 0; /* Or width: 100%; */
        background-color: var(--bg);
        border-top: 1px solid var(--line);
        box-shadow: 0 3px 5px rgba(0,0,0,0.1);
        z-index: 90; /* Below the main nav bar's z-index (if nav is 100) */
        max-height: calc(100vh - 50px); /* Example: viewport height minus nav bar height */
        overflow-y: auto;
        /* Ensure no inherited transforms from desktop panel states affect this */
        transform: none;
    }
    
    #mm_list_wrap.open { /* This class will be toggled by JavaScript */
        display: block;
    }

    .mm_list {
        flex-direction: column;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap; /* Prevent wrapping within the vertical mobile menu */
    }
    
    .mm_item {
        display: block; /* Stack items */
        width: 100%; /* Full width for each item */
    }
    
    .mm_link,
    .mm_button {
        text-align: left; /* Align text left when stacked */
        width: 100%; /* Ensure full width for touch */
        box-sizing: border-box; /* Include padding in width */
        border-bottom: 1px solid var(--line);
    }

    .mm_dropdown_panel,
    .mm_mega_panel {
        position: static; /* Panels become part of the flow */
        width: 100%;
        box-sizing: border-box;
        box-shadow: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid var(--line);
        transform: translateY(0); /* No animation needed */
    }
    
    .mm_mega_panel.orient_left,
    .mm_mega_panel.orient_right,
    .mm_mega_panel.orient_middle,
    .mm_mega_panel.orient_left.open,
    .mm_mega_panel.orient_right.open,
    .mm_mega_panel.orient_middle.open {
        left: auto;
        right: auto;
        transform: none; /* Explicitly remove all transforms on mobile */
    }
    
    .mm_mega_content {
        flex-direction: column; /* Stack columns in mega menu */
    }
}


/* Source: tpl/core/client/css/search.css */
/*
 * MerchStudio version 0.12 - Core CSS File
 * Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.
 * Client-side Search Bar Styles
 *
 * @version core/client/css/search.css - 0.01 - 2025-11-11 - totaltec
 */

/*
 * We use the form as the main wrapper.
 * position: relative is crucial for positioning the button inside.
 */
#merch_search_form {
    position: relative;
    display: flex;
    flex-grow: 1;
    max-width: 400px;
    margin: 0 1rem; /* Give it space from other header elements */
}

#merch_search_keywords {
    /* Full width of the form wrapper */
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--border_radius_std);
    padding: 0.5rem 2.5rem 0.5rem 0.75rem; /* Right padding makes room for button */
    font-size: 0.9rem;
    background-color: var(--base);
    color: var(--text);
    /* Smooth transition for focus */
    transition: border-color 0.2s, box-shadow 0.2s;
}

#merch_search_keywords:focus {
    outline: none;
    border-color: var(--accent_blue);
    background-color: var(--bg);
    box-shadow: 0 0 0 2px var(--shadow);
}

#merch_search_btn {
    /* We position the button absolutely inside the form */
    position: absolute;
    top: 0;
    right: 0;
    height: 100%; /* Match the input field height */
    
    /* Remove all default button styling */
    background: transparent;
    border: none;
    
    /* Sizing and spacing for the icon */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem; /* Clickable area */
    padding: 0;
    cursor: pointer;
    
    /* We set the icon color using 'color' */
    color: var(--middle_grey);
    transition: color 0.2s;
}

#merch_search_btn .merch_icon {
    width: 1rem;
    height: 1rem;
}

#merch_search_btn:hover,
#merch_search_btn:focus {
    color: var(--contrast);
    outline: none;
}

/* --- Live Search Dropdown --- */
.search_live_preview {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 6px 6px;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    display: none; /* Hidden by default */
}

.preview_section {
    padding: 10px 0;
    border-bottom: 1px solid var(--base);
}

.preview_heading {
    margin: 0 10px 5px;
    font-size: 0.8em;
    text-transform: uppercase;
    color: var(--middle_grey);
}

.preview_item {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    text-decoration: none;
    color: var(--text);
    transition: background-color 0.2s;
}

.preview_item:hover {
    background-color: var(--hover);
}

.preview_thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
}

.preview_thumb.placeholder {
    background-color: var(--base);
}

.preview_details {
    display: flex;
    flex-direction: column;
}

.preview_title {
    font-weight: 600;
    font-size: 0.95em;
}

.preview_price {
    font-size: 0.85em;
    color: var(--highlight);
}

.preview_empty {
    padding: 15px;
    text-align: center;
    color: var(--middle_grey);
}

.preview_view_all {
    display: block;
    padding: 10px;
    text-align: center;
    background-color: var(--base);
    color: var(--link);
    font-weight: bold;
    text-decoration: none;
    font-size: 0.9em;
}

.preview_view_all:hover {
    background-color: var(--hover);
}

/* --- Full Page Results Styles --- */
#search_results_page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.search_section {
    margin-bottom: 40px;
}

.search_section h2 {
    text-align: left;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Content List Grid */
.content_list_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.content_card {
    background-color: var(--base);
    border: 1px solid var(--line);
    border-radius: 6px;
    transition: transform 0.2s;
}

.content_card:hover {
    transform: translateY(-3px);
    border-color: var(--highlight);
}

.content_link {
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: none;
    color: var(--text);
}

.content_icon {
    margin-right: 15px;
    color: var(--middle_grey);
}

.content_details h3 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
    text-align: left;
}

/* Tiny badge for the live preview */
.item_type_badge.tiny {
    font-size: 0.7em;
    padding: 2px 5px;
    margin-left: auto;
}


/* Source: tpl/core/client/css/success.css */
/*
    MerchStudio version 0.01 - Core CSS File
    Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.
    Client Side Success Page Styles
    @version client/css/success.css - 0.01 - 12-30-2025 - totaltec

    # included by client/css_load.tpl
*/

.success_container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers all children horizontally */
    min-height: 50vh;
    border: none;
    padding: 40px 20px;
    background-color: var(--bg);
}

/* --- Success Header Block (Screen Only) --- */
.success_header_block {
    text-align: center;
    max-width: 600px;
    margin-bottom: 40px;
    animation: fade_in 0.5s ease-out;
    background-color: var(--base);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--line);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.success_icon_wrap {
    margin-bottom: 20px;
    color: var(--accent_green);
    /* Pop-in animation for the checkmark */
    animation: pop_in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.success_check {
    width: 80px;
    height: 80px;
}

.success_message {
    font-size: 1.2em;
    color: var(--text);
    margin-bottom: 30px;
    line-height: 1.6;
}

.success_actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.success_actions .merch_button {
    /* Ensures <a> and <button> behave identically */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Force specific height so they match perfectly */
    min-height: 48px;
    padding: 0 25px; /* Horizontal padding only, height handles vertical */

    /* Remove browser default button borders/styles */
    border-style: solid; /* Triggers box-sizing correctly */
    box-sizing: border-box;
    vertical-align: middle;
    gap: 10px; /* Space between icon and text */
}

/* Constrain the SVG icon size so it doesn't push the height */
.success_actions .merch_button svg,
.success_actions .merch_button .merch_icon {
    width: 18px;
    height: 18px;
    /* Reset any inherited margins */
    margin: 0;
    display: block;
}

/* --- Receipt Styling --- */
.merch_receipt {
    background-color: #ffffff; /* Always white paper */
    color: #333333; /* Always dark text */
    padding: 40px;
    margin: 0 auto; /* Center horizontal */
    border-radius: 4px;
    border: 1px solid var(--line);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    max-width: 800px;
    width: 100%;
    box-sizing: border-box;
    /* Ensure font is crisp for printing */
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

#merch_main .merch_receipt p {
    color: #333333;
}

/* Header Grid */
.receipt_header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
}

.receipt_logo_svg svg {
    max-width: 100px;
    max-height: 80px;
    vertical-align: middle;
}

.company_address {
    font-size: 0.9em;
    color: #444;
    line-height: 1.5;
    font-weight: 500;
}

.receipt_meta {
    text-align: right;
}

.receipt_meta h2 {
    color: #333;
    font-size: 1.8em;
    letter-spacing: 1px;
    margin-bottom: 15px;
    margin-top: 0;
}

.meta_row {
    margin-bottom: 5px;
    font-size: 1em;
}

.meta_row span:first-child {
    color: #666;
    margin-right: 10px;
}

/* Address Grid */
.receipt_addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.address_block h3 {
    font-size: 0.9em;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-top: 0;
}

.address_block p {
    font-size: 1em;
    line-height: 1.5;
    color: #111;
    margin: 0;
}

/* --- Items Grid --- */
.receipt_items_grid {
    width: 100%;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee; /* Close bottom of list */
}

/* Define the Grid Columns: Matches your old table widths
   45% | 15% | 10% | 15% | 15% */
.grid_row {
    display: grid;
    grid-template-columns: 45% 15% 10% 15% 15%;
    align-items: center; /* Vertically center content */
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    color: #333;
}

/* Header Styling */
.grid_row.header {
    background-color: #f8f8f8;
    font-weight: bold;
    font-size: 0.9em;
    text-transform: uppercase;
    border-bottom: 2px solid #ddd;
}

/* Column Utilities */
.grid_col {
    /* Prevent overflow of long text */
    white-space: normal;
    word-wrap: break-word;
}

.col_sku {
    color: #666;
    font-size: 0.9em;
}

.col_total {
    font-weight: bold;
}

/* Text Alignment helpers inside Grid */
.text_center { text-align: center; }
.text_right { text-align: right; }

/* Mobile Label (Hidden on Desktop) */
.mobile_label {
    display: none;
}

/* --- Mobile Responsive Receipt --- */
@media (max-width: 600px) {
    /* Hide the header row on mobile, use labels instead */
    .grid_row.header {
        display: none;
    }

    .grid_row.item {
        /* Change to a 3-column layout for items */
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "desc desc desc"
            "qty price total";
        gap: 5px;
        padding: 15px 5px;
        align-items: end; /* Align bottom so prices sit nicely */
    }

    /* Assign columns to areas */
    .col_desc {
        grid-area: desc;
        margin-bottom: 5px;
        font-size: 1.1em;
    }

    /* Hide SKU on mobile to save space */
    .col_sku {
        display: none;
    }

    .col_qty   { grid-area: qty; text-align: left; font-size: 0.9em; color: #666;}
    .col_price { grid-area: price; text-align: center; font-size: 0.9em; color: #666;}
    .col_total { grid-area: total; text-align: right; font-size: 1.1em; }

    /* Reveal helper labels */
    .mobile_label {
        display: inline-block;
        margin-right: 3px;
        font-weight: normal;
        font-size: 0.85em;
    }
}

/* --- Print Overrides for Grid --- */
@media print {
    /* Ensure Desktop view forces on paper */
    .grid_row {
        display: grid;
        grid-template-columns: 45% 15% 10% 15% 15%;
        grid-template-areas: none;
    }

    .grid_row.header {
        display: grid;
        background-color: #f8f8f8;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .col_sku { display: block }
    .mobile_label { display: none }

    /* Reset alignments for print */
    .col_qty { text-align: center }
    .col_price { text-align: right }
    .col_total { text-align: right }
}

/* Financial Footer */
.receipt_footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.receipt_notes {
    width: 50%;
    color: #000000; /* Force black for maximum contrast */
    font-size: 0.95em;
    line-height: 1.5;
}

.receipt_notes p {
    color: var(--base);
    margin: 5px 0;
}

.receipt_notes h4 {
    color: #000000;
    margin-bottom: 5px;
    margin-top: 0;
    font-weight: 700;
}

.receipt_totals {
    width: 40%;
}

.total_row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.total_row.discount {
    color: #198754;
}

.total_row.grand_total {
    font-size: 1.3em;
    font-weight: bold;
    border-bottom: none;
    border-top: 2px solid #333;
    margin-top: 10px;
    padding-top: 10px;
    color: #000;
}

.print_footer_meta {
    display: none; /* Only show on print */
}

@keyframes pop_in {
    0% { transform: scale(0); opacity: 0; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes fade_in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 2. Notes Visibility */
.receipt_notes {
    width: 50%;
    color: #000000;
    font-size: 0.95em;
    line-height: 1.5;
}

/* Force elements inside notes to be Pitch Black */
.receipt_notes h4,
.receipt_notes p {
    color: #000000 !important;
    font-weight: 600; /* Slightly bolder for readability */
    opacity: 1;       /* Ensure no transparency */
    text-shadow: none;
}

/* --- Print Media Query ---
   This handles the 8.5 x 11 formatting and hiding UI elements
*/
@media print {
    @page {
        size: letter;
        margin: 0.5in;
    }

    body {
        background-color: #fff;
        color: #000;
        display: block;
        /* Force background graphics/colors to print if needed */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Hide EVERYTHING by default */
    body * {
        visibility: hidden;
    }

    /* Hide the non-print UI */
    #merch_header,
    #merch_footer,
    .success_header_block,
    .no_print {
        display: none !important;
    }

    /* Target the receipt and make it visible */
    #printable_receipt,
    #printable_receipt * {
        visibility: visible;
    }

    /* Position the receipt */
    #printable_receipt {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
    }

/* --- Ensure Logo Prints Clearly & Small --- */
    .receipt_logo,
    .receipt_logo_svg { /* .receipt_logo_svg selector here */
        display: block !important;
        max-width: 120px !important; /* Allow it to be readable */
        height: auto !important;
        /* High contrast for logos on paper */
        filter: contrast(1.2);
    }

    /* Show the print timestamp footer */
    .print_footer_meta {
        display: block;
        margin-top: 50px;
        text-align: center;
        font-size: 0.8em;
        color: #999;
        visibility: visible;
    }
}

No problem at all! Keeping the addresses visible is a smart move for quick reference.

To make them look good in that narrower "embedded" space inside the card, I’ve adjusted the CSS to stack the addresses vertically (1 column) instead of squishing them side-by-side. I also removed the code that would have hidden them.

Here is the revised block for client/css/success.css.

client/css/success.css
Add or replace the embedded overrides block at the end of the file with this version:

CSS
/* --- Embedded Receipt Overrides (for Order History Modal) --- */
.merch_receipt.embedded {
    padding: 20px;
    border: none;
    box-shadow: none;
}

/* Hide the main header row in embedded mode */
.merch_receipt.embedded .grid_row.header {
    display: none;
}

/* Force the "Mobile" layout for items in embedded mode */
.merch_receipt.embedded .grid_row.item {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "desc desc desc"
        "qty price total";
    gap: 5px;
    padding: 15px 5px;
    align-items: end;
}

/* Ensure mobile labels are visible in embedded mode */
.merch_receipt.embedded .mobile_label {
    display: inline-block;
    margin-right: 3px;
    font-weight: normal;
    font-size: 0.85em;
    color: #888;
}

/* Adjust columns for the 3-column grid */
.merch_receipt.embedded .col_desc {
    grid-area: desc;
    margin-bottom: 5px;
    font-size: 1.1em;
}

.merch_receipt.embedded .col_sku {
    display: none; /* Hide SKU to save space */
}

.merch_receipt.embedded .col_qty {
    grid-area: qty;
    text-align: left;
    font-size: 0.9em;
    color: #666;
}

.merch_receipt.embedded .col_price {
    grid-area: price;
    text-align: center;
    font-size: 0.9em;
    color: #666;
}

.merch_receipt.embedded .col_total {
    grid-area: total;
    text-align: right;
    font-size: 1.1em;
    font-weight: bold;
}

/* Hide the top header/logo section in embedded mode to reduce noise */
.merch_receipt.embedded .receipt_header {
    display: none;
}

/* Adjust address section for tight spaces (Stacked Layout) */
.merch_receipt.embedded .receipt_addresses {
    display: grid;
    /* Stack addresses vertically so they aren't squashed */
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

/* Tweak address styling for the smaller context */
.merch_receipt.embedded .address_block h3 {
    font-size: 0.85em;
    color: #666;
    border-bottom: none;
    margin-bottom: 2px;
}

.merch_receipt.embedded .address_block p {
    font-size: 0.95em;
}

/* Simplify footer */
.merch_receipt.embedded .receipt_footer {
    margin-top: 10px;
}
.merch_receipt.embedded .receipt_notes {
    display: none; /* Hide thank you notes in list view */
}
.merch_receipt.embedded .receipt_totals {
    width: 100%; /* Full width for totals */
}

/* --- Embedded Receipt Overrides (for Modals/Admin) --- */
/* This class is added by JS when opening a receipt in a modal */
.merch_receipt.embedded {
    padding: 10px;
    border: none;
    box-shadow: none;
    font-size: 0.95em; /* Slightly smaller text */
}

/* Hide the main receipt header (logo/address) to save space */
.merch_receipt.embedded .receipt_header {
    display: none;
}

/* Adjust address grid for narrower modals */
.merch_receipt.embedded .receipt_addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.merch_receipt.embedded .address_block h3 {
    font-size: 0.85em;
    color: #666;
    border-bottom: none;
    margin-bottom: 5px;
}

/* Force the Items Grid to use the desktop layout but tighter */
.merch_receipt.embedded .grid_row {
    padding: 8px 5px;
}

/* Hide the "Thank you" notes in admin view */
.merch_receipt.embedded .receipt_notes {
    display: none;
}

/* Make totals expand to fill the footer area */
.merch_receipt.embedded .receipt_totals {
    width: 100%;
    margin-top: 10px;
}

/* On very small screens, stack addresses even in embedded mode */
@media (max-width: 600px) {
    .merch_receipt.embedded .receipt_addresses {
        grid-template-columns: 1fr;
    }
}